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

feat(wms): 添加分条按钮并更新外标签预览样式

Browse Source 
1. 在do.vue面板中添加分条按钮
2. 更新外标签预览样式，添加怕湿图标
3. 删除不再使用的标签预览组件
This commit is contained in:
砂糖
2026-01-22 10:47:11 +08:00
parent 97819c0f0a
commit 1fa7fc17d3
10 changed files with 150 additions and 1357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
View File

@@ -1,117 +1,121 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-box">
<!-- 顶部公司信息 -->
<div class="company-header">
<img :src="logo" alt="Company Logo" class="company-logo" />
<div class="company-name">
科伦普<br />
<span class="english-name">KE LUN PU</span>
</div>
<div class="title">嘉祥科伦普重工有限公司</div>
</div>
<!-- 核心信息网格布局：替代原表格 -->
<div class="info-grid">
<!-- 第一行：订货单位 + 合同号 -->
<div class="info-grid-item label-cell">订货单位</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.orderUnit || ''" />
</div>
<div class="info-grid-item label-cell">合同号</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.contractNumber || ''" />
<!-- 顶部公司信息 -->
<div class="company-header">
<div style="display: flex; align-items: center;">
<img :src="logo" alt="Company Logo" class="company-logo" />
<div class="company-name">
科伦普<br />
<span class="english-name">KE LUN PU</span>
</div>
</div>
<div class="title">嘉祥科伦普重工有限公司</div>
<img src="@/assets/images/pashi.png" alt="怕湿" class="company-logo" />
</div>
<!-- 第二行：执行标准 + 钢卷号 -->
<div class="info-grid-item label-cell">产品名称</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.itemName || ''" />
</div>
<div class="info-grid-item label-cell">执行标准</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.executionStandard || ''" />
</div>
<div class="info-grid-item label-cell">钢卷号</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.currentCoilNo || ''" />
<!-- 核心信息网格布局：替代原表格 -->
<div class="info-grid">
<!-- 第一行：订货单位 + 合同号 -->
<div class="info-grid-item label-cell">订货单位</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.orderUnit || ''" />
</div>
<div class="info-grid-item label-cell">合同号</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.contractNumber || ''" />
</div>
<!-- 第二行：执行标准 + 钢卷号 -->
<div class="info-grid-item label-cell">产品名称</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.itemName || ''" />
</div>
<div class="info-grid-item label-cell">执行标准</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.executionStandard || ''" />
</div>
<div class="info-grid-item label-cell">钢卷号</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.currentCoilNo || ''" />
</div>
<!-- 第三行：原料卷号 + 规格 -->
<div class="info-grid-item label-cell">原料卷号</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.enterCoilNo || ''" />
</div>
<div class="info-grid-item label-cell">规格</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.specification || ''" />
</div>
<!-- 第四行：材质 + 表面质量 -->
<div class="info-grid-item label-cell">材质</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="materialWithManufacturer || ''" />
</div>
<div class="info-grid-item label-cell">质量要求</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.qualityStatus || ''" />
</div>
<!-- 第五行：表面处理 + 剪切要求 -->
<div class="info-grid-item label-cell">表面处理</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.surfaceTreatmentDesc || ''" />
</div>
<div class="info-grid-item label-cell">切边要求</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.trimmingRequirement || ''" />
</div>
<!-- 第六行：包装种类 + 毛重 -->
<div class="info-grid-item label-cell">包装要求</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.packagingRequirement || ''" />
</div>
<div class="info-grid-item label-cell">毛重</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.grossWeight || ''" />
</div>
<!-- 第七行：净重 + 参考长度 -->
<div class="info-grid-item label-cell">净重</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.netWeight || ''" />
</div>
<div class="info-grid-item label-cell">参考长度</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.length || ''" />
</div>
<!-- 第八行：生产日期（跨3列） -->
<div class="info-grid-item label-cell">生产日期</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="parseTime(content.updateTime, '{y}-{m}-{d}')" />
</div>
</div>
<!-- 第三行：原料卷号 + 规格 -->
<div class="info-grid-item label-cell">原料卷号</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.enterCoilNo || ''" />
</div>
<div class="info-grid-item label-cell">规格</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.specification || ''" />
</div>
<!-- 第四行：材质 + 表面质量 -->
<div class="info-grid-item label-cell">材质</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="materialWithManufacturer || ''" />
</div>
<div class="info-grid-item label-cell">质量要求</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.qualityStatus || ''" />
</div>
<!-- 第五行：表面处理 + 剪切要求 -->
<div class="info-grid-item label-cell">表面处理</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.surfaceTreatmentDesc || ''" />
</div>
<div class="info-grid-item label-cell">切边要求</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.trimmingRequirement || ''" />
</div>
<!-- 第六行：包装种类 + 毛重 -->
<div class="info-grid-item label-cell">包装要求</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.packagingRequirement || ''" />
</div>
<div class="info-grid-item label-cell">毛重</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.grossWeight || ''" />
</div>
<!-- 第七行：净重 + 参考长度 -->
<div class="info-grid-item label-cell">净重</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.netWeight || ''" />
</div>
<div class="info-grid-item label-cell">参考长度</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.length || ''" />
</div>
<!-- 第八行：生产日期（跨3列） -->
<div class="info-grid-item label-cell">生产日期</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="parseTime(content.updateTime, '{y}-{m}-{d}')" />
<!-- 底部信息 -->
<div class="footer-info">
<div class="address">
地址：山东省济宁市嘉祥县开发区生物产业园区新民路北<br />
<span class="english-address">Address: North Extension of Xinmin Road,Bio-Industrial Park,Development
Zone,<br />
Jiaxiang County,Jining City,Shandong Province</span>
<br />
<span>
TEL：0537-6625068 0537-6625067
</span>
</div>
<div class="contact-timestamp">
<!-- 放大二维码，占用更多下方空间，弱化底部留白感 -->
<QRCode :content="content.qrcodeRecordId || ''" :size="90" />
</div>
</div>
</div>
<!-- 底部信息 -->
<div class="footer-info">
<div class="address">
地址：山东省济宁市嘉祥县开发区生物产业园区新民路北<br />
<span class="english-address">Address: North Extension of Xinmin Road,Bio-Industrial Park,Development Zone,<br />
Jiaxiang County,Jining City,Shandong Province</span>
<br />
<span>
TEL：0537-6625068 0537-6625067
</span>
</div>
<div class="contact-timestamp">
<!-- 放大二维码，占用更多下方空间，弱化底部留白感 -->
<QRCode :content="content.qrcodeRecordId || ''" :size="90" />
</div>
</div>
</div>
</div>
</template>
@@ -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;

5
klp-ui/src/views/wms/coil/panels/do.vue
View File

@@ -171,7 +171,7 @@
</div>
</div>
<div class="card-body">
<div class="card-body" style="position: relative;">
<div class="info-list">
<div class="info-item">
<span class="info-label">入场：</span>
@@ -195,6 +195,9 @@
<span class="info-value">{{ item.netWeight || '—' }}t</span>
</div>
</div>
<el-button style="position: absolute; bottom: 10px; right: 10px;" type="success" icon="el-icon-scissors" size="mini" @click="handleStartSplit(item)"
:loading="item.picking" class="action-btn">分条</el-button>
</div>
<div class="card-footer">