From 33314bc2517222c078fddb5d85b30f8abb9f7ae1 Mon Sep 17 00:00:00 2001
From: yanjinhui <3306209981@qq.com>
Date: 星期六, 01 十一月 2025 19:54:06 +0800
Subject: [PATCH] 优化前端时间
---
新建文件夹/WMS/src/extension/basic/extend/printView.vue | 135 ++++++++++++++++++++++++++++++++++-----------
1 files changed, 102 insertions(+), 33 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 5b7a400..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,14 +14,17 @@
<div
style="display: flex; justify-content: center; align-items: center"
>
- <VueQrcode id="qrcode" :value="palletCode" :size="200"></VueQrcode>
+ <!-- 浣跨敤 SVG 鏉ユ樉绀烘潯褰㈢爜 -->
+ <svg id="barcode"></svg>
</div>
</div>
<div id="palletcode">
<span
- style="display: flex; justify-content: center; align-items: center"
- >{{ palletCode }}</span
+ style="display: flex; justify-content: center; align-items: center; flex-direction: column;"
>
+ <!-- <div>鐗╂枡缂栧彿锛歿{ materielCode }}</div>
+ <div>鐗╂枡鍚嶇О锛歿{ materielName }}</div> -->
+ </span>
</div>
<template #footer>
@@ -33,54 +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: "",
- palletCode: "",
+ materielCode: "",
+ materielName: "",
};
},
methods: {
open(row) {
this.row = row;
this.showDetialBox = true;
- if (row && row.palletCode) {
- this.palletCode = row.palletCode;
+
+ // 浣跨敤 $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);
+ let palletcode = document.getElementById("palletcode");
+
+ 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;
}
@@ -102,7 +170,8 @@
justify-content: flex-end;
}
</style>
- <style>
+
+<style>
.el-table .warning-row {
background: #e6a23c;
}
@@ -115,7 +184,7 @@
background: #f56c6c;
}
-canvas {
+#barcode {
display: block;
margin: auto;
}
--
Gitblit v1.9.3