二维码生成独立页面

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

@@ -0,0 +1,72 @@
+<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.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>