feat: 发货单-审核&审核详情

 <template>
-  <view class="page">
+  <!-- 办事处内勤 可编辑（部分编辑字段），其他角色都是不可编辑 -->
+  <view v-if="!isReadonly" class="page">
     <scroll-view class="scroll" scroll-y>
       <uni-list>
         <view class="section">
@@ -145,6 +146,57 @@
     <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
       @confirm="onSheetConfirm" />
   </view>
+  <view v-else class="view-page">
+    <scroll-view class="scroll" scroll-y>
+      <view class="detail-page">
+        <view class="section">
+          <text class="row company">{{ form.orderNo }}</text>
+          <view :class="['status', `status_${form.status}`]" />
+          <view class="row"><text class="label">供货单位</text><text class="value">{{ getDicName('SUPPLIER',
+            form.supplyUnit, dicOptions.SUPPLIER) }}</text></view>
+          <view class="row"><text class="label">订货单位</text><text class="value">{{ form.orderingUnitName }}</text>
+          </view>
+          <view class="row"><text class="label">订货日期</text><text class="value">{{ form.orderDate }}</text></view>
+          <view class="row"><text class="label">生产厂</text><text class="value">{{ form.workshopName }}</text></view>
+          <view class="row"><text class="label">结算方式或期限</text><text class="value">{{ form.settlementTerms }}</text>
+          </view>
+          <view class="row"><text class="label">交货方式</text><text class="value">{{ form.deliveryMethod }}</text></view>
+        </view>
+
+        <!-- 产品 -->
+        <view class="mgb10">
+          <Product mode="view" :list="form.purchaseOrderLineList"
+            :totalQuantity="form.totalQuantity || 0" />
+        </view>
+
+        <view class="section">
+          <view class="row"><text class="label">价格表编号</text><text class="value">{{ form.priceListNo }}</text></view>
+          <view class="row"><text class="label">开票情况</text><text class="value">{{ form.invoicingStatus }}</text></view>
+          <view class="row"><text class="label">运费</text><text class="value">{{ form.shippingCost }}</text></view>
+          <view class="row"><text class="label">包装费</text><text class="value">{{ form.packagingFee }}</text></view>
+          <view class="row"><text class="label">执行标准</text><text class="value">{{ getDicName('APPLICABLE_STANDARD',
+            form.executionStandard, dicOptions.APPLICABLE_STANDARD) }}</text></view>
+        </view>
+
+        <view class="title-header">
+          <image class="title-header_icon" src="/static/images/title.png" />
+          <span>具体质量要求</span>
+        </view>
+        <view class="section">
+          <view class="row"><text class="label">件重条头</text><text class="value">{{ form.pieceWeightHeader }}</text>
+          </view>
+          <view class="row"><text class="label">表面</text><text class="value">{{ form.surface }}</text></view>
+          <view class="row"><text class="label">公差</text><text class="value">{{ form.tolerance }}</text></view>
+          <view class="row"><text class="label">性能</text><text class="value">{{ form.performance }}</text></view>
+          <view class="row"><text class="label">成分</text><text class="value">{{ form.element }}</text></view>
+          <view class="row"><text class="label">包装</text><text class="value">{{ form.packaging }}</text></view>
+          <view class="row"><text class="label">备注</text><text class="value">{{ form.remarks }}</text></view>
+        </view>
+
+      </view>
+    </scroll-view>
+
+  </view>
 </template>
 
 <script>
@@ -155,7 +207,7 @@ import { getDicName } from '@/utils/dic.js'
 import { getDicByCodes } from '@/utils/dic'
 
 export default {
-  name: 'OrderListModify',
+  name: 'OrderListApprove',
   components: { Product, SingleSelectSheet },
   props: { id: { type: [String, Number], default: '' } },
   data() {
@@ -193,7 +245,14 @@ export default {
       },
       initPurchaseOrderLineList: [],
       dicOptions: { SUPPLIER: [], APPLICABLE_STANDARD: [] },
-      sheet: { visible: false, title: '请选择', options: [], value: '', field: '' }
+      sheet: { visible: false, title: '请选择', options: [], value: '', field: '' },
+      isReadonly: false,
+    }
+  },
+  computed: {
+    roleCodes() {
+      const g = this.$store && this.$store.getters
+      return (g && g.roleCodes) || []
     }
   },
   watch: {
@@ -203,10 +262,22 @@ export default {
         const v = (val !== undefined && val !== null) ? String(val) : ''
         if (v) this.loadDetail(v)
       }
+    },
+    roleCodes: {
+      immediate: true,
+      handler(val) {
+        console.log('roleCodes', val);
+        // 办事处内勤 可编辑（部分编辑字段），其他角色都是不可编辑
+        if (val.includes('bscnq')) {
+          this.isReadonly = false;
+        } else {
+          this.isReadonly = true;
+        }
+      }
     }
   },
   created() {
-    this.loadAllDicData()
+    this.loadDicOptions()
   },
   methods: {
     loadDicOptions() {
@@ -267,6 +338,10 @@ export default {
       const list = Array.isArray(data) ? data : []
       this.form.purchaseOrderLineList = list;
     },
+    getFormValues() {
+      const m = this.form || {}
+      return JSON.parse(JSON.stringify(m))
+    }
   }
 }
 </script>
@@ -445,11 +520,6 @@ export default {
   }
 }
 
-/* 只读 easyinput 根据内容自适应高度 */
-::v-deep .uni-list-item__container {
-  align-items: flex-start;
-}
-
 /* 只读文本样式 */
 .readonly-text {
   color: rgba(0, 0, 0, 0.9);
@@ -519,4 +589,127 @@ export default {
     }
   }
 }
+
+.view-page {
+  .scroll {
+    padding: 0;
+  }
+
+  .section {
+    padding: 32rpx;
+    background: #fff;
+    margin-bottom: 20rpx;
+    position: relative;
+
+    .status {
+      position: absolute;
+      top: 16rpx;
+      right: 52rpx;
+      width: 180rpx;
+      height: 146rpx;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: center;
+
+      // 已下发
+      &_ISSUED {
+        background-image: url('~@/static/images/order_list/status_ISSUED.png');
+      }
+
+      // 待发货
+      &_WAIT {
+        background-image: url('~@/static/images/order_list/status_WAIT.png');
+      }
+
+      // 部分发货
+      &_TRANSIT {
+        background-image: url('~@/static/images/order_list/status_TRANSIT.png');
+      }
+
+      // 发货完成
+      &_SHIPPED {
+        background-image: url('~@/static/images/order_list/status_SHIPPED.png');
+      }
+
+      // 已签收
+      &_DELIVERED {
+        background-image: url('~@/static/images/order_list/status_DELIVERED.png');
+      }
+
+    }
+  }
+
+  .mgb10 {
+    margin-bottom: 20rpx;
+  }
+
+  .row {
+    display: flex;
+    margin-bottom: 28rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.company {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.9);
+      padding-top: 32rpx;
+      line-height: 50rpx;
+    }
+
+    .label {
+      max-width: 420rpx;
+      line-height: 32rpx;
+      font-size: 28rpx;
+      color: rgba(0, 0, 0, 0.6);
+    }
+
+    .value {
+      flex: 1;
+      line-height: 32rpx;
+      font-size: 28rpx;
+      color: rgba(0, 0, 0, 0.9);
+      text-align: right;
+
+      &.act {
+        color: $theme-primary;
+      }
+
+      .category {
+        display: inline-block;
+        padding: 4rpx 12rpx;
+        border-radius: 6rpx;
+        font-size: 24rpx;
+        width: auto;
+
+        &.category_A {
+          background: #FFF0ED;
+          color: #D54941;
+        }
+
+        &.category_B {
+          background: #FFF1E9;
+          color: #E37318;
+        }
+
+        &.category_C {
+          background: #F2F3FF;
+          color: $theme-primary;
+        }
+
+        &.category_D {
+          background: #E3F9E9;
+          color: #2BA471;
+        }
+      }
+    }
+  }
+
+  .card {
+    padding: 16rpx 0 8rpx;
+    border-top: 1rpx solid #f0f0f0;
+  }
+}
 </style>

@@ -19,7 +19,7 @@
 
         <!-- 产品 -->
         <view class="mgb10">
-          <Product mode="view" :options="genderOptions" :list="form.purchaseOrderLineList" :totalQuantity="form.totalQuantity" />
+          <Product mode="view" :options="genderOptions" :list="form.purchaseOrderLineList" :totalQuantity="form.totalQuantity || 0" />
         </view>
        
         <view class="section">

@@ -17,7 +17,7 @@
 
         <!-- 产品 -->
         <view class="mgb10">
-          <Product mode="view" :options="genderOptions" :list="form.purchaseOrderLineList" :totalQuantity="form.totalQuantity" />
+          <Product mode="view" :list="form.purchaseOrderLineList" :totalQuantity="form.totalQuantity || 0" />
         </view>
        
         <view class="section">
@@ -67,7 +67,6 @@ export default {
     return {
       form: {},
       enterpriseTypeOptions: [],
-      genderOptions: [],
       categoryOptions: [],
       historyList: [],
       showExamine: false,
@@ -263,70 +262,14 @@ export default {
   border-top: 1rpx solid #f0f0f0;
 }
 
-.history-header {
-  display: flex;
-  background: #F7F7F7;
-  padding: 20rpx 52rpx 20rpx 32rpx;
-
-  .col {
-    font-size: 28rpx;
-    color: rgba(0, 0, 0, 0.9);
-    line-height: 40rpx;
-  }
-
-  .col1 {
-    width: 20%;
-  }
-
-  .col2 {
-    width: 50%;
-    text-align: center;
-  }
-
-  .col3 {
-    width: 30%;
-    text-align: right;
-  }
-}
-
-.history-row {
-  display: flex;
-  padding: 20rpx 52rpx 20rpx 32rpx;
-  border-bottom: 1rpx solid #f7f7f7;
-
-  .col {
-    font-size: 28rpx;
-    color: rgba(0, 0, 0, 0.9);
-    line-height: 40rpx;
-  }
-
-  .col1 {
-    width: 20%;
-  }
-
-  .col2 {
-    width: 50%;
-    text-align: center;
-  }
-
-  .col3 {
-    width: 30%;
-    text-align: right;
-  }
-
-  .link {
-    color: $theme-primary;
-  }
-}
 
 .title-header {
   background-color: #fff;
   display: flex;
   align-items: center;
   padding: 32rpx 32rpx 22rpx;
-  border-bottom: 1rpx dashed #f0f0f0;
 
-  &_icon {
+  .title-header_icon {
     width: 32rpx;
     height: 28rpx;
     margin-right: 16rpx;
@@ -339,4 +282,5 @@ export default {
     font-weight: 600;
   }
 }
+
 </style>