From ea9cad98744861948edf30fbbb371c7cc28be411 Mon Sep 17 00:00:00 2001 From: 86156 <823267011@qq.com> Date: Sat, 31 Jan 2026 16:33:10 +0800 Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8D=B0=E5=87=BA=E8=B4=A7=E5=8D=95?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/resources/application-dev.yml | 11 +- .../views/wms/delivery/components/wayBill.vue | 249 ++++++++++++------ 2 files changed, 172 insertions(+), 88 deletions(-) diff --git a/klp-admin/src/main/resources/application-dev.yml b/klp-admin/src/main/resources/application-dev.yml index cc7cd0ad..d063ec83 100644 --- a/klp-admin/src/main/resources/application-dev.yml +++ b/klp-admin/src/main/resources/application-dev.yml @@ -76,13 +76,22 @@ spring: username: klp password: KeLunPu@123 # 从库数据源 - slave: + acid: lazy: true type: ${spring.datasource.type} driverClassName: com.mysql.cj.jdbc.Driver url: jdbc:mysql://140.143.206.120:13306/klp_pocketfactory?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true username: klp password: KeLunPu@123 + + # 从库数据源（镀锌一库） + galvanize1: + lazy: true + type: ${spring.datasource.type} + driverClassName: com.mysql.cj.jdbc.Driver + url: jdbc:mysql://140.143.206.120:3306/cgldb?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true + username: klp + password: KeLunPu123@ # oracle: # type: ${spring.datasource.type} # driverClassName: oracle.jdbc.OracleDriver diff --git a/klp-ui/src/views/wms/delivery/components/wayBill.vue b/klp-ui/src/views/wms/delivery/components/wayBill.vue index 4b5bb5bd..4d6fbaef 100644 --- a/klp-ui/src/views/wms/delivery/components/wayBill.vue +++ b/klp-ui/src/views/wms/delivery/components/wayBill.vue @@ -53,20 +53,20 @@ 数量（件） 重量（T） 单价 - 备注 + - +
- + @@ -87,11 +87,7 @@ - -
- -
- + @@ -130,6 +126,11 @@
+
+ 上一页 + 第 {{ currentPage }} / {{ totalPages }} 页 + 下一页 +
保存为图片 打印
@@ -155,6 +156,9 @@ export default { }, data() { return { + currentPage: 1, + perPage: 5, + totalPages: 1, // 本地可编辑的发货单数据 localWaybill: { consigneeUnit: '', @@ -168,7 +172,9 @@ export default { pickupLocation: '' }, // 本地可编辑的发货单明细 - localWaybillDetails: [] + localWaybillDetails: [], + // 预览/打印用明细（每页固定5行，不足补空行） + displayWaybillDetails: [] }; }, watch: { @@ -194,18 +200,52 @@ export default { }, waybillDetails: { handler(newVal) { - console.log('waybillDetails', newVal); if (newVal && Array.isArray(newVal)) { this.localWaybillDetails = [...newVal]; } else { this.localWaybillDetails = []; } + this.refreshPagination(); }, immediate: true, deep: true } }, methods: { + buildPage(details, page) { + const perPage = this.perPage; + const src = Array.isArray(details) ? details : []; + const start = (page - 1) * perPage; + const pageRows = src.slice(start, start + perPage).map((x) => ({ ...x })); + while (pageRows.length < perPage) { + pageRows.push({ + productName: '', + edgeType: '', + packageType: '', + actualWarehouseName: '', + settlementType: '', + rawMaterialFactory: '', + coilNumber: '', + specification: '', + material: '', + quantity: '', + weight: '', + unitPrice: '' + }); + } + return pageRows; + }, + refreshPagination() { + const src = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : []; + this.totalPages = Math.max(1, Math.ceil(src.length / this.perPage)); + if (this.currentPage > this.totalPages) this.currentPage = this.totalPages; + if (this.currentPage < 1) this.currentPage = 1; + this.displayWaybillDetails = this.buildPage(src, this.currentPage); + }, + changePage(next) { + this.currentPage = next; + this.refreshPagination(); + }, // 从日期字符串中提取年份 getYearFromDate(dateStr) { if (dateStr) { @@ -273,55 +313,57 @@ export default { // 打印发货单 async printWaybill() { const node = this.$refs.waybillRef; - // 确保容器在打印时能完整显示所有内容 - const originalWidth = node.style.width; - const originalHeight = node.style.height; - const paperWidthMm = 297; - const paperHeightMm = 180; - const originalOverflow = node.style.overflow; + const paperWidthMm = 241; + const paperHeightMm = 140; - // 临时调整容器样式，确保所有内容可见 - node.style.width = 'auto'; - node.style.overflow = 'visible'; - - // 获取实际内容宽度 - const contentWidth = node.scrollWidth; - const contentHeight = node.scrollHeight; - - // console.log('contentWidth', contentWidth, originalWidth, originalHeight); - // 改用html2canvas + pdf-lib打印pdf - const canvas = await html2canvas(node, { - backgroundColor: '#ffffff', - scale: 3, - useCORS: true, - // 让 html2canvas 为频繁读回优化 Canvas（与批量导出一致） - willReadFrequently: true, - // 确保按元素尺寸截图，明确指定宽高 - width: contentWidth, - height: contentHeight, - windowWidth: contentWidth, - windowHeight: contentHeight, - }); - // 5. 使用 pdf-lib 生成单页 PDF（占满整张纸，无边距） + const mmToPx = (mm) => (mm * 96) / 25.4; const mmToPt = 72 / 25.4; const pageWidthPt = paperWidthMm * mmToPt; const pageHeightPt = paperHeightMm * mmToPt; - const pdfDoc = await PDFDocument.create(); - console.log('canvas', canvas); - const png = canvas.toDataURL('image/png'); - const imgPng = await pdfDoc.embedPng(png); - // 确保页面尺寸正确：宽100mm，高80mm（横向） - const page = pdfDoc.addPage([pageWidthPt, pageHeightPt]); + const pageWidthPx = Math.round(mmToPx(paperWidthMm)); + const pageHeightPx = Math.round(mmToPx(paperHeightMm)); - // 直接拉伸填充整个PDF页面，不留边距，确保占满整张纸 - // 从(0,0)开始，直接填充整个页面尺寸 - page.drawImage(imgPng, { - x: 0, - y: 0, - width: pageWidthPt, - height: pageHeightPt - }); + const allDetails = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : []; + const totalPages = Math.max(1, Math.ceil(allDetails.length / this.perPage)); + + const originalPage = this.currentPage; + const originalDisplay = this.displayWaybillDetails; + + const pdfDoc = await PDFDocument.create(); + + try { + for (let page = 1; page <= totalPages; page++) { + this.currentPage = page; + this.displayWaybillDetails = this.buildPage(allDetails, page); + await this.$nextTick(); + + const canvas = await html2canvas(node, { + backgroundColor: '#ffffff', + scale: 3, + useCORS: true, + willReadFrequently: true, + width: pageWidthPx, + height: pageHeightPx, + windowWidth: pageWidthPx, + windowHeight: pageHeightPx + }); + + const png = canvas.toDataURL('image/png'); + const imgPng = await pdfDoc.embedPng(png); + const pdfPage = pdfDoc.addPage([pageWidthPt, pageHeightPt]); + pdfPage.drawImage(imgPng, { + x: 0, + y: 0, + width: pageWidthPt, + height: pageHeightPt + }); + } + } finally { + this.currentPage = originalPage; + this.displayWaybillDetails = originalDisplay; + this.refreshPagination(); + } const pdfBytes = await pdfDoc.save(); const blob = new Blob([pdfBytes], { type: 'application/pdf' }); @@ -331,18 +373,11 @@ export default { if (!win) { const a = document.createElement('a'); a.href = url; - a.download = `标签_${new Date().getTime()}.pdf`; + a.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || new Date().getTime()}.pdf`; document.body.appendChild(a); a.click(); document.body.removeChild(a); } - - - // 恢复原始样式 - setTimeout(() => { - node.style.width = originalWidth; - node.style.overflow = originalOverflow; - }, 100); } } } @@ -350,16 +385,15 @@ export default {