二维码生成独立页面

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

@@ -136,12 +136,12 @@
             icon="el-icon-document"
             @click="showDetail(scope.row)"
           >明细</el-button>
-          <el-button
+          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-printer"
             @click="handleShowBarcodeDrawer(scope.row)"
-          >打印条码</el-button>
+          >打印条码</el-button> -->
         </template>
       </el-table-column>
     </el-table>
@@ -206,7 +206,7 @@
       />
     </el-dialog>
     <!-- 条码打印抽屉 -->
-    <el-drawer
+    <!-- <el-drawer
       title="条码打印"
       :visible.sync="drawerBarcodeVisible"
       size="100%"
@@ -220,7 +220,7 @@
         :barcodeWidth="drawerBarcodeData.barcodeWidth"
         :barcodeHeight="drawerBarcodeData.barcodeHeight"
       />
-    </el-drawer>
+    </el-drawer> -->
   </div>
 </template>
 
@@ -297,13 +297,13 @@ export default {
       detailDialogVisible: false,
       detailStockIo: null,
       // 条码打印抽屉相关
-      drawerBarcodeVisible: false,
-      drawerBarcodeData: {
-        barcodes: [],
-        perRow: 3,
-        barcodeWidth: 180,
-        barcodeHeight: 60
-      },
+      // drawerBarcodeVisible: false,
+      // drawerBarcodeData: {
+      //   barcodes: [],
+      //   perRow: 3,
+      //   barcodeWidth: 180,
+      //   barcodeHeight: 60
+      // },
     };
   },
   created() {
@@ -438,22 +438,22 @@ export default {
       // 刷新列表
       this.getList();
     },
-    async handleShowBarcodeDrawer(row) {
-      // 获取明细列表
-      const res = await listStockIoDetail({ stockIoId: row.stockIoId });
-      const details = res.data || res.rows || [];
-      // 拼接条码内容 stockIoId_warehouseId_materialId_quantity
-      const barcodes = details.filter(el => el.recordType == 0).map(item => {
-        return encodeURIComponent(`${row.stockIoId}_${item.warehouseId || ''}_${item.itemId || ''}_${item.quantity || ''}`);
-      });
-      this.drawerBarcodeData = {
-        barcodes,
-        perRow: 3,
-        barcodeWidth: 180,
-        barcodeHeight: 60
-      };
-      this.drawerBarcodeVisible = true;
-    },
+    // async handleShowBarcodeDrawer(row) {
+    //   // 获取明细列表
+    //   const res = await listStockIoDetail({ stockIoId: row.stockIoId });
+    //   const details = res.data || res.rows || [];
+    //   // 拼接条码内容 stockIoId_warehouseId_materialId_quantity
+    //   const barcodes = details.filter(el => el.recordType == 0).map(item => {
+    //     return encodeURIComponent(`${row.stockIoId}_${item.warehouseId || ''}_${item.itemId || ''}_${item.quantity || ''}`);
+    //   });
+    //   // this.drawerBarcodeData = {
+    //   //   barcodes,
+    //   //   perRow: 3,
+    //   //   barcodeWidth: 180,
+    //   //   barcodeHeight: 60
+    //   // };
+    //   // this.drawerBarcodeVisible = true;
+    // },
     getIoTypeTagType(type) {
       if (type === 'in') return 'success';
       if (type === 'out') return 'primary';

klp-ui/src/views/wms/stockIo/panels/barcode.vue

@@ -12,7 +12,7 @@
       <div class="barcode-control-bar">
         <el-tabs v-model="activeTab" stretch>
           <el-tab-pane label="排版设置" name="layout" />
-          <el-tab-pane label="条码明细" name="detail" />
+          <el-tab-pane label="二维码明细" name="detail" />
         </el-tabs>
       </div>
       <!-- 设置区 -->
@@ -21,12 +21,9 @@
           <el-form-item label="每行数量">
             <el-input-number v-model="perRow" :min="1" :max="10" />
           </el-form-item>
-          <el-form-item label="条码宽度">
+          <el-form-item label="二维码尺寸">
             <el-input-number v-model="barcodeWidth" :min="60" :max="600" />
           </el-form-item>
-          <el-form-item label="条码高度">
-            <el-input-number v-model="barcodeHeight" :min="20" :max="200" />
-          </el-form-item>
           <el-form-item label="纸张尺寸">
             <el-select v-model="paperSize" placeholder="请选择纸张尺寸" style="width: 160px">
               <el-option label="A4 (210mm x 297mm)" value="A4" />
@@ -52,13 +49,13 @@
           </el-form-item>
         </el-form>
         <el-form v-else label-width="80px" size="small" label-position="top">
-          <el-form-item label="条码明细">
+          <el-form-item label="二维码明细">
             <div v-for="(cfg, idx) in barcodeConfigs" :key="idx" style="margin-bottom: 16px; border: 1px solid #eee; border-radius: 4px; padding: 12px 16px; background: #fafbfc;">
               <div style="margin-bottom: 8px; font-weight: bold; color: #666;">条码 {{ idx + 1 }}</div>
-              <el-form-item label="条码内容" label-width="70px" style="margin-bottom: 8px;">
-                <el-input type="textarea" v-model="cfg.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
+              <el-form-item label="二维码内容" label-width="70px" style="margin-bottom: 8px;">
+                <el-input disabled type="textarea" v-model="cfg.code" size="mini" :autosize="{ minRows: 1, maxRows: 3 }" placeholder="请输入条码内容" />
               </el-form-item>
-              <el-form-item label="数量" label-width="70px" style="margin-bottom: 8px;">
+              <el-form-item label="生成数量" label-width="70px" style="margin-bottom: 8px;">
                 <el-input-number v-model.number="cfg.count" :min="1" :max="100" size="mini" />
               </el-form-item>
               <el-form-item label="下方文字" label-width="70px" style="margin-bottom: 0;">
@@ -156,14 +153,7 @@ export default {
     barcodes: {
       handler(newVal) {
         // 初始化barcodeConfigs
-        this.barcodeConfigs = newVal.map((b, i) => {
-          const old = this.barcodeConfigs[i] || {};
-          return {
-            code: b,
-            count: old.count || 1,
-            textTpl: typeof old.textTpl === 'string' ? old.textTpl : b
-          };
-        });
+        this.barcodeConfigs = newVal;
         this.$nextTick(this.renderPreviewIframe);
       },
       immediate: true