Web端创建产品成功弹窗: 打开二维码→直接打印标签(window.print+隐式窗口)

2026-08-06 10:37:08 +08:00
parent bcf1038f8a
commit bdc861cf8e
1 changed files with 35 additions and 3 deletions
--- a/frontend/src/pages/admin/CreateProductDialog.tsx
+++ b/frontend/src/pages/admin/CreateProductDialog.tsx
@ -284,6 +284,38 @@ export default function CreateProductDialog({ open, onClose, onCreated }: Props)
    };
  });

+  // ============================================================
+  // 打印标签
+  // ============================================================
+
+  function printCurrentQRCode() {
+    if (!createdSn) return;
+    const qrUrl = `/api/v1/products/qrcode/${createdSn}`;
+    const printWindow = window.open("", "_blank", "width=600,height=600");
+    if (!printWindow) return;
+    printWindow.document.write(`
+      <html>
+        <head>
+          <title>打印标签 - ${createdSn}</title>
+          <style>
+            @page { size: auto; margin: 0mm; }
+            body {
+              display: flex; flex-direction: column; align-items: center; justify-content: center;
+              margin: 0; padding: 20px; text-align: center; font-family: monospace;
+            }
+            img { width: 200px; height: 200px; object-fit: contain; }
+            .sn { font-size: 24px; font-weight: bold; margin-top: 10px; letter-spacing: 1px; }
+          </style>
+        </head>
+        <body>
+          <img src="${qrUrl}" onload="window.print(); window.close();" />
+          <div class="sn">${createdSn}</div>
+        </body>
+      </html>
+    `);
+    printWindow.document.close();
+  }
+
  // ============================================================
  // 渲染
  // ============================================================
@ -310,10 +342,10 @@ export default function CreateProductDialog({ open, onClose, onCreated }: Props)
          </p>
          <p className="mt-1 text-sm text-green-600">产品创建成功！</p>
          <Space className="mt-5">
-            <Button onClick={() => window.open(`/api/v1/products/qrcode/${createdSn}`, "_blank")}>
-              打开二维码
+            <Button type="primary" icon={<span>🖨️</span>} onClick={printCurrentQRCode}>
+              直接打印标签
            </Button>
-            <Button type="primary" onClick={() => setCreatedSn(null)}>
+            <Button onClick={() => setCreatedSn(null)}>
              继续创建
            </Button>
          </Space>