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

feat(wms): 在生产标签预览中添加厂家卷号显示并优化样式

Browse Source 
调整生产标签预览的布局结构，新增厂家卷号显示字段。优化表格单元格样式，统一边框和内边距设置，提高标签的可读性和美观性。
This commit is contained in:
砂糖
2026-01-10 14:50:12 +08:00
parent 46e4be3674
commit 29ffac5202
1 changed files with 61 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
klp-ui/src/views/wms/coil/panels/LabelRender/ProductionTagPreview.vue
View File

@@ -4,8 +4,7 @@
<!-- 调整第一行结构，左侧内容扩大，右侧二维码减小边距 --> <!-- 调整第一行结构，左侧内容扩大，右侧二维码减小边距 -->
<tr> <tr>
<td colspan="2" style="padding: 0; width: 50%;"> <td colspan="2" style="padding: 0; width: 50%;">
<div <div style="
style="
display: flex; display: flex;
height: 100%; height: 100%;
align-items: space-evenly; align-items: space-evenly;
@@ -15,52 +14,85 @@
font-size: 13px; font-size: 13px;
"> ">
<div style="display: flex; flex: 1; align-items: center;"> <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;" class="label-cell"> <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;"
class="label-cell">
料卷号 料卷号
</div> </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;" class="value-cell"> <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;"
class="value-cell">
{{ content.enterCoilNo || '' }} {{ content.enterCoilNo || '' }}
</div> </div>
</div> </div>
<div style="display: flex; flex: 1; align-items: center;"> <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;" class="label-cell"> <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;"
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;"
class="value-cell">
{{ content.supplierCoilNo || '' }}
</div>
</div>
<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;"
class="label-cell">
逻辑库区 逻辑库区
</div> </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;" class="value-cell"> <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;"
class="value-cell">
<input type="text" class="nob" :value="content.warehouseName || ''" /> <input type="text" class="nob" :value="content.warehouseName || ''" />
</div> </div>
</div> </div>
<div style="display: flex; flex: 1; align-items: center;"> <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;" class="label-cell"> <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;"
class="label-cell">
实际库区 实际库区
</div> </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;" class="value-cell"> <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;"
class="value-cell">
<input type="text" class="nob" :value="content.actualWarehouseName || ''" /> <input type="text" class="nob" :value="content.actualWarehouseName || ''" />
</div> </div>
</div> </div>
<div style="display: flex; flex: 1; align-items: center;"> <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;" class="label-cell"> <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;"
class="label-cell">
规格(mm) 规格(mm)
</div> </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;" class="value-cell"> <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;"
class="value-cell">
<input type="text" class="nob" :value="content.specification || ''" /> <input type="text" class="nob" :value="content.specification || ''" />
</div> </div>
</div> </div>
<div style="display: flex; flex: 1; align-items: center;"> <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;" class="label-cell"> <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;"
class="label-cell">
生产班组 生产班组
</div> </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;" class="value-cell"> <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;"
class="value-cell">
<input type="text" class="nob" :value="content.team || ''" /> <input type="text" class="nob" :value="content.team || ''" />
</div> </div>
</div> </div>
</div> </div>
</td> </td>
<td class="value-cell" colspan="4" style="width: 50%; padding: 2px; text-align: center; vertical-align: middle;"> <td class="value-cell" colspan="4"
style="width: 50%; padding: 2px; text-align: center; vertical-align: middle;">
<QRCode :content="content.qrcodeRecordId || ' '" :size="130" /> <QRCode :content="content.qrcodeRecordId || ' '" :size="130" />
</td> </td>
</tr> </tr>
<!-- <tr> <!-- <tr>
<td class="label-cell" colspan="2">逻辑库区</td> <td class="label-cell" colspan="2">逻辑库区</td>
<td class="value-cell" colspan="2"> <td class="value-cell" colspan="2">
<input type="text" class="nob" :value="content.warehouseName || ''" /> <input type="text" class="nob" :value="content.warehouseName || ''" />
@@ -235,19 +267,25 @@ export default {
width: 25em; width: 25em;
height: 20em; height: 20em;
padding: 0px; padding: 0px;
display: flex; /* 启用Flex布局 */ display: flex;
flex-direction: column; /* 子元素垂直排列 */ /* 启用Flex布局 */
flex-direction: column;
/* 子元素垂直排列 */
font-family: "SimSun", serif; font-family: "SimSun", serif;
box-sizing: border-box; /* 确保内边距/边框不影响总尺寸 */ box-sizing: border-box;
/* 确保内边距/边框不影响总尺寸 */
} }
.material-label-table { .material-label-table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
flex-grow: 1; /* 让表格拉伸，占满剩余垂直空间 */ flex-grow: 1;
height: 0; /* 配合flex-grow，自动计算高度 */ /* 让表格拉伸，占满剩余垂直空间 */
border: 1px solid #333; /* 确保表格有最外层边框 */ height: 0;
/* 配合flex-grow，自动计算高度 */
border: 1px solid #333;
/* 确保表格有最外层边框 */
} }
/* 四列均分宽度，每列占25% */ /* 四列均分宽度，每列占25% */
@@ -299,14 +337,15 @@ export default {
print-color-adjust: exact !important; print-color-adjust: exact !important;
} }
html, body { html,
body {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
overflow: hidden !important; overflow: hidden !important;
} }
/* 隐藏所有其他内容，只显示标签容器 */ /* 隐藏所有其他内容，只显示标签容器 */
body > *:not(.material-label-container) { body>*:not(.material-label-container) {
display: none !important; display: none !important;
} }