duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
duxingchen
2026-08-06 10:37:08 +08:00
parent bcf1038f8a
commit bdc861cf8e
1 changed files with 35 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/pages/admin/CreateProductDialog.tsx
View File

@ -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>
<p className="mt-1 text-sm text-green-600">产品创建成功！</p> <p className="mt-1 text-sm text-green-600">产品创建成功！</p>
<Space className="mt-5"> <Space className="mt-5">
<Button onClick={() => window.open(`/api/v1/products/qrcode/${createdSn}`, "_blank")}> <Button type="primary" icon={<span>🖨️</span>} onClick={printCurrentQRCode}>
打开二维码 直接打印标签
</Button> </Button>
<Button type="primary" onClick={() => setCreatedSn(null)}> <Button onClick={() => setCreatedSn(null)}>
继续创建 继续创建
</Button> </Button>
</Space> </Space>