From 5bea8c0f7b92afa947b4de6ecf4cb94741afedb5 Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期五, 17 四月 2026 15:27:54 +0800
Subject: [PATCH] 打印样式重构
---
src/views/salesManagement/salesLedger/index.vue | 169 +++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 124 insertions(+), 45 deletions(-)
diff --git a/src/views/salesManagement/salesLedger/index.vue b/src/views/salesManagement/salesLedger/index.vue
index fdea878..7457117 100644
--- a/src/views/salesManagement/salesLedger/index.vue
+++ b/src/views/salesManagement/salesLedger/index.vue
@@ -453,7 +453,7 @@
<div class="delivery-note">
<div class="header">
<div class="company-name">婀栧崡楣忓垱鐢靛瓙鏈夐檺鍏徃</div>
- <div class="document-title">閫佽揣鍗�</div>
+ <div class="document-title">閫� 璐� 鍗�</div>
</div>
<div class="info-section">
@@ -466,6 +466,10 @@
<span class="label">閫佽揣鍦板潃锛�</span>
<span class="value">{{ item.companyAddress }}</span>
</div>
+ <div>
+ <span class="label">鑱旂郴鏂瑰紡锛�</span>
+ <span class="value">{{ item.contactPerson }} {{ item.contactPhone }}</span>
+ </div>
</div>
<div class="info-row">
<div>
@@ -480,17 +484,14 @@
<div>
<span class="label">鑱旂郴鐢佃瘽锛�</span>
- <span class="value">{{ item.contactPhone }}</span>
+ <span class="value">{{ item.companyPhone }}</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>
@@ -502,47 +503,56 @@
</div>
</div>
- <span style="font-size: 16px;">璐х墿璇︾粏淇℃伅锛�</span>
+ <span style="font-size: 14px; margin-top: 5px;">璐х墿璇︾粏淇℃伅锛�</span>
<div class="table-section">
<table class="product-table">
<thead>
<tr>
<th>搴忓彿</th>
- <th>鏂欏彿</th>
- <th>鍝佸悕/瑙勬牸</th>
+ <th>鐗╂枡鍚嶇О</th>
+ <th>浜у搧鍚嶇О</th>
+ <th>浜у搧瑙勬牸</th>
<th>鍗曚綅</th>
<th>鏁伴噺</th>
- <th>璁㈠崟鍙�</th>
+ <th>璁㈠崟缂栧彿</th>
</tr>
</thead>
<tbody>
<tr v-for="(product, index) in item.products" :key="product.id">
<td>{{ index + 1 }}</td>
<td>{{ product.materialCode || '' }}</td>
- <td>{{ `${product.productCategory || ''}/${product.specificationModel || ''}`
- }}</td>
+ <td>{{ product.productCategory || '' }}</td>
+ <td>{{ product.specificationModel || '' }}</td>
<td>{{ product.unit || '' }}</td>
<td>{{ product.quantity || '0' }}</td>
<td>{{ item.salesContractNo || '' }}</td>
</tr>
- <tr v-if="!item.products || item.products.length === 0">
- <td colspan="6" style="text-align: center; color: #999;">鏆傛棤浜у搧鏁版嵁</td>
+ <!-- 娣诲姞绌虹櫧琛屼互纭繚鑷冲皯5琛� -->
+ <tr v-for="n in Math.max(0, 5 - (item.products ? item.products.length : 0))" :key="'empty-' + n" style="height: 25px;">
+ <td style="height: 25px;"></td>
+ <td style="height: 25px;"></td>
+ <td style="height: 25px;"></td>
+ <td style="height: 25px;"></td>
+ <td style="height: 25px;"></td>
+ <td style="height: 25px;"></td>
+ <td style="height: 25px;"></td>
</tr>
</tbody>
<tfoot>
<tr>
- <td class="label"></td>
- <td class="label">鍚堣</td>
- <td class="total-value"></td>
- <td class="total-value"></td>
+ <td class="label" colspan="5" style="text-align: right;">鍚堣</td>
<td class="total-value">{{ getTotalQuantity(item.products) }}</td>
<td class="total-value"></td>
</tr>
</tfoot>
</table>
- <div style="width: 30px;">
- 鍏卞洓鑱斿瓨鏍瑰洖鍗曞鎴蜂粨搴�
+ <div style="width: 40px; display: flex; flex-direction: column; gap: 2px;">
+ <div style="border-bottom: 1px dashed #000; padding-bottom: 2px; text-align: center;">鍏卞洓鑱�</div>
+ <div style="border-bottom: 1px dashed #000; padding-bottom: 2px; text-align: center;">瀛樻牴</div>
+ <div style="border-bottom: 1px dashed #000; padding-bottom: 2px; text-align: center;">瀹㈡埛</div>
+ <div style="border-bottom: 1px dashed #000; padding-bottom: 2px; text-align: center;">璁拌处</div>
+ <div style="text-align: center;">浠撳簱</div>
</div>
</div>
@@ -550,12 +560,32 @@
<el-descriptions-item
label="澶囨敞锛�">璐靛叕鍙稿湪鏀惰揣鍚庤鍗冲埢鏍稿疄鏁伴噺鍙婂搧璐紝鑻ユ湁寮傝锛岃鍦�3鏃ュ唴鎻愬嚭锛屽惁鍒欒涓烘敹濡ャ��</el-descriptions-item>
</el-descriptions>
- <el-descriptions :column="2">
- <el-descriptions-item label="閫佽揣鍗曚綅锛堢绔狅級锛�" />
- <el-descriptions-item label="鏀惰揣鍗曚綅锛�" />
- <el-descriptions-item label="閫佽揣浜猴細" />
- <el-descriptions-item label="鏀惰揣浜猴細" />
- </el-descriptions>
+ <div class="footer">
+ <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>
+ </div>
+
+ <div class="info-section">
+ <div class="info-row">
+ <div>
+ <span class="label">鏀惰揣鍗曚綅锛�</span>
+ <span class="value"></span>
+ </div>
+ <div>
+ <span class="label">鏀惰揣浜猴細</span>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -1498,8 +1528,12 @@
// 鍒涘缓涓�涓柊鐨勬墦鍗扮獥鍙�
const printWindow = window.open('', '_blank', 'width=800,height=600');
- // 鑾峰彇鎵撳嵃棰勮鍐呭
- const previewContent = document.querySelector('.print-preview-content').innerHTML;
+ // 鑾峰彇鎵撳嵃棰勮鍐呭锛屽彧鎻愬彇瀹為檯鐨勬墦鍗伴〉闈�
+ const printPages = document.querySelectorAll('.print-page');
+ let previewContent = '';
+ printPages.forEach(page => {
+ previewContent += page.outerHTML;
+ });
// 鏋勫缓鎵撳嵃鍐呭
let printContent = `
@@ -1516,10 +1550,9 @@
background: white;
}
.print-page {
- width: 200mm;
+ width: 241mm;
height: 75mm;
- padding: 10mm;
- padding-left: 20mm;
+ padding: 0mm 10mm;
background: white;
box-sizing: border-box;
page-break-after: always;
@@ -1542,16 +1575,16 @@
margin-bottom: 8px;
}
.company-name {
- font-size: 18px;
+ font-size: 28px;
font-weight: bold;
margin-bottom: 4px;
}
.document-title {
- font-size: 16px;
+ font-size: 25px;
font-weight: bold;
+ letter-spacing: 10px;
}
.info-section {
- margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -1598,14 +1631,38 @@
.sign-section {
margin-top: 15px;
}
+ .footer {
+ display: flex;
+ .info-section {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 50%;
+ }
+ .info-row {
+ line-height: 20px;
+ }
+ .label {
+ font-weight: bold;
+ min-width: 60px;
+ font-size: 12px;
+ }
+ .value {
+ margin-right: 20px;
+ min-width: 80px;
+ font-size: 12px;
+ }
+ }
@media print {
body {
margin: 0;
padding: 0;
}
.print-page {
+ box-shadow: none;
margin: 0;
padding: 10mm;
+ padding-left: 20mm;
page-break-inside: avoid;
page-break-after: always;
}
@@ -2128,20 +2185,19 @@
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;
- }
+ .company-name {
+ font-size: 28px;
+ font-weight: bold;
+ margin-bottom: 4px;
+ }
+ .document-title {
+ font-size: 25px;
+ font-weight: bold;
+ letter-spacing: 10px;
+ }
}
.info-section {
- margin-bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -2230,6 +2286,29 @@
}
}
+.footer {
+ display: flex;
+ .info-section {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 50%;
+ }
+ .info-row {
+ line-height: 20px;
+ }
+ .label {
+ font-weight: bold;
+ min-width: 60px;
+ font-size: 12px;
+ }
+ .value {
+ margin-right: 20px;
+ min-width: 80px;
+ font-size: 12px;
+ }
+}
+
@media print {
.app-container {
display: none;
--
Gitblit v1.9.3