| | |
| | | return pages; |
| | | }; |
| | | |
| | | const buildMainSpec = (item) => { |
| | | const value = |
| | | item?.specificationModel ?? |
| | | item?.productSpecModel ?? |
| | | item?.productName ?? |
| | | ""; |
| | | return String(value ?? "").trim(); |
| | | }; |
| | | |
| | | const buildDetailSpec = (item) => { |
| | | const value = |
| | | item?.specification ?? |
| | | item?.spec ?? |
| | | item?.sizeSpec ?? |
| | | item?.productSpec ?? |
| | | ""; |
| | | return String(value ?? "").trim(); |
| | | }; |
| | | |
| | | 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 model">${escapeHtml(buildMainSpec(item))}</div> |
| | | <div class="line spec">${escapeHtml(buildDetailSpec(item))}</div> |
| | | <div class="line address">${escapeHtml(item?.floorCode)}</div> |
| | | </div> |
| | | `; |
| | |
| | | throw new Error("标签数据为空,无法打印"); |
| | | } |
| | | |
| | | const pageSize = 18; // 3 列 * 6 行(50x40mm) |
| | | const pageSize = 6; // 2 列 * 3 行(50x40mm) |
| | | const pages = splitByPage(list, pageSize); |
| | | |
| | | const printWindow = window.open("", "_blank", "width=1200,height=900"); |
| | |
| | | color: #222; |
| | | } |
| | | .page { |
| | | width: 210mm; |
| | | min-height: 297mm; |
| | | width: 104mm; |
| | | min-height: 124mm; |
| | | margin: 0 auto; |
| | | padding: 8mm 7mm; |
| | | padding: 1mm; |
| | | box-sizing: border-box; |
| | | page-break-after: always; |
| | | } |
| | |
| | | } |
| | | .grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(3, 50mm); |
| | | grid-template-columns: repeat(2, 50mm); |
| | | grid-auto-rows: 40mm; |
| | | gap: 2mm; |
| | | gap: 1mm; |
| | | justify-content: start; |
| | | } |
| | | .label-card { |
| | | border: 1px solid #ddd; |
| | | border-radius: 3mm; |
| | | padding: 1.8mm 2.2mm; |
| | | border: 0; |
| | | border-radius: 0; |
| | | padding: 2.2mm 2.8mm; |
| | | width: 50mm; |
| | | height: 40mm; |
| | | box-sizing: border-box; |
| | | display: grid; |
| | | grid-template-rows: auto auto auto auto 1fr; |
| | | row-gap: 0.9mm; |
| | | row-gap: 1mm; |
| | | } |
| | | .line { |
| | | font-weight: 700; |
| | |
| | | margin: 0; |
| | | } |
| | | .customer { |
| | | font-size: 4.0mm; |
| | | font-size: 4.2mm; |
| | | } |
| | | .order { |
| | | font-size: 5.0mm; |
| | | font-size: 4.6mm; |
| | | letter-spacing: 0; |
| | | } |
| | | .product { |
| | | font-size: 4.5mm; |
| | | .model { |
| | | font-size: 4.3mm; |
| | | letter-spacing: 0; |
| | | } |
| | | .spec { |
| | | font-size: 5.0mm; |
| | | font-size: 4.9mm; |
| | | letter-spacing: 0; |
| | | } |
| | | .address { |
| | | font-size: 3.8mm; |
| | | font-size: 3.7mm; |
| | | } |
| | | @media print { |
| | | @page { |
| | | size: A4 portrait; |
| | | size: 104mm 124mm; |
| | | margin: 0; |
| | | } |
| | | .page { |
| | | width: 100%; |
| | | min-height: 0; |
| | | margin: 0; |
| | | padding: 8mm 7mm; |
| | | padding: 1mm; |
| | | } |
| | | } |
| | | </style> |