aiot-app/pages/warehouse/reportLoss copy/detail.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="报损报溢详情"
      @clickLeft="back"
    >
    </uni-nav-bar>

    <view>
      <CellInfo label="报损报溢编码" :value="infoData.code"></CellInfo>
      <CellInfo label="名称" :value="infoData.name"></CellInfo>
      <CellInfo
        label="报损报溢部门"
        :value="infoData.reportDeptName"
      ></CellInfo>
      <CellInfo label="报损报溢人" :value="infoData.reportName"></CellInfo>
      <CellInfo label="审核人部门" :value="infoData.auditDeptName"></CellInfo>
      <CellInfo label="审核人" :value="infoData.auditName"></CellInfo>
      <CellInfo label="备注" :value="infoData.remark"></CellInfo>
    </view>
    <uni-section title="报损报溢明细" type="line">
      <view class="order-box">盘点工单{{ infoData.workOrderCode }}</view>
      <view
        v-for="(item, index) in infoData.list"
        :key="index"
        class="list-card"
      >
        <view class="status" :style="{ color: _getStatus(item.status).color }">
          <text>{{ _getStatus(item.status).name }}</text>
          <text
            >数量：{{
              (([1, 2].includes(item.status) ? '-' : '+') || '') + item.amount
            }}</text
          >
        </view>
        <view class="row first">
          <view class="col">
            <text class="main">{{ item.name }}</text>
            {{ item.code }}
          </view>
        </view>
        <view class="row">
          <view class="col" style="width: 100%">
            <text class="main">货位：</text>
            {{ item.warehouseName }}-{{ item.reservoirName }}-{{
              item.goodsShelfName
            }}-{{ item.goodsAllocationName }}
          </view>
        </view>
        <view class="row">
          <view class="col">
            <text class="label">批次号：</text>
            {{ item.batch }}
          </view>
          <view class="col">
            <text class="label">类型：</text>
            {{ getDictValue('物品类型', item.productType) }}
          </view>
          <view class="col" v-for="(itm, index) in tableHeader" :key="index">
            <text class="label">{{ itm.label }}：</text>
            {{ item[itm.prop] }}
          </view>
          <view class="col" v-if="!item.isUnpack">
            <text class="label">最小单元：</text>
            {{ item.unit }}/{{ item.minPackUnit }}
          </view>
        </view>
      </view>
    </uni-section>
  </view>
</template>

<script>
import { post, postJ, get, getJ } from '@/utils/api.js'
import { getDict, wh_equStatus } from '../enum.js'
import CellInfo from '@/components/CellInfo.vue'
import dictMxins from '@/mixins/dictMixins'
export default {
  components: { CellInfo },
  mixins: [dictMxins],
  data () {
    return {
      pickerIndex: 0,
      deptList: [],
      userList: [],
      infoData: {
        auditId: '',
        auditName: '',
        verifyDeptCode: '',
        verifyDeptName: '',
        workOrderCode: '',
        list: []
      }
    }
  },
  computed: {
    tableHeader () {
      if (this.infoData.list?.length) {
        return this.getTableHeader(this.infoData.list[0].productType)
      }
      return []
    }
  },
  onLoad ({ id }) {
    this.getDetail(id)
    this.requestDict('物品类型')
  },

  methods: {
    getTableHeader (selectEquiType) {
      switch (+selectEquiType) {
        case 3:
          return [{ label: '牌号', prop: 'assetBrand' }]
        case 8:
          return [
            // { label: '型号', prop: 'assetSku' },
			{ label: '型号', prop: 'modelType' },
            { label: '规格', prop: 'specification' }
          ]
        case 4:
          return [
            { label: '牌号', prop: 'assetBrand' },
			{ label: '型号', prop: 'modelType' },
            // { label: '型号', prop: 'assetSku' }
          ]
        case 5: //'周转车'
          return [
            { label: '规格', prop: 'specification' },
            {
              label: '材质',
              prop: 'texture',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.texture
              }
            },
            {
              label: '长宽高',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return `${extendField.length || '-'}*${
                  extendField.width || '-'
                }*${extendField.high || '-'}`
              }
            }
          ]
        case 2: //'舟皿'
          return [
            { label: '规格', prop: 'specification' },
			{ label: '型号', prop: 'modelType' },
            // { label: '型号', prop: 'assetSku' },
            {
              label: '长宽高',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return `${extendField.length || '-'}*${
                  extendField.width || '-'
                }*${extendField.high || '-'}`
              }
            }
          ]
        case 1: //'设备'
          return [
            // { label: '型号', prop: 'assetSku' },
			{ label: '型号', prop: 'modelType' },
            { label: '规格', prop: 'specification' }
          ]
        case 6: //'模具'
          return [
            { label: '牌号', prop: 'assetBrand' },
			{ label: '型号', prop: 'modelType' },
            // { label: '型号', prop: 'assetSku' },
            {
              label: '收缩系数',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.shrinkageCoefficient
              }
            }
          ]
        case 7: //'备品备件'
          return [
            { label: '规格', prop: 'specification' },
			{ label: '型号', prop: 'modelType' },
            // { label: '型号', prop: 'assetSku' }
          ]
      }

      return []
    },
    _getStatus: getDict(wh_equStatus),
    async getDetail (id) {
      const res = await get(this.apiUrl + `/breakag/info/${id}`)
      if (res?.success) {
        this.infoData = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.footBox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.mainBox {
  padding-bottom: 90rpx;

  .order-box {
    color: #7f7f7f;
    background-color: rgba(215, 215, 215, 0.729411764705882);
    line-height: 44rpx;
    border-radius: 44rpx;
    text-align: center;
    font-size: 28rpx;
    margin: 0 20rpx;
  }

  .list-card {
    border-bottom: 6rpx solid #f2f2f2;
    position: relative;
    .status {
      padding: 6rpx 20rpx;
      font-weight: bold;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #f2f2f2;
    }
    .del {
      position: absolute;
      color: $uni-color-order-error !important;
      bottom: 5rpx;
      right: 10rpx;
      font-size: 50rpx !important;
    }
    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      flex-wrap: wrap;
      padding: 10rpx 20rpx;
      color: #7d7d7d;

      &.first {
        color: #000;
        font-size: 28rpx;
        border-bottom: 1rpx solid #f2f2f2;
        .col {
          width: 100%;
        }
      }

      .col {
        width: 50%;
      }
      .label {
        margin-right: 10rpx;
        display: inline-block;
        width: 180rpx;
        text-align: right;
      }
      .main {
        margin-right: 10rpx;
      }
    }
  }
}
</style>