From 082858032259e87517d7c89b35a3635f7e535874 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 09 四月 2026 10:33:46 +0800
Subject: [PATCH] 打印成品对账单功能敲定
---
src/views/salesManagement/salesLedger/index.vue | 844 ++++++++++++++++++++++++++++---------------------------
1 files changed, 432 insertions(+), 412 deletions(-)
diff --git a/src/views/salesManagement/salesLedger/index.vue b/src/views/salesManagement/salesLedger/index.vue
index 7d71c56..836fec1 100644
--- a/src/views/salesManagement/salesLedger/index.vue
+++ b/src/views/salesManagement/salesLedger/index.vue
@@ -66,12 +66,12 @@
<el-button type="danger"
plain
@click="handleDelete">鍒犻櫎</el-button>
- <el-button type="primary"
+ <!-- <el-button type="primary"
plain
- @click="handlePrint">鎵撳嵃</el-button>
+ @click="handlePrint">鎵撳嵃</el-button> -->
<el-button type="success"
plain
- @click="handlePrintLedger">鎴愬搧瀵硅处鍗�</el-button>
+ @click="handlePrintLedger">鎵撳嵃鎴愬搧瀵硅处鍗�</el-button>
</div>
</div>
<el-table :data="tableData"
@@ -2047,286 +2047,286 @@
// 鏋勫缓鎵撳嵃鍐呭
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);
@@ -2413,131 +2413,149 @@
// 鏋勫缓鎵撳嵃鍐呭
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>
- `;
+ <!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>
- `;
+ <tr>
+ <td>${index + 1}</td>
+ <td>${
+ product.salesContractNo ||
+ ""
+ }</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>
+
+ </tr>
+ `;
});
// 璁＄畻鍚堣
@@ -2551,23 +2569,25 @@
);
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>
- `;
+ <tr class="total-row">
+ <td colspan="6">鍚堣</td>
+ <td>${totalQuantity}</td>
+ <td>${formatNumber(
+ totalAmount
+ )}</td>
+ <td colspan="3"></td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="footer">
+ 鍏� ${
+ products.length
+ } 鏉¤褰�
+ </div>
+ </div>
+ </body>
+ </html>
+ `;
// 鍐欏叆鍐呭鍒版柊绐楀彛
printWindow.document.write(printContent);
--
Gitblit v1.9.3