优化二维码的生成

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

@@ -1,8 +1,32 @@
 <template>
-  <div style="position: relative;">
+  <div style="position: relative; padding-top: 60px;">
-    <el-select v-model="stockIoId" placeholder="请选择盘点单" style="position: absolute; top: 10px; left: 10px;">
+    <div 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>
+      <el-radio-group 
+        v-model="currentStrategy" 
+        size="small"
+      >
+        <el-radio label="stockIo">盘点单</el-radio>
+        <el-radio label="order">订单</el-radio>
+        <el-radio label="purchase">采购计划</el-radio>
+      </el-radio-group>
+
+      <!-- 动态下拉选择框，根据策略切换数据源 -->
+      <el-select 
+        v-model="currentId" 
+        :placeholder="`请选择${strategyLabels[currentStrategy]}`" 
+        style="width: 200px;"
+      >
+        <el-option 
+          v-for="item in currentList" 
+          :key="item[keyField]" 
+          :label="item[labelField]" 
+          :value="item[keyField]" 
+        />
+      </el-select>
+    </div>
+    
+
     <div class="print-container" v-loading="loading">
       <BarCode :barcodes="drawerBarcodeData" />
     </div>
@@ -13,60 +37,190 @@
 import BarCode from '../stockIo/panels/barcode.vue';
 import { listStockIo } from '@/api/wms/stockIo';
 import { listStockIoDetail } from '@/api/wms/stockIoDetail';
+import { listOrder } from '@/api/wms/order';
+import { listOrderDetail } from '@/api/wms/orderDetail';
+import { listPurchasePlan } from '@/api/wms/purchasePlan';
+import { listPurchasePlanDetail } from '@/api/wms/purchasePlanDetail';
 import { mapState } from 'vuex';
 import { ITEM_TYPE } from '../../../utils/enums';
 
+// 策略配置 - 集中管理各策略的元数据
+const strategyMetadata = {
+  stockIo: {
+    label: '盘点单',
+    listKey: 'stockIoList',
+    keyField: 'stockIoId',
+    labelField: 'stockIoCode'
+  },
+  order: {
+    label: '订单',
+    listKey: 'orderList',
+    keyField: 'orderId',
+    labelField: 'orderCode'
+  },
+  purchase: {
+    label: '采购计划',
+    listKey: 'purchaseList',
+    keyField: 'planId',
+    labelField: 'planCode'
+  }
+};
+
+// 策略实现 - 封装各策略的具体业务逻辑
+const strategies = {
+  stockIo: {
+    // 加载列表数据
+    list: (vm) => {
+      if (vm.stockIoList.length) return;
+      vm.loading = true;
+      listStockIo({ pageNum: 1, pageSize: 9999 }).then(res => {
+        vm.stockIoList = res.rows || [];
+      }).finally(() => {
+        vm.loading = false;
+      });
+    },
+    // 获取条码数据
+    getBarcodeData: (vm) => {
+      if (!vm.currentId) return;
+      vm.loading = true;
+      listStockIoDetail({ stockIoId: vm.currentId }).then(res => {
+        const details = res.rows || [];
+        vm.drawerBarcodeData = details
+          .filter(el => el.recordType === 0)
+          .map(item => ({
+            code: encodeURIComponent(`${item.itemType}__${item.itemId || ''}`),
+            count: Math.min(item.quantity, 10),
+            textTpl: item.itemType === ITEM_TYPE.PRODUCT 
+              ? `${vm.productMap[item.itemId]?.productName}[${vm.productMap[item.itemId]?.productCode}](${item.quantity})`
+              : `${vm.rawMaterialMap[item.itemId]?.rawMaterialName}[${vm.rawMaterialMap[item.itemId]?.rawMaterialCode}](${item.quantity})`
+          }));
+      }).finally(() => {
+        vm.loading = false;
+      });
+    }
+  },
+  order: {
+    list: (vm) => {
+      if (vm.orderList.length) return;
+      vm.loading = true;
+      listOrder({ pageNum: 1, pageSize: 9999 }).then(res => {
+        vm.orderList = res.rows || [];
+      }).finally(() => {
+        vm.loading = false;
+      });
+    },
+    getBarcodeData: (vm) => {
+      if (!vm.currentId) return;
+      vm.loading = true;
+      listOrderDetail({ orderId: vm.currentId }).then(res => {
+        const details = res.rows || [];
+        vm.drawerBarcodeData = details.map(item => ({
+          code: encodeURIComponent(`product__${item.productId || ''}`),
+          count: Math.min(item.quantity, 10),
+          textTpl: `${vm.productMap[item.productId]?.productName}[${vm.productMap[item.productId]?.productCode}](${item.quantity})`
+        }));
+      }).finally(() => {
+        vm.loading = false;
+      });
+    }
+  },
+  purchase: {
+    list: (vm) => {
+      if (vm.purchaseList.length) return;
+      vm.loading = true;
+      listPurchasePlan({ pageNum: 1, pageSize: 9999 }).then(res => {
+        vm.purchaseList = res.rows || [];
+      }).finally(() => {
+        vm.loading = false;
+      });
+    },
+    getBarcodeData: (vm) => {
+      if (!vm.currentId) return;
+      vm.loading = true;
+      listPurchasePlanDetail({ planId: vm.currentId }).then(res => {
+        const details = res.rows || [];
+        vm.drawerBarcodeData = details.map(item => ({
+          code: encodeURIComponent(`raw_material__${item.rawMaterialId || ''}`),
+          count: Math.min(item.quantity, 10),
+          textTpl: `${vm.rawMaterialMap[item.rawMaterialId]?.rawMaterialName}[${vm.rawMaterialMap[item.rawMaterialId]?.rawMaterialCode}](${item.quantity})`
+        }));
+      }).finally(() => {
+        vm.loading = false;
+      });
+    }
+  }
+};
+
 export default {
   name: 'Print',
-  components: {
+  components: { BarCode },
-    BarCode
-  },
   data() {
     return {
-      activeTab: 'layout',
+      currentStrategy: 'stockIo', // 默认策略
-      stockIoList: [],
+      currentId: '', // 当前选中的ID
-      stockIoId: '',
+      stockIoList: [], // 盘点单列表
-      drawerBarcodeData: {},
+      orderList: [], // 订单列表
-      loading: false
+      purchaseList: [], // 采购计划列表
-    }
+      drawerBarcodeData: [], // 条码数据
+      loading: false // 加载状态
+    };
   },
   computed: {
     ...mapState({
       rawMaterialMap: state => state.category.rawMaterialMap,
       productMap: state => state.category.productMap
-    })
+    }),
-  },
+    // 策略标签映射
-  watch: {
+    strategyLabels() {
-    stockIoId: {
+      return Object.keys(strategyMetadata).reduce((obj, key) => {
-      handler(newVal) {
+        obj[key] = strategyMetadata[key].label;
-        console.log(newVal, '数据侦听');
+        return obj;
-        this.loading = true;
+      }, {});
-        listStockIoDetail({ stockIoId: newVal }).then(res => {
+    },
-          const details = res.rows || [];
+    // 当前策略对应的列表数据
-          // 拼接条码内容 stockIoId_warehouseId_materialId_quantity
+    currentList() {
-          const barcodes = details.filter(el => el.recordType == 0).map(item => {
+      return this[strategyMetadata[this.currentStrategy].listKey] || [];
-            return {
+    },
-              code: encodeURIComponent(`${item.itemType}__${item.itemId || ''}`),
+    // 当前策略的主键字段
-              count: Math.min(item.quantity, 10),
+    keyField() {
-              textTpl: item.itemType == ITEM_TYPE.PRODUCT ? 
+      return strategyMetadata[this.currentStrategy].keyField;
-              `${this.productMap[item.itemId]?.productName}[${this.productMap[item.itemId]?.productCode}](${item.quantity})` 
+    },
-              : `${this.rawMaterialMap[item.itemId]?.rawMaterialName}[${this.rawMaterialMap[item.itemId]?.rawMaterialCode}](${item.quantity})`
+    // 当前策略的显示字段
-            }
+    labelField() {
-          });
+      return strategyMetadata[this.currentStrategy].labelField;
-          this.drawerBarcodeData = barcodes;
-        }).finally(() => {
-          this.loading = false;
-        });
-      }
     }
   },
-  created() {
+  watch: {
-    listStockIo({ pageNum: 1, pageSize: 9999 }).then(res => {
+    // 策略切换时的处理
-      this.stockIoList = res.rows;
+    currentStrategy: {
-    });
+      handler(newVal) {
+        this.currentId = ''; // 清空选择
+        this.drawerBarcodeData = []; // 清空条码数据
+        // 加载对应策略的列表数据
+        if (strategies[newVal]?.list) {
+          strategies[newVal].list(this);
+        }
+      },
+      immediate: true // 初始化时执行
+    },
+    // 选中项变化时的处理
+    currentId(newVal) {
+      if (!newVal) {
+        this.drawerBarcodeData = [];
+        return;
+      }
+      // 获取对应策略的条码数据
+      if (strategies[this.currentStrategy]?.getBarcodeData) {
+        strategies[this.currentStrategy].getBarcodeData(this);
+      }
+    }
   }
-}
+};
 </script>
-<style scoped lang="scss">
 
-</style>
+<style scoped lang="scss">
+.print-container {
+  margin-top: 20px;
+  padding: 20px;
+}
+</style>

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

@@ -18,6 +18,7 @@
       <!-- 设置区 -->
       <div class="barcode-settings-panel">
         <el-form v-if="activeTab==='layout'" label-width="80px" size="small" label-position="top">
+          <!-- 排版设置内容保持不变 -->
           <el-form-item label="每行数量">
             <el-input-number v-model="perRow" :min="1" :max="10" />
           </el-form-item>
@@ -51,7 +52,17 @@
         <el-form v-else label-width="80px" size="small" label-position="top">
           <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>
+              <div style="margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
+                <span style="font-weight: bold; color: #666;">条码 {{ idx + 1 }}</span>
+                <el-button 
+                  type="text" 
+                  size="mini" 
+                  @click="saveAsImage(cfg.code, cfg.textTpl || cfg.code, idx)"
+                  icon="el-icon-download"
+                >
+                  另存为图片
+                </el-button>
+              </div>
               <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>
@@ -70,7 +81,6 @@
 </template>
 
 <script>
-// import JsBarcode from 'jsbarcode';
 import QRCode from 'qrcode';
 export default {
   name: 'BarcodeGenerator',
@@ -271,16 +281,74 @@ export default {
       if (!iframe) return;
       iframe.contentWindow.focus();
       iframe.contentWindow.print();
+    },
+    /**
+     * 保存二维码为图片
+     * @param {string} code 二维码内容
+     * @param {string} text 下方文字
+     * @param {number} index 索引，用于生成文件名
+     */
+    async saveAsImage(code, text, index) {
+      try {
+        // 创建临时canvas用于绘制二维码和文字
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // 计算总高度（二维码高度 + 文字区域高度）
+        const textHeight = 30; // 文字区域高度
+        canvas.width = this.barcodeWidth;
+        canvas.height = this.barcodeHeight + textHeight;
+        
+        // 绘制二维码
+        const qrCanvas = document.createElement('canvas');
+        qrCanvas.width = this.barcodeWidth;
+        qrCanvas.height = this.barcodeHeight;
+        await QRCode.toCanvas(qrCanvas, code, {
+          width: this.barcodeWidth,
+          height: this.barcodeHeight,
+          margin: 0
+        });
+        
+        // 将二维码绘制到主canvas
+        ctx.drawImage(qrCanvas, 0, 0);
+        
+        // 绘制文字
+        ctx.fillStyle = '#000';
+        ctx.font = '14px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        ctx.fillText(text, this.barcodeWidth / 2, this.barcodeHeight + 5);
+        
+        // 创建图片链接并下载
+        canvas.toBlob(blob => {
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          // 生成文件名（使用索引和内容摘要）
+          const fileName = `二维码_${index + 1}_${code.substring(0, 10)}.png`;
+          a.download = fileName;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+        });
+        
+        this.$message.success('图片保存成功');
+      } catch (error) {
+        console.error('保存图片失败:', error);
+        this.$message.error('保存图片失败，请重试');
+      }
     }
   },
   mounted() {
-    this.barcodeConfigs = this.barcodes.map(b => ({ code: b, count: 1, textTpl: b }));
+    this.barcodeConfigs = this.barcodes?.map(b => ({ code: b, count: 1, textTpl: b })) || [];
     this.renderPreviewIframe();
   }
 };
 </script>
 
 <style scoped>
+/* 样式保持不变 */
 .barcode-3col-layout {
   display: flex;
   flex-direction: row;
@@ -341,4 +409,4 @@ export default {
   border-radius: 4px;
   display: block;
 }
-</style>
+</style>