feat(wms): 添加分条按钮并更新外标签预览样式
1. 在do.vue面板中添加分条按钮 2. 更新外标签预览样式，添加怕湿图标 3. 删除不再使用的标签预览组件
This commit is contained in:
砂糖
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user