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

<template>
  <!-- 备品备件弹窗 -->
  <u-popup :show="popShow" @close="close" mode="center" class="u-popup">
    <view class="bpbj">
      <view class="title"> 物品基本信息 </view>
      <view class="detail-content">
        <view class="list-wrap-1">
          <view class="item">
            <view class="s1"> 类型标识 </view>
            <view class="s2">
              {{ info.assetCode }}
            </view>
          </view>
          <view class="item">
            <view class="s1"> 物品类型 </view>
            <view class="s2">
              {{ getDictValue('物品类型', info.assetType) }}
            </view>
          </view>
          <view class="item">
            <view class="s1"> 物品编码 </view>
            <view class="s2">
              {{ info.assetCode }}
            </view>
          </view>
          <view class="item">
            <view class="s1"> 物品名称 </view>
            <view class="s2">
              {{ info.assetName }}
            </view>
          </view>
          <view class="item" v-for="(item, index) in uniqueData" :key="index">
            <view class="s1"> {{ item.label }} </view>
            <view class="s2">
              {{ info[item.prop] }}
            </view>
          </view>

          <view class="item">
            <view class="s1"> 计量单位 </view>
            <view class="s2">
              {{ info.unit }}
            </view>
          </view>
          <view class="item">
            <view class="s1"> 包装单位 </view>
            <view class="s2">
              {{ info.minPackUnit }}
            </view>
          </view>
          <view class="item">
            <view class="s1"> 保质期 </view>
            <view class="s2">
              {{ info.expirationDate }}{{ dateDict[info.expirationDateUnit] }}
            </view>
          </view>
          <view class="item">
            <view class="s1"> 允许拆包 </view>
            <view class="s2">
              {{ info.isUnpack ? '是' : '否' }}
            </view>
          </view>
          <view class="item">
            <view class="s1"> 库存总数 </view>
            <view class="s2">
              {{ info.realInventoryNum }}
            </view>
          </view>
          <!-- <view class="item">
            <view class="s1"> 包装数量 </view>
            <view class="s2"> {{ info.outInNum }}{{ info.minPackUnit }} </view>
          </view> -->
        </view>
      </view>
      <view class="close" @click="close">
        <u-button text="关闭"></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { post } from '@/utils/api.js'
import { mapGetters, mapActions } from 'vuex'
export default {
  props: ['info'],
  data () {
    return {
      popShow: false,
      dateDict: {
        minute: '分钟',
        hour: '小时',
        day: '天',
        month: '月',
        year: '年'
      }
    }
  },
  computed: {
    ...mapGetters(['getDictValue']),
    uniqueData () {
      switch (+this.info.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('物品类型')
  },
  methods: {
    ...mapActions('dict', ['requestDict']),
    open (item) {
      this.popShow = true
    },
    close () {
      this.popShow = false
    }
  }
}
</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;
  }
}
.bpbj {
  width: 600rpx;
  .title {
    margin-bottom: 7px;
    background-color: #333333;
    text-align: center;
    color: #fff;
    padding: 10rpx 0;
  }

  /deep/.u-number-box {
    .u-number-box__minus,
    .u-number-box__plus,
    .u-number-box__input {
      font-size: 30rpx;
      height: 1.6em !important;
    }

    .u-number-box__input {
      width: 2em !important;
    }

    .u-number-box__minus,
    .u-number-box__plus {
      background-color: $j-primary-border-green !important;

      .u-icon__icon {
        color: #fff !important;
      }
    }
  }
}
</style>