优化二维码的生成

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>