From 72b68753a4e2b88ddea18238a0810dea5b010655 Mon Sep 17 00:00:00 2001 From: fengyuan_yang <1976974459@qq.com> Date: Wed, 12 Nov 2025 16:07:11 +0800 Subject: [PATCH] =?UTF-8?q?2025-11-11=20pda=E5=85=B6=E5=AE=83=E5=85=A5?= =?UTF-8?q?=E5=BA=93=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../other-inout/otherInboundDetail.vue | 253 ++++++++++-------- 1 file changed, 135 insertions(+), 118 deletions(-) diff --git a/src/views/modules/other-inout/otherInboundDetail.vue b/src/views/modules/other-inout/otherInboundDetail.vue index 33abeb6..fa1d63f 100644 --- a/src/views/modules/other-inout/otherInboundDetail.vue +++ b/src/views/modules/other-inout/otherInboundDetail.vue @@ -42,10 +42,10 @@
- -
+ +
-
+
物料编码
- -
-
物料名称
-
{{ currentMaterial.materialName}}
+ +
+ 单位 +
-
- -
- -
-
- 入库数 - -
-
- 批次号 - -
+ +
+ 入库数 +
- -
-
单位
-
{{ currentMaterial.unit }}
+ +
+ 批次号 + +
+
+ + +
+
+
物料名称
+
{{ currentMaterial.materialName }}
@@ -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; }