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

2025-11-11 

pda其它入库优化
master
fengyuan_yang 2 months ago
parent
799a04b7f2
commit
72b68753a4
1 changed files with 135 additions and 118 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. 253
      src/views/modules/other-inout/otherInboundDetail.vue

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

@ -42,10 +42,10 @@
<div class="input-section">
<!-- 物料信息输入区域 -->
<div class="material-input-grid">
<!-- 左列：物料编码和物料名称 -->
<div class="material-column material-code-column">
<!-- 第一行：物料编码、单位、入库数量、批次号 -->
<div class="input-row-top">
<!-- 物料编码 -->
<div class="input-item">
<div class="input-item material-code-item">
<span class="input-label">物料编码</span>
<el-input
v-model="materialCode"
@ -57,31 +57,34 @@
/>
</div>
<!-- 物料名称 -->
<div class="field-area">
<div class="field-title">物料名称</div>
<div class="info-box">{{ currentMaterial.materialName}}</div>
<!-- 单位 -->
<div class="input-item unit-item">
<span class="input-label">单位</span>
<el-input
v-model="currentMaterial.unit"
disabled
class="input-field"
/>
</div>
</div>
<!-- 右列：入库数量和单位 -->
<div class="material-column quantity-column">
<!-- 入库数量和批次号 -->
<div class="input-row">
<div class="input-item quantity-item">
<span class="input-label">入库数</span>
<el-input class="inlineNumber numInput" v-model="actualQty" placeholder="入库数" type="number" @keyup.enter.native="handleAddMaterial" clearable/>
</div>
<div class="input-item batch-item">
<span class="input-label">批次号</span>
<el-input class="inlineNumber numInput" v-model="batchNo" placeholder="*" @keyup.enter.native="handleAddMaterial" ref="batchInput" clearable/>
</div>
<!-- 入库数量 -->
<div class="input-item quantity-item">
<span class="input-label">入库数</span>
<el-input class="inlineNumber numInput" v-model="actualQty" placeholder="入库数" type="number" @keyup.enter.native="handleAddMaterial" clearable/>
</div>
<!-- 单位 -->
<div class="field-area">
<div class="field-title">单位</div>
<div class="info-box">{{ currentMaterial.unit }}</div>
<!-- 批次号 -->
<div class="input-item batch-item">
<span class="input-label">批次号</span>
<el-input class="inlineNumber numInput" v-model="batchNo" placeholder="*" @keyup.enter.native="handleAddMaterial" ref="batchInput" clearable/>
</div>
</div>
<!-- 第二行：物料名称（独占一行） -->
<div class="input-row-bottom">
<div class="field-area material-name-area">
<div class="field-title">物料名称</div>
<div class="info-box">{{ currentMaterial.materialName }}</div>
</div>
</div>
</div>
@ -311,13 +314,13 @@ export default {
}
// 检查是否已经添加过该物料
const exists = this.materialList.find(item =>
item.materialCode === this.materialCode.trim()
);
if (exists) {
this.$message.warning('该物料已添加，请勿重复添加');
return;
}
// const exists = this.materialList.find(item =>
// item.materialCode === this.materialCode.trim()
// );
// if (exists) {
// this.$message.warning('该物料已添加，请勿重复添加');
// return;
// }
// 调用后台接口添加物料
const params = {
@ -653,38 +656,32 @@ export default {
.input-section {
background: white;
margin: 8px 16px;
padding: 8px 16px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 输入行 */
.input-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding: 12px 16px 16px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #f0f0f0;
}
/* 物料信息网格布局 */
.material-input-grid {
display: flex;
gap: 12px;
}
.material-column {
display: flex;
flex-direction: column;
gap: 12px;
gap: 10px;
margin-bottom: 12px;
}
.material-code-column {
flex: 2;
/* 第一行：物料编码、单位、入库数量、批次号 */
.input-row-top {
display: flex;
align-items: flex-end;
gap: 10px;
}
.quantity-column {
flex: 1;
margin-left: 2px;
/* 第二行：物料名称（独占一行） */
.input-row-bottom {
display: flex;
width: 100%;
margin-top: 2px;
}
.input-item {
@ -694,7 +691,12 @@ export default {
}
.material-code-item {
flex: 2;
flex: 1.2;
}
.unit-item {
flex: 1;
min-width: 70px;
}
.quantity-item {
@ -705,17 +707,18 @@ export default {
flex: 1;
}
.input-row {
display: flex;
gap: 8px;
margin-bottom: 0;
.material-name-area {
flex: 1;
width: 100%;
}
.input-label {
font-size: 14px;
font-size: 13px;
color: #666;
margin-bottom: 6px;
text-align: left;
font-weight: 500;
line-height: 1.2;
}
.input-field {
@ -723,12 +726,21 @@ export default {
}
.input-field ::v-deep .el-input__inner {
font-size: 12px;
padding: 6px 4px;
font-size: 13px;
padding: 0 10px;
border: 1px solid #17B3A3;
border-radius: 4px;
border-radius: 6px;
height: 44px;
text-align: center;
font-weight: 500;
}
/* disabled状态的输入框样式 */
.input-field ::v-deep .el-input__inner[disabled] {
background-color: #f5f7fa;
border-color: #d0d4d9;
color: #333;
cursor: not-allowed;
}
@ -737,71 +749,55 @@ export default {
.add-material-section {
display: flex;
justify-content: center;
padding-top: 4px;
}
.add-material-btn {
background: #17B3A3;
background: linear-gradient(135deg, #17B3A3 0%, #0d8f7f 100%);
color: white;
border: none;
border-radius: 6px;
padding: 6px 10px;
border-radius: 8px;
padding: 10px 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
min-width: 100px;
box-shadow: 0 1px 3px rgba(23, 179, 163, 0.2);
gap: 8px;
font-size: 15px;
font-weight: 600;
transition: all 0.3s ease;
min-width: 140px;
box-shadow: 0 3px 10px rgba(23, 179, 163, 0.25);
letter-spacing: 0.5px;
}
.add-material-btn:hover {
background: #0d8f7f;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(23, 179, 163, 0.3);
background: linear-gradient(135deg, #0d8f7f 0%, #17B3A3 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(23, 179, 163, 0.35);
}
.add-material-btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(23, 179, 163, 0.2);
box-shadow: 0 3px 8px rgba(23, 179, 163, 0.3);
}
.add-material-btn i {
font-size: 16px;
}
.field-row {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.field-row .field-area {
flex: 1;
margin-bottom: 0;
}
.field-row .material-name-area {
flex: 3;
}
.field-row .unit-area {
flex: 1;
font-size: 18px;
font-weight: bold;
}
.field-area {
margin-bottom: 6px;
margin-top: 2px;
margin-bottom: 0;
}
.field-title {
font-size: 14px;
font-size: 13px;
color: #666;
margin-bottom: 6px;
font-weight: normal;
font-weight: 500;
text-align: left;
line-height: 1.2;
}
.field-input {
@ -809,21 +805,46 @@ export default {
}
.field-input ::v-deep .el-input__inner {
font-size: 16px;
padding: 12px 16px;
font-size: 13px;
padding: 0 10px;
border: 1px solid #dcdfe6;
border-radius: 4px;
border-radius: 6px;
height: 44px;
}
.info-box {
background: #f8f9fa;
padding: 2px 4px;
border-radius: 4px;
font-size: 12px;
color: #666;
min-height: 20px;
border: 1px solid #e9ecef;
background: #f5f7fa;
padding: 0 10px;
border-radius: 6px;
font-size: 13px;
color: #333;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d0d4d9;
font-weight: 500;
line-height: 1.2;
text-align: center;
}
/* 物料名称信息框 - 独占一行，不需要太高 */
.material-name-area .info-box {
height: auto;
min-height: 36px;
padding: 8px 12px;
justify-content: flex-start;
text-align: left;
}
.numInput ::v-deep .el-input__inner {
font-size: 13px;
padding: 0 10px;
border: 1px solid #17B3A3;
border-radius: 6px;
height: 44px;
text-align: center;
font-weight: 500;
}
/* 区域标题 */
@ -1312,20 +1333,16 @@ export default {
padding: 8px 12px;
}
.input-row {
gap: 8px;
}
.material-input-grid {
gap: 8px;
gap: 10px;
}
.material-column {
gap: 10px;
.input-row-top {
gap: 6px;
}
.field-row {
gap: 8px;
.input-row-bottom {
margin-top: 4px;
}

Write Preview
Loading…
Cancel
Save