From 59b12b835c99b1318557e149c8913c16718664fb Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期五, 09 十月 2026 16:00:16 +0800
Subject: [PATCH] refactor(mes): 重构二维码标签生成逻辑

---
 src/views/mes/pro/components/qr-trace-modal.vue |  121 +++++++++-------------------------------
 1 files changed, 27 insertions(+), 94 deletions(-)

diff --git a/src/views/mes/pro/components/qr-trace-modal.vue b/src/views/mes/pro/components/qr-trace-modal.vue
index 6d75a88..24f892e 100644
--- a/src/views/mes/pro/components/qr-trace-modal.vue
+++ b/src/views/mes/pro/components/qr-trace-modal.vue
@@ -131,58 +131,6 @@
     }
   }
 
-  /** 褰撳墠杩芥函鏁版嵁鐨勫叧閿俊鎭紙涓嬭浇/鎵撳嵃鍥剧墖鍙犲姞鏂囧瓧鐢級 */
-  function buildLabelText(): { label: string; value: string }[] {
-    if (traceType.value === "bag" && bagTrace.value) {
-      const d = bagTrace.value;
-      return [
-        { label: "琚嬬爜", value: d.code || "" },
-        { label: "琚嬪簭鍙�", value: d.bagNo ? String(d.bagNo) : "" },
-        { label: "鎵规鍙�", value: d.batchCode || "" },
-        { label: "鍝佺", value: d.itemName || "" },
-        { label: "瑙勬牸", value: d.itemSpecification || "" },
-        {
-          label: "浜х嚎",
-          value: [d.lineCode, d.lineName].filter(Boolean).join(" / "),
-        },
-        { label: "鐢熶骇鏃ユ湡", value: d.produceDate || "" },
-        { label: "璐ｄ换浜�", value: d.ownerUserName || "" },
-      ];
-    }
-    if (traceType.value === "pallet" && palletTrace.value) {
-      const d = palletTrace.value;
-      return [
-        { label: "鎵樼洏鐮�", value: d.code || d.tempCode || "" },
-        { label: "鎵樼洏搴忓彿", value: d.palletNo ? String(d.palletNo) : "" },
-        { label: "鎵规鍙�", value: d.batchCode || "" },
-        { label: "鍝佺", value: d.itemName || "" },
-        { label: "瑙勬牸", value: d.itemSpecification || "" },
-        {
-          label: "浜х嚎",
-          value: [d.lineCode, d.lineName].filter(Boolean).join(" / "),
-        },
-        { label: "鐢熶骇鏃ユ湡", value: d.produceDate || "" },
-        { label: "璐ｄ换浜�", value: d.ownerUserName || "" },
-      ];
-    }
-    if (batchTrace.value) {
-      const d = batchTrace.value;
-      return [
-        { label: "鎵规鍙�", value: d.code || d.tempCode || "" },
-        { label: "鍝佺", value: d.itemName || "" },
-        { label: "瑙勬牸", value: d.itemSpecification || "" },
-        {
-          label: "浜х嚎",
-          value: [d.lineCode, d.lineName].filter(Boolean).join(" / "),
-        },
-        { label: "鐢熶骇鏃ユ湡", value: d.produceDate || "" },
-        { label: "璁″垝鏁伴噺", value: d.planQuantity ? String(d.planQuantity) : "" },
-        { label: "璐ｄ换浜�", value: d.ownerUserName || "" },
-      ];
-    }
-    return [];
-  }
-
   function escapeHtml(value: string) {
     return value
       .replaceAll("&", "&amp;")
@@ -190,14 +138,14 @@
       .replaceAll(">", "&gt;");
   }
 
-  /** 涓嬭浇浜岀淮鐮� PNG锛堜簩缁寸爜 + 鍏抽敭淇℃伅鏂囧瓧鍚堟垚锛� */
+  /** 涓嬭浇浜岀淮鐮� PNG锛堜簩缁寸爜鍦ㄤ笂锛岀爜鍊煎湪涓嬶級 */
   function handleDownload() {
     const base64 = barcodeRef.value?.getImageBase64();
     if (!base64) {
       message.warning("浜岀淮鐮佺敓鎴愬け璐ワ紝鏃犳硶涓嬭浇");
       return;
     }
-    const items = buildLabelText();
+    const code = currentCode.value || "";
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     if (!ctx) {
@@ -206,45 +154,23 @@
     }
     const img = new Image();
     img.onload = () => {
-      const padding = 20;
-      const infoX = img.width + padding * 2;
-      const infoWidth = 320;
-      canvas.width = infoX + infoWidth + padding;
-      canvas.height = Math.max(img.height + padding * 2, 300);
+      const padding = 16;
+      const gap = 4;
+      const textHeight = 28;
+      canvas.width = img.width + padding * 2;
+      canvas.height = img.height + padding * 2 + gap + textHeight;
       ctx.fillStyle = "#ffffff";
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       ctx.drawImage(img, padding, padding);
       ctx.fillStyle = "#000000";
-      let y = padding + 10;
-      const lineHeight = 26;
-      items.forEach((item) => {
-        ctx.font = "bold 14px 'Microsoft YaHei', Arial, sans-serif";
-        ctx.fillText(`${item.label}:`, infoX, y);
-        y += 18;
-        ctx.font = "14px 'Microsoft YaHei', Arial, sans-serif";
-        const text = item.value || "-";
-        const maxWidth = infoWidth - 10;
-        if (ctx.measureText(text).width > maxWidth) {
-          let currentText = text;
-          while (currentText.length > 0) {
-            let line = "";
-            for (let i = 0; i < currentText.length; i++) {
-              const testLine = line + currentText[i];
-              if (ctx.measureText(testLine).width > maxWidth) {
-                break;
-              }
-              line = testLine;
-            }
-            ctx.fillText(line, infoX + 5, y);
-            y += 16;
-            currentText = currentText.slice(line.length);
-          }
-          y += 6;
-        } else {
-          ctx.fillText(text, infoX + 5, y);
-          y += lineHeight;
-        }
-      });
+      let fontSize = 20;
+      ctx.font = `bold ${fontSize}px Arial, sans-serif`;
+      while (ctx.measureText(code).width > img.width && fontSize > 1) {
+        ctx.font = `bold ${--fontSize}px Arial, sans-serif`;
+      }
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(code, canvas.width / 2, padding + img.height + gap + textHeight / 2);
       const link = document.createElement("a");
       link.href = canvas.toDataURL("image/png");
       link.download = `${currentCode.value || "qr"}_${Date.now()}.png`;
@@ -261,7 +187,7 @@
       message.warning("浜岀淮鐮佺敓鎴愬け璐ワ紝鏃犳硶鎵撳嵃");
       return;
     }
-    const items = buildLabelText();
+    const code = currentCode.value || "";
     const printWindow = window.open("", "_blank");
     if (!printWindow) {
       message.error("鏃犳硶鎵撳紑鎵撳嵃绐楀彛锛岃妫�鏌ユ祻瑙堝櫒璁剧疆");
@@ -269,12 +195,19 @@
     }
     printWindow.document.write(`<!DOCTYPE html>
 <html><head><meta charset="UTF-8"><title>鎵撳嵃浜岀淮鐮�</title>
-<style>*{margin:0;padding:0}body{font-family:'Microsoft YaHei',Arial,sans-serif;padding:20px}.print-container{text-align:center}.qr-img{max-width:100%;margin:20px 0}.info{margin-top:20px;text-align:left;font-size:13px}.info p{margin:4px 0}@media print{body{padding:0}.print-container{padding:20px}}</style>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:Arial,sans-serif;background:#fff;color:#000}
+.print-container{width:40mm;padding:2mm;break-inside:avoid;text-align:center}
+.qr-img{display:block;width:36mm;height:36mm;object-fit:contain}
+.code{display:block;width:36mm;height:5mm;margin-top:0.5mm}
+@page{margin:0}
+</style>
 </head><body><div class="print-container">
 <img src="${base64}" class="qr-img" alt="浜岀淮鐮�" />
-<div class="info">
-${items.map((item) => `<p><strong>${escapeHtml(item.label)}:</strong> ${escapeHtml(item.value || "-")}</p>`).join("")}
-</div></div></body></html>`);
+<svg class="code" viewBox="0 0 200 28" xmlns="http://www.w3.org/2000/svg" aria-label="鐮佸��">
+<text x="100" y="20" text-anchor="middle" font-family="Arial,sans-serif" font-size="20" font-weight="700"${code.length > 16 ? ' textLength="196" lengthAdjust="spacingAndGlyphs"' : ''}>${escapeHtml(code)}</text>
+</svg></div></body></html>`);
     printWindow.document.close();
     printWindow.addEventListener("load", () => {
       setTimeout(() => printWindow.print(), 500);

--
Gitblit v1.9.3