From 7b9260dd7b5c6b865fddccb8126eeb6385370301 Mon Sep 17 00:00:00 2001
From: fengyuan_yang <1976974459@qq.com>
Date: Mon, 2 Mar 2026 15:34:08 +0800
Subject: [PATCH] =?UTF-8?q?2026-03-02=20=E5=85=B6=E4=BB=96=E5=85=A5?=
 =?UTF-8?q?=E5=BA=93=E7=9A=84=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../other-inout/otherInboundDetail.vue        | 169 +++++++++++-------
 1 file changed, 104 insertions(+), 65 deletions(-)

diff --git a/src/views/modules/other-inout/otherInboundDetail.vue b/src/views/modules/other-inout/otherInboundDetail.vue
index f53a809..a0b7494 100644
--- a/src/views/modules/other-inout/otherInboundDetail.vue
+++ b/src/views/modules/other-inout/otherInboundDetail.vue
@@ -13,32 +13,37 @@
 
     <!-- 入库单信息卡片 -->
     <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 class="title-item">
-          <span class="title-label">关联单号</span>
-          <span class="title-value">{{ inboundInfo.relatedOrderNo || '-' }}</span>
-        </div>
-        <div class="title-item">
-          <span class="title-label">行号</span>
-          <span class="title-value">{{ inboundInfo.relatedOrderLineNo || '-' }}</span>
-        </div>
       </div>
-
-      <div class="card-details">
-        <div class="detail-item">
-          <div class="detail-label">标签张数</div>
-          <div class="detail-value">
-            <span class="qualified">{{ inboundInfo.totalLabels || 0 }}</span>
+      <!-- 第二行：关联单号、行号（左）+ 标签张数、物料总数（右靠） -->
+      <div class="card-row-second">
+        <div class="card-row-left">
+          <div class="title-item">
+            <span class="title-label">关联单号</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 title-value-sm">{{ inboundInfo.relatedOrderLineNo || '-' }}</span>
           </div>
         </div>
-        <div class="detail-item">
-          <div class="detail-label">物料总数</div>
-          <div class="detail-value">
-            <span class="qualified">{{ inboundInfo.totalQty || 0 }}</span>
+        <div class="card-row-right">
+          <div class="detail-item">
+            <div class="detail-label">标签张数</div>
+            <div class="detail-value">
+              <span class="qualified">{{ inboundInfo.totalLabels || 0 }}</span>
+            </div>
+          </div>
+          <div class="detail-item">
+            <div class="detail-label">物料总数</div>
+            <div class="detail-value">
+              <span class="qualified">{{ inboundInfo.totalQty || 0 }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -48,7 +53,7 @@
     <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 {