| | |
| | | <el-button type="primary" |
| | | plain |
| | | @click="handlePrint">打印</el-button> |
| | | <el-button type="success" |
| | | plain |
| | | @click="handlePrintLedger">成品对账单</el-button> |
| | | </div> |
| | | </div> |
| | | <el-table :data="tableData" |
| | |
| | | |
| | | // 构建打印内容 |
| | | 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 { |
| | | 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> |
| | | `; |
| | | <!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 { |
| | | 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="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 class="info-row"> |
| | | <span class="label">单号:</span> |
| | | <span class="value">${ |
| | | item.salesContractNo || |
| | | "" |
| | | }</span> |
| | | </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> |
| | | <div> |
| | | <span class="label">客户名称:</span> |
| | | <span class="value">${ |
| | | item.customerName |
| | | }</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( |
| | | "" |
| | | ) |
| | | : '<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="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( |
| | | "" |
| | | ) |
| | | : '<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> |
| | | </div> |
| | | <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 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-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> |
| | | `; |
| | | }); |
| | | |
| | | printContent += ` |
| | | </body> |
| | | </html> |
| | | `; |
| | | </body> |
| | | </html> |
| | | `; |
| | | |
| | | // 写入内容到新窗口 |
| | | printWindow.document.write(printContent); |
| | |
| | | }, 500); |
| | | }; |
| | | }; |
| | | // 打印成品对账单 |
| | | const handlePrintLedger = async () => { |
| | | if (selectedRows.value.length === 0) { |
| | | proxy.$modal.msgWarning("请选择要打印的数据"); |
| | | return; |
| | | } |
| | | |
| | | // 显示加载状态 |
| | | proxy.$modal.loading("正在获取产品数据,请稍候..."); |
| | | |
| | | try { |
| | | // 收集所有产品数据 |
| | | const allProducts = []; |
| | | |
| | | for (const row of selectedRows.value) { |
| | | try { |
| | | // 调用productList接口查询产品数据 |
| | | const productRes = await productList({ |
| | | salesLedgerId: row.id, |
| | | type: 1, |
| | | }); |
| | | |
| | | // 将产品数据添加到总列表中 |
| | | if (productRes.data && productRes.data.length > 0) { |
| | | productRes.data.forEach(product => { |
| | | allProducts.push({ |
| | | productName: product.productCategory, |
| | | specificationModel: product.specificationModel, |
| | | unit: product.unit, |
| | | unitPrice: |
| | | product.currentCustomerType === "对私" |
| | | ? product.unitPrice |
| | | : product.taxInclusiveUnitPrice, |
| | | quantity: product.quantity, |
| | | totalPrice: |
| | | product.currentCustomerType === "对私" |
| | | ? product.totalPrice |
| | | : product.taxInclusiveTotalPrice, |
| | | deliveryDate: row.executionDate, |
| | | licensePlate: row.licensePlate || "", |
| | | customerName: row.customerName, |
| | | salesContractNo: row.salesContractNo, |
| | | }); |
| | | }); |
| | | } |
| | | } catch (error) { |
| | | console.error(`获取销售台账 ${row.id} 的产品数据失败:`, error); |
| | | } |
| | | } |
| | | |
| | | if (allProducts.length === 0) { |
| | | proxy.$modal.msgWarning("没有找到可打印的产品数据"); |
| | | proxy.$modal.closeLoading(); |
| | | return; |
| | | } |
| | | |
| | | // 执行打印 |
| | | executeLedgerPrint(allProducts); |
| | | } catch (error) { |
| | | console.error("获取产品数据失败:", error); |
| | | proxy.$modal.msgError("获取产品数据失败,请重试"); |
| | | } finally { |
| | | proxy.$modal.closeLoading(); |
| | | } |
| | | }; |
| | | // 执行成品对账单打印 |
| | | const executeLedgerPrint = products => { |
| | | // 创建一个新的打印窗口 |
| | | const printWindow = window.open(""); |
| | | |
| | | // 构建打印内容 |
| | | let printContent = ` |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <head> |
| | | <meta charset="UTF-8"> |
| | | <title>成品对账单</title> |
| | | <style> |
| | | body { |
| | | margin: 0; |
| | | padding: 20px; |
| | | font-family: "SimSun", serif; |
| | | background: white; |
| | | } |
| | | .ledger-page { |
| | | width: 100%; |
| | | margin: 0 auto; |
| | | background: white; |
| | | page-break-after: always; |
| | | } |
| | | .ledger-page:last-child { |
| | | page-break-after: avoid; |
| | | } |
| | | .header { |
| | | text-align: center; |
| | | margin-bottom: 20px; |
| | | border-bottom: 2px solid #000; |
| | | padding-bottom: 10px; |
| | | } |
| | | .title { |
| | | font-size: 24px; |
| | | font-weight: bold; |
| | | margin-bottom: 10px; |
| | | } |
| | | .print-info { |
| | | text-align: right; |
| | | font-size: 12px; |
| | | margin-bottom: 10px; |
| | | } |
| | | .ledger-table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | font-size: 12px; |
| | | margin-bottom: 20px; |
| | | } |
| | | .ledger-table th, |
| | | .ledger-table td { |
| | | border: 1px solid #000; |
| | | padding: 8px; |
| | | text-align: center; |
| | | } |
| | | .ledger-table th { |
| | | background-color: #f0f0f0; |
| | | font-weight: bold; |
| | | } |
| | | .ledger-table td { |
| | | text-align: center; |
| | | } |
| | | .ledger-table td:nth-child(4), |
| | | .ledger-table td:nth-child(6) { |
| | | text-align: right; |
| | | } |
| | | .total-row { |
| | | font-weight: bold; |
| | | background-color: #f9f9f9; |
| | | } |
| | | .footer { |
| | | text-align: center; |
| | | font-size: 12px; |
| | | margin-top: 20px; |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <div class="ledger-page"> |
| | | <div class="header"> |
| | | <div class="title">成品对账单</div> |
| | | <div class="print-info">打印日期:${formatDateTime( |
| | | new Date() |
| | | )}</div> |
| | | </div> |
| | | <table class="ledger-table"> |
| | | <thead> |
| | | <tr> |
| | | <th>序号</th> |
| | | <th>产品名称</th> |
| | | <th>规格型号</th> |
| | | <th>单位</th> |
| | | <th>单价</th> |
| | | <th>零售数量</th> |
| | | <th>零售金额</th> |
| | | <th>发货日期</th> |
| | | <th>发货车牌号</th> |
| | | <th>客户名称</th> |
| | | <th>单号</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | `; |
| | | |
| | | // 添加产品数据行 |
| | | products.forEach((product, index) => { |
| | | printContent += ` |
| | | <tr> |
| | | <td>${index + 1}</td> |
| | | <td>${product.productName || ""}</td> |
| | | <td>${product.specificationModel || ""}</td> |
| | | <td>${product.unit || ""}</td> |
| | | <td>${formatNumber(product.unitPrice)}</td> |
| | | <td>${product.quantity || 0}</td> |
| | | <td>${formatNumber(product.totalPrice)}</td> |
| | | <td>${formatDate(product.deliveryDate)}</td> |
| | | <td>${product.licensePlate || ""}</td> |
| | | <td>${product.customerName || ""}</td> |
| | | <td>${product.salesContractNo || ""}</td> |
| | | </tr> |
| | | `; |
| | | }); |
| | | |
| | | // 计算合计 |
| | | const totalQuantity = products.reduce( |
| | | (sum, p) => sum + (parseFloat(p.quantity) || 0), |
| | | 0 |
| | | ); |
| | | const totalAmount = products.reduce( |
| | | (sum, p) => sum + (parseFloat(p.totalPrice) || 0), |
| | | 0 |
| | | ); |
| | | |
| | | printContent += ` |
| | | <tr class="total-row"> |
| | | <td colspan="5">合计</td> |
| | | <td>${totalQuantity}</td> |
| | | <td>${formatNumber(totalAmount)}</td> |
| | | <td colspan="4"></td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | <div class="footer"> |
| | | 共 ${products.length} 条记录 |
| | | </div> |
| | | </div> |
| | | </body> |
| | | </html> |
| | | `; |
| | | |
| | | // 写入内容到新窗口 |
| | | printWindow.document.write(printContent); |
| | | printWindow.document.close(); |
| | | |
| | | // 等待内容加载完成后打印 |
| | | printWindow.onload = () => { |
| | | setTimeout(() => { |
| | | printWindow.print(); |
| | | printWindow.close(); |
| | | }, 500); |
| | | }; |
| | | }; |
| | | // 格式化数字 |
| | | const formatNumber = num => { |
| | | if (num === null || num === undefined || num === "") return "0.00"; |
| | | const number = parseFloat(num); |
| | | if (isNaN(number)) return "0.00"; |
| | | return number.toFixed(2); |
| | | }; |
| | | // 格式化日期 |
| | | const formatDate = dateString => { |
| | | if (!dateString) return getCurrentDate(); |