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

feat: 新增阿里妈妈数黑体字体并更新标签样式

Browse Source 
1. 新增阿里妈妈数黑体字体文件及授权说明文档
2. 全局替换标签默认字体为阿里妈妈数黑体
3. 统一调整多个标签页的卷号/原料号字体大小为1em
4. 修复表单输入框的v-model.number类型绑定问题
5. 删除废弃的盐雾试验、力学性能、样品标签预览组件
This commit is contained in:
砂糖
2026-06-08 09:05:15 +08:00
parent 97e0df7ae1
commit 47b3fb24b7
15 changed files with 65 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
klp-ui/src/views/wms/coil/panels/LabelRender/ForgeTagPreview.vue
View File

@@ -1,121 +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>
@import './label-common.css';
.label-container {
width: 50em; /* 容器宽度（可根据需求调整） */
min-height: 30em; /* 容器最小高度 */
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: var(--label-font);
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>

4
klp-ui/src/views/wms/coil/panels/LabelRender/MaterialTag.vue
View File

@@ -15,12 +15,12 @@
">
<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;"
style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; font-size: 1em !important; 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;"
style="flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid #333; font-size: 1em !important; box-sizing: border-box; padding: 3px; word-break: break-all; overflow-wrap: break-word;"
class="value-cell enter-coil-no">
{{ content.enterCoilNo || '' }}
</div>

113
klp-ui/src/views/wms/coil/panels/LabelRender/SaltSprayTagPreview.vue
View File

@@ -1,113 +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>
@import './label-common.css';
.label-container {
width: 50em; /* 容器宽度（可根据需求调整） */
min-height: 30em; /* 容器最小高度 */
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: var(--label-font);
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>

123
klp-ui/src/views/wms/coil/panels/LabelRender/SampleTagPreview.vue
View File

@@ -1,123 +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>
@import './label-common.css';
.sample-label-container {
width: 50em;
height: 40em;
border: 1px solid #000;
padding: 2px;
box-sizing: border-box;
font-family: var(--label-font);
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>

8
klp-ui/src/views/wms/coil/panels/LabelRender/SplitTag.vue
View File

@@ -6,11 +6,11 @@
<!-- 第一行：冷卷号、热卷号 -->
<div class="grid-cell label-cell">钢卷号</div>
<div class="grid-cell value-cell">
<div class="grid-cell value-cell current-coil-no">
<div class="nob">{{ content.currentCoilNo || '' }}</div>
</div>
<div class="grid-cell label-cell">原料号</div>
<div class="grid-cell value-cell">
<div class="grid-cell value-cell enter-coil-no">
<div class="nob">{{ content.enterCoilNo || '' }}</div>
</div>
@@ -240,6 +240,10 @@ export default {
justify-content: center;
}
.current-coil-no, .enter-coil-no {
font-size: 1em !important;
}
.qrcode-container {
width: 80%;
height: 80%;

3
klp-ui/src/views/wms/coil/panels/LabelRender/TuoZhiTag.vue
View File

@@ -256,12 +256,13 @@ export default {
justify-content: center;
font-weight: 900;
color: #000;
font-family: var(--label-font);
font-size: 1.2em;
}
.current-coil-no, .enter-coil-no {
font-size: 1.1em !important;
font-size: 1em !important;
}

2
klp-ui/src/views/wms/coil/panels/LabelRender/ZincRawTag.vue
View File

@@ -262,7 +262,7 @@ export default {
}
.current-coil-no, .enter-coil-no {
font-size: 1.1em !important;
font-size: 1em !important;
}

15
klp-ui/src/views/wms/coil/panels/LabelRender/label-common.css
View File

@@ -1,3 +1,14 @@
:root {
--label-font: '黑体', 'Courier New', 'SimSun', serif;
@font-face {
font-family: 'AlimamaShuHeiTi-Bold';
src: url('../../../../../assets/fonts/alimama/AlimamaShuHeiTi-Bold.woff2') format('woff2'),
url('../../../../../assets/fonts/alimama/AlimamaShuHeiTi-Bold.woff') format('woff'),
url('../../../../../assets/fonts/alimama/AlimamaShuHeiTi-Bold.ttf') format('truetype'),
url('../../../../../assets/fonts/alimama/AlimamaShuHeiTi-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
--label-font: 'AlimamaShuHeiTi-Bold', '黑体', 'SimSun', serif;
}