feat: 订货单-审核&审核详情--暂存

+<template>
+  <view class="page">
+    <scroll-view class="scroll" scroll-y>
+      <uni-list>
+        <view class="section">
+          <uni-list-item title="订单编号">
+            <template v-slot:footer>
+              <view class="readonly-text">{{ form.orderNo }}</view>
+            </template>
+          </uni-list-item>
+          <uni-list-item title="供货单位">
+            <template v-slot:footer>
+              <view class="readonly-text">{{ getDicName('SUPPLIER', form.supplyUnit, dicOptions.SUPPLIER) }}</view>
+            </template>
+          </uni-list-item>
+          <uni-list-item title="订货单位">
+            <template v-slot:footer>
+              <view class="readonly-text">{{ form.orderingUnitName }}</view>
+            </template>
+          </uni-list-item>
+          <uni-list-item title="订货日期">
+            <template v-slot:footer>
+              <view class="readonly-text">{{ form.orderDate }}</view>
+            </template>
+          </uni-list-item>
+          <uni-list-item title="生产厂">
+            <template v-slot:footer>
+              <view class="readonly-text">{{ form.workshopName }}</view>
+            </template>
+          </uni-list-item>
+          <uni-list-item title="结算方式或期限">
+            <template v-slot:footer>
+              <view class="readonly-text">{{ form.settlementTerms }}</view>
+            </template>
+          </uni-list-item>
+
+          <uni-list-item title="交货方式">
+            <template v-slot:footer>
+              <uni-easyinput v-model="form.deliveryMethod" placeholder="请输入交货方式" :inputBorder="false" />
+            </template>
+          </uni-list-item>
+        </view>
+
+        <!-- 产品 -->
+        <view class="section2">
+          <Product mode="add" :list="initPurchaseOrderLineList" @change="purchaseOrderLineListChange" />
+        </view>
+
+        <view class="section">
+          <uni-list-item title="价格表编号">
+            <template v-slot:footer>
+              <uni-easyinput v-model="form.priceListNo" placeholder="请输入价格表编号" :inputBorder="false" />
+            </template>
+          </uni-list-item>
+          <uni-list-item title="开票情况">
+            <template v-slot:footer>
+              <uni-easyinput v-model="form.invoicingStatus" placeholder="请输入开票情况" :inputBorder="false" />
+            </template>
+          </uni-list-item>
+          <uni-list-item class="amount-item">
+            <template v-slot:body>
+              <view class="item-title"><text>运费</text></view>
+            </template>
+            <template v-slot:footer>
+              <view class="amount-row">
+                <uni-easyinput type="number" v-model="form.shippingCost" placeholder="0.00" :inputBorder="false" />
+                <text class="unit">元</text>
+              </view>
+            </template>
+          </uni-list-item>
+          <uni-list-item class="amount-item">
+            <template v-slot:body>
+              <view class="item-title"><text>包装费</text></view>
+            </template>
+            <template v-slot:footer>
+              <view class="amount-row">
+                <uni-easyinput type="number" v-model="form.packagingFee" placeholder="0.00" :inputBorder="false" />
+                <text class="unit">元</text>
+              </view>
+            </template>
+          </uni-list-item>
+          <uni-list-item class="select-item" :class="form.executionStandardName ? 'is-filled' : 'is-empty'" clickable
+            @click="openSheet('executionStandard')" :rightText="form.executionStandardName || '请选择'" showArrow>
+            <template v-slot:body>
+              <view class="item-title"><text>执行标准</text></view>
+            </template>
+          </uni-list-item>
+        </view>
+
+
+        <view class="title-header">
+          <image class="title-header_icon" src="/static/images/title.png" />
+          <span>具体质量要求</span>
+        </view>
+
+        <uni-list-item title="件重条头">
+          <template v-slot:footer>
+            <uni-easyinput type="textarea" v-model="form.pieceWeightHeader" placeholder="请输入件重条头"
+              :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="表面">
+          <template v-slot:footer>
+            <uni-easyinput type="textarea" v-model="form.surface" placeholder="请输入表面" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="公差">
+          <template v-slot:footer>
+            <uni-easyinput type="textarea" v-model="form.tolerance" placeholder="请输入公差" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="性能">
+          <template v-slot:footer>
+            <uni-easyinput type="textarea" v-model="form.performance" placeholder="请输入性能" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="成分">
+          <template v-slot:footer>
+            <uni-easyinput type="textarea" v-model="form.element" placeholder="请输入成分" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="包装">
+          <template v-slot:footer>
+            <uni-easyinput type="textarea" v-model="form.packaging" placeholder="请输入包装" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+        <uni-list-item title="备注">
+          <template v-slot:footer>
+            <uni-easyinput type="textarea" v-model="form.remarks" placeholder="请输入备注" :inputBorder="false" />
+          </template>
+        </uni-list-item>
+
+
+      </uni-list>
+    </scroll-view>
+
+    <view class="footer">
+      <view class="view-total">
+        <view class="head">合计</view>
+        <view class="row">
+          <text class="label">总数量</text><text class="value">{{ form.totalQuantity }}</text>
+        </view>
+      </view>
+      <button class="btn submit" type="primary" @click="onSubmit">提交</button>
+    </view>
+    <SingleSelectSheet :visible.sync="sheet.visible" :title="sheet.title" :options="sheet.options" v-model="sheet.value"
+      @confirm="onSheetConfirm" />
+  </view>
+</template>
+
+<script>
+import { getDetailApi, updateApi } from '@/api/order_list.js'
+import Product from './product.vue'
+import SingleSelectSheet from '@/components/single-select/index.vue'
+import { getDicName } from '@/utils/dic.js'
+import { getDicByCodes } from '@/utils/dic'
+
+export default {
+  name: 'OrderListModify',
+  components: { Product, SingleSelectSheet },
+  data() {
+    return {
+      id: '',
+      form: {
+        code: '',
+        supplier: '',
+        buyer: '',
+        // 默认当前日期 格式为 yyyy-MM-dd
+        orderDate: new Date().toISOString().substring(0, 10),
+        unit: '',
+        totalQuantity: '',
+        totalAmountExcludingTax: '',
+        totalAmountIncludingTax: '',
+        totalAmountCapital: '',
+        depositInfo: '',
+        packagingRequirements: '',
+        paymentTerms: '',
+        transportMode: '',
+        destinationId: [],
+        includesPackagingFee: '',
+        includesTransportFee: '',
+        designatedConsignee: '',
+        specialTerms: '',
+        executionStandard: '',
+        executionStandardRemarks: '',
+        specialInstructions: '',
+        remarks: '',
+        pieceWeightHead: '',
+        surface: '',
+        tolerance: '',
+        performance: '',
+        component: '',
+        packaging: '',
+      },
+      initPurchaseOrderLineList: [],
+      dicOptions: { SUPPLIER: [], APPLICABLE_STANDARD: [], AUDIT_STATUS: [] },
+      sheet: { visible: false, title: '请选择', options: [], value: '', field: '' }
+    }
+  },
+  onLoad(query) {
+    this.id = (query && (query.id || query.code)) || ''
+    if (this.id) this.loadDetail(this.id)
+    this.loadDicOptions()
+  },
+  methods: {
+    loadDicOptions() {
+      const dicCodes = ['SUPPLIER', 'APPLICABLE_STANDARD', 'AUDIT_STATUS']
+      return getDicByCodes(dicCodes).then(results => {
+        this.dicOptions.SUPPLIER = results.SUPPLIER && results.SUPPLIER.data ? results.SUPPLIER.data : []
+        this.dicOptions.APPLICABLE_STANDARD = results.APPLICABLE_STANDARD && results.APPLICABLE_STANDARD.data ? results.APPLICABLE_STANDARD.data : []
+        this.dicOptions.AUDIT_STATUS = results.AUDIT_STATUS && results.AUDIT_STATUS.data ? results.AUDIT_STATUS.data : []
+        this.refreshStandardName()
+      }).catch(() => { this.dicOptions = { SUPPLIER: [], APPLICABLE_STANDARD: [], AUDIT_STATUS: [] } })
+    },
+    async loadDetail(id) {
+      try {
+        const res = await getDetailApi(id)
+        const m = res.data || {}
+        const next = { ...this.form, ...m }
+        next.id = m.id || m.code || id
+        next.purchaseOrderLineList = Array.isArray(m.purchaseOrderLineList) ? m.purchaseOrderLineList.map(x => ({ ...x })) : []
+        this.form = next;
+        this.initPurchaseOrderLineList = next.purchaseOrderLineList || [];
+        this.refreshStandardName()
+      } catch (e) {
+        uni.showToast({ title: '加载失败', icon: 'none' })
+      }
+    },
+    refreshStandardName() {
+      const est = (this.dicOptions.APPLICABLE_STANDARD || []).find(o => String(o.code) === String(this.form.executionStandard))
+      this.form.executionStandardName = est ? (est.name || '') : (this.form.executionStandardName || '')
+    },
+    openSheet(field) {
+      if (field === 'executionStandard') {
+        const options = (this.dicOptions.APPLICABLE_STANDARD || []).map(it => ({ label: it.name || '', value: it.code || '' }))
+        const current = this.form.executionStandard
+        const match = options.find(o => String(o.value) === String(current))
+        this.sheet = { ...this.sheet, visible: true, title: '执行标准', options, field, value: match ? match.value : '' }
+      }
+    },
+    onSheetConfirm({ value, label }) {
+      const field = this.sheet.field
+      if (field === 'executionStandard') {
+        this.form.executionStandard = value || ''
+        this.form.executionStandardName = label || ''
+      }
+      this.sheet.visible = false
+    },
+    getDicName: getDicName,
+    async onSubmit() {
+      const payload = { ...this.form }
+      console.log('onSubmit__payload', payload)
+      try {
+        await updateApi(payload)
+        uni.showToast({ title: '保存成功', icon: 'success' })
+        setTimeout(() => { uni.redirectTo({ url: '/pages/order_list/index' }) }, 300)
+      } catch (e) {
+        uni.showToast({ title: (e && e.msg) || '保存失败', icon: 'none' })
+      }
+    },
+    purchaseOrderLineListChange(data) {
+      const list = Array.isArray(data) ? data : []
+      this.form.purchaseOrderLineList = list;
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.scroll {
+  flex: 1;
+  padding: 6rpx 0 310rpx;
+}
+
+
+
+.title-header {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 32rpx 32rpx 22rpx;
+
+  .title-header_icon {
+    width: 32rpx;
+    height: 28rpx;
+    margin-right: 16rpx;
+  }
+
+  span {
+    color: rgba(0, 0, 0, 0.9);
+    font-size: 32rpx;
+    line-height: 44rpx;
+    font-weight: 600;
+  }
+}
+
+
+.section {
+  background: #fff;
+  margin-bottom: 20rpx;
+}
+
+.section2 {
+  background: #f1f1f1;
+}
+
+::v-deep .uni-list {
+  background: transparent;
+
+  &-item {
+    &__extra-text {
+      font-size: 32rpx;
+    }
+
+    &__content-title {
+      font-size: 32rpx;
+      color: rgba(0, 0, 0, 0.9);
+    }
+
+    &__container {
+      padding: 32rpx;
+      align-items: center;
+
+      .uni-easyinput {
+
+        .is-disabled {
+          background-color: transparent !important;
+        }
+
+        &__placeholder-class {
+          font-size: 32rpx;
+          color: rgba(0, 0, 0, 0.4);
+        }
+
+        &__content {
+          border: none;
+
+          &-input {
+            padding-left: 0 !important;
+            height: 48rpx;
+            line-height: 48rpx;
+            font-size: 32rpx;
+          }
+
+          .content-clear-icon {
+            font-size: 44rpx !important;
+          }
+        }
+      }
+
+      .amount-row {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        .uni-easyinput {
+          flex: 1;
+        }
+
+        .unit {
+          margin-left: 16rpx;
+          color: rgba(0, 0, 0, 0.9);
+        }
+      }
+
+      .item-title,
+      .uni-list-item__content {
+        flex: none;
+        min-height: 48rpx;
+        line-height: 48rpx;
+        font-size: 32rpx;
+        position: relative;
+        width: 162rpx;
+        margin-right: 32rpx;
+        color: rgba(0, 0, 0, 0.9);
+        padding-right: 0;
+
+
+        .required {
+          color: red;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: -16rpx;
+        }
+      }
+
+    }
+
+    &.select-item {
+      &.is-empty {
+        .uni-list-item__extra-text {
+          color: rgba(0, 0, 0, 0.4) !important;
+        }
+      }
+
+      &.is-filled {
+        .uni-list-item__extra-text {
+          color: rgba(0, 0, 0, 0.9) !important;
+        }
+      }
+
+      .serial-number-row {
+        display: flex;
+        align-items: center;
+      }
+
+    }
+
+    &.mgb10 {
+      margin-bottom: 20rpx;
+    }
+
+  }
+
+  .title-header {
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 32rpx 32rpx 22rpx;
+
+    &_icon {
+      width: 32rpx;
+      height: 28rpx;
+      margin-right: 16rpx;
+    }
+
+    span {
+      color: rgba(0, 0, 0, 0.9);
+      font-size: 32rpx;
+      line-height: 44rpx;
+      font-weight: 600;
+    }
+  }
+}
+
+/* 只读 easyinput 根据内容自适应高度 */
+::v-deep .uni-list-item__container {
+  align-items: flex-start;
+}
+
+/* 只读文本样式 */
+.readonly-text {
+  color: rgba(0, 0, 0, 0.9);
+  font-size: 32rpx;
+  line-height: 44rpx;
+  text-align: right;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+
+.footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 32rpx 32rpx;
+  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
+  background: #fff;
+  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
+
+  .btn {
+    height: 80rpx;
+    line-height: 80rpx;
+    border-radius: 12rpx;
+    font-size: 32rpx;
+  }
+
+  .submit {
+    background: $theme-primary;
+    color: #fff;
+  }
+
+  .view-total {
+    padding: 20rpx 0;
+
+    .head {
+      font-size: 32rpx;
+      font-weight: 600;
+      line-height: 50rpx;
+      color: rgba(0, 0, 0, 0.9);
+      padding-bottom: 16rpx;
+      margin-bottom: 24rpx;
+      ;
+      border-bottom: 1px dashed #E7E7E7;
+    }
+
+    .row {
+      display: flex;
+      margin-bottom: 24rpx;
+      line-height: 32rpx;
+
+      .label {
+        width: 180rpx;
+        margin-right: 14rpx;
+        color: rgba(0, 0, 0, 0.6);
+        font-size: 28rpx;
+      }
+
+      .value {
+        flex: 1;
+        color: rgba(0, 0, 0, 0.9);
+        font-size: 28rpx;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+    }
+  }
+}
+</style>

+<template>
+  <view class="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 act">{{ getDicName('AUDIT_STATUS',
+            form.examineStatus, dicOptions.AUDIT_STATUS) }}</text></view>
+          <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" :options="genderOptions" :list="form.purchaseOrderLineList" :totalQuantity="form.totalQuantity" />
+        </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>
+    <detail-buttons :buttons="displayButtons" @click="handleButtonClick" />
+  </view>
+</template>
+
+<script>
+import { getDetailApi, cancelApi } from '@/api/order_list.js'
+import Product from './product.vue'
+import DetailButtons from '@/components/detail-buttons/index.vue'
+import {
+  getDicName
+} from '@/utils/dic.js'
+import {
+  getDicByCodes
+} from '@/utils/dic'
+
+export default {
+  name: 'OrderListDetail',
+  components: { Product, DetailButtons },
+  data() {
+    return {
+      form: {},
+      enterpriseTypeOptions: [],
+      genderOptions: [],
+      categoryOptions: [],
+      historyList: [],
+      showExamine: false,
+      buttons: [
+        { text: '编辑', visible: true, variant: 'outline', event: 'edit' },
+        { text: '审核详情', visible: true, variant: 'outline', event: 'auditDetail' },
+        { text: '审核', visible: true, variant: 'primary', event: 'audit' },
+        { text: '申请发货', visible: true, variant: 'outline', event: 'shipmentApply' },
+        { text: '取消', visible: true, variant: 'outline', event: 'cancel', style: { color: 'rgba(0,0,0,0.9)', border: '1px solid #DCDCDC' } },
+      ],
+      dicOptions: {
+        AUDIT_STATUS: [],
+        SUPPLIER: [],
+        APPLICABLE_STANDARD: [],
+      },
+    }
+  },
+  computed: {
+    statusFlags() {
+      const s = String((this.form && this.form.status) || '')
+      const e = String((this.form && this.form.examineStatus) || '')
+      return {
+        isRefuse: e === 'REFUSE',
+        isAudit: e === 'AUDIT',
+        canExamine: !!this.showExamine,
+        canDeliveryApply: s === 'ISSUED',
+        contractCreateBy: this.form.contractCreateBy
+      }
+    },
+    displayButtons() {
+      const f = this.statusFlags;
+      return [
+        { ...this.buttons[0], visible: f.isRefuse && f.contractCreateBy },
+        { ...this.buttons[1], visible: true },
+        { ...this.buttons[2], visible: f.isAudit && f.canExamine },
+        { ...this.buttons[3], visible: f.canDeliveryApply },
+        { ...this.buttons[4], visible: f.isRefuse },
+      ]
+    }
+  },
+  created() {
+    this.loadAllDicData()
+  },
+  onLoad(query) {
+    const id = (query && (query.id || query.code)) || ''
+    const se = (query && (query.todoType === 'WAIT' || query.showExamine === '1' || query.showExamine === true)) || false
+    this.showExamine = !!se
+    if (id) this.loadDetail(id)
+  },
+  methods: {
+    async loadDetail(id) {
+      try {
+        const res = await getDetailApi(id)
+        const data = res.data || {}
+        this.form = { ...data }
+      } catch (e) {
+        this.form = {}
+      }
+    },
+    handleButtonClick(btn) {
+      if (!btn || btn.disabled) return
+      const map = {
+        edit: () => this.onEdit(),
+        auditDetail: () => this.onAuditDetail(),
+        audit: () => this.onAudit(),
+        shipmentApply: () => this.onShipmentApply(),
+        cancel: () => this.onCancel(),
+      }
+      const fn = map[btn.event]
+      if (typeof fn === 'function') fn()
+    },
+    getBusinessId() {
+      return (this.form && (this.form.id || this.form.code)) || ''
+    },
+    onEdit() {
+      const id = this.getBusinessId()
+      const query = id ? ('?id=' + encodeURIComponent(id)) : ''
+      uni.navigateTo({ url: '/pages/order_list/modify' + query })
+    },
+    onAuditDetail() {
+      const CACHE_KEY = 'sourceBusinessId'
+      uni.setStorageSync(CACHE_KEY, this.getBusinessId())
+      uni.navigateTo({ url: '/pages/flow/audit_detail' })
+    },
+    onAudit() {
+      const CACHE_KEY = 'sourceBusinessId'
+      uni.setStorageSync(CACHE_KEY, this.getBusinessId())
+      uni.navigateTo({ url: '/pages/flow/audit' })
+    },
+    onShipmentApply() {
+      const id = this.getBusinessId()
+      const query = id ? ('?id=' + encodeURIComponent(id)) : ''
+      uni.navigateTo({ url: '/pages/order_list/shipment_apply' + query })
+    },
+    onCancel() {
+      const id = this.getBusinessId()
+      if (!id) return
+      uni.showModal({
+        title: '系统提示',
+        content: '是否确定取消该流程？',
+        confirmText: '确定',
+        cancelText: '取消',
+        success: (res) => {
+          if (res && res.confirm) {
+            cancelApi(id).then(() => {
+              uni.showToast({ title: '已取消', icon: 'none' })
+              setTimeout(() => { uni.redirectTo({ url: '/pages/order_list/index' }) }, 300)
+            }).catch(() => {
+              uni.showToast({ title: '取消失败', icon: 'none' })
+            })
+          }
+        }
+      })
+    },
+    getCategoryClass(categoryName) {
+      if (!categoryName) return ''
+      if (categoryName.includes('A') || categoryName.includes('a')) {
+        return 'category_A'
+      } else if (categoryName.includes('B') || categoryName.includes('b')) {
+        return 'category_B'
+      } else if (categoryName.includes('C') || categoryName.includes('c')) {
+        return 'category_C'
+      } else if (categoryName.includes('D') || categoryName.includes('d')) {
+        return 'category_D'
+      }
+    },
+    loadAllDicData() {
+      const dicCodes = ['AUDIT_STATUS', 'SUPPLIER', 'APPLICABLE_STANDARD']
+      return getDicByCodes(dicCodes).then(results => {
+        this.dicOptions.AUDIT_STATUS = results.AUDIT_STATUS.data || []
+        this.dicOptions.SUPPLIER = results.SUPPLIER.data || []
+        this.dicOptions.APPLICABLE_STANDARD = results.APPLICABLE_STANDARD.data || []
+      }).catch(() => {
+        this.dicOptions = {
+          AUDIT_STATUS: [],
+          SUPPLIER: [],
+          APPLICABLE_STANDARD: [],
+        }
+      })
+    },
+    getDicName: getDicName,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.scroll {
+  flex: 1;
+  padding: 8rpx 0 144rpx 0;
+}
+
+.detail-page {
+  background: #f3f3f3;
+}
+
+.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;
+}
+
+.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 {
+    width: 32rpx;
+    height: 28rpx;
+    margin-right: 16rpx;
+  }
+
+  span {
+    color: rgba(0, 0, 0, 0.9);
+    font-size: 32rpx;
+    line-height: 44rpx;
+    font-weight: 600;
+  }
+}
+</style>