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

refactor(wms/coil/label): 为热卷号添加动态字体大小适配

Browse Source 
移除了硬编码的字体样式，根据热卷号长度动态调整字号，避免长文本溢出标签
This commit is contained in:
砂糖
2026-06-13 11:14:25 +08:00
parent c149216ebd
commit 12ea9b0b83
4 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,9 +20,10 @@
料卷号
</div>
<div
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 || '' }}
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="enterCoilNoStyle"
class="value-cell enter-coil-no">
{{ content.enterCoilNo || '' }}
</div>
</div>
<div style="display: flex; flex: 1; align-items: center;">
@@ -181,6 +182,16 @@ export default {
printScale: 1,
}
},
computed: {
enterCoilNoStyle() {
const len = (this.content.enterCoilNo || '').length;
if (len > 25) return { fontSize: '0.55em' };
if (len > 20) return { fontSize: '0.65em' };
if (len > 15) return { fontSize: '0.75em' };
if (len > 10) return { fontSize: '0.9em' };
return {};
}
},
mounted() {
// 使用 matchMedia 监听打印状态（更可靠）
this.printMediaQuery = window.matchMedia('print');

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

@@ -11,7 +11,7 @@
</div>
<div class="grid-cell label-cell">原料号</div>
<div class="grid-cell value-cell enter-coil-no">
<div class="nob">{{ content.enterCoilNo || '' }}</div>
<div class="nob" :style="enterCoilNoStyle">{{ content.enterCoilNo || '' }}</div>
</div>
@@ -91,6 +91,16 @@ export default {
printMediaQuery: null
}
},
computed: {
enterCoilNoStyle() {
const len = (this.content.enterCoilNo || '').length;
if (len > 25) return { fontSize: '0.55em' };
if (len > 20) return { fontSize: '0.65em' };
if (len > 15) return { fontSize: '0.75em' };
if (len > 10) return { fontSize: '0.9em' };
return {};
}
},
mounted() {
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
@@ -241,7 +251,7 @@ export default {
}
.current-coil-no, .enter-coil-no {
font-size: 1em !important;
font-size: 1em;
}
.qrcode-container {

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

@@ -11,7 +11,7 @@
</div>
<div class="grid-cell label-cell">热卷号</div>
<div class="grid-cell value-cell">
<div class="nob enter-coil-no">{{ content.enterCoilNo || '' }}</div>
<div class="nob enter-coil-no" :style="enterCoilNoStyle">{{ content.enterCoilNo || '' }}</div>
</div>
<!-- 第二行：规格、钢种 -->
@@ -104,6 +104,16 @@ export default {
printMediaQuery: null
}
},
computed: {
enterCoilNoStyle() {
const len = (this.content.enterCoilNo || '').length;
if (len > 25) return { fontSize: '0.55em' };
if (len > 20) return { fontSize: '0.65em' };
if (len > 15) return { fontSize: '0.75em' };
if (len > 10) return { fontSize: '0.9em' };
return {};
}
},
mounted() {
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
@@ -262,7 +272,7 @@ export default {
}
.current-coil-no, .enter-coil-no {
font-size: 1em !important;
font-size: 1em;
}

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

@@ -11,7 +11,7 @@
</div>
<div class="grid-cell label-cell">热卷号</div>
<div class="grid-cell value-cell">
<div class="nob enter-coil-no">{{ content.enterCoilNo || '' }}</div>
<div class="nob enter-coil-no" :style="enterCoilNoStyle">{{ content.enterCoilNo || '' }}</div>
</div>
<!-- 第二行：规格、钢种 -->
@@ -104,6 +104,16 @@ export default {
printMediaQuery: null
}
},
computed: {
enterCoilNoStyle() {
const len = (this.content.enterCoilNo || '').length;
if (len > 25) return { fontSize: '0.55em' };
if (len > 20) return { fontSize: '0.65em' };
if (len > 15) return { fontSize: '0.75em' };
if (len > 10) return { fontSize: '0.9em' };
return {};
}
},
mounted() {
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
@@ -262,7 +272,7 @@ export default {
}
.current-coil-no, .enter-coil-no {
font-size: 1em !important;
font-size: 1em;
}