klp-oa/klp-ui/src/views/wms/print/index.vue

<template>
  <div style="position: relative;">
    <el-select v-model="stockIoId" placeholder="请选择盘点单" style="position: absolute; top: 10px; left: 10px;">
      <el-option v-for="item in stockIoList" :key="item.stockIoId" :label="item.stockIoCode" :value="item.stockIoId" />
    </el-select>
    <div class="print-container" v-loading="loading">
      <BarCode :barcodes="drawerBarcodeData" />
    </div>
  </div>
</template>

<script>
import BarCode from '../stockIo/panels/barcode.vue';
import { listStockIo } from '@/api/wms/stockIo';
import { listStockIoDetail } from '@/api/wms/stockIoDetail';
import { mapState } from 'vuex';
import { ITEM_TYPE } from '../../../utils/enums';

export default {
  name: 'Print',
  components: {
    BarCode
  },
  data() {
    return {
      activeTab: 'layout',
      stockIoList: [],
      stockIoId: '',
      drawerBarcodeData: {},
      loading: false
    }
  },
  computed: {
    ...mapState({
      rawMaterialMap: state => state.category.rawMaterialMap,
      productMap: state => state.category.productMap
    })
  },
  watch: {
    stockIoId: {
      handler(newVal) {
        console.log(newVal, '数据侦听');
        this.loading = true;
        listStockIoDetail({ stockIoId: newVal }).then(res => {
          const details = res.rows || [];
          // 拼接条码内容 stockIoId_warehouseId_materialId_quantity
          const barcodes = details.filter(el => el.recordType == 0).map(item => {
            return {
              code: encodeURIComponent(`${item.itemType}__${item.itemId || ''}`),
              count: Math.min(item.quantity, 10),
              textTpl: item.itemType == ITEM_TYPE.PRODUCT ? 
              `${this.productMap[item.itemId]?.productName}[${this.productMap[item.itemId]?.productCode}](${item.quantity})` 
              : `${this.rawMaterialMap[item.itemId]?.rawMaterialName}[${this.rawMaterialMap[item.itemId]?.rawMaterialCode}](${item.quantity})`
            }
          });
          this.drawerBarcodeData = barcodes;
        }).finally(() => {
          this.loading = false;
        });
      }
    }
  },
  created() {
    listStockIo({ pageNum: 1, pageSize: 9999 }).then(res => {
      this.stockIoList = res.rows;
    });
  }
}
</script>
<style scoped lang="scss">

</style>