要货审批通用页面调整

src/views/ship-approval/ShipApproval.vue

 <template>
   <div class="lists">
-    <van-nav-bar class="status_bar" title="发货审批" left-arrow @click-left="onClickLeft" />
+    <van-nav-bar class="status_bar" title="发货详情" left-arrow @click-left="onClickLeft" />
     <div class="header-bg"><img class="header-bg-img" src="@/assets/images/nav_bg@3x.png" /></div>
     <div class="main">
       <div class="list-wrapper">
@@ -179,7 +179,7 @@
         </div>
         <div class="block">
           <van-collapse class="step-block" v-model="activeNames" :border="false">
-            <van-collapse-item title="审批" name="1" :border="false">
+            <van-collapse-item title="操作" name="1" :border="false">
               <van-steps
                 direction="vertical"
                 :active="stepActive"
@@ -216,7 +216,7 @@
             </van-collapse-item>
           </van-collapse>
           <div class="approval-block">
-            <span class="title">审批结果</span>
+            <span class="title">操作结果</span>
             <van-field
               :disabled="!flag"
               v-model="pickerVal"
@@ -228,14 +228,38 @@
             />
           </div>
           <div class="remark-block">
-            <span class="title">审批意见</span>
-            <textarea
-              :disabled="!flag"
-              v-model="conditions.handleOpinion"
-              class="text"
-              type="textarea"
-              rows="2"
-            />
+            <span class="title">情况说明</span>
+            <template v-if="isFirstApprovalNode">
+              <van-field
+                v-model="form.orderQuantity"
+                :disabled="!flag"
+                label="要货量（件）"
+                type="number"
+                placeholder="请输入"
+                required
+              />
+              <van-field
+                v-model="form.systemStock"
+                :disabled="!flag"
+                label="系统库存量（件）"
+                type="number"
+                placeholder="请输入"
+                required
+              />
+              <van-field
+                v-model="form.realTimeStock"
+                :disabled="!flag"
+                label="实时库存量（件）"
+                type="number"
+                placeholder="请输入"
+                required
+              />
+            </template>
+            <template v-else>
+              <div class="text display-text">
+                {{ firstApprovalOpinion || '—' }}
+              </div>
+            </template>
           </div>
         </div>
 
@@ -246,7 +270,7 @@
     <div class="bottom">
       <!-- <van-button plain type="primary">确认</van-button> -->
       <van-button
-        v-if="pickerVal === '同意'"
+        v-if="pickerVal === '已阅'"
         plain
         :disabled="!flag"
         type="primary"
@@ -297,12 +321,15 @@ export default {
       form: {
         baseAuditQuantity: '',
         warAuditQuantity: '',
-        salecenterAuditQuantity: ''
+        salecenterAuditQuantity: '',
+        orderQuantity: '',
+        systemStock: '',
+        realTimeStock: ''
       },
       showPicker: false,
       invoiceOccupancyDetailShow: false,
-      columns: ['同意', '不同意'],
-      pickerVal: '同意',
+      columns: ['已阅', '取消'],
+      pickerVal: '已阅',
       pickerValIndex: 0,
       stepActive: '0',
       conditions: {
@@ -338,6 +365,18 @@ export default {
     },
     isReadonly() {
       return false
+    },
+    isFirstApprovalNode() {
+      if (this.tablePathData.length > 1 && this.tablePathData[1].statusId === 'executing') {
+        return true
+      }
+      return false
+    },
+    firstApprovalOpinion() {
+      if (this.tablePathData.length > 1) {
+        return this.tablePathData[1].opinion || ''
+      }
+      return ''
     }
   },
   created() {
@@ -421,10 +460,46 @@ export default {
         })
         .catch(() => {})
     },
+    buildOpinionText() {
+      const parts = []
+      if (this.form.orderQuantity !== '' && this.form.orderQuantity !== null && this.form.orderQuantity !== undefined) {
+        parts.push(`要货量：${this.form.orderQuantity}件`)
+      }
+      if (this.form.systemStock !== '' && this.form.systemStock !== null && this.form.systemStock !== undefined) {
+        parts.push(`系统库存量：${this.form.systemStock}件`)
+      }
+      if (this.form.realTimeStock !== '' && this.form.realTimeStock !== null && this.form.realTimeStock !== undefined) {
+        parts.push(`实时库存量：${this.form.realTimeStock}件`)
+      }
+      return parts.join('，')
+    },
+    validateFirstNodeFields() {
+      if (this.form.orderQuantity === '' || this.form.orderQuantity === null || this.form.orderQuantity === undefined) {
+        Toast('要货量不能为空')
+        return false
+      }
+      if (this.form.systemStock === '' || this.form.systemStock === null || this.form.systemStock === undefined) {
+        Toast('系统库存量不能为空')
+        return false
+      }
+      if (this.form.realTimeStock === '' || this.form.realTimeStock === null || this.form.realTimeStock === undefined) {
+        Toast('实时库存量不能为空')
+        return false
+      }
+      return true
+    },
     async submit(handleResult) {
       this.conditions = { ...this.conditions }
       this.conditions.handleResult = handleResult
       const params = JSON.parse(JSON.stringify(this.conditions))
+
+      if (this.isFirstApprovalNode) {
+        if (!this.validateFirstNodeFields()) {
+          return
+        }
+        this.conditions.handleOpinion = this.buildOpinionText()
+        params.handleOpinion = this.conditions.handleOpinion
+      }
       // if (this.isShowWarZone && !this.form.baseAuditQuantity) {
       //   this.form.baseAuditQuantity = params.wantGoodsDetailList[0].wantQuantity
       // }
@@ -785,12 +860,15 @@ export default {
     }
     .text {
       width: 311px;
-      height: 91px;
+      min-height: 91px;
       background: #f5f6f7;
       border-radius: 4px;
       appearance: none;
       border: none;
       padding: 8px 14px;
+      font-size: 14px;
+      line-height: 22px;
+      color: #333;
     }
   }
   .approval-block {