baoshi-swms-app-web/src/views/outbound/check/components/OrderListTable.vue

<template>
  <van-dialog v-model:show="orderTrueFalseBy"
              :title="title"
              close-on-click-overlay
              :show-cancel-button="false"
              :show-confirm-button="false">
    <div class="order-list">
      <div class="list-item">
        <div class="barcode">条码</div>
        <div class="barcode">商品名称</div>
        <div class="number" >数量</div>
      </div>
      <div v-for="(value,key) in orderMap">
        <div v-for="item in value" class="list-item van-hairline--bottom">
          <div class="barcode"> {{item.barcode}}</div>
          <div class="barcode"> {{item.skuName}}</div>
          <div class="number" > {{item.qtyOrdered}}</div>
        </div>
      </div>

    </div>
  </van-dialog>
</template>
<script setup>
import {ref } from 'vue'
const orderTrueFalseBy = ref(false)
const title=ref('取消单')
const orderMap=ref([])
const show=(type,order)=>{
  const typeMap={
    cancel:'取消单列表',
    freeze:'冻结单列表',
  }
  orderTrueFalseBy.value=true
  title.value=typeMap[type]
  orderMap.value=order
}
defineExpose({show})
</script>

<style scoped lang="sass">
.order-list
  width: 100%
  overflow-y: auto
  max-height: 60vh
  .list-item
    display: flex
    font-size: 14px
    line-height: 30px
    .barcode
      flex: 1
    .number
      width: 80px

</style>