diff --git a/klp-ui/src/assets/images/pashi.png b/klp-ui/src/assets/images/pashi.png new file mode 100644 index 00000000..ecbedcbd Binary files /dev/null and b/klp-ui/src/assets/images/pashi.png differ diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue index 4010d6c8..1effb3cf 100644 --- a/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue +++ b/klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue @@ -1,117 +1,121 @@ @@ -179,11 +183,11 @@ export default { // 使用 matchMedia 监听打印状态(更可靠) this.printMediaQuery = window.matchMedia('print'); this.printMediaQuery.addListener(this.handlePrintMediaChange); - + // 监听打印事件作为备用 window.addEventListener('beforeprint', this.handleBeforePrint); window.addEventListener('afterprint', this.handleAfterPrint); - + // 计算初始缩放比例 this.$nextTick(() => { this.calculatePrintScale(); @@ -219,49 +223,49 @@ export default { this.$nextTick(() => { const container = this.$el; if (!container) return; - + // 纸张尺寸:180mm x 100mm // 在打印时,使用 mm 单位更准确 // 1mm = 3.779527559px (96 DPI) 或 1mm = 3.779527559px (72 DPI) // 为了更准确,我们直接使用 mm 转 px 的通用计算 const dpi = 96; // 标准 DPI const mmToPx = dpi / 25.4; // 1mm = 3.779527559px - + const paperWidthMm = this.paperWidthMm || 180; const paperHeightMm = this.paperHeightMm || 100; const marginMm = 2; - + const paperWidthPx = paperWidthMm * mmToPx; const paperHeightPx = paperHeightMm * mmToPx; const marginPx = marginMm * mmToPx; - + // 获取内容实际尺寸(在屏幕上的尺寸) const rect = container.getBoundingClientRect(); let contentWidth = rect.width; let contentHeight = rect.height; - + // 如果尺寸为0或无效,尝试使用 scrollWidth/scrollHeight if (contentWidth === 0 || contentHeight === 0) { contentWidth = container.scrollWidth || contentWidth; contentHeight = container.scrollHeight || contentHeight; } - + // 计算可用空间(减去边距) const availableWidth = paperWidthPx - marginPx * 2; const availableHeight = paperHeightPx - marginPx * 2; - + // 计算缩放比例 const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1; const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1; - + // 取较小的缩放比例,确保内容完全适配(不超过1,不放大) this.printScale = Math.min(scaleX, scaleY, 1); - + // 设置CSS变量和内联样式 container.style.setProperty('--print-scale', this.printScale); container.style.setProperty('--paper-width', `${paperWidthMm}mm`); container.style.setProperty('--paper-height', `${paperHeightMm}mm`); - + console.log('打印缩放计算:', { contentSize: { width: contentWidth, height: contentHeight }, paperSize: { width: paperWidthPx, height: paperHeightPx }, @@ -311,8 +315,10 @@ export default { .company-header { display: flex; align-items: center; + justify-content: space-between; margin-bottom: 0.3em; - position: relative; /* 为绝对定位的 title 提供定位上下文 */ + position: relative; + /* 为绝对定位的 title 提供定位上下文 */ } .company-logo { @@ -328,13 +334,17 @@ export default { } .title { - position: absolute; /* 绝对定位,脱离 flex 流 */ - left: 50%; /* 从左边50%开始 */ - transform: translateX(-50%); /* 向左移动自身宽度的50%,实现居中 */ + position: absolute; + /* 绝对定位,脱离 flex 流 */ + left: 50%; + /* 从左边50%开始 */ + transform: translateX(-50%); + /* 向左移动自身宽度的50%,实现居中 */ font-size: 2em; font-weight: bold; text-align: center; - white-space: nowrap; /* 防止文字换行 */ + white-space: nowrap; + /* 防止文字换行 */ } .english-name { @@ -356,8 +366,10 @@ export default { /* 网格布局核心样式 */ .info-grid { display: grid; - grid-template-columns: repeat(4, 1fr); /* 4列等宽 */ - gap: 0; /* 消除网格间距,确保边框连贯 */ + grid-template-columns: repeat(4, 1fr); + /* 4列等宽 */ + gap: 0; + /* 消除网格间距,确保边框连贯 */ margin-bottom: 0.5em; } @@ -377,7 +389,8 @@ export default { /* 生产日期跨3列 */ .date-colspan { - grid-column: span 3; /* 占据3列 */ + grid-column: span 3; + /* 占据3列 */ } .footer-info { @@ -398,8 +411,10 @@ export default { opacity: 0.9; font-size: 1.1em; line-height: 1.15; - word-break: normal; /* 正常换行,只在单词边界(空格)处换行 */ - overflow-wrap: normal; /* 不在单词内部断行,保持单词完整 */ + word-break: normal; + /* 正常换行,只在单词边界(空格)处换行 */ + overflow-wrap: normal; + /* 不在单词内部断行,保持单词完整 */ } .contact-timestamp { @@ -429,14 +444,15 @@ export default { print-color-adjust: exact !important; } - html, body { + html, + body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* 隐藏所有其他内容,只显示标签容器 */ - body > *:not(.label-container) { + body>*:not(.label-container) { display: none !important; } @@ -450,11 +466,11 @@ export default { break-before: avoid !important; orphans: 999 !important; widows: 999 !important; - + /* 应用动态缩放,保持原有样式 */ transform: scale(var(--print-scale, 1)) !important; transform-origin: top left !important; - + /* 确保缩放后不超出纸张 */ max-width: var(--paper-width, 180mm) !important; max-height: var(--paper-height, 100mm) !important; diff --git a/klp-ui/src/views/wms/coil/panels/do.vue b/klp-ui/src/views/wms/coil/panels/do.vue index 92e2c358..2eadfb57 100644 --- a/klp-ui/src/views/wms/coil/panels/do.vue +++ b/klp-ui/src/views/wms/coil/panels/do.vue @@ -171,7 +171,7 @@ -
+
入场: @@ -195,6 +195,9 @@ {{ item.netWeight || '—' }}t
+ + 分条