From 96125dbc8466b873837d4661383214a01410b4d0 Mon Sep 17 00:00:00 2001
From: mengjiao <3338049200@qq,com>
Date: Mon, 11 Nov 2024 18:17:24 +0800
Subject: [PATCH] =?UTF-8?q?wmswms=E7=99=BD=E8=83=9A=E5=8E=9F=E6=9D=90?=
 =?UTF-8?q?=E6=96=99=E9=87=87=E8=B4=AD=E6=89=93=E5=8D=B0=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?,=E5=8A=A0=E6=9D=A1=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/wms/bpprocure/index.vue | 106 +++++++++++++++++++-----------
 1 file changed, 68 insertions(+), 38 deletions(-)
diff --git a/src/views/wms/bpprocure/index.vue b/src/views/wms/bpprocure/index.vue
index c5a399c..fc508ac 100644
--- a/src/views/wms/bpprocure/index.vue
+++ b/src/views/wms/bpprocure/index.vue
@@ -176,7 +176,7 @@
 
 <script>
 import { listBpprocure, getBpprocure, delBpprocure, addBpprocure, updateBpprocure } from "@/api/wms/bpprocure";
-
+import JsBarcode from 'jsbarcode';
 export default {
   name: "Bpprocure",
   dicts: ['bp_raw'],
@@ -315,6 +315,7 @@ export default {
         }
       });
     },
+
     handlePrint() {
       // 获取选中数据
       const selectedData = this.bpprocureList.filter(item => this.ids.includes(item.id));
@@ -326,7 +327,6 @@ export default {
       // 生成打印数据
       this.printData = {
         printDate: new Date().toLocaleString(),
-
         workTable: selectedData.map(item => ({
           procureCode: item.procureCode,
           materialCode: item.materialCode,
@@ -334,59 +334,89 @@ export default {
           unit: item.unit,
           supplyName: item.supplyName,
           planNumber: item.planNumber,
-          realityNumber: item.realityNumber|| '',
+          realityNumber: item.realityNumber || '',
         }))
       };
-// 打印内容
-      let printContent = `
-        <div style="text-align: center;">
-          <h3>采购单</h3>
 
+      // 生成条形码
+      const barcodeCanvas = document.createElement('canvas');
+      console.log(" this.printData.workTable[0].procureCode: " + this.printData.workTable[0].procureCode);
+
+      JsBarcode(barcodeCanvas, this.printData.workTable[0].procureCode, {
+        format: "CODE128",
+        height: 35,
+        width: 1.5,
+        displayValue: true,
+        // background: "#FFFFFF", // 背景颜色
+        // lineColor: "#000000"    // 条形码颜色
+      });
+
+      // 将条形码转换为 Data URL
+      const barcodeDataUrl = barcodeCanvas.toDataURL();
+      console.log(barcodeDataUrl); // 检查生成的 Data URL
+
+      // 打印内容
+      let printContent = `
+    <html>
+    <head>
+
+      <style>
+        body { font-family: Arial, sans-serif; }
+        table { width: 100%; border-collapse: collapse; }
+        th, td { border: 1px solid #000; text-align: center; padding: 8px; }
+      </style>
+    </head>
+    <body>
+      <div style="text-align: center;">
+        <h3>采购单</h3>
+        <div style="float: right; margin-top: -50px; width: 200px; height: 100px;">
+          <img src="${barcodeDataUrl}" alt="条形码" />
         </div>
-        <div style="display: flex; justify-content: space-between; padding: 10px;">
-          <div>打印日期: ${this.printData.printDate}</div>
-        </div>
-        <table border="1" style="width: 100%; border-collapse: collapse;margin: 0 auto;">
-          <thead>
-            <tr>
-              <th   style="text-align: center;">采购单</th>
-              <th   style="text-align: center;">物料编码</th>
-              <th   style="text-align: center;">物料描述</th>
-               <th  style="text-align: center;">供应商</th>
-              <th   style="text-align: center;">单位</th>
-              <th   style="text-align: center;">计划数量</th>
-              <th   style="text-align: center;">已入库数量</th>
-            </tr>
-          </thead>
-          <tbody>`;
+      </div>
+      <div style="display: flex; justify-content: space-between; padding: 10px;">
+        <div>打印日期: ${this.printData.printDate}</div>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>采购单</th>
+            <th>物料编码</th>
+            <th>物料描述</th>
+            <th>供应商</th>
+            <th>单位</th>
+            <th>计划数量</th>
+            <th>已入库数量</th>
+          </tr>
+        </thead>
+        <tbody>`;
 
       this.printData.workTable.forEach(item => {
         printContent += `
-          <tr>
-            <td style="text-align: center;">${item.procureCode}</td>
-            <td style="text-align: center;">${item.materialCode}</td>
-            <td style="text-align: center;">${item.materialDesc}</td>
-            <td style="text-align: center;">${item.supplyName}</td>
-            <td style="text-align: center;">${item.unit}</td>
-            <td style="text-align: center;">${item.planNumber}</td>
-            <td style="text-align: center;">${item.realityNumber}</td>
-          </tr>`;
+      <tr>
+        <td>${item.procureCode}</td>
+        <td>${item.materialCode}</td>
+        <td>${item.materialDesc}</td>
+        <td>${item.supplyName}</td>
+        <td>${item.unit}</td>
+        <td>${item.planNumber}</td>
+        <td>${item.realityNumber}</td>
+      </tr>`;
       });
 
       printContent += `
-          </tbody>
-        </table>
-
-      `;
+      </tbody>
+    </table>
+    </body>
+    </html>`;
 
       const printWindow = window.open('', '_blank');
-      printWindow.document.write('<html><head><title>打印</title></head><body>');
       printWindow.document.write(printContent);
-      printWindow.document.write('</body></html>');
       printWindow.document.close();
       printWindow.print();
       printWindow.close();
     },
+
+
     // 其他方法（handleQuery, resetQuery, etc.）
 
 
