From 986f0fe3564f067c59a10ac7a4d78646df6b6838 Mon Sep 17 00:00:00 2001
From: yanjinhui <3306209981@qq.com>
Date: 星期四, 23 十月 2025 13:36:19 +0800
Subject: [PATCH] Merge branch 'master' of http://115.159.85.185:8098/r/ZhiHuiQiCe/FangCangZhiNeng
---
新建文件夹/WMS/src/extension/basic/extend/printView.vue | 134 +++++++++++++++++++-------
新建文件夹/WMS/src/extension/basic/extend/printViewEWM.vue | 127 +++++++++++++++++++++++++
2 files changed, 226 insertions(+), 35 deletions(-)
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/WMS/src/extension/basic/extend/printView.vue" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/WMS/src/extension/basic/extend/printView.vue"
index 7831275..ec866e7 100644
--- "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/WMS/src/extension/basic/extend/printView.vue"
+++ "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/WMS/src/extension/basic/extend/printView.vue"
@@ -3,7 +3,7 @@
<vol-box
v-model="showDetialBox"
:lazy="true"
- width="300px"
+ width="400px"
:padding="15"
title="鎵撳嵃"
>
@@ -14,15 +14,17 @@
<div
style="display: flex; justify-content: center; align-items: center"
>
- <VueQrcode id="qrcode" :value="materielCode" :size="200"></VueQrcode>
+ <!-- 浣跨敤 SVG 鏉ユ樉绀烘潯褰㈢爜 -->
+ <svg id="barcode"></svg>
</div>
</div>
<div id="palletcode">
<span
- style="display: flex; justify-content: center; align-items: center"
- >鐗╂枡缂栧彿锛歿{ materielCode }}<br>
- 鐗╂枡鍚嶇О锛歿{ materielName }}</span
+ style="display: flex; justify-content: center; align-items: center; flex-direction: column;"
>
+ <!-- <div>鐗╂枡缂栧彿锛歿{ materielCode }}</div>
+ <div>鐗╂枡鍚嶇О锛歿{ materielName }}</div> -->
+ </span>
</div>
<template #footer>
@@ -34,58 +36,119 @@
</vol-box>
</div>
</template>
-
- <script>
+
+<script>
import VolBox from "@/components/basic/VolBox.vue";
-import VueQrcode from "vue-qrcode";
-import QRCode from "qrcode";
+import JsBarcode from "jsbarcode";
+
export default {
- components: { VolBox, VueQrcode },
+ components: { VolBox },
data() {
return {
showDetialBox: false,
row: null,
- qrcodeDataURL: "",
materielCode: "",
materielName: "",
- materielinfo:"",
};
},
methods: {
open(row) {
this.row = row;
this.showDetialBox = true;
- if (row && row.materielCode) {
- this.materielCode = row.materielCode;
- this.materielName = row.materielName;
- this.materielinfo="鐗╂枡缂栧彿锛�"+row.materielCode+"鐗╂枡鍚嶇О锛�"+row.materielName;
+
+ // 浣跨敤 $nextTick 纭繚 DOM 宸茬粡鏇存柊
+ this.$nextTick(() => {
+ if (row && row.materielCode) {
+ this.materielCode = row.materielCode;
+ this.materielName = row.materielName;
+
+ // 鐢熸垚鏉″舰鐮�
+ this.generateBarcode(row.materielCode);
+ }
+ });
+ },
+
+ generateBarcode(code) {
+ try {
+ JsBarcode("#barcode", code, {
+ format: "CODE128", // 鏉″舰鐮佹牸寮�
+ width: 2, // 鏉＄爜瀹藉害
+ height: 80, // 鏉＄爜楂樺害
+ displayValue: true, // 鏄惁鏄剧ず鏂囧瓧
+ text: code, // 鏄剧ず鐨勬枃瀛�
+ fontOptions: "bold",
+ fontSize: 14,
+ margin: 10,
+ background: "#ffffff",
+ lineColor: "#000000"
+ });
+ } catch (error) {
+ console.error("鐢熸垚鏉″舰鐮佸け璐�:", error);
}
},
+
print() {
let printContent = document.getElementById("printContent");
let palletcode = document.getElementById("palletcode");
- var printWindow = window.open("", "");
- printWindow.document.write(printContent.innerHTML);
- printWindow.document.write(palletcode.innerHTML);
+
+ var printWindow = window.open("", "_blank");
+
+ // 鏋勫缓鎵撳嵃鍐呭
+ let printHTML = `
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <title>鎵撳嵃鏉″舰鐮�</title>
+ <style>
+ body {
+ margin: 0;
+ padding: 20px;
+ font-family: Arial, sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+ .barcode-container {
+ margin-bottom: 20px;
+ }
+ .text-info {
+ text-align: center;
+ font-size: 14px;
+ line-height: 1.5;
+ }
+ svg {
+ display: block;
+ margin: 0 auto;
+ }
+ @media print {
+ body { margin: 0; padding: 10px; }
+ }
+ </style>
+ </head>
+ <body>
+ <div class="barcode-container">${printContent.innerHTML}</div>
+ <div class="text-info">${palletcode.innerHTML}</div>
+ </body>
+ </html>
+ `;
+
+ printWindow.document.write(printHTML);
printWindow.document.close();
- printWindow.focus();
- printWindow.print();
- printWindow.close();
- // this.http
- // .post("api/palletCodeInfo/PrintStatusUp?printCode="+this.palletCode, null, "鏁版嵁澶勭悊涓�")
- // .then((x) => {
- // if (!x.status) return this.$message.error(x.message);
- // this.$message.success("鎿嶄綔鎴愬姛");
- // this.$parent.refresh();
- // this.showDetialBox = false;
- // });
+
+ // 绛夊緟鍐呭鍔犺浇瀹屾垚鍚庢墦鍗�
+ printWindow.onload = function() {
+ printWindow.focus();
+ printWindow.print();
+ // 鎵撳嵃鍚庤嚜鍔ㄥ叧闂獥鍙ｏ紙鍙�夛級
+ printWindow.close();
+ };
},
},
- created() {},
};
</script>
-
- <style scoped>
+
+<style scoped>
.el-col {
border-radius: 4px;
}
@@ -107,7 +170,8 @@
justify-content: flex-end;
}
</style>
- <style>
+
+<style>
.el-table .warning-row {
background: #e6a23c;
}
@@ -120,7 +184,7 @@
background: #f56c6c;
}
-canvas {
+#barcode {
display: block;
margin: auto;
}
diff --git "a/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/WMS/src/extension/basic/extend/printViewEWM.vue" "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/WMS/src/extension/basic/extend/printViewEWM.vue"
new file mode 100644
index 0000000..7831275
--- /dev/null
+++ "b/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/WMS/src/extension/basic/extend/printViewEWM.vue"
@@ -0,0 +1,127 @@
+<template>
+ <div>
+ <vol-box
+ v-model="showDetialBox"
+ :lazy="true"
+ width="300px"
+ :padding="15"
+ title="鎵撳嵃"
+ >
+ <div
+ id="printContent"
+ style="display: flex; justify-content: center; align-items: center"
+ >
+ <div
+ style="display: flex; justify-content: center; align-items: center"
+ >
+ <VueQrcode id="qrcode" :value="materielCode" :size="200"></VueQrcode>
+ </div>
+ </div>
+ <div id="palletcode">
+ <span
+ style="display: flex; justify-content: center; align-items: center"
+ >鐗╂枡缂栧彿锛歿{ materielCode }}<br>
+ 鐗╂枡鍚嶇О锛歿{ materielName }}</span
+ >
+ </div>
+
+ <template #footer>
+ <el-button type="primary" size="small" @click="print()">鎵撳嵃</el-button>
+ <el-button type="danger" size="small" @click="showDetialBox = false"
+ >鍏抽棴</el-button
+ >
+ </template>
+ </vol-box>
+ </div>
+</template>
+
+ <script>
+import VolBox from "@/components/basic/VolBox.vue";
+import VueQrcode from "vue-qrcode";
+import QRCode from "qrcode";
+export default {
+ components: { VolBox, VueQrcode },
+ data() {
+ return {
+ showDetialBox: false,
+ row: null,
+ qrcodeDataURL: "",
+ materielCode: "",
+ materielName: "",
+ materielinfo:"",
+ };
+ },
+ methods: {
+ open(row) {
+ this.row = row;
+ this.showDetialBox = true;
+ if (row && row.materielCode) {
+ this.materielCode = row.materielCode;
+ this.materielName = row.materielName;
+ this.materielinfo="鐗╂枡缂栧彿锛�"+row.materielCode+"鐗╂枡鍚嶇О锛�"+row.materielName;
+ }
+ },
+ print() {
+ let printContent = document.getElementById("printContent");
+ let palletcode = document.getElementById("palletcode");
+ var printWindow = window.open("", "");
+ printWindow.document.write(printContent.innerHTML);
+ printWindow.document.write(palletcode.innerHTML);
+ printWindow.document.close();
+ printWindow.focus();
+ printWindow.print();
+ printWindow.close();
+ // this.http
+ // .post("api/palletCodeInfo/PrintStatusUp?printCode="+this.palletCode, null, "鏁版嵁澶勭悊涓�")
+ // .then((x) => {
+ // if (!x.status) return this.$message.error(x.message);
+ // this.$message.success("鎿嶄綔鎴愬姛");
+ // this.$parent.refresh();
+ // this.showDetialBox = false;
+ // });
+ },
+ },
+ created() {},
+};
+</script>
+
+ <style scoped>
+.el-col {
+ border-radius: 4px;
+}
+
+.grid-content {
+ border-radius: 4px;
+ min-height: 36px;
+}
+
+.content-text {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.right-text {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+</style>
+ <style>
+.el-table .warning-row {
+ background: #e6a23c;
+}
+
+.el-table .success-row {
+ background: #f0f9eb;
+}
+
+.el-table .error-row {
+ background: #f56c6c;
+}
+
+canvas {
+ display: block;
+ margin: auto;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3