From 23725836ee7260a6f96d372530122537d9a91c31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Fri, 28 Nov 2025 11:20:41 +0800 Subject: [PATCH] =?UTF-8?q?refactor(wms):=20=E4=BC=98=E5=8C=96=E5=8F=91?= =?UTF-8?q?=E8=B4=A7=E5=8D=95=E6=89=93=E5=8D=B0=E5=8A=9F=E8=83=BD=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix(waybill): 修复打印和保存图片时内容截断问题 chore: 删除不再使用的websocket测试页面 --- klp-ui/public/websocket-test.html | 558 ------------------ .../views/wms/delivery/components/wayBill.vue | 65 +- .../src/views/wms/delivery/waybill/index.vue | 19 +- 3 files changed, 63 insertions(+), 579 deletions(-) delete mode 100644 klp-ui/public/websocket-test.html diff --git a/klp-ui/public/websocket-test.html b/klp-ui/public/websocket-test.html deleted file mode 100644 index 9b0c42b0..00000000 --- a/klp-ui/public/websocket-test.html +++ /dev/null @@ -1,558 +0,0 @@ - - - - - - WebSocket测试界面 - - - - - -
-
- -
- -

WebSocket实时通信测试

- -
-
- - -
- -
- - - - -
- -
-
- - -
-
- -
-
- -
-
- - -
-
- - -
-
- - -
-
- -
- 未连接 -
-
- -
-
- - -
- -
- -
-
- -
- -
-
-
- - - - \ No newline at end of file diff --git a/klp-ui/src/views/wms/delivery/components/wayBill.vue b/klp-ui/src/views/wms/delivery/components/wayBill.vue index 6204f51b..4fbf4652 100644 --- a/klp-ui/src/views/wms/delivery/components/wayBill.vue +++ b/klp-ui/src/views/wms/delivery/components/wayBill.vue @@ -83,10 +83,7 @@
-

1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：

-

- 裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。 -

+

1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。

@@ -221,7 +218,27 @@ export default { // 保存为图片 saveAsImage() { const node = this.$refs.waybillRef; - domtoimage.toPng(node) + // 确保容器在保存图片时能完整显示所有内容 + const originalWidth = node.style.width; + const originalOverflow = node.style.overflow; + + // 临时调整容器样式，确保所有内容可见 + node.style.width = 'auto'; + node.style.overflow = 'visible'; + + // 获取实际内容宽度 + const contentWidth = node.scrollWidth; + const contentHeight = node.scrollHeight; + + domtoimage.toPng(node, { + width: contentWidth, + height: contentHeight, + style: { + width: `${contentWidth}px`, + height: `${contentHeight}px`, + overflow: 'visible' + } + }) .then(dataUrl => { const link = document.createElement('a'); link.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || Date.now()}.png`; @@ -231,18 +248,45 @@ export default { .catch(error => { console.error('保存图片失败:', error); this.$message.error('保存图片失败'); + }) + .finally(() => { + // 恢复原始样式 + node.style.width = originalWidth; + node.style.overflow = originalOverflow; }); }, // 打印发货单 printWaybill() { const node = this.$refs.waybillRef; + // 确保容器在打印时能完整显示所有内容 + const originalWidth = node.style.width; + const originalOverflow = node.style.overflow; + + // 临时调整容器样式，确保所有内容可见 + node.style.width = 'auto'; + node.style.overflow = 'visible'; + + // 获取实际内容宽度 + const contentWidth = node.scrollWidth; + printJS({ printable: node, - maxWidth: 1200, + maxWidth: contentWidth, type: 'html', scanStyles: true, + style: ` + @page { size: A4 landscape; margin: 1cm; } + .waybill-container { width: 100%; max-width: none; overflow: visible; } + .waybill-table { width: 100%; table-layout: auto; } + `, targetStyles: ['*'] }); + + // 恢复原始样式 + setTimeout(() => { + node.style.width = originalWidth; + node.style.overflow = originalOverflow; + }, 100); } } } @@ -250,15 +294,16 @@ export default {