| | |
| | | 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 model">${escapeHtml(buildMainSpec(item))}</div> |
| | | <div class="line spec">${escapeHtml(buildDetailSpec(item))}</div> |
| | | <div class="line address">${escapeHtml(item?.floorCode)}</div> |
| | | </div> |
| | | `; |
| | | // 根据文本长度动态计算字体大小 |
| | | const getFontSize = (text, baseSize, maxWidthChars) => { |
| | | const len = String(text ?? "").length; |
| | | if (len <= maxWidthChars) return baseSize; |
| | | // 超长文本按比例缩小 |
| | | const scale = maxWidthChars / len; |
| | | const minSize = baseSize * 0.7; // 最小不低于基础大小的70% |
| | | const calculatedSize = baseSize * scale; |
| | | return Math.max(calculatedSize, minSize); |
| | | }; |
| | | |
| | | const renderLabelCard = (item) => { |
| | | const customer = escapeHtml(item?.customerName); |
| | | const order = escapeHtml(item?.salesContractNo); |
| | | const model = escapeHtml(buildMainSpec(item)); |
| | | const spec = escapeHtml(buildDetailSpec(item)); |
| | | const address = escapeHtml(item?.floorCode); |
| | | |
| | | // 动态计算字体大小(基于50mm宽度,约20-25个字符为正常显示范围) |
| | | const customerSize = getFontSize(customer, 4.2, 18); |
| | | const orderSize = getFontSize(order, 4.6, 16); |
| | | const modelSize = getFontSize(model, 4.0, 22); |
| | | const specSize = getFontSize(spec, 3.8, 28); |
| | | const addressSize = getFontSize(address, 3.5, 24); |
| | | |
| | | return ` |
| | | <div class="label-card"> |
| | | <div class="line customer" style="font-size: ${customerSize}mm;">${customer}</div> |
| | | <div class="line order" style="font-size: ${orderSize}mm;">${order}</div> |
| | | <div class="line model" style="font-size: ${modelSize}mm;">${model}</div> |
| | | <div class="line spec" style="font-size: ${specSize}mm;">${spec}</div> |
| | | <div class="line address" style="font-size: ${addressSize}mm;">${address}</div> |
| | | </div> |
| | | `; |
| | | }; |
| | | |
| | | export const printSalesLabel = (rawList = []) => { |
| | | const list = Array.isArray(rawList) ? rawList : []; |
| | |
| | | .label-card { |
| | | border: 0; |
| | | border-radius: 0; |
| | | padding: 2.2mm 2.8mm; |
| | | padding: 2.2mm 2.5mm; |
| | | width: 50mm; |
| | | height: 40mm; |
| | | box-sizing: border-box; |
| | | display: grid; |
| | | grid-template-rows: auto auto auto auto 1fr; |
| | | row-gap: 1mm; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: flex-start; |
| | | overflow: hidden; |
| | | } |
| | | .line { |
| | | font-weight: 700; |
| | | line-height: 1.15; |
| | | line-height: 1.2; |
| | | word-break: break-all; |
| | | margin: 0; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: clip; |
| | | } |
| | | .customer { |
| | | font-size: 4.2mm; |
| | | /* 基础 4.2mm,动态调整 */ |
| | | } |
| | | .order { |
| | | font-size: 4.6mm; |
| | | letter-spacing: 0; |
| | | /* 基础 4.6mm,动态调整 */ |
| | | } |
| | | .model { |
| | | font-size: 4.3mm; |
| | | letter-spacing: 0; |
| | | /* 基础 4.0mm,动态调整 */ |
| | | } |
| | | .spec { |
| | | font-size: 4.9mm; |
| | | letter-spacing: 0; |
| | | /* 基础 3.8mm,动态调整 */ |
| | | } |
| | | .address { |
| | | font-size: 3.7mm; |
| | | /* 基础 3.5mm,动态调整 */ |
| | | } |
| | | @media print { |
| | | @page { |