const PRINT_TITLE = "销售标签";
|
|
const escapeHtml = (value) =>
|
String(value ?? "")
|
.replaceAll("&", "&")
|
.replaceAll("<", "<")
|
.replaceAll(">", ">")
|
.replaceAll('"', """)
|
.replaceAll("'", "'");
|
|
const splitByPage = (items, pageSize) => {
|
const list = Array.isArray(items) ? items : [];
|
if (list.length === 0) return [[]];
|
const pages = [];
|
for (let i = 0; i < list.length; i += pageSize) {
|
pages.push(list.slice(i, i + pageSize));
|
}
|
return pages;
|
};
|
|
const renderLabelCard = (item) => `
|
<div class="label-card">
|
<div class="line customer">${escapeHtml(item?.customerName)}</div>
|
<div class="line order">${escapeHtml(item?.salesContractNo)}</div>
|
<div class="line product">${escapeHtml(item?.productName)}</div>
|
<div class="line spec">${escapeHtml(item?.specification)}</div>
|
<div class="line address">${escapeHtml(item?.floorCode)}</div>
|
</div>
|
`;
|
|
export const printSalesLabel = (rawList = []) => {
|
const list = Array.isArray(rawList) ? rawList : [];
|
if (!list.length) {
|
throw new Error("标签数据为空，无法打印");
|
}
|
|
const pageSize = 18; // 3 列 * 6 行（50x40mm）
|
const pages = splitByPage(list, pageSize);
|
|
const printWindow = window.open("", "_blank", "width=1200,height=900");
|
if (!printWindow) {
|
throw new Error("浏览器拦截了弹窗，请允许弹窗后重试");
|
}
|
|
const html = `
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8" />
|
<title>${PRINT_TITLE}</title>
|
<style>
|
body {
|
margin: 0;
|
padding: 0;
|
font-family: "SimSun", serif;
|
color: #222;
|
}
|
.page {
|
width: 210mm;
|
min-height: 297mm;
|
margin: 0 auto;
|
padding: 8mm 7mm;
|
box-sizing: border-box;
|
page-break-after: always;
|
}
|
.page:last-child {
|
page-break-after: auto;
|
}
|
.grid {
|
display: grid;
|
grid-template-columns: repeat(3, 50mm);
|
grid-auto-rows: 40mm;
|
gap: 2mm;
|
justify-content: start;
|
}
|
.label-card {
|
border: 1px solid #ddd;
|
border-radius: 3mm;
|
padding: 1.8mm 2.2mm;
|
width: 50mm;
|
height: 40mm;
|
box-sizing: border-box;
|
display: grid;
|
grid-template-rows: auto auto auto auto 1fr;
|
row-gap: 0.9mm;
|
}
|
.line {
|
font-weight: 700;
|
line-height: 1.15;
|
word-break: break-all;
|
margin: 0;
|
}
|
.customer {
|
font-size: 4.0mm;
|
}
|
.order {
|
font-size: 5.0mm;
|
letter-spacing: 0;
|
}
|
.product {
|
font-size: 4.5mm;
|
}
|
.spec {
|
font-size: 5.0mm;
|
letter-spacing: 0;
|
}
|
.address {
|
font-size: 3.8mm;
|
}
|
@media print {
|
@page {
|
size: A4 portrait;
|
margin: 0;
|
}
|
.page {
|
width: 100%;
|
min-height: 0;
|
margin: 0;
|
padding: 8mm 7mm;
|
}
|
}
|
</style>
|
</head>
|
<body>
|
${pages
|
.map(
|
(pageList) => `
|
<div class="page">
|
<div class="grid">
|
${pageList.map((item) => renderLabelCard(item)).join("")}
|
</div>
|
</div>
|
`
|
)
|
.join("")}
|
</body>
|
</html>`;
|
|
printWindow.document.write(html);
|
printWindow.document.close();
|
printWindow.onload = () => {
|
setTimeout(() => {
|
printWindow.focus();
|
printWindow.print();
|
printWindow.close();
|
}, 300);
|
};
|
};
|
