DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch '0.8.X' of https://gitee.com/hdka/klp-oa into 0.8.X

Browse Source
This commit is contained in:
砂糖
2026-01-09 20:12:26 +08:00
parent c4a15b0456 d408b37ead
commit 415094f33c
1 changed files with 69 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
View File

@@ -1,46 +1,63 @@
<template> <template>
<div class="label-container" :style="{ '--print-scale': printScale }"> <div class="label-container" :style="{ '--print-scale': printScale }">
<table class="material-label-table"> <table class="material-label-table">
<!-- 调整第一行结构，使label和value各占2列（等宽） --> <!-- 调整第一行结构，左侧内容扩大，右侧二维码减小边距 -->
<tr> <tr>
<td colspan="3" style="padding: 0;"> <td colspan="2" style="padding: 0; width: 50%;">
<div <div
style=" style="
display: flex; display: flex;
height: 100%; height: 100%;
align-items: space-evenly; align-items: space-evenly;
text-align: center; text-align: center;
justify-content: space-evenly; justify-content: space-evenly;
flex-direction: column; flex-direction: column;
font-size: 13px;
"> ">
<div style="display: flex; flex: 1; align-items: center;"> <div style="display: flex; flex: 1; align-items: center;">
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box;" class="label-cell"> <div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="label-cell">
料卷号 料卷号
</div> </div>
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box;" class="value-cell"> <div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="value-cell">
{{ content.enterCoilNo || '' }} {{ content.enterCoilNo || '' }}
</div> </div>
</div> </div>
<div style="display: flex; flex: 1; align-items: center;"> <div style="display: flex; flex: 1; align-items: center;">
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box;" class="label-cell"> <div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="label-cell">
逻辑库区 逻辑库区
</div> </div>
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box;" class="value-cell"> <div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="value-cell">
<input type="text" class="nob" :value="content.warehouseName || ''" /> <input type="text" class="nob" :value="content.warehouseName || ''" />
</div> </div>
</div> </div>
<div style="display: flex; flex: 1; align-items: center;"> <div style="display: flex; flex: 1; align-items: center;">
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box;" class="label-cell"> <div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="label-cell">
实际库区 实际库区
</div> </div>
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box;" class="value-cell"> <div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="value-cell">
<input type="text" class="nob" :value="content.actualWarehouseName || ''" /> <input type="text" class="nob" :value="content.actualWarehouseName || ''" />
</div> </div>
</div> </div>
<div style="display: flex; flex: 1; align-items: center;">
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="label-cell">
规格(mm)
</div>
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="value-cell">
<input type="text" class="nob" :value="content.specification || ''" />
</div>
</div>
<div style="display: flex; flex: 1; align-items: center;">
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="label-cell">
生产班组
</div>
<div style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;" class="value-cell">
<input type="text" class="nob" :value="content.team || ''" />
</div>
</div>
</div> </div>
</td> </td>
<td class="value-cell" colspan="1"> <td class="value-cell" colspan="4" style="width: 50%; padding: 2px; text-align: center; vertical-align: middle;">
<QRCode :content="content.qrcodeRecordId || ' '" :size="80" /> <QRCode :content="content.qrcodeRecordId || ' '" :size="130" />
</td> </td>
</tr> </tr>
<!-- <tr> <!-- <tr>
@@ -56,34 +73,25 @@
</td> </td>
</tr> --> </tr> -->
<tr> <tr>
<td class="label-cell">规格(mm)</td> <td class="label-cell" style="width: 16.67%; padding: 4px;">净重</td>
<td class="value-cell"> <td class="value-cell" colspan="2" style="width: 33.33%; padding: 4px;">
<input type="text" class="nob" :value="content.specification || ''" />
</td>
<td class="label-cell">净重</td>
<td class="value-cell">
<input type="text" class="nob" :value="content.netWeight || ''" /> <input type="text" class="nob" :value="content.netWeight || ''" />
</td> </td>
</tr> <td class="label-cell" style="width: 16.67%; padding: 4px;">材质</td>
<tr> <td class="value-cell" colspan="2" style="width: 33.33%; padding: 4px;">
<td class="label-cell">材质</td>
<td class="value-cell">
<input type="text" class="nob" :value="content.material || ''" /> <input type="text" class="nob" :value="content.material || ''" />
</td> </td>
<td class="label-cell">下道</td>
<td class="value-cell">
<input type="text" class="nob" :value="content.nextProcess || ''" />
</td>
</tr> </tr>
<tr> <tr>
<td class="label-cell">生产班组</td> <td class="label-cell" style="width: 16.67%; padding: 4px;">时间</td>
<td class="value-cell"> <td class="value-cell" colspan="2" style="width: 33.33%; padding: 4px;">
<input type="text" class="nob" :value="content.team || ''" />
</td>
<td class="label-cell">时间</td>
<td class="value-cell">
<input type="text" class="nob" :value="content.updateTime || ''" /> <input type="text" class="nob" :value="content.updateTime || ''" />
</td> </td>
<td class="label-cell" style="width: 16.67%; padding: 4px;">下道</td>
<td class="value-cell" colspan="2" style="width: 33.33%; padding: 4px;">
<input type="text" class="nob" :value="content.nextProcess || ''" />
</td>
</tr> </tr>
</table> </table>
</div> </div>
@@ -129,11 +137,11 @@ export default {
// 使用 matchMedia 监听打印状态（更可靠） // 使用 matchMedia 监听打印状态（更可靠）
this.printMediaQuery = window.matchMedia('print'); this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange); this.printMediaQuery.addListener(this.handlePrintMediaChange);
// 监听打印事件作为备用 // 监听打印事件作为备用
window.addEventListener('beforeprint', this.handleBeforePrint); window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint); window.addEventListener('afterprint', this.handleAfterPrint);
// 计算初始缩放比例 // 计算初始缩放比例
this.$nextTick(() => { this.$nextTick(() => {
this.calculatePrintScale(); this.calculatePrintScale();
@@ -169,41 +177,41 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
const container = this.$el; const container = this.$el;
if (!container) return; if (!container) return;
// 纸张尺寸：100mm x 80mm // 纸张尺寸：180mm x 100mm
const dpi = 96; // 标准 DPI const dpi = 96; // 标准 DPI
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
const paperWidthMm = this.paperWidthMm || 100; const paperWidthMm = this.paperWidthMm || 100;
const paperHeightMm = this.paperHeightMm || 80; const paperHeightMm = this.paperHeightMm || 80;
const marginMm = 2; const marginMm = 2;
const paperWidthPx = paperWidthMm * mmToPx; const paperWidthPx = paperWidthMm * mmToPx;
const paperHeightPx = paperHeightMm * mmToPx; const paperHeightPx = paperHeightMm * mmToPx;
const marginPx = marginMm * mmToPx; const marginPx = marginMm * mmToPx;
// 获取内容实际尺寸 // 获取内容实际尺寸
const rect = container.getBoundingClientRect(); const rect = container.getBoundingClientRect();
let contentWidth = rect.width; let contentWidth = rect.width;
let contentHeight = rect.height; let contentHeight = rect.height;
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight // 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
if (contentWidth === 0 || contentHeight === 0) { if (contentWidth === 0 || contentHeight === 0) {
contentWidth = container.scrollWidth || contentWidth; contentWidth = container.scrollWidth || contentWidth;
contentHeight = container.scrollHeight || contentHeight; contentHeight = container.scrollHeight || contentHeight;
} }
// 计算可用空间（减去边距） // 计算可用空间（减去边距）
const availableWidth = paperWidthPx - marginPx * 2; const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2; const availableHeight = paperHeightPx - marginPx * 2;
// 计算缩放比例 // 计算缩放比例
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1; const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1; const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大） // 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
this.printScale = Math.min(scaleX, scaleY, 1); this.printScale = Math.min(scaleX, scaleY, 1);
// 设置CSS变量和内联样式 // 设置CSS变量和内联样式
container.style.setProperty('--print-scale', this.printScale); container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${paperWidthMm}mm`); container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
@@ -231,7 +239,6 @@ export default {
flex-direction: column; /* 子元素垂直排列 */ flex-direction: column; /* 子元素垂直排列 */
font-family: "SimSun", serif; font-family: "SimSun", serif;
box-sizing: border-box; /* 确保内边距/边框不影响总尺寸 */ box-sizing: border-box; /* 确保内边距/边框不影响总尺寸 */
overflow: visible; /* 确保所有内容可见，不被裁剪 */
} }
.material-label-table { .material-label-table {
@@ -240,6 +247,7 @@ export default {
table-layout: fixed; table-layout: fixed;
flex-grow: 1; /* 让表格拉伸，占满剩余垂直空间 */ flex-grow: 1; /* 让表格拉伸，占满剩余垂直空间 */
height: 0; /* 配合flex-grow，自动计算高度 */ height: 0; /* 配合flex-grow，自动计算高度 */
border: 1px solid #333; /* 确保表格有最外层边框 */
} }
/* 四列均分宽度，每列占25% */ /* 四列均分宽度，每列占25% */
@@ -250,6 +258,10 @@ export default {
/* width: 25%; */ /* width: 25%; */
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
word-break: break-all;
overflow-wrap: break-word;
white-space: normal;
overflow: hidden;
} }
.label-cell { .label-cell {
@@ -268,12 +280,16 @@ export default {
outline: none; outline: none;
background: transparent; background: transparent;
text-align: center; text-align: center;
font-size: inherit;
word-break: break-all;
overflow-wrap: break-word;
white-space: normal;
} }
/* 打印样式 - 强制单页，适配100mm x 80mm纸张，保持原有样式不变 */ /* 打印样式 - 强制单页，适配180mm x 100mm纸张，保持原有样式不变 */
@media print { @media print {
@page { @page {
size: 100mm 80mm; size: 180mm 100mm;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
@@ -304,15 +320,15 @@ export default {
break-before: avoid !important; break-before: avoid !important;
orphans: 999 !important; orphans: 999 !important;
widows: 999 !important; widows: 999 !important;
/* 应用动态缩放，保持原有样式 */ /* 应用动态缩放，保持原有样式 */
transform: scale(var(--print-scale, 1)) !important; transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important; transform-origin: top left !important;
/* 确保缩放后不超出纸张 */ /* 确保缩放后不超出纸张 */
max-width: var(--paper-width, 100mm) !important; max-width: var(--paper-width, 100mm) !important;
max-height: var(--paper-height, 80mm) !important; max-height: var(--paper-height, 80mm) !important;
overflow: hidden !important; overflow: hidden !important;
} }
} }
</style> </style>