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

Merge remote-tracking branch 'origin/0.8.X' into 0.8.X

Browse Source
This commit is contained in:
Joshi
2026-01-22 14:08:47 +08:00
parent 986f21afa0 1fa7fc17d3
commit 7585c2cc46
10 changed files with 150 additions and 1357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
klp-ui/src/assets/images/pashi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

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">

120
klp-ui/src/views/wms/print/pages/tt/LabelRender/ForgeTagPreview.vue
View File

@@ -1,120 +0,0 @@
<template>
<div class="label-container">
<div class="company-name">嘉祥科伦普重工有限公司</div>
<div class="label-title">力学性能标签</div>
<table class="info-table">
<tr>
<td class="label-cell">卷号</td>
<td class="value-cell">{{ content.coilNumber || '' }}</td>
<td class="label-cell">屈服</td>
<td class="value-cell">{{ content.yieldStrength || '' }}</td>
</tr>
<tr>
<td class="label-cell">规格</td>
<td class="value-cell">{{ content.specification || '' }}</td>
<td class="label-cell">抗拉</td>
<td class="value-cell">{{ content.tensileStrength || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">延伸</td>
<td class="value-cell">{{ content.elongation || '' }}</td>
</tr>
<tr>
<td class="label-cell">原料厂家</td>
<td class="value-cell">{{ content.rawMaterialFactory || '' }}</td>
<td class="label-cell">锌层质量</td>
<td class="value-cell">{{ content.platingQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">备注</td>
<td class="value-cell" colspan="3">{{ content.remark || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'MechanicalPropertyLabel',
props: {
content: {
type: Object,
default: () => ({
coilNumber: '',
yieldStrength: '',
specification: '',
tensileStrength: '',
material: '',
elongation: '',
rawMaterialFactory: '',
platingQuality: '',
remark: ''
})
}
}
}
</script>
<style scoped>
.label-container {
width: 50em; /* 容器宽度（可根据需求调整） */
min-height: 30em; /* 容器最小高度 */
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: "SimSun", serif;
font-size: 8px;
line-height: 1.2;
display: flex;
flex-direction: column; /* 垂直分布子元素 */
}
.company-name {
text-align: center;
font-weight: bold;
margin-bottom: 1px;
font-size: 2em;
}
.label-title {
text-align: center;
font-weight: bold;
margin-bottom: 2px;
border-bottom: 1px solid #000;
padding-bottom: 1px;
font-size: 2em;
}
.info-table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
font-size: 7px;
flex-grow: 1; /* 拉伸占据剩余垂直空间 */
}
.info-table td {
border: 1px solid #000; /* 表格单元格边框 */
text-align: center;
vertical-align: middle;
font-size: 2em;
width: 25%; /* 4列均分宽度，每列占25%，确保 label/value 空间相同 */
}
.label-cell {
font-weight: bold;
/* 去掉背景色：删除原有的 background-color 声明 */
}
.value-cell {
background-color: #fff; /* 可根据需求保留/删除，与原图视觉一致 */
}
.label-footnote {
margin-top: 2px;
text-align: center;
font-size: 7px;
color: #555;
}
</style>

210
klp-ui/src/views/wms/print/pages/tt/LabelRender/OuterTagPreview.vue
View File

@@ -1,210 +0,0 @@
<template>
<div class="label-container">
<!-- 顶部公司信息 -->
<div class="company-header">
<img :src="logo" alt="Company Logo" class="company-logo" />
<div class="company-name">
嘉祥科伦普重工有限公司<br />
<span class="english-name">Jiaxiang KLP Heavy Industry Co., Ltd.</span>
</div>
</div>
<!-- 产品标题 -->
<div class="product-title">
{{ content.productName || '产品名称' }}
</div>
<!-- 核心信息表格：每行四列 = 2个键值对 -->
<table class="info-table">
<tr>
<td class="label-cell">订货单位</td>
<td class="value-cell">{{ content.orderUnit || '' }}</td>
<td class="label-cell">合同号</td>
<td class="value-cell">{{ content.contractNumber || '' }}</td>
</tr>
<tr>
<td class="label-cell">执行标准</td>
<td class="value-cell">{{ content.executionStandard || '' }}</td>
<td class="label-cell">钢卷号</td>
<td class="value-cell">{{ content.coilNumber || '' }}</td>
</tr>
<tr>
<td class="label-cell">原料卷号</td>
<td class="value-cell">{{ content.rawBlankNumber || '' }}</td>
<td class="label-cell">规格</td>
<td class="value-cell">{{ content.specification || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">表面质量</td>
<td class="value-cell">{{ content.surfaceQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">表面处理</td>
<td class="value-cell">{{ content.surfaceTreatment || '' }}</td>
<td class="label-cell">剪切要求</td>
<td class="value-cell">{{ content.cuttingRequirements || '' }}</td>
</tr>
<tr>
<td class="label-cell">包装种类</td>
<td class="value-cell">{{ content.packagingType || '' }}</td>
<td class="label-cell">毛重</td>
<td class="value-cell">{{ content.grossWeight || '' }}</td>
</tr>
<tr>
<td class="label-cell">净重</td>
<td class="value-cell">{{ content.netWeight || '' }}</td>
<td class="label-cell">参考长度</td>
<td class="value-cell">{{ content.referenceLength || '' }}</td>
</tr>
<tr>
<td class="label-cell">生产日期</td>
<td class="value-cell" colspan="3">{{ content.productionDate || '' }}</td>
</tr>
</table>
<!-- 底部信息 -->
<div class="footer-info">
<div class="address">
地址：{{ content.address || '' }}<br />
<span class="english-address">{{ content.englishAddress || '' }}</span>
</div>
<div class="contact-timestamp">
<div class="contact">TEL：{{ content.tel || '' }}</div>
<div class="timestamp">{{ content.timestamp || '' }}</div>
</div>
</div>
</div>
</template>
<script>
import logo from '@/assets/logo/logo.png'
export default {
name: 'MetalSheetLabel',
props: {
content: {
type: Object,
default: () => ({
// form3 所有字段
orderUnit: '',
contractNumber: '',
productName: '镀锌卷板合格品(GI)',
executionStandard: '',
coilNumber: 'D2Z125031809202',
rawBlankNumber: '',
specification: '2.28*1250',
material: '',
surfaceQuality: '',
surfaceTreatment: '环保钝化/不涂油',
cuttingRequirements: '',
packagingType: 'A03',
grossWeight: '',
netWeight: '7080',
referenceLength: '320',
productionDate: '2025-03-19',
// 底部信息字段
address: '唐山市滦州市茨榆坨工业区',
englishAddress: 'Donghai special steel, ciyutuo Industrial Zone, Luanzhou, Tangshan, Hebei province, China.',
tel: '0315-7560777',
timestamp: '2025.04.12 10:14'
})
}
},
data() {
return {
logo,
}
}
}
</script>
<style scoped>
.label-container {
width: 45em;
height: 25em;
padding: 0.5em;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
border: 1px solid #000;
}
.company-header {
display: flex;
align-items: center;
margin-bottom: 0.3em;
}
.company-logo {
width: 2.8em;
height: 2.8em;
margin-right: 0.5em;
}
.company-name {
font-size: 0.95em;
width: 100%;
line-height: 1.1;
}
.english-name {
width: 100%;
font-size: 0.6em;
opacity: 0.8;
}
.product-title {
font-size: 1.4em;
font-weight: bold;
text-align: center;
margin-bottom: 0.4em;
border-bottom: 1.5px solid #000;
padding-bottom: 0.2em;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0.5em;
table-layout: fixed;
}
.info-table td {
border: 1px solid #000;
padding: 0.25em;
font-size: 0.78em; /* 微调字体确保所有字段显示完整 */
width: 25%;
height: 2.1em;
text-align: center;
vertical-align: middle;
word-break: break-all;
}
.label-cell {
font-weight: bold;
}
.footer-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
font-size: 0.7em;
margin-top: 0.3em;
}
.address {
line-height: 1.2;
width: 65%;
}
.english-address {
opacity: 0.8;
font-size: 0.9em;
}
.contact-timestamp {
text-align: right;
line-height: 1.4;
}
</style>

89
klp-ui/src/views/wms/print/pages/tt/LabelRender/ProductionTagPreview.vue
View File

@@ -1,89 +0,0 @@
<template>
<div class="material-label-container">
<table class="material-label-table">
<!-- 调整第一行结构，使label和value各占2列（等宽） -->
<tr>
<td class="label-cell" colspan="1">料卷号</td>
<td class="value-cell" colspan="3">{{ content.coilNumber || '' }}</td>
</tr>
<tr>
<td class="label-cell">规格(mm)</td>
<td class="value-cell">{{ content.specification || '' }}</td>
<td class="label-cell">净重</td>
<td class="value-cell">{{ content.netWeight || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">下道</td>
<td class="value-cell">{{ content.nextProcess || '' }}</td>
</tr>
<tr>
<td class="label-cell">生产班组</td>
<td class="value-cell">{{ content.productionTeam || '' }}</td>
<td class="label-cell">时间</td>
<td class="value-cell">{{ content.productionDate || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'MaterialLabel',
props: {
content: {
type: Object,
default: () => ({
coilNumber: '',
specification: '',
netWeight: '',
material: '',
nextProcess: '',
productionTeam: '',
productionDate: ''
})
}
}
}
</script>
<style scoped>
.material-label-container {
border: 1px solid #333;
width: 25em;
height: 15em;
padding: 5px;
display: flex; /* 启用Flex布局 */
flex-direction: column; /* 子元素垂直排列 */
font-family: "SimSun", serif;
box-sizing: border-box; /* 确保内边距/边框不影响总尺寸 */
}
.material-label-table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
flex-grow: 1; /* 让表格拉伸，占满剩余垂直空间 */
height: 0; /* 配合flex-grow，自动计算高度 */
}
/* 四列均分宽度，每列占25% */
.material-label-table td {
border: 1px solid #333;
padding: 3px 5px;
font-size: 14px;
/* width: 25%; */
box-sizing: border-box;
text-align: center;
}
.label-cell {
background-color: #f5f5f5;
font-weight: bold;
}
.value-cell {
text-align: center;
}
</style>

112
klp-ui/src/views/wms/print/pages/tt/LabelRender/SaltSprayTagPreview.vue
View File

@@ -1,112 +0,0 @@
<template>
<div class="label-container">
<div class="company-name">嘉祥科伦普重工有限公司</div>
<div class="label-title">盐雾试验标签</div>
<table class="info-table">
<tr>
<td class="label-cell">卷号</td>
<td class="value-cell">{{ content.coilNumber || '' }}</td>
<td class="label-cell">开始时间</td>
<td class="value-cell">{{ content.startDate || '' }}</td>
</tr>
<tr>
<td class="label-cell">规格</td>
<td class="value-cell">{{ content.specification || '' }}</td>
<td class="label-cell">结束时间</td>
<td class="value-cell">{{ content.endDate || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">锌层质量</td>
<td class="value-cell">{{ content.platingQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">原料厂家</td>
<td class="value-cell" colspan="3">{{ content.rawMaterialFactory || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'SaltSprayTestLabel',
props: {
content: {
type: Object,
default: () => ({
coilNumber: '',
startDate: '',
specification: '',
endDate: '',
material: '',
rawMaterialFactory: '',
platingQuality: ''
})
}
}
}
</script>
<style scoped>
.label-container {
width: 50em; /* 容器宽度（可根据需求调整） */
min-height: 30em; /* 容器最小高度 */
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: "SimSun", serif;
font-size: 8px;
line-height: 1.2;
display: flex;
flex-direction: column; /* 垂直分布子元素 */
}
.company-name {
text-align: center;
font-weight: bold;
margin-bottom: 1px;
font-size: 2em;
}
.label-title {
text-align: center;
font-weight: bold;
margin-bottom: 2px;
border-bottom: 1px solid #000;
padding-bottom: 1px;
font-size: 2em;
}
.info-table {
width: 100%;
border-collapse: collapse; /* 合并边框 */
font-size: 7px;
flex-grow: 1; /* 拉伸占据剩余垂直空间 */
}
.info-table td {
border: 1px solid #000; /* 表格单元格边框 */
text-align: center;
vertical-align: middle;
font-size: 2em;
width: 25%; /* 4列均分宽度，每列占25%，确保 label/value 空间相同 */
}
.label-cell {
font-weight: bold;
/* 去掉背景色：删除原有的 background-color 声明 */
}
.value-cell {
background-color: #fff; /* 可根据需求保留/删除，与原图视觉一致 */
}
.label-footnote {
margin-top: 2px;
text-align: center;
font-size: 7px;
color: #555;
}
</style>

122
klp-ui/src/views/wms/print/pages/tt/LabelRender/SampleTagPreview.vue
View File

@@ -1,122 +0,0 @@
<template>
<div class="sample-label-container">
<div class="company-title">嘉祥科伦普重工有限公司</div>
<div class="label-title">样品标签</div>
<table class="info-table">
<tr>
<td class="label-cell">品名</td>
<td class="value-cell" colspan="3">{{ content.productName || '' }}</td>
</tr>
<tr>
<td class="label-cell">执行标准</td>
<td class="value-cell" colspan="3">{{ content.executionStandard || '' }}</td>
</tr>
<tr>
<td class="label-cell">材质</td>
<td class="value-cell">{{ content.material || '' }}</td>
<td class="label-cell">厚度</td>
<td class="value-cell">{{ content.thickness || '' }}</td>
</tr>
<tr>
<td class="label-cell">镀层种类</td>
<td class="value-cell">{{ content.platingType || '' }}</td>
<td class="label-cell">镀层质量</td>
<td class="value-cell">{{ content.platingQuality || '' }}</td>
</tr>
<tr>
<td class="label-cell">表面状态</td>
<td class="value-cell">{{ content.surfaceState || '' }}</td>
<td class="label-cell">表面处理</td>
<td class="value-cell">{{ content.surfaceTreatment || '' }}</td>
</tr>
<tr>
<td class="label-cell">样品日期</td>
<td class="value-cell" colspan="3">{{ content.sampleDate || '' }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'SampleLabelRenderer',
props: {
content: {
type: Object,
default: () => ({
productName: '',
executionStandard: '',
material: '',
thickness: '',
platingType: '',
platingQuality: '',
surfaceState: '',
surfaceTreatment: '',
sampleDate: ''
})
}
}
}
</script>
<style scoped>
.sample-label-container {
width: 50em;
height: 40em;
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: "SimSun", serif;
font-size: 10px;
line-height: 1.5;
display: flex;
flex-direction: column;
}
.company-title {
text-align: center;
font-weight: bold;
margin-bottom: 2px;
font-size: 11px;
}
.label-title {
text-align: center;
font-weight: bold;
margin-bottom: 3px;
border-bottom: 1px solid #000;
padding-bottom: 1px;
font-size: 11px;
}
.info-table {
width: 100%;
border-collapse: collapse;
flex-grow: 1; /* 让表格占据剩余空间 */
table-layout: fixed; /* 固定表格布局，确保列宽均匀 */
}
.info-table td {
border: 1px solid #000;
padding: 4px 2px;
text-align: center;
vertical-align: middle;
word-break: break-all; /* 处理长文本 */
}
.label-cell {
font-weight: bold;
width: 25%; /* 标签单元格固定占25%宽度 */
background-color: #f9f9f9;
}
/* 调整不同单元格的宽度比例 */
.value-cell {
width: 75%; /* 单标签对应的值占75% */
}
/* 四列布局时，每个单元格占25% */
tr:nth-child(n+3) td:not([colspan]) {
width: 25%;
}
</style>

247
klp-ui/src/views/wms/print/pages/tt/LabelRender/index.vue
View File

@@ -1,247 +0,0 @@
<template>
<div class="label-render-container">
<!-- 操作按钮 -->
<div class="action-buttons">
<el-button type="primary" @click="downloadLabelAsImage">下载标签图片</el-button>
<el-button type="primary" @click="printLabel" style="margin-left: 10px;">打印标签</el-button>
</div>
<!-- 标签预览容器 -->
<div class="preview-container" id="label-preview-container" ref="labelRef">
<ProductionTagPreview v-if="labelType === '2'" :content="content" />
<OuterTagPreview v-if="labelType === '3'" :content="content" />
<SampleTagPreview v-if="labelType === '4'" :content="content" />
<ForgeTagPreview v-if="labelType === '5'" :content="content" />
<SaltSprayTagPreview v-if="labelType === '6'" :content="content" />
</div>
</div>
</template>
<script>
import domToImage from 'dom-to-image';
import printJS from 'print-js';
import { Message } from 'element-ui'; // 若使用Element UI，引入消息提示
import ProductionTagPreview from './ProductionTagPreview.vue';
import OuterTagPreview from './OuterTagPreview.vue';
import SampleTagPreview from './SampleTagPreview.vue';
import ForgeTagPreview from './ForgeTagPreview.vue';
import SaltSprayTagPreview from './SaltSprayTagPreview.vue';
export default {
name: 'LabelRender',
components: {
ProductionTagPreview,
OuterTagPreview,
SampleTagPreview,
ForgeTagPreview,
SaltSprayTagPreview,
},
props: {
labelType: {
type: String,
required: true,
},
content: {
type: Object,
required: true,
},
},
methods: {
// -------- 图片下载方法 --------
async downloadLabelAsImage() {
// 1. 获取要转换的DOM容器
const labelContainer = document.getElementById('label-preview-container');
if (!labelContainer) {
Message.error('未找到标签容器，无法下载');
return;
}
try {
// 2. 用dom-to-image生成PNG图片的DataURL
const dataUrl = await domToImage.toPng(labelContainer);
// 3. 创建临时a标签，触发下载
const downloadLink = document.createElement('a');
downloadLink.href = dataUrl;
downloadLink.download = `标签_${new Date().getTime()}.png`; // 自定义文件名（带时间戳防重复）
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink); // 下载后移除临时标签
} catch (error) {
console.error('标签图片下载失败：', error);
Message.error('标签图片下载失败，请重试');
}
},
// 打印方法
printLabel() {
// 1. 获取标签容器DOM
const labelContainer = document.getElementById('label-preview-container');
if (!labelContainer) {
Message.error('未找到标签容器，无法打印');
return;
}
// 2. 获取标签原始宽高（用于保持尺寸）
const labelWidth = labelContainer.offsetWidth;
const labelHeight = labelContainer.offsetHeight;
// 3. 定义打印样式（确保与预览一致）
// const printStyles = `
// /* 基础容器样式 */
// #label-preview-container {
// width: ${labelWidth}px !important;
// height: ${labelHeight}px !important;
// padding: 1.5rem !important;
// box-sizing: border-box !important;
// border: 1px solid #333 !important;
// background-color: #fff !important;
// }
// .company-header {
// display: flex;
// align-items: center;
// margin-bottom: 0.3em;
// }
// .company-logo {
// width: 2.8em;
// height: 2.8em;
// margin-right: 0.5em;
// }
// .company-name {
// font-size: 0.95em;
// line-height: 1.1;
// }
// .english-name {
// font-size: 0.6em;
// opacity: 0.8;
// }
// .product-title {
// font-size: 1.4em;
// font-weight: bold;
// text-align: center;
// margin-bottom: 0.4em;
// border-bottom: 1.5px solid #000;
// padding-bottom: 0.2em;
// }
// .footer-info {
// display: flex;
// justify-content: space-between;
// align-items: flex-start;
// font-size: 0.7em;
// margin-top: 0.3em;
// }
// .address {
// line-height: 1.2;
// width: 65%;
// }
// .english-address {
// opacity: 0.8;
// font-size: 0.9em;
// }
// .contact-timestamp {
// text-align: right;
// line-height: 1.4;
// }
// /* 表格与单元格样式（解决空单元格问题） */
// table {
// border-collapse: collapse !important;
// width: 100% !important;
// table-layout: fixed !important; /* 固定列宽 */
// }
// td {
// border: 1px solid #000 !important;
// padding: 6px 4px !important; /* 确保单元格大小 */
// min-height: 28px !important; /* 空单元格最小高度 */
// vertical-align: middle !important;
// text-align: center !important;
// word-break: break-all !important; /* 长文本换行 */
// font-family: "SimSun", serif !important;
// font-size: 14px !important;
// }
// /* 标签与值单元格样式 */
// .label-cell {
// font-weight: bold !important;
// background-color: #f5f5f5 !important;
// }
// .value-cell {
// background-color: #fff !important;
// }
// /* 列宽分配（根据实际列数调整） */
// td { width: 25% !important; } /* 4列布局 */
// td[colspan="2"] { width: 50% !important; }
// td[colspan="3"] { width: 75% !important; }
// td[colspan="4"] { width: 100% !important; }
// `;
// 4. 调用print-js打印
printJS({
printable: 'label-preview-container', // 要打印的元素ID
type: 'html', // 打印类型为HTML
header: null, // 不显示页眉
footer: null, // 不显示页脚
// style: printStyles, // 注入打印样式
scanStyles: true, // 禁用自动扫描页面样式（避免冲突）
targetStyles: ['*'], // 允许所有样式生效
printContainer: true, // 打印指定容器
onError: (error) => { // 错误处理
console.error('打印失败:', error);
Message.error('打印失败，请重试');
}
});
}
},
};
</script>
<style scoped>
.label-render-container {
width: 100%;
height: calc(100vh - 200px);
display: flex;
flex-direction: column;
/* 按钮与预览垂直排列 */
justify-content: flex-start;
align-items: center;
padding: 2rem;
box-sizing: border-box;
}
.action-buttons {
margin-bottom: 1rem;
/* 按钮与预览区的间距 */
}
.preview-container {
background-color: #fff;
color: #000;
padding: 1.5rem;
width: fit-content;
min-width: 200px;
border-radius: 6px;
box-shadow: 0 0 60px rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.preview-container:hover {
box-shadow: 0 0 80px rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
</style>

326
klp-ui/src/views/wms/print/pages/tt/index.vue
View File

@@ -1,326 +0,0 @@
<template>
<div>
<el-row>
<el-col :span="6">
<el-row>
<el-button type="primary" @click="handleGen">生成标签</el-button>
<!-- 只有在预览状态才显示关闭按钮 -->
<el-button
type="danger"
@click="handleClosePreview"
v-if="showPreview"
style="margin-left: 10px;"
>
关闭预览
</el-button>
</el-row>
<el-row style="margin-top: 15px;">
<el-select v-model="recordType" placeholder="请选择标签类型" style="width: auto;">
<!-- 第一个选项默认选中，对应原radio的label="2" -->
<el-option label="内标签" value="2"></el-option>
<el-option label="外标签" value="3"></el-option>
<el-option label="样品标签" value="4"></el-option>
<el-option label="力学性能标签" value="5"></el-option>
<el-option label="盐雾试验标签" value="6"></el-option>
</el-select>
</el-row>
<el-row style="margin-top: 15px;">
<el-form inline v-if="recordType === '2'" :model="form2" label-width="80px">
<el-form-item label="钢卷号">
<el-input v-model="form2.coilNumber" placeholder="输入钢卷号"></el-input>
</el-form-item>
<el-form-item label="规格">
<el-input v-model="form2.specification" placeholder="输入规格"></el-input>
</el-form-item>
<el-form-item label="净重">
<el-input v-model="form2.netWeight" placeholder="输入净重"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form2.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="下工序">
<el-input v-model="form2.nextProcess" placeholder="输入下工序"></el-input>
</el-form-item>
<el-form-item label="生产班组">
<el-input v-model="form2.productionTeam" placeholder="输入生产班组"></el-input>
</el-form-item>
<el-form-item label="生产日期">
<el-input v-model="form2.productionDate" placeholder="输入生产日期"></el-input>
</el-form-item>
</el-form>
<el-form inline v-if="recordType === '3'" :model="form3" label-width="80px">
<el-form-item label="订货单位">
<el-input v-model="form3.orderUnit" placeholder="输入订货单位"></el-input>
</el-form-item>
<el-form-item label="合同号">
<el-input v-model="form3.contractNumber" placeholder="输入合同号"></el-input>
</el-form-item>
<el-form-item label="产品名称">
<el-input v-model="form3.productName" placeholder="输入产品名称"></el-input>
</el-form-item>
<el-form-item label="执行标准">
<el-input v-model="form3.executionStandard" placeholder="输入执行标准"></el-input>
</el-form-item>
<el-form-item label="卷号">
<el-input v-model="form3.coilNumber" placeholder="输入卷号"></el-input>
</el-form-item>
<el-form-item label="原料坯号">
<el-input v-model="form3.rawBlankNumber" placeholder="输入原料坯号"></el-input>
</el-form-item>
<el-form-item label="规格">
<el-input v-model="form3.specification" placeholder="输入规格"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form3.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="表面质量">
<el-input v-model="form3.surfaceQuality" placeholder="输入表面质量"></el-input>
</el-form-item>
<el-form-item label="表面处理">
<el-input v-model="form3.surfaceTreatment" placeholder="输入表面处理"></el-input>
</el-form-item>
<el-form-item label="切边要求">
<el-input v-model="form3.cuttingRequirements" placeholder="输入切边要求"></el-input>
</el-form-item>
<el-form-item label="包装种类">
<el-input v-model="form3.packagingType" placeholder="输入包装种类"></el-input>
</el-form-item>
<el-form-item label="毛重kg">
<el-input v-model="form3.grossWeight" placeholder="输入毛重kg"></el-input>
</el-form-item>
<el-form-item label="净重kg">
<el-input v-model="form3.netWeight" placeholder="输入净重kg"></el-input>
</el-form-item>
<el-form-item label="参考长度">
<el-input v-model="form3.referenceLength" placeholder="输入参考长度"></el-input>
</el-form-item>
<el-form-item label="生产日期">
<el-input v-model="form3.productionDate" placeholder="输入生产日期"></el-input>
</el-form-item>
</el-form>
<el-form inline v-if="recordType === '4'" :model="form4" label-width="80px">
<el-form-item label="品名">
<el-input v-model="form4.productName" placeholder="输入品名"></el-input>
</el-form-item>
<el-form-item label="执行标准">
<el-input v-model="form4.executionStandard" placeholder="输入执行标准"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form4.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="厚度">
<el-input v-model="form4.thickness" placeholder="输入厚度"></el-input>
</el-form-item>
<el-form-item label="镀层种类">
<el-input v-model="form4.platingType" placeholder="输入镀层种类"></el-input>
</el-form-item>
<el-form-item label="镀层质量">
<el-input v-model="form4.platingQuality" placeholder="输入镀层质量"></el-input>
</el-form-item>
<el-form-item label="表面状态">
<el-input v-model="form4.surfaceState" placeholder="输入表面状态"></el-input>
</el-form-item>
<el-form-item label="表面处理">
<el-input v-model="form4.surfaceTreatment" placeholder="输入表面处理"></el-input>
</el-form-item>
<el-form-item label="样品日期">
<el-input v-model="form4.sampleDate" placeholder="输入样品日期"></el-input>
</el-form-item>
</el-form>
<el-form inline v-if="recordType === '5'" :model="form5" label-width="80px">
<el-form-item label="卷号">
<el-input v-model="form5.coilNumber" placeholder="输入卷号"></el-input>
</el-form-item>
<el-form-item label="屈服">
<el-input v-model="form5.yieldStrength" placeholder="输入屈服强度"></el-input>
</el-form-item>
<el-form-item label="规格">
<el-input v-model="form5.specification" placeholder="输入规格"></el-input>
</el-form-item>
<el-form-item label="抗拉">
<el-input v-model="form5.tensileStrength" placeholder="输入抗拉"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form5.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="延伸">
<el-input v-model="form5.elongation" placeholder="输入延伸"></el-input>
</el-form-item>
<el-form-item label="原料厂家">
<el-input v-model="form5.rawMaterialFactory" placeholder="输入原料厂家"></el-input>
</el-form-item>
<el-form-item label="镀层质量">
<el-input v-model="form5.platingQuality" placeholder="输入镀层质量"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form5.remark" placeholder="输入备注"></el-input>
</el-form-item>
</el-form>
<el-form inline v-if="recordType === '6'" :model="form6" label-width="80px">
<el-form-item label="卷号">
<el-input v-model="form6.coilNumber" placeholder="输入卷号"></el-input>
</el-form-item>
<el-form-item label="开始时间">
<el-input v-model="form6.startDate" placeholder="输入开始时间"></el-input>
</el-form-item>
<el-form-item label="规格">
<el-input v-model="form6.specification" placeholder="输入规格"></el-input>
</el-form-item>
<el-form-item label="材质">
<el-input v-model="form6.material" placeholder="输入材质"></el-input>
</el-form-item>
<el-form-item label="原料厂家">
<el-input v-model="form6.rawMaterialFactory" placeholder="输入原料厂家"></el-input>
</el-form-item>
<el-form-item label="结束时间">
<el-input v-model="form6.endDate" placeholder="输入结束时间"></el-input>
</el-form-item>
<el-form-item label="锌层质量">
<el-input v-model="form6.platingQuality" placeholder="输入锌层质量"></el-input>
</el-form-item>
</el-form>
</el-row>
</el-col>
<el-col :span="18">
<!-- 预览区域，只有showPreview为true时才显示 -->
<div v-if="showPreview" class="preview-container">
<div class="preview-header">
<h3>标签预览</h3>
</div>
<div class="preview-content">
<LabelRender :labelType="getLabelType()" :content="getLabelContent()" />
</div>
</div>
<!-- 未预览时显示的提示信息 -->
<div v-else class="preview-placeholder">
<p>请填写表单并点击"生成标签"按钮预览</p>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import LabelRender from './LabelRender/index.vue'
export default {
components: {
LabelRender
},
data() {
return {
recordType: '2',
// 控制预览显示状态
showPreview: false,
form2: {
coilNumber: '',
specification: '',
netWeight: '',
material: '',
nextProcess: '',
productionTeam: '',
productionDate: ''
},
form3: {
orderUnit: '',
contractNumber: '',
productName: '',
executionStandard: '',
coilNumber: '',
rawBlankNumber: '',
specification: '',
material: '',
surfaceQuality: '',
surfaceTreatment: '',
cuttingRequirements: '',
packagingType: '',
grossWeight: '',
netWeight: '',
referenceLength: '',
productionDate: ''
},
form4: {
productName: '',
executionStandard: '',
material: '',
thickness: '',
platingType: '',
platingQuality: '',
surfaceState: '',
surfaceTreatment: '',
sampleDate: ''
},
form5: {
coilNumber: '',
yieldStrength: '',
specification: '',
tensileStrength: '',
material: '',
elongation: '',
rawMaterialFactory: '',
platingQuality: '',
remark: ''
},
form6: {
coilNumber: '',
startDate: '',
tensileStrength: '',
material: '',
rawMaterialFactory: '',
endDate: '',
platingQuality: ''
}
}
},
methods: {
handleGen() {
const payload = {}
if (this.recordType === '2') {
payload.recordType = this.recordType
payload.content = this.form2
} else if (this.recordType === '3') {
payload.recordType = this.recordType
payload.content = this.form3
} else if (this.recordType === '4') {
payload.recordType = this.recordType
payload.content = this.form4
} else if (this.recordType === '5') {
payload.recordType = this.recordType
payload.content = this.form5
} else if (this.recordType === '6') {
payload.recordType = this.recordType
payload.content = this.form6
}
console.log('生成标签数据', payload)
// 生成标签后显示预览
this.showPreview = true
},
// 关闭预览
handleClosePreview() {
this.showPreview = false
},
getLabelType() {
return this.recordType
},
getLabelContent() {
if (this.recordType === '2') {
return this.form2
} else if (this.recordType === '3') {
return this.form3
} else if (this.recordType === '4') {
return this.form4
} else if (this.recordType === '5') {
return this.form5
} else if (this.recordType === '6') {
return this.form6
}
}
}
}
</script>