aiot-app/pages/warehouse/inventory/batch/components/BaseInfo.vue

<template>
  <view class="detail-content">
    <view class="list-wrap-1">
      <view class="item">
        <view class="s1"> 类型标识 </view>
        <view class="s2">
          {{ baseInfo.assetCode }}
        </view>
      </view>
      <view class="item">
        <view class="s1"> 物品类型 </view>
        <view class="s2">
          {{ getDictValue('物品类型', baseInfo.assetType) }}
        </view>
      </view>
      <view class="item">
        <view class="s1"> 物品编码 </view>
        <view class="s2">
          {{ baseInfo.assetCode }}
        </view>
      </view>
      <view class="item">
        <view class="s1"> 物品名称 </view>
        <view class="s2">
          {{ baseInfo.assetName }}
        </view>
      </view>
      <view class="item" v-for="(item, index) in uniqueData" :key="index">
        <view class="s1"> {{ item.label }} </view>
        <view class="s2">
          {{ baseInfo[item.prop] }}
        </view>
      </view>

      <view class="item">
        <view class="s1"> 分类 </view>
        <view class="s2">
          {{ baseInfo.classificationUrl }}
        </view>
      </view>
      <view class="item">
        <view class="s1"> 计量单位 </view>
        <view class="s2">
          {{ baseInfo.unit }}
        </view>
      </view>
      <view class="item">
        <view class="s1"> 安全库存 </view>
        <view class="s2">
          {{ baseInfo.safeStock }}
        </view>
      </view>
      <view class="item">
        <view class="s1"> 实时库存 </view>
        <view class="s2">
          {{ baseInfo.realInventoryNum }}
        </view>
      </view>
      <view class="item">
        <view class="s1"> 锁单数量 </view>
        <view class="s2"> </view>
      </view>
      <view class="item">
        <view class="s1"> 空闲数量 </view>
        <view class="s2"> </view>
      </view>
      <view class="item">
        <view class="s1"> 允许拆包 </view>
        <view class="s2">
          {{ baseInfo.isUnpack ? '是' : '否' }}
        </view>
      </view>
      <view class="item">
        <view class="s1"> 描述 </view>
        <view class="s2">
          {{ baseInfo.description }}
        </view>
      </view>
    </view>

    <uni-collapse accordion>
      <!-- 模具、物料 -->
      <uni-collapse-item
        :show-animation="true"
        :open="false"
        :typeOpen="1"
        title="匹配产品"
        v-if="[6, 3].includes(baseInfo.assetType)"
      >
        <view class="match-view">
          <view
            class="match-item"
            v-for="(item, index) in productData"
            :key="index"
          >
            <view>{{ item.informationCode }}</view>
            <view>{{ item.informationName }}</view>
          </view>
        </view>
        <u-empty v-if="!productData.length" class="emptyPadding"> </u-empty>
      </uni-collapse-item>
      <!-- 生产设备、产品 -->
      <uni-collapse-item
        :show-animation="true"
        :open="false"
        :typeOpen="1"
        title="匹配模具"
        v-if="[1, 4].includes(baseInfo.assetType)"
      >
        <view class="match-view">
          <view
            class="match-item"
            v-for="(item, index) in mouldData"
            :key="index"
          >
            <view class="label">{{ item.informationCode }}</view>
            <view>{{ item.informationName }}</view>
          </view>
        </view>
        <u-empty v-if="!mouldData.length" class="emptyPadding"> </u-empty>
      </uni-collapse-item>
      <!-- 生产设备 -->
      <uni-collapse-item
        :show-animation="true"
        :open="false"
        :typeOpen="1"
        title="匹配备品备件"
        v-if="[1].includes(baseInfo.assetType)"
      >
        <view class="match-view">
          <view
            class="match-item"
            v-for="(item, index) in partData"
            :key="index"
          >
            <view class="label">{{ item.informationCode }}</view>
            <view>{{ item.informationName }}</view>
          </view>
        </view>
        <u-empty v-if="!partData.length" class="emptyPadding"> </u-empty>
      </uni-collapse-item>
      <!-- 模具、备品备件 -->
      <uni-collapse-item
        :show-animation="true"
        :open="false"
        :typeOpen="1"
        title="匹配设备"
        v-if="[1].includes(baseInfo.assetType)"
      >
        <view class="match-view">
          <view
            class="match-item"
            v-for="(item, index) in facilityData"
            :key="index"
          >
            <view class="label">{{ item.informationCode }}</view>
            <view>{{ item.informationName }}</view>
          </view>
        </view>
        <u-empty v-if="!facilityData.length" class="emptyPadding"> </u-empty>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { get } from '@/utils/api.js'
// import { getDetails as getMatchData } from '@/api/stockManagement/itemInformation'
export default {
  data () {
    return {
      productData: [],
      mouldData: [],
      partData: [],
      bomData: [],
      facilityData: []
    }
  },
  props: {
    baseInfo: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapGetters(['getDictValue']),
    uniqueData () {
      switch (+this.baseInfo.assetType) {
        case 3: //物料
          return [{ label: '牌号', prop: 'brandNum' }]
        case 8: //耗材
          return [
            { label: '型号', prop: 'modelType' },
            { label: '规格', prop: 'specification' }
          ]
        case 4: //产品
          return [
            { label: '牌号', prop: 'brandNum' },
            { label: '型号', prop: 'modelType' },
            {
              label: '标准单重',
              prop: 'modelType',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return `${extendField.unqualifiedRate || '-'}KG`
              }
            },
            {
              label: '不良品率',
              prop: 'modelType',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return `${extendField.unqualifiedRate || '-'}%`
              }
            }
          ]
        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: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.angle
              }
            },
            {
              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: 'modelType' },
            { label: '规格', prop: 'specification' }
          ]
        case 6: //'模具'
          return [
            { label: '牌号', prop: 'brandNum' },
            { label: '型号', prop: 'modelType' },
            {
              label: '收缩系数',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.shrinkageCoefficient
              }
            },
            {
              label: '芯杆数量',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.mandrelNum
              }
            },
            {
              label: '模孔数量',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.dieHoleNum
              }
            },
            {
              label: '上冲头数量',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.upperPunchNum
              }
            },
            {
              label: '下冲头数量',
              prop: '',
              formatter (row) {
                if (!row?.extendField) return ''
                const extendField = JSON.parse(row.extendField)
                return extendField.lowerPunchNum
              }
            }
          ]
        case 7: //'备品备件'
          return [
            { label: '规格', prop: 'specification' },
            { label: '型号', prop: 'modelType' }
          ]
      }

      return []
    }
  },
  created () {
    this.requestDict('物品类型')
    this._getMatchData()
  },
  methods: {
    ...mapActions('dict', ['requestDict']),
    async _getMatchData () {
      const res = await get(
        this.apiUrl + `/information/info/${this.baseInfo.materialId}`
      )
      if (res?.success) {
        for (const key in res.data.informationRelationMap) {
          this.matchList(key, res.data.informationRelationMap)
        }
      }
    },
    matchList (key, data) {
      switch (key) {
        case 'w01': {
          this.facilityData = data[key]
          break
        }
        case 'w04': {
          this.mouldData = data[key]
          break
        }
        case 'w05': {
          this.partData = data[key]
          break
        }
        case 'w07': {
          this.productData = data[key]
          break
        }
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list-wrap-1 {
  padding: 30rpx;

  .item {
    color: #000000;
    font-size: 28rpx;
    padding: 10rpx 0;
    display: flex;
    justify-content: space-between;
  }

  .item + .item {
    border-top: 1px dashed #555;
  }
}

.emptyPadding {
  padding: 20rpx 0;
}

.match-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
  .match-item {
    width: 49%;
    display: flex;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 0rpx 10rpx;
    box-sizing: border-box;
    & + .match-item {
      margin-left: 2%;
    }
    > view {
      padding: 15rpx 0;
    }
    .label {
      border-right: 1rpx solid #ccc;
      padding-right: 5rpx;
    }
  }
}
</style>