From dcdb87f1cb6cfd66d3fc01bc2248e4876c37f223 Mon Sep 17 00:00:00 2001
From: pan <antony1029@163.com>
Date: 星期日, 30 十一月 2025 18:14:12 +0800
Subject: [PATCH] Merge branch 'master' of http://115.159.85.185:8098/r/ZhongRui/ALDbanyunxiangmu
---
项目代码/WIDESEA_WMSClient/src/extension/outbound/extend/printView1.vue | 588 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 588 insertions(+), 0 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"
new file mode 100644
index 0000000..a7156f3
--- /dev/null
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WIDESEA_WMSClient/src/extension/outbound/extend/printView1.vue"
@@ -0,0 +1,588 @@
+<template>
+ <div>
+ <vol-box v-model="showDetialBox" :lazy="true" width="500px" :padding="15" title="">
+ <!-- 鎵撳嵃涓撶敤瀹瑰櫒 -->
+ <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>
+ <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>
+ </div>
+ <div class="column">
+ <span class="label">渚涘簲鍟嗙紪鐮�</span>
+ <span class="value">{{ item.supplierCode }}</span>
+ </div>
+ </div>
+
+ <div class="row dual-column">
+ <div class="column">
+ <span class="label">鍝佸悕</span>
+ <span class="value">{{ item.materialName }}</span>
+ </div>
+ <div class="column">
+ <span class="label">閲囪喘鍗曞彿</span>
+ <span class="value">{{ item.purchaseOrderNo }}</span>
+ </div>
+ </div>
+
+ <div class="row dual-column">
+ <div class="column">
+ <span class="label">瑙勬牸</span>
+ <span class="value full-width">{{ item.specification }}</span>
+ </div>
+ <div class="column">
+ <span class="label">鏁伴噺/鎬绘暟</span>
+ <span class="value">{{ item.quantityTotal }}</span>
+ </div>
+ </div>
+
+ <div class="row dual-column">
+ <div class="column">
+ <span class="label">鎵瑰彿</span>
+ <span class="value">{{ item.batchNumber }}</span>
+ </div>
+ <div class="column">
+ <span class="label">鎵规</span>
+ <span class="value">{{ item.batch }}</span>
+ </div>
+ </div>
+
+ <div class="row dual-column">
+ <div class="column">
+ <span class="label">鍘傚尯</span>
+ <span class="value">{{ item.factory }}</span>
+ </div>
+ <div class="column">
+ <span class="label">鏃ユ湡</span>
+ <span class="value">{{ item.date }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </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>
+ <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>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">渚涘簲鍟嗙紪鐮�</span>
+ <span class="value-preview">{{ item.supplierCode }}</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>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">閲囪喘鍗曞彿</span>
+ <span class="value-preview">{{ item.purchaseOrderNo }}</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>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">鏁伴噺/鎬绘暟</span>
+ <span class="value-preview">{{ item.quantityTotal }}</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>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">鎵规</span>
+ <span class="value-preview">{{ item.batch }}</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>
+ </div>
+ <div class="column-preview">
+ <span class="label-preview">鏃ユ湡</span>
+ <span class="value-preview">{{ item.date }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <template #footer>
+ <div class="footer-actions">
+ <span class="print-count">鍏� {{ printData.length }} 涓墿鏂欏崱寰呮墦鍗�</span>
+ <div>
+ <el-button type="primary" size="small" @click="print">鎵撳嵃鍏ㄩ儴</el-button>
+ <el-button type="danger" size="small" @click="showDetialBox = false">鍏抽棴</el-button>
+ </div>
+ </div>
+ </template>
+ </vol-box>
+ </div>
+</template>
+
+<script>
+import VolBox from "@/components/basic/VolBox.vue";
+import VueQrcode from "vue-qrcode";
+
+export default {
+ components: { VolBox, VueQrcode },
+ data() {
+ return {
+ showDetialBox: false,
+ printData: [], // 瀛樺偍鎵撳嵃鏁版嵁闆嗗悎
+ };
+ },
+ methods: {
+ generateQr(item) {
+ return `${item.batchNumber}`;
+ },
+
+ open(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.$nextTick(() => {
+ try {
+ const printContent = document.getElementById("printContainer").innerHTML;
+ const printWindow = window.open("", "_blank", "width=800,height=600,scrollbars=yes");
+
+ if (!printWindow) {
+ 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;
+ }
+
+ 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;
+ }
+ }
+
+ /* 灞忓箷棰勮鏍峰紡 */
+ @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;
+ }
+ }
+ </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>
+ `);
+
+ printWindow.document.close();
+
+ } catch (error) {
+ console.error('鎵撳嵃閿欒:', error);
+ this.$message.error('鎵撳嵃澶辫触: ' + error.message);
+ }
+ });
+ }
+ }
+};
+</script>
+
+<style scoped>
+#qrcode {
+ width: 60px;
+ height: 60px;
+ display: block;
+ margin: 0, 15px
+}
+
+.preview-container {
+ max-height: 500px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+.preview-header {
+ text-align: center;
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ padding: 8px;
+ background: #f0f0f0;
+ border-radius: 4px;
+}
+
+.preview-scroll {
+ max-height: 400px;
+ overflow-y: auto;
+ padding: 10px;
+ border: 1px solid #e0e0e0;
+ border-radius: 4px;
+ background: #f9f9f9;
+}
+
+.preview-card {
+ width: 320px;
+ height: 240px;
+ margin: 0 auto 15px auto;
+ padding: 8px;
+ border: 1px solid #ccc;
+ font-family: SimSun;
+ box-sizing: border-box;
+ border: 2px solid #000;
+ background: white;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ position: relative;
+}
+
+.preview-card:last-child {
+ margin-bottom: 0;
+}
+
+.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;
+}
+
+.preview-wrapper {
+ position: relative;
+ height: calc(100% - 40px);
+}
+
+.content-preview {
+ width: 100%;
+ height: 100%;
+}
+
+.row-preview {
+ /* margin-bottom: px; */
+ min-height: 32px;
+}
+
+.dual-column {
+ display: flex;
+ justify-content: space-between;
+}
+
+.column-preview {
+ flex: 1;
+ display: flex;
+ align-items: center;
+}
+
+.column-preview:first-child {
+ margin-right: 10px;
+}
+
+.label-preview {
+ font-weight: bold;
+ flex: 0 0 60px;
+ white-space: nowrap;
+ font-size: 12px;
+}
+
+.value-preview {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 12px;
+ border-bottom: 1px dashed #666;
+ padding-bottom: 2px;
+}
+
+.code-value {
+ font-weight: bold;
+}
+
+.full-width {
+ display: block;
+ margin-top: 2px;
+ white-space: normal;
+ word-break: break-all;
+ line-height: 1.2;
+ font-size: 12px;
+}
+
+/* 棰勮鍖哄煙浜岀淮鐮佹牱寮� */
+.qr-section-preview {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 150px;
+ height: 175px;
+ 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;
+}
+
+.footer-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+
+.print-count {
+ font-size: 14px;
+ color: #409EFF;
+ font-weight: bold;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3