fengyuan_yang
/
boying-pda
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2026-03-02 

其他入库的一些样式优化
master
fengyuan_yang 11 hours ago
parent
d3308f6e3f
commit
7b9260dd7b
1 changed files with 104 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 141
      src/views/modules/other-inout/otherInboundDetail.vue

141
src/views/modules/other-inout/otherInboundDetail.vue
View File

@ -13,22 +13,26 @@
<!-- 入库单信息卡片 -->
<div class="material-info-card" v-if="inboundInfo.inboundNo">
<div class="card-title">
<!-- 第一行：入库单号 -->
<div class="card-row-first">
<div class="title-item">
<span class="title-label">入库单号</span>
<span class="title-value">{{ inboundInfo.inboundNo }}</span>
</div>
</div>
<!-- 第二行：关联单号、行号（左）+ 标签张数、物料总数（右靠） -->
<div class="card-row-second">
<div class="card-row-left">
<div class="title-item">
<span class="title-label">关联单号</span>
<span class="title-value">{{ inboundInfo.relatedOrderNo || '-' }}</span>
<span class="title-value title-value-sm">{{ inboundInfo.relatedOrderNo || '-' }}</span>
</div>
<div class="title-item">
<span class="title-label">行号</span>
<span class="title-value">{{ inboundInfo.relatedOrderLineNo || '-' }}</span>
<span class="title-value title-value-sm">{{ inboundInfo.relatedOrderLineNo || '-' }}</span>
</div>
</div>
<div class="card-details">
<div class="card-row-right">
<div class="detail-item">
<div class="detail-label">标签张数</div>
<div class="detail-value">
@ -43,12 +47,13 @@
</div>
</div>
</div>
</div>
<!-- 物料输入区域 -->
<div class="input-section">
<!-- 物料信息输入区域 -->
<div class="material-input-grid">
<!-- 第一行：物料编码、单位、入库数量、批次号 -->
<!-- 第一行：物料编码、需求数量、入库数量、批次号 -->
<div class="input-row-top">
<!-- 物料编码 -->
<div class="input-item material-code-item">
@ -73,11 +78,11 @@
</el-select>
</div>
<!-- 单位 -->
<div class="input-item unit-item">
<span class="input-label">单位</span>
<!-- 需求数量 -->
<div class="input-item required-qty-item">
<span class="input-label">需求数量</span>
<el-input
v-model="currentMaterial.unit"
v-model="currentMaterial.requiredQty"
disabled
class="input-field"
/>
@ -96,8 +101,16 @@
</div>
</div>
<!-- 第二行：物料名称（独占一行） -->
<!-- 第二行：单位（左）+ 物料名称 -->
<div class="input-row-bottom">
<div class="input-item unit-item-bottom">
<span class="input-label">单位</span>
<el-input
v-model="currentMaterial.unit"
disabled
class="input-field"
/>
</div>
<div class="field-area material-name-area">
<div class="field-title">物料名称</div>
<div class="info-box">{{ currentMaterial.materialName }}</div>
@ -474,7 +487,8 @@ export default {
this.currentMaterial = {
materialCode: material.materialCode,
materialName: material.materialName,
unit: material.unit
unit: material.unit,
requiredQty: material.requiredQty
};
}
},
@ -499,7 +513,8 @@ export default {
this.materialOptions = (data.data || []).map(item => ({
materialCode: item.materialCode,
materialName: item.materialName,
unit: item.unit
unit: item.unit,
requiredQty: item.requiredQty
}));
} else {
console.error('获取物料选项失败:', data.msg);
@ -993,22 +1008,42 @@ export default {
border: 1px solid #f0f0f0;
}
.card-title {
/* 卡片第一行：入库单号 */
.card-row-first {
margin-bottom: 8px;
}
/* 卡片第二行：关联单号+行号（左） + 标签张数+物料总数（右） */
.card-row-second {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 16px;
gap: 8px;
}
.title-item {
.card-row-left {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-end;
flex: 1;
min-width: 0;
}
.title-item:first-child {
flex: 1.5;
.card-row-left .title-item {
flex: 1;
}
.card-row-right {
display: flex;
gap: 10px;
align-items: flex-end;
flex-shrink: 0;
}
.title-item {
display: flex;
flex-direction: column;
min-width: 0;
}
.title-label {
@ -1019,37 +1054,28 @@ export default {
}
.title-value {
font-size: 13px;
font-size: 15px;
font-weight: bold;
color: #333;
word-break: break-all;
}
.title-item:first-child .title-value {
font-size: 15px;
}
.card-details {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 4px;
.title-value-sm {
font-size: 13px;
font-weight: 600;
}
.detail-item {
flex: 1;
text-align: center;
min-width: 60px;
max-width: 60px;
}
.detail-label {
font-size: 11px;
color: #999;
margin-bottom: 6px;
margin-bottom: 4px;
font-weight: normal;
line-height: 1.2;
margin-left: -12px;
white-space: nowrap;
}
.detail-value {
@ -1057,7 +1083,6 @@ export default {
color: #333;
font-weight: 500;
line-height: 1.2;
margin-left: -12px;
}
.detail-value .qualified {
@ -1093,16 +1118,18 @@ export default {
margin-bottom: 12px;
}
/* 第一行：物料编码、单位、入库数量、批次号 */
/* 第一行：物料编码、需求数量、入库数量、批次号 */
.input-row-top {
display: flex;
align-items: flex-end;
gap: 18px;
gap: 10px;
}
/* 第二行：物料名称（独占一行） */
/* 第二行：单位（左）+ 物料名称 */
.input-row-bottom {
display: flex;
align-items: flex-end;
gap: 10px;
width: 100%;
margin-top: 2px;
}
@ -1114,12 +1141,12 @@ export default {
}
.material-code-item {
flex: 1.5;
flex: 1.6;
}
.unit-item {
.required-qty-item {
flex: 1;
min-width: 70px;
min-width: 60px;
}
.quantity-item {
@ -1130,9 +1157,17 @@ export default {
flex: 1;
}
/* 第二行单位：固定小宽度，居左 */
.unit-item-bottom {
display: flex;
flex-direction: column;
flex: 0 0 64px;
width: 64px;
}
.material-name-area {
flex: 1;
width: 100%;
min-width: 0;
}
.input-label {
@ -1251,13 +1286,15 @@ export default {
text-align: center;
}
/* 物料名称信息框 - 独占一行，不需要太高 */
/* 物料名称信息框 - 与其他输入框等高 */
.material-name-area .info-box {
height: auto;
min-height: 36px;
padding: 8px 12px;
height: 44px;
padding: 0 12px;
justify-content: flex-start;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.numInput ::v-deep .el-input__inner {
@ -1919,15 +1956,17 @@ export default {
margin: 0 12px 8px;
}
.card-details {
.card-row-second {
flex-wrap: wrap;
gap: 6px;
}
.detail-item {
flex: 0 0 48%;
margin-bottom: 6px;
min-width: 50px;
.card-row-left {
flex: 1 1 100%;
}
.card-row-right {
justify-content: flex-end;
}
.list-header, .list-item {

Write Preview
Loading…
Cancel
Save