From 47852462c8585d6a7c772c05c50072eed62e8e62 Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周三, 27 11月 2024 17:22:08 +0800
Subject: [PATCH] 打印
---
LA24030_LuLiPackageLine_Web/src/components/printTableCkd.vue | 244 +++++++++++++++++++++++++++++-------------------
1 files changed, 146 insertions(+), 98 deletions(-)
diff --git a/LA24030_LuLiPackageLine_Web/src/components/printTableCkd.vue b/LA24030_LuLiPackageLine_Web/src/components/printTableCkd.vue
index 1fc01c7..a11bf19 100644
--- a/LA24030_LuLiPackageLine_Web/src/components/printTableCkd.vue
+++ b/LA24030_LuLiPackageLine_Web/src/components/printTableCkd.vue
@@ -1,90 +1,85 @@
<!--鎵撳嵃鍐呭 -->
<template>
- <div id="printContent" class="printContent">
- <div class="printWp" v-for="(itemW, indexW) in deltailList" :key="indexW">
- <!-- <div class="t1">{{Name[0]}} {{Name[1]}} {{Name[2]}}</div> -->
- <div class="t1">{{ Name }}</div>
- <div class="header_pt">
- <div class="box1">
- <img class="imgL" src="http://localhost:8888/src/assets/logo-mini.png" alt="" />
- <!-- <img class="imgL" src="@/assets/logo.png" alt="" /> -->
- <div class="t2">
- <p class="text1">
- 椴佷附鏈ㄤ笟鑲′唤鏈夐檺鍏徃
- </p>
- </div>
- </div>
- <div class="box-t1">
- <div>
- 鍗曞彿锛�<span>{{ itemTitle.orderNo }}</span>
- </div>
- <div>
- <div>
- <span> {{ DateToday }}</span>
- </div>
- </div>
- <div class="t4">
- </div>
- </div>
- </div>
+ <div id="printContent" class="printContent">
+
- <div class="tableBox">
- <table cellspacing="0" cellpadding="0">
- <tr class="middle_first">
- <td class="middle_tree">缂栧彿</td>
- <td class="middle_one">鎵规</td>
- <td class="middle_two">璁㈠崟鍙�</td>
- <td class="middle_four">鍖呰鍙�</td>
- <td class="middle_one">閮ㄤ欢鏉＄爜</td>
- </tr>
- <tr class="middle_first" v-for="(item, index) in itemW" :key="index">
- <td class="middle_tree">{{ item.num }}</td>
-
- <td class="middle_one">
- <div>
- {{ item.planNo }}
- </div>
- </td>
- <td class="middle_two">
- <div>
- {{ item.orderId }}
- </div>
- </td>
- <td class="middle_four">
- <div>
- {{ item.packageCode }}
- </div>
- </td>
- <td class="middle_one">
- <div>
- {{ item.upi }}
- </div>
- </td>
- </tr>
- </table>
+ <div class="ermbox">
+ <div class="t40">
+ 閿�鍞鍗曞彿锛�<span>{{ itemTitle.info16 }}</span>
+ </div>
+ <div class="imgL">
+ <canvas ref="qrcodeCanvas"></canvas>
+ </div>
+ <div class="t41">
+ 鐢熶骇璁㈠崟鍙凤細<span>{{ itemTitle.info5 }}</span>
+ </div>
+ </div>
+
+ <div class="printWp" v-for="(itemW, indexW) in deltailList" :key="indexW">
+ <div class="t1">{{ Name }}</div>
+ <div class="header_pt">
+ <div class="box1">
+
+
+ <!-- <img class="imgL" src="http://localhost:8888/src/assets/logo-mini.png" alt="" /> -->
+ <!-- <img class="imgL" src="@/assets/logo.png" alt="" /> -->
+ <!-- <div class="t2">
+ <p class="text1">椴佷附鏈ㄤ笟鑲′唤鏈夐檺鍏徃</p>
+ </div> -->
</div>
- <!-- <br /> <br /> -->
- <!-- <div class="box-t2">
- <div>渚涜揣鏂圭‘璁わ細鐗ч噹姹借溅瑁呭锛堟姹夛級鏈夐檺鍏徃 </div>
- <div> 绛炬敹浜猴紙浠ｆ敹浜猴級锛� </div>
- </div> -->
- <!-- 濮撳悕 鐢佃瘽 鍦板潃 -->
- <!-- <div class="box-t2">
- <div>濮撳悕&鐢佃瘽锛�</div>
- <div> 鏃ユ湡锛� </div>
- </div> -->
- <!-- <div class="box-t2 box-t2R">
- <div>鍦板潃锛�</div>
- </div> -->
- <span class="pageNum">{{ indexW + 1 }}</span>
+ <div class="box-t1">
+ <div>
+ 鎵撳嵃鏃堕棿锛�<span>{{ DateToday }}</span>
+ </div>
+ <div>
+ 缂烘枡鎬绘暟閲忥細<span>{{ deltailList.length }}</span>
+ </div>
+ </div>
</div>
+
+ <div class="tableBox">
+ <table cellspacing="0" cellpadding="0">
+ <tr class="middle_first">
+ <td class="middle_tree">缂栧彿</td>
+ <td class="middle_one">鏉愭枡</td>
+ <td class="middle_two">閮ㄤ欢鍚嶇О</td>
+ <td class="middle_four">灏哄</td>
+ <td class="middle_one">閮ㄤ欢鏉＄爜</td>
+ </tr>
+ <tr class="middle_first" v-for="(item, index) in itemW" :key="index">
+ <td class="middle_tree">{{ item.num }}</td>
+
+ <td class="middle_one">
+ <div>
+ <!-- {{ item.planNo }} -->
+ </div>
+ </td>
+ <td class="middle_two">
+ <div>
+ {{ item.detailName }}
+ </div>
+ </td>
+ <td class="middle_four">
+ <div>
+ {{ item.info16 }}
+ </div>
+ </td>
+ <td class="middle_one">
+ <div>
+ {{ item.upi }}
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <span class="pageNum">{{ indexW + 1 }}</span>
</div>
+ </div>
</template>
<script lang="ts" setup>
-import { ref, nextTick, computed, defineExpose, defineEmits, markRaw, defineProps } from 'vue';
+import { ref, nextTick, computed, defineExpose, defineEmits, markRaw, defineProps, onMounted } from 'vue';
import printJS from 'print-js';
-// import { formatUtcToData } from "@/utils/formate";
-
+import QRCode from 'qrcode';
const Name = ref([]);
const DateToday = ref('');
const itemTitle: any = ref({});
@@ -96,12 +91,21 @@
}
return data;
};
+
+const qrcodeCanvas = ref<HTMLCanvasElement | null>(null);
+
+// };
const printHd = (name: string, itemSubTitle: any, deltailListArr: any) => {
+ console.log('鎵撳嵃鏉℃暟8888==' + deltailListArr.length);
Name.value = name;
+ debugger;
+
// if(itemSubTitle && itemSubTitle.length>0){
// itemTitle.value = itemSubTitle[0]
// }
- itemTitle.value.orderNo = deltailListArr[0].orderNo;
+ itemTitle.value.info5 = deltailListArr[0].info5;
+ itemTitle.value.info16 = deltailListArr[0].info16;
+
deltailListArr.forEach((item, index) => {
item.num = index + 1;
});
@@ -117,6 +121,13 @@
// console.log(itemSubTitle)
// console.log(deltailListArr)
+ if (deltailListArr[0].info5) {
+ debugger
+ nextTick(() => {
+ QRCode.toCanvas(qrcodeCanvas.value, deltailListArr[0].info5, { width: 150 });
+ });// 鍦ㄧ粍浠舵寕杞芥椂鐢熸垚浜岀淮鐮�
+ }
+
nextTick(() => {
printJS({
printable: 'printContent', // 瑕佹墦鍗扮殑鍏冪礌鐨� ID
@@ -143,20 +154,26 @@
position: relative;
}
-.imgL {
- width: 140px;
-}
-
.t1 {
text-align: center;
- font-size: 30px !important;
+ font-size: 20px !important;
font-weight: bold;
border: 1px solid transparent;
+ padding-bottom: 119px;
}
+.ermbox {
+ position: absolute;
+ top: 10px;
+ left: 20px;
+}
+
+.imgL {
+
+}
.printContent {
position: relative;
- z-index: -1;
+ z-index: 999;
font-size: 12px;
}
@@ -171,10 +188,15 @@
display: block;
}
-.printContent .t4 {
- text-align: right;
+.ermbox span {
+ font-weight: 700;
}
-
+.t40 {
+ font-size: 12px;
+}
+.t41 {
+ font-size: 16px;
+}
.printContent table {
padding: 10px 0;
}
@@ -251,12 +273,27 @@
bottom: 0;
}
-
`,
scanStyles: false, // 鏄惁鎵弿褰撳墠鐨� CSS 鏍峰紡
});
});
+
+
};
+
+
+
+// onMounted(async () => {
+// if (qrcodeCanvas.value) {
+// try {
+// await QRCode.toCanvas(qrcodeCanvas.value, "7777", { width: 100 });
+// } catch (err) {
+// console.error('鐢熸垚浜岀淮鐮佸嚭閿�:', err);
+// }
+// } else {
+// console.error('qrcodeCanvas鏈畾涔�');
+// }
+// });
// 鏆撮湶鏂规硶
defineExpose({ printHd });
@@ -282,20 +319,26 @@
position: relative;
}
-.imgL {
- width: 140px;
-}
-
.t1 {
text-align: center;
- font-size: 30px !important;
+ font-size: 20px !important;
font-weight: bold;
border: 1px solid transparent;
+ padding-bottom: 119px;
}
+.ermbox {
+ position: absolute;
+ top: 10px;
+ left: 20px;
+}
+
+.imgL {
+
+}
.printContent {
position: relative;
- z-index: -1;
+ z-index: -999;
font-size: 12px;
}
@@ -310,10 +353,15 @@
display: block;
}
-.printContent .t4 {
- text-align: right;
+.ermbox span {
+ font-weight: 700;
}
-
+.t40 {
+ font-size: 12px;
+}
+.t41 {
+ font-size: 16px;
+}
.printContent table {
padding: 10px 0;
}
--
Gitblit v1.9.3