feat(wms): 在生产标签预览中添加厂家卷号显示并优化样式
调整生产标签预览的布局结构,新增厂家卷号显示字段。优化表格单元格样式,统一边框和内边距设置,提高标签的可读性和美观性。
This commit is contained in:
@@ -4,8 +4,7 @@
|
||||
<!-- 调整第一行结构,左侧内容扩大,右侧二维码减小边距 -->
|
||||
<tr>
|
||||
<td colspan="2" style="padding: 0; width: 50%;">
|
||||
<div
|
||||
style="
|
||||
<div style="
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: space-evenly;
|
||||
@@ -15,52 +14,85 @@
|
||||
font-size: 13px;
|
||||
">
|
||||
<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">
|
||||
<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 || '' }}
|
||||
</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
|
||||
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 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 || ''" />
|
||||
</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
|
||||
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">
|
||||
<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 || ''" />
|
||||
</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
|
||||
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)
|
||||
</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 || ''" />
|
||||
</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
|
||||
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">
|
||||
<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 || ''" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
</td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<!-- <tr>
|
||||
<td class="label-cell" colspan="2">逻辑库区</td>
|
||||
<td class="value-cell" colspan="2">
|
||||
<input type="text" class="nob" :value="content.warehouseName || ''" />
|
||||
@@ -235,19 +267,25 @@ export default {
|
||||
width: 25em;
|
||||
height: 20em;
|
||||
padding: 0px;
|
||||
display: flex; /* 启用Flex布局 */
|
||||
flex-direction: column; /* 子元素垂直排列 */
|
||||
display: flex;
|
||||
/* 启用Flex布局 */
|
||||
flex-direction: column;
|
||||
/* 子元素垂直排列 */
|
||||
font-family: "SimSun", serif;
|
||||
box-sizing: border-box; /* 确保内边距/边框不影响总尺寸 */
|
||||
box-sizing: border-box;
|
||||
/* 确保内边距/边框不影响总尺寸 */
|
||||
}
|
||||
|
||||
.material-label-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
flex-grow: 1; /* 让表格拉伸,占满剩余垂直空间 */
|
||||
height: 0; /* 配合flex-grow,自动计算高度 */
|
||||
border: 1px solid #333; /* 确保表格有最外层边框 */
|
||||
flex-grow: 1;
|
||||
/* 让表格拉伸,占满剩余垂直空间 */
|
||||
height: 0;
|
||||
/* 配合flex-grow,自动计算高度 */
|
||||
border: 1px solid #333;
|
||||
/* 确保表格有最外层边框 */
|
||||
}
|
||||
|
||||
/* 四列均分宽度,每列占25% */
|
||||
@@ -299,14 +337,15 @@ export default {
|
||||
print-color-adjust: exact !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* 隐藏所有其他内容,只显示标签容器 */
|
||||
body > *:not(.material-label-container) {
|
||||
body>*:not(.material-label-container) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user