| | |
| | | // 创建一个新的打印窗口 |
| | | const printWindow = window.open('', '_blank', 'width=800,height=600'); |
| | | |
| | | // 获取打印预览内容 |
| | | const previewContent = document.querySelector('.print-preview-content').innerHTML; |
| | | |
| | | // 构建打印内容 |
| | | let printContent = ` |
| | | <!DOCTYPE html> |
| | |
| | | .total-value { |
| | | font-weight: bold; |
| | | } |
| | | .footer-section { |
| | | margin-top: auto; |
| | | } |
| | | .footer-row { |
| | | display: flex; |
| | | margin-bottom: 3px; |
| | | line-height: 22px; |
| | | justify-content: space-between; |
| | | } |
| | | .remarks-section { |
| | | margin: 10px 0; |
| | | |
| | | .remark-item { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | |
| | | .label { |
| | | font-weight: bold; |
| | | min-width: 30px; |
| | | font-size: 14px; |
| | | margin-right: 10px; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .value { |
| | | flex: 1; |
| | | font-size: 14px; |
| | | line-height: 1.4; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .sign-section { |
| | | margin-top: 15px; |
| | | |
| | | .sign-row { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 10px; |
| | | |
| | | .sign-item { |
| | | display: flex; |
| | | align-items: center; |
| | | width: 48%; |
| | | |
| | | .label { |
| | | font-weight: bold; |
| | | font-size: 14px; |
| | | margin-right: 10px; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .value { |
| | | flex: 1; |
| | | min-height: 30px; |
| | | border-bottom: 1px solid #000; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .footer-item { |
| | | display: flex; |
| | | margin-right: 20px; |
| | | } |
| | | .footer-item .label { |
| | | font-weight: bold; |
| | | min-width: 80px; |
| | | font-size: 12px; |
| | | } |
| | | .footer-item .value { |
| | | min-width: 80px; |
| | | font-size: 12px; |
| | | } |
| | | .address-item .address-value { |
| | | min-width: 200px; |
| | | } |
| | | @media print { |
| | | body { |
| | |
| | | .print-page { |
| | | margin: 0; |
| | | padding: 10mm; |
| | | /* padding-left: 20mm; */ |
| | | page-break-inside: avoid; |
| | | page-break-after: always; |
| | | } |
| | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | `; |
| | | |
| | | // 为每条数据生成打印页面 |
| | | printData.value.forEach((item, index) => { |
| | | printContent += ` |
| | | <div class="print-page"> |
| | | <div class="delivery-note"> |
| | | <div class="header"> |
| | | <div class="company-name">湖南鹏创电子有限公司</div> |
| | | <div class="document-title">送货单</div> |
| | | </div> |
| | | <div class="info-section"> |
| | | <div class="info-row"> |
| | | <div> |
| | | <span class="label">客户名称:</span> |
| | | <span class="value">${item.customerName || ''}</span> |
| | | </div> |
| | | <div> |
| | | <span class="label">送货地址:</span> |
| | | <span class="value">${item.companyAddress || ''}</span> |
| | | </div> |
| | | </div> |
| | | <div class="info-row"> |
| | | <div> |
| | | <span class="label">单据编号:</span> |
| | | <span class="value">${item.salesContractNo || ''}</span> |
| | | </div> |
| | | |
| | | <div> |
| | | <span class="label">送货日期:</span> |
| | | <span class="value">${formatDate(null)}</span> |
| | | </div> |
| | | |
| | | <div> |
| | | <span class="label">联系电话:</span> |
| | | <span class="value">${item.contactPhone || ''}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="info-section"> |
| | | <div class="info-row"> |
| | | <div> |
| | | <span class="label">联系方式:</span> |
| | | <span class="value"></span> |
| | | </div> |
| | | <div> |
| | | <span class="label">送货单位:</span> |
| | | <span class="value">湖南鹏创电子有限公司</span> |
| | | </div> |
| | | <div> |
| | | <span class="label">地址:</span> |
| | | <span class="value">湖南耒阳市创新创业园A1栋</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <span style="font-size: 16px;">货物详细信息:</span> |
| | | <div class="table-section"> |
| | | <table class="product-table"> |
| | | <thead> |
| | | <tr> |
| | | <th>序号</th> |
| | | <th>料号</th> |
| | | <th>品名/规格</th> |
| | | <th>单位</th> |
| | | <th>数量</th> |
| | | <th>订单号</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | ${item.products && item.products.length > 0 ? |
| | | item.products.map((product, index) => ` |
| | | <tr> |
| | | <td>${index + 1}</td> |
| | | <td>${product.materialCode || ''}</td> |
| | | <td>${product.productCategory || ''}/${product.specificationModel || ''}</td> |
| | | <td>${product.unit || ''}</td> |
| | | <td>${product.quantity || '0'}</td> |
| | | <td>${item.salesContractNo || ''}</td> |
| | | </tr> |
| | | `).join('') : |
| | | '<tr><td colspan="6" style="text-align: center; color: #999;">暂无产品数据</td></tr>' |
| | | } |
| | | </tbody> |
| | | <tfoot> |
| | | <tr> |
| | | <td></td> |
| | | <td class="label">合计</td> |
| | | <td class="total-value"></td> |
| | | <td class="total-value"></td> |
| | | <td class="total-value">${getTotalQuantity(item.products) || '0'}</td> |
| | | <td class="total-value"></td> |
| | | </tr> |
| | | </tfoot> |
| | | </table> |
| | | |
| | | <div style="width: 30px;"> |
| | | 共四联存根回单客户仓库 |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="remarks-section"> |
| | | <div class="remark-item"> |
| | | <span class="label">备注:</span> |
| | | <span class="value">贵公司在收货后请即刻核实数量及品质,若有异议,请在3日内提出,否则视为收妥。</span> |
| | | </div> |
| | | </div> |
| | | <div class="sign-section"> |
| | | <div class="sign-row"> |
| | | <div class="sign-item"> |
| | | <span class="label">送货单位(签章):</span> |
| | | </div> |
| | | <div class="sign-item"> |
| | | <span class="label">收货单位:</span> |
| | | </div> |
| | | </div> |
| | | <div class="sign-row"> |
| | | <div class="sign-item"> |
| | | <span class="label">送货人:</span> |
| | | </div> |
| | | <div class="sign-item"> |
| | | <span class="label">收货人:</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | `; |
| | | }); |
| | | |
| | | printContent += ` |
| | | ${previewContent} |
| | | </body> |
| | | </html> |
| | | `; |