From 266e4bf654c55ce2f7e9271048e4625f1b8b49f6 Mon Sep 17 00:00:00 2001
From: heshaofeng <heshaofeng@hnkhzn.com>
Date: 星期一, 29 十二月 2025 14:36:08 +0800
Subject: [PATCH] Merge branch 'htq20251215' of http://115.159.85.185:8098/r/ZhongRui/ALDbanyunxiangmu into htq20251215
---
项目代码/WIDESEA_WMSClient/src/extension/outbound/extend/printView1.vue | 551 ++++++++++++++++++++++++------------------------------
1 files changed, 247 insertions(+), 304 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/printView1.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/printView1.vue"
index a7156f3..ecea4d4 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/printView1.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/printView1.vue"
@@ -2,71 +2,66 @@
<div>
<vol-box v-model="showDetialBox" :lazy="true" width="500px" :padding="15" title="">
<!-- 鎵撳嵃涓撶敤瀹瑰櫒 -->
- <div id="printContainer" style="position: absolute; left: -9999px;">
+ <div id="printContainer" style="position: absolute; left: -9999px">
<div class="print-page" v-for="(item, index) in printData" :key="index">
<div class="material-card">
- <!-- <div class="header">鍗撳姏鑳界墿鏂欐爣璇嗗崱(灏忓寘)</div> -->
- <div class="dual-column preview-card-header-qrcode">
- <div class="preview-card-header">鐗╂枡鍗� {{ idx + 1 }}</div>
- <VueQrcode :value="generateQr(item)" :size="20" id="qrcode" />
+ <div class="dual-column header-section">
+ <div class="header">鍗撳姏鑳界墿鏂欐爣璇嗗崱(灏忓寘)</div>
+ <VueQrcode :value="generateQr(item)" :size="60" class="qrcode" />
</div>
<div class="content">
- <!-- 浜岀淮鐮佹斁鍦ㄥ彸涓婅 -->
- <!-- <div class="qr-section"> -->
- <!-- <VueQrcode :value="generateQr(item)" id="qrcode" /> -->
- <!-- </div> -->
<div class="row dual-column">
<div class="column">
<span class="label">鏂欏彿</span>
- <span class="value code-value">{{ item.materialCode }}</span>
+ <span class="value code-value full-width">{{ item.materialCode }}</span>
</div>
<div class="column">
<span class="label">渚涘簲鍟嗙紪鐮�</span>
- <span class="value">{{ item.supplierCode }}</span>
+ <span class="value full-width">{{ item.suplierCode }}</span>
</div>
</div>
<div class="row dual-column">
<div class="column">
<span class="label">鍝佸悕</span>
- <span class="value">{{ item.materialName }}</span>
+ <span class="value full-width">{{ item.materialName }}</span>
</div>
<div class="column">
<span class="label">閲囪喘鍗曞彿</span>
- <span class="value">{{ item.purchaseOrderNo }}</span>
+ <span class="value full-width">{{ item.pruchaseOrderNo }}</span>
</div>
</div>
<div class="row dual-column">
<div class="column">
<span class="label">瑙勬牸</span>
- <span class="value full-width">{{ item.specification }}</span>
+ <span class="value full-width">{{ item.materialSpec }}</span>
</div>
<div class="column">
<span class="label">鏁伴噺/鎬绘暟</span>
- <span class="value">{{ item.quantityTotal }}</span>
+ <span class="value full-width">{{ item.quantity }}</span>
</div>
</div>
<div class="row dual-column">
<div class="column">
<span class="label">鎵瑰彿</span>
- <span class="value">{{ item.batchNumber }}</span>
+ <span class="value full-width">{{ item.barcode }}</span>
</div>
<div class="column">
<span class="label">鎵规</span>
- <span class="value">{{ item.batch }}</span>
+ <span class="value full-width">{{ item.batchNo }}</span>
</div>
</div>
<div class="row dual-column">
<div class="column">
<span class="label">鍘傚尯</span>
- <span class="value">{{ item.factory }}</span>
+ <span class="value full-width">{{ item.factoryArea }}</span>
</div>
<div class="column">
<span class="label">鏃ユ湡</span>
- <span class="value">{{ item.date }}</span>
+ <span class="value full-width">{{ item.date }}</span>
</div>
</div>
</div>
@@ -74,69 +69,69 @@
</div>
</div>
- <!-- 棰勮鍖哄煙 -->
+ <!-- 棰勮鍖哄煙淇濇寔涓嶅彉 -->
<div id="previewContent" class="preview-container">
<div class="preview-header">鍗撳姏鑳界墿鏂欐爣璇嗗崱(灏忓寘) - 棰勮 (鍏眥{ printData.length }}涓�)</div>
<div class="preview-scroll">
<div v-for="(item, idx) in printData" :key="idx" class="preview-card">
<div class="dual-column preview-card-header-qrcode">
- <div class="preview-card-header">鐗╂枡鍗� {{ idx + 1 }}</div>
- <VueQrcode :value="generateQr(item)" :size="20" id="qrcode" />
+ <div class="preview-card-header">鍗撳姏鑳界墿鏂欐爣璇嗗崱(灏忓寘)</div>
+ <VueQrcode :value="generateQr(item)" :size="40" class="qrcode-preview" />
</div>
<div class="preview-wrapper">
<div class="content-preview">
<div class="row-preview dual-column">
<div class="column-preview">
<span class="label-preview">鏂欏彿</span>
- <span class="value-preview code-value">{{ item.materialCode }}</span>
+ <span class="value-preview code-value full-width">{{ item.materialCode }}</span>
</div>
<div class="column-preview">
<span class="label-preview">渚涘簲鍟嗙紪鐮�</span>
- <span class="value-preview">{{ item.supplierCode }}</span>
+ <span class="value-preview full-width">{{ item.suplierCode }}</span>
</div>
</div>
<div class="row-preview dual-column">
<div class="column-preview">
<span class="label-preview">鍝佸悕</span>
- <span class="value-preview">{{ item.materialName }}</span>
+ <span class="value-preview full-width">{{ item.materialName }}</span>
</div>
<div class="column-preview">
<span class="label-preview">閲囪喘鍗曞彿</span>
- <span class="value-preview">{{ item.purchaseOrderNo }}</span>
+ <span class="value-preview full-width">{{ item.pruchaseOrderNo }}</span>
</div>
</div>
<div class="row-preview dual-column">
<div class="column-preview">
<span class="label-preview">瑙勬牸</span>
- <span class="value-preview full-width">{{ item.specification }}</span>
+ <span class="value-preview full-width">{{ item.materialSpec }}</span>
</div>
<div class="column-preview">
<span class="label-preview">鏁伴噺/鎬绘暟</span>
- <span class="value-preview">{{ item.quantityTotal }}</span>
+ <span class="value-preview full-width">{{ item.quantity }}</span>
</div>
</div>
<div class="row-preview dual-column">
<div class="column-preview">
<span class="label-preview">鎵瑰彿</span>
- <span class="value-preview">{{ item.batchNumber }}</span>
+ <span class="value-preview full-width">{{ item.barcode }}</span>
</div>
<div class="column-preview">
<span class="label-preview">鎵规</span>
- <span class="value-preview">{{ item.batch }}</span>
+ <span class="value-preview full-width">{{ item.batchNo }}</span>
</div>
</div>
<div class="row-preview dual-column">
<div class="column-preview">
<span class="label-preview">鍘傚尯</span>
- <span class="value-preview">{{ item.factory }}</span>
+ <span class="value-preview full-width">{{ item.factoryArea }}</span>
</div>
<div class="column-preview">
<span class="label-preview">鏃ユ湡</span>
- <span class="value-preview">{{ item.date }}</span>
+ <span class="value-preview full-width">{{ item.date }}</span>
</div>
</div>
</div>
@@ -159,281 +154,242 @@
</template>
<script>
-import VolBox from "@/components/basic/VolBox.vue";
-import VueQrcode from "vue-qrcode";
+import VolBox from '@/components/basic/VolBox.vue'
+import VueQrcode from 'vue-qrcode'
export default {
components: { VolBox, VueQrcode },
data() {
return {
showDetialBox: false,
- printData: [], // 瀛樺偍鎵撳嵃鏁版嵁闆嗗悎
- };
+ printData: []
+ }
},
methods: {
generateQr(item) {
- return `${item.batchNumber}`;
+ return `${item.barcode}`
},
open(rows) {
- this.showDetialBox = true;
- this.printData = Array.isArray(rows) ? rows : [rows];
+ this.showDetialBox = true
+ this.printData = Array.isArray(rows) ? rows : [rows]
console.log('鎵撳嵃鏁版嵁:', this.printData);
},
async print() {
if (this.printData.length === 0) {
- this.$message.warning('娌℃湁鍙墦鍗扮殑鏁版嵁');
- return;
+ this.$message.warning('娌℃湁鍙墦鍗扮殑鏁版嵁')
+ return
}
this.$nextTick(() => {
try {
- const printContent = document.getElementById("printContainer").innerHTML;
- const printWindow = window.open("", "_blank", "width=800,height=600,scrollbars=yes");
+ const printContent = document.getElementById('printContainer').innerHTML
+ const printWindow = window.open('', '_blank', 'width=800,height=600,scrollbars=yes')
if (!printWindow) {
- this.$message.error('鏃犳硶鎵撳紑鎵撳嵃绐楀彛锛岃妫�鏌ユ祻瑙堝櫒寮圭獥璁剧疆');
- return;
+ this.$message.error('鏃犳硶鎵撳紑鎵撳嵃绐楀彛锛岃妫�鏌ユ祻瑙堝櫒寮圭獥璁剧疆')
+ return
}
printWindow.document.write(`
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>鐗╂枡鏍囪瘑鍗℃墦鍗� - 鍏�${this.printData.length}涓�</title>
- <style>
- /* 閲嶇疆鎵�鏈夋牱寮� */
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta charset="UTF-8">
+ <title>鐗╂枡鏍囪瘑鍗℃墦鍗� - 鍏�${this.printData.length}涓�</title>
+ <style>
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ -webkit-print-color-adjust: exact !important;
+ print-color-adjust: exact !important;
+ color-adjust: exact !important;
+ }
+
+ body {
+ font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif;
+ background: white !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ width: 80mm !important;
+ }
+
+ .qrcode {
+ width: 15mm !important;
+ height: 15mm !important;
+ display: block;
+ }
+
+ .qrcode canvas {
+ width: 15mm !important;
+ height: 15mm !important;
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: crisp-edges;
+ }
+
+ @media print {
+ @page {
+ size: 80mm 60mm !important;
+ margin: 0 !important;
+ padding: 0 !important;
}
body {
- font-family: SimSun, "瀹嬩綋", sans-serif;
- -webkit-print-color-adjust: exact !important;
- print-color-adjust: exact !important;
- color-adjust: exact !important;
- }
- #qrcode {
- width: 60px;
- height: 60px;
- display: block;
- margin: 0, 15px
- }
- @media print {
- @page {
- size: 80mm 60mm;
- margin: 0;
- padding: 0;
- }
-
- body {
- margin: 0 !important;
- padding: 0 !important;
- width: 80mm !important;
- background: white !important;
- }
-
- .print-page {
- width: 80mm !important;
- height: 60mm !important;
- page-break-after: always !important;
- break-after: page !important;
- margin: 0 !important;
- padding: 2mm !important;
- display: block !important;
- }
-
- .print-page:last-child {
- page-break-after: auto !important;
- }
-
- .material-card {
- width: 80mm !important;
- height: 56mm !important;
- border: 0.3mm solid #000 !important;
- padding: 1mm !important;
- box-sizing: border-box !important;
- position: relative !important;
- background: white !important;
- }
-
- .header {
- font-size: 3.5mm !important;
- font-weight: bold !important;
- text-align: center !important;
- margin-bottom: 1mm !important;
- padding-bottom: 0.5mm !important;
- border-bottom: 0.2mm solid #000 !important;
- }
-
- .content {
- height: calc(100% - 6mm) !important;
- position: relative !important;
- }
-
- .row {
- display: flex !important;
- margin-bottom: 0.8mm !important;
- min-height: 6mm !important;
- }
-
- .dual-column {
- display: flex !important;
- justify-content: space-between !important;
- }
-
- .column {
- flex: 1 !important;
- display: flex !important;
- align-items: center !important;
- }
-
- .column:first-child {
- margin-right: 2mm !important;
- }
-
- .label {
- font-weight: bold !important;
- flex: 0 0 15mm !important;
- white-space: nowrap !important;
- font-size: 2.2mm !important;
- }
-
- .value {
- flex: 1 !important;
- overflow: hidden !important;
- text-overflow: ellipsis !important;
- white-space: nowrap !important;
- border-bottom: 0.1mm dashed #666 !important;
- padding-bottom: 0.2mm !important;
- min-height: 2.5mm !important;
- font-size: 2.2mm !important;
- }
-
- .code-value {
- font-weight: bold !important;
- }
-
- .full-width {
- white-space: normal !important;
- word-break: break-all !important;
- line-height: 1.2 !important;
- }
-
- /* 浜岀淮鐮佹牱寮� */
- .qr-section {
- width: 10mm !important;
- height: 12mm !important;
- font-siz:10px;
- }
-
- .qr-section canvas {
- width: 10mm !important;
- height: 10mm !important;
- max-width: 100% !important;
- max-height: 100% !important;
- }
+ width: 80mm !important;
+ height: 60mm !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ background: white !important;
}
- /* 灞忓箷棰勮鏍峰紡 */
- @media screen {
- body {
- background: #f5f5f5;
- padding: 10px;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .print-page {
- width: 80mm;
- height: 60mm;
- margin: 10px 0;
- padding: 2mm;
- background: white;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- border: 1px dashed #ccc;
- }
-
- .material-card {
- width: 80mm;
- height: 60mm;
- border: 0.3mm solid #000;
- padding: 1.5mm;
- background: white;
- position: relative;
- }
-
- .qr-section {
- position: absolute;
- top: 4mm;
- right: 2mm;
- width: 12mm;
- height: 12mm;
- border: 0.2mm solid #ccc;
- padding: 0.5mm;
- background: white;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .qr-section canvas {
- width: 10mm !important;
- height: 10mm !important;
- }
+ .print-page {
+ width: 80mm !important;
+ height: 60mm !important;
+ page-break-after: always !important;
+ margin: 0 !important;
+ padding: 1mm !important;
+ display: block !important;
+ background: white !important;
}
- </style>
- </head>
- <body>
- ${printContent}
- <script>
- window.onload = function() {
- console.log('鎵撳嵃椤甸潰鍔犺浇瀹屾垚锛屽叡${this.printData.length}涓墿鏂欏崱');
- // 绛夊緟浜岀淮鐮佹覆鏌撳畬鎴�
- setTimeout(() => {
- // 寮哄埗璁剧疆浜岀淮鐮乧anvas灏哄
- const canvases = document.querySelectorAll('canvas');
- canvases.forEach(canvas => {
- canvas.style.width = '10mm !important';
- canvas.style.height = '10mm !important';
- });
- window.print();
- }, 800);
- };
- window.onafterprint = function() {
- setTimeout(() => {
- window.close();
- }, 500);
- };
- <\/script>
- </body>
- </html>
- `);
+ .print-page:last-child {
+ page-break-after: avoid !important;
+ }
+
+ .material-card {
+ width: 78mm !important;
+ height: 58mm !important;
+ border: 0.5mm solid #000 !important;
+ padding: 1.5mm !important;
+ box-sizing: border-box !important;
+ position: relative !important;
+ background: white !important;
+ font-family: "Microsoft YaHei", "SimHei", Arial, sans-serif !important;
+ }
+
+ .header-section {
+ display: flex !important;
+ justify-content: space-between !important;
+ align-items: center !important;
+ margin-bottom: 1.5mm !important;
+ padding-bottom: 1mm !important;
+ border-bottom: 0.3mm solid #000 !important;
+ }
+
+ .header {
+ font-size: 4mm !important;
+ font-weight: bold !important;
+ white-space: nowrap !important;
+ }
+
+ .content {
+ height: calc(100% - 10mm) !important;
+ position: relative !important;
+ }
+
+ .row {
+ display: flex !important;
+ margin-bottom: 1.2mm !important;
+ min-height: 6.5mm !important;
+ align-items: stretch !important;
+ }
+
+ .dual-column {
+ display: flex !important;
+ justify-content: space-between !important;
+ }
+
+ .column {
+ flex: 1 !important;
+ display: flex !important;
+ align-items: center !important;
+ min-height: 5mm !important;
+ }
+
+ .column:first-child {
+ margin-right: 2.5mm !important;
+ }
+
+ .label {
+ flex: 0 0 8mm !important;
+ white-space: nowrap !important;
+ font-size: 2.5mm !important;
+ line-height: 1.3 !important;
+ }
+
+ .value {
+ flex: 1 !important;
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: normal !important;
+ word-break: break-all !important;
+ word-wrap: break-word !important;
+ min-height: 4mm !important;
+ font-size: 2.5mm !important;
+ line-height: 1.3 !important;
+ border-bottom: none !important;
+ padding: 0.5mm !important;
+ }
+
+ .full-width {
+ display: block !important;
+ white-space: normal !important;
+ word-break: break-all !important;
+ word-wrap: break-word !important;
+ line-height: 1.3 !important;
+ }
+
+ .code-value {
+ font-weight: bold !important;
+ }
+ }
+ </style>
+ </head>
+ <body>
+ ${printContent}
+ <script>
+ window.onload = function() {
+ setTimeout(() => {
+ const canvases = document.querySelectorAll('canvas');
+ canvases.forEach(canvas => {
+ canvas.setAttribute('width', '60');
+ canvas.setAttribute('height', '60');
+ canvas.style.width = '15mm';
+ canvas.style.height = '15mm';
+ });
+ window.print();
+ setTimeout(() => { window.close(); }, 500);
+ }, 800);
+ };
+ <\/script>
+ </body>
+ </html>
+ `)
- printWindow.document.close();
-
+ printWindow.document.close()
} catch (error) {
- console.error('鎵撳嵃閿欒:', error);
- this.$message.error('鎵撳嵃澶辫触: ' + error.message);
+ console.error('鎵撳嵃閿欒:', error)
+ this.$message.error('鎵撳嵃澶辫触: ' + error.message)
}
- });
+ })
}
}
-};
+}
</script>
<style scoped>
-#qrcode {
+.qrcode {
width: 60px;
height: 60px;
display: block;
- margin: 0, 15px
+}
+
+.qrcode-preview {
+ width: 40px;
+ height: 40px;
+ display: block;
}
.preview-container {
@@ -467,10 +423,9 @@
height: 240px;
margin: 0 auto 15px auto;
padding: 8px;
- border: 1px solid #ccc;
- font-family: SimSun;
- box-sizing: border-box;
border: 2px solid #000;
+ font-family: 'Microsoft YaHei', sans-serif;
+ box-sizing: border-box;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
@@ -481,21 +436,14 @@
}
.preview-card-header {
- text-align: center;
font-size: 14px;
- /* font-weight: bold;
- margin-bottom: 8px;
- padding-bottom: 4px;
- border-bottom: 1px solid #000;
- background: #f5f5f5;
- padding: 4px; */
- height: 60px;
- width: 60px;
+ font-weight: bold;
+ white-space: nowrap;
}
.preview-wrapper {
position: relative;
- height: calc(100% - 40px);
+ height: calc(100% - 30px);
}
.content-preview {
@@ -504,8 +452,10 @@
}
.row-preview {
- /* margin-bottom: px; */
- min-height: 32px;
+ margin-bottom: 6px;
+ min-height: 24px;
+ display: flex;
+ align-items: center;
}
.dual-column {
@@ -517,17 +467,19 @@
flex: 1;
display: flex;
align-items: center;
+ min-height: 22px;
}
.column-preview:first-child {
- margin-right: 10px;
+ margin-right: 8px;
}
.label-preview {
font-weight: bold;
- flex: 0 0 60px;
+ flex: 0 0 30px;
white-space: nowrap;
font-size: 12px;
+ line-height: 1.2;
}
.value-preview {
@@ -535,9 +487,10 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- font-size: 12px;
- border-bottom: 1px dashed #666;
+ font-size: 10px;
padding-bottom: 2px;
+ line-height: 1.2;
+ font-weight: normal;
}
.code-value {
@@ -546,31 +499,21 @@
.full-width {
display: block;
- margin-top: 2px;
white-space: normal;
- word-break: break-all;
+ word-break: break-all !important;
line-height: 1.2;
- font-size: 12px;
+ font-size: 11px;
+ min-height: auto;
+ word-wrap: break-word !important;
}
-/* 棰勮鍖哄煙浜岀淮鐮佹牱寮� */
-.qr-section-preview {
- position: absolute;
- top: 10px;
- right: 10px;
- width: 150px;
- height: 175px;
+.preview-card-header-qrcode {
display: flex;
- align-items: center;
- justify-content: center;
- border: 1px solid #ddd;
- background: white;
- padding: 2px;
-}
-
-.qr-section-preview canvas {
- width: 56px !important;
- height: 56px !important;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 8px;
+ border-bottom: 2px solid #000;
+ padding-bottom: 4px;
}
.footer-actions {
@@ -582,7 +525,7 @@
.print-count {
font-size: 14px;
- color: #409EFF;
+ color: #409eff;
font-weight: bold;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3