| | |
|---|
| | | v-model="productForm.totalFreight" |
|---|
| | | style="width: 100%" |
|---|
| | | :precision="2" |
|---|
| | | disabled |
|---|
| | | placeholder="请输入" |
|---|
| | | clearable /> |
|---|
| | | </el-form-item> |
|---|
| | |
|---|
| | | |
|---|
| | | // 构建打印内容 |
|---|
| | | let printContent = ` |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <title>打印预览</title> |
|---|
| | | <style> |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | font-family: "SimSun", serif; |
|---|
| | | background: white; |
|---|
| | | } |
|---|
| | | .print-page { |
|---|
| | | width: 200mm; |
|---|
| | | height: 75mm; |
|---|
| | | padding: 10mm; |
|---|
| | | padding-left: 20mm; |
|---|
| | | background: white; |
|---|
| | | box-sizing: border-box; |
|---|
| | | page-break-after: always; |
|---|
| | | page-break-inside: avoid; |
|---|
| | | } |
|---|
| | | .print-page:last-child { |
|---|
| | | page-break-after: avoid; |
|---|
| | | } |
|---|
| | | .delivery-note { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 1.2; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | color: #000; |
|---|
| | | } |
|---|
| | | .header { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 8px; |
|---|
| | | } |
|---|
| | | .company-name { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: bold; |
|---|
| | | margin-bottom: 4px; |
|---|
| | | } |
|---|
| | | .document-title { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .info-section { |
|---|
| | | margin-bottom: 8px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .info-row { |
|---|
| | | line-height: 20px; |
|---|
| | | } |
|---|
| | | .label { |
|---|
| | | font-weight: bold; |
|---|
| | | width: 60px; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | .value { |
|---|
| | | margin-right: 20px; |
|---|
| | | min-width: 80px; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | .table-section { |
|---|
| | | margin-bottom: 40px; |
|---|
| | | // flex: 0.6; |
|---|
| | | } |
|---|
| | | .product-table { |
|---|
| | | width: 100%; |
|---|
| | | border-collapse: collapse; |
|---|
| | | border: 1px solid #000; |
|---|
| | | } |
|---|
| | | .product-table th, .product-table td { |
|---|
| | | border: 1px solid #000; |
|---|
| | | padding: 6px; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 1.4; |
|---|
| | | } |
|---|
| | | .product-table th { |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .total-value { |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .footer-section { |
|---|
| | | margin-top: auto; |
|---|
| | | } |
|---|
| | | .footer-row { |
|---|
| | | display: flex; |
|---|
| | | margin-bottom: 3px; |
|---|
| | | line-height: 22px; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | .footer-item { |
|---|
| | | display: flex; |
|---|
| | | margin-right: 20px; |
|---|
| | | } |
|---|
| | | .footer-item .label { |
|---|
| | | font-weight: bold; |
|---|
| | | width: 80px; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | .footer-item .value { |
|---|
| | | min-width: 80px; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | .address-item .address-value { |
|---|
| | | min-width: 200px; |
|---|
| | | } |
|---|
| | | @media print { |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <title>打印预览</title> |
|---|
| | | <style> |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | font-family: "SimSun", serif; |
|---|
| | | background: white; |
|---|
| | | } |
|---|
| | | .print-page { |
|---|
| | | margin: 0; |
|---|
| | | padding: 10mm; |
|---|
| | | /* padding-left: 20mm; */ |
|---|
| | | page-break-inside: avoid; |
|---|
| | | page-break-after: always; |
|---|
| | | } |
|---|
| | | .print-page { |
|---|
| | | width: 200mm; |
|---|
| | | height: 75mm; |
|---|
| | | padding: 10mm; |
|---|
| | | padding-left: 20mm; |
|---|
| | | background: white; |
|---|
| | | box-sizing: border-box; |
|---|
| | | page-break-after: always; |
|---|
| | | page-break-inside: avoid; |
|---|
| | | } |
|---|
| | | .print-page:last-child { |
|---|
| | | page-break-after: avoid; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | `; |
|---|
| | | .delivery-note { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 1.2; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | color: #000; |
|---|
| | | } |
|---|
| | | .header { |
|---|
| | | text-align: center; |
|---|
| | | margin-bottom: 8px; |
|---|
| | | } |
|---|
| | | .company-name { |
|---|
| | | font-size: 18px; |
|---|
| | | font-weight: bold; |
|---|
| | | margin-bottom: 4px; |
|---|
| | | } |
|---|
| | | .document-title { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .info-section { |
|---|
| | | margin-bottom: 8px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .info-row { |
|---|
| | | line-height: 20px; |
|---|
| | | } |
|---|
| | | .label { |
|---|
| | | font-weight: bold; |
|---|
| | | width: 60px; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | .value { |
|---|
| | | margin-right: 20px; |
|---|
| | | min-width: 80px; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | .table-section { |
|---|
| | | margin-bottom: 40px; |
|---|
| | | // flex: 0.6; |
|---|
| | | } |
|---|
| | | .product-table { |
|---|
| | | width: 100%; |
|---|
| | | border-collapse: collapse; |
|---|
| | | border: 1px solid #000; |
|---|
| | | } |
|---|
| | | .product-table th, .product-table td { |
|---|
| | | border: 1px solid #000; |
|---|
| | | padding: 6px; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 1.4; |
|---|
| | | } |
|---|
| | | .product-table th { |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .total-value { |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .footer-section { |
|---|
| | | margin-top: auto; |
|---|
| | | } |
|---|
| | | .footer-row { |
|---|
| | | display: flex; |
|---|
| | | margin-bottom: 3px; |
|---|
| | | line-height: 22px; |
|---|
| | | justify-content: space-between; |
|---|
| | | } |
|---|
| | | .footer-item { |
|---|
| | | display: flex; |
|---|
| | | margin-right: 20px; |
|---|
| | | } |
|---|
| | | .footer-item .label { |
|---|
| | | font-weight: bold; |
|---|
| | | width: 80px; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | .footer-item .value { |
|---|
| | | min-width: 80px; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | .address-item .address-value { |
|---|
| | | min-width: 200px; |
|---|
| | | } |
|---|
| | | @media print { |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | .print-page { |
|---|
| | | margin: 0; |
|---|
| | | padding: 10mm; |
|---|
| | | /* padding-left: 20mm; */ |
|---|
| | | page-break-inside: avoid; |
|---|
| | | page-break-after: always; |
|---|
| | | } |
|---|
| | | .print-page:last-child { |
|---|
| | | page-break-after: avoid; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | `; |
|---|
| | | |
|---|
| | | // 为每条数据生成打印页面 |
|---|
| | | printData.value.forEach((item, index) => { |
|---|
| | | printContent += ` |
|---|
| | | <div class="print-page"> |
|---|
| | | <div class="delivery-note"> |
|---|
| | | <div class="header"> |
|---|
| | | <div class="document-title">零售发货单</div> |
|---|
| | | </div> |
|---|
| | | <div class="print-page"> |
|---|
| | | <div class="delivery-note"> |
|---|
| | | <div class="header"> |
|---|
| | | <div class="document-title">零售发货单</div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="info-section"> |
|---|
| | | <div class="info-row"> |
|---|
| | | <div> |
|---|
| | | <span class="label">发货日期：</span> |
|---|
| | | <span class="value">${formatDate( |
|---|
| | | item.createTime |
|---|
| | | )}</span> |
|---|
| | | <div class="info-section"> |
|---|
| | | <div class="info-row"> |
|---|
| | | <div> |
|---|
| | | <span class="label">发货日期：</span> |
|---|
| | | <span class="value">${formatDate( |
|---|
| | | item.createTime |
|---|
| | | )}</span> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <span class="label">客户名称：</span> |
|---|
| | | <span class="value">${ |
|---|
| | | item.customerName |
|---|
| | | }</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div> |
|---|
| | | <span class="label">客户名称：</span> |
|---|
| | | <div class="info-row"> |
|---|
| | | <span class="label">单号：</span> |
|---|
| | | <span class="value">${ |
|---|
| | | item.customerName |
|---|
| | | item.salesContractNo || |
|---|
| | | "" |
|---|
| | | }</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="info-row"> |
|---|
| | | <span class="label">单号：</span> |
|---|
| | | <span class="value">${ |
|---|
| | | item.salesContractNo || |
|---|
| | | "" |
|---|
| | | }</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <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 => ` |
|---|
| | | <tr> |
|---|
| | | <td>${ |
|---|
| | | product.productCategory || |
|---|
| | | "" |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.specificationModel || |
|---|
| | | "" |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.unit || |
|---|
| | | "" |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.taxInclusiveUnitPrice || |
|---|
| | | "0" |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.quantity || |
|---|
| | | "0" |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.taxInclusiveTotalPrice || |
|---|
| | | "0" |
|---|
| | | }</td> |
|---|
| | | </tr> |
|---|
| | | ` |
|---|
| | | ) |
|---|
| | | .join( |
|---|
| | | <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 => ` |
|---|
| | | <tr> |
|---|
| | | <td>${ |
|---|
| | | product.productCategory || |
|---|
| | | "" |
|---|
| | | ) |
|---|
| | | : '<tr><td colspan="6" style="text-align: center; color: #999;">暂无产品数据</td></tr>' |
|---|
| | | } |
|---|
| | | </tbody> |
|---|
| | | <tfoot> |
|---|
| | | <tr> |
|---|
| | | <td class="label">合计</td> |
|---|
| | | <td class="total-value"></td> |
|---|
| | | <td class="total-value"></td> |
|---|
| | | <td class="total-value"></td> |
|---|
| | | <td class="total-value">${getTotalQuantityForPrint( |
|---|
| | | item.products |
|---|
| | | )}</td> |
|---|
| | | <td class="total-value">${getTotalAmountForPrint( |
|---|
| | | item.products |
|---|
| | | )}</td> |
|---|
| | | </tr> |
|---|
| | | </tfoot> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="footer-section"> |
|---|
| | | <div class="footer-row"> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span class="label">收货电话：</span> |
|---|
| | | <span class="value"></span> |
|---|
| | | </div> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span class="label">收货人：</span> |
|---|
| | | <span class="value"></span> |
|---|
| | | </div> |
|---|
| | | <div class="footer-item address-item"> |
|---|
| | | <span class="label">收货地址：</span> |
|---|
| | | <span class="value address-value"></span> |
|---|
| | | </div> |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.specificationModel || |
|---|
| | | "" |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.unit || |
|---|
| | | "" |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.taxInclusiveUnitPrice || |
|---|
| | | "0" |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.quantity || |
|---|
| | | "0" |
|---|
| | | }</td> |
|---|
| | | <td>${ |
|---|
| | | product.taxInclusiveTotalPrice || |
|---|
| | | "0" |
|---|
| | | }</td> |
|---|
| | | </tr> |
|---|
| | | ` |
|---|
| | | ) |
|---|
| | | .join( |
|---|
| | | "" |
|---|
| | | ) |
|---|
| | | : '<tr><td colspan="6" style="text-align: center; color: #999;">暂无产品数据</td></tr>' |
|---|
| | | } |
|---|
| | | </tbody> |
|---|
| | | <tfoot> |
|---|
| | | <tr> |
|---|
| | | <td class="label">合计</td> |
|---|
| | | <td class="total-value"></td> |
|---|
| | | <td class="total-value"></td> |
|---|
| | | <td class="total-value"></td> |
|---|
| | | <td class="total-value">${getTotalQuantityForPrint( |
|---|
| | | item.products |
|---|
| | | )}</td> |
|---|
| | | <td class="total-value">${getTotalAmountForPrint( |
|---|
| | | item.products |
|---|
| | | )}</td> |
|---|
| | | </tr> |
|---|
| | | </tfoot> |
|---|
| | | </table> |
|---|
| | | </div> |
|---|
| | | <div class="footer-row"> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span class="label">操作员：</span> |
|---|
| | | <span class="value">${ |
|---|
| | | userStore.nickName || |
|---|
| | | "撕开前" |
|---|
| | | }</span> |
|---|
| | | |
|---|
| | | <div class="footer-section"> |
|---|
| | | <div class="footer-row"> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span class="label">收货电话：</span> |
|---|
| | | <span class="value"></span> |
|---|
| | | </div> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span class="label">收货人：</span> |
|---|
| | | <span class="value"></span> |
|---|
| | | </div> |
|---|
| | | <div class="footer-item address-item"> |
|---|
| | | <span class="label">收货地址：</span> |
|---|
| | | <span class="value address-value"></span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span class="label">打印日期：</span> |
|---|
| | | <span class="value">${formatDateTime( |
|---|
| | | new Date() |
|---|
| | | )}</span> |
|---|
| | | <div class="footer-row"> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span class="label">操作员：</span> |
|---|
| | | <span class="value">${ |
|---|
| | | userStore.nickName || |
|---|
| | | "撕开前" |
|---|
| | | }</span> |
|---|
| | | </div> |
|---|
| | | <div class="footer-item"> |
|---|
| | | <span class="label">打印日期：</span> |
|---|
| | | <span class="value">${formatDateTime( |
|---|
| | | new Date() |
|---|
| | | )}</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | `; |
|---|
| | | `; |
|---|
| | | }); |
|---|
| | | |
|---|
| | | printContent += ` |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | | `; |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | | `; |
|---|
| | | |
|---|
| | | // 写入内容到新窗口 |
|---|
| | | printWindow.document.write(printContent); |
|---|
