WMS_IAC_FE/PC/UI.WinIn.FasterZ.Store/src/components/currenDescriptions/index.vue

<template>
  <el-descriptions
    class="currenDescriptionsPage"
    :title="title"
    :column="column"
    :direction="direction"
    :colon="colon"
    :border="border"
    v-loading="currenDescriptionsLoading"
  >
  <template>
    <el-descriptions-item
      :label="item.label"
      v-for="(item, index) in tabsDesTions"
      :key="index"
      :labelStyle="{'text-align': 'right','padding-right':'10px'}"
    >
      <!-- 时间转换 -->
      <span v-if="item.apiBaseType && item.apiBaseType == 'datetime'">{{
        propsData[item.prop] | formatDate
      }}</span>
      <!-- 枚举 -->
      <span v-else-if="item.isEnums">
        {{ initApiEnumList(item,propsData[item.prop]) }}
      </span>
      <!-- 布尔 -->
      <span v-else-if="item.apiBaseType == 'boolean'">
        {{ propsData[item.prop] ? '是' : '否' }}
      </span>
      <!-- 数值 -->
      <span v-else-if="item.apiBaseType == 'number'">
        {{ propsData[item.prop] }}
      </span>
      <span v-else>
        {{ propsData[item.prop] ? propsData[item.prop] + "" : propsData[item.prop] }}
      </span>
    </el-descriptions-item>
  </template>
    <el-descriptions-item
      v-for="item in descriptionsData"
      :label="item.label"
      :key="item.label"
      >{{ item.data }}</el-descriptions-item
    >
    <slot></slot>
  </el-descriptions>
</template>
<script>
import { parseTime } from "@/utils/formatTime"
import { formatTimeStrToStr } from "@/utils/formatTime"
import { fileStorage } from "@/api/wms-api"

let that
export default {
  name:'curren-descriptions',
  data () {
    return {
      // 临时存储文件编号 防止重复请求图片
      blobName: '',
      currenDescriptionsLoading: false
    }
  },
  beforeCreate () {
    that = this;
  },
  filters: {
    formatDate (time) {
      if (time == null) {
        return '-'
      }
      return formatTimeStrToStr(time)
    },
    formatOnlyDate (time) {
      var date = new Date(time);
      return parseTime(date).substring(0,10)
    },
    formatDatePicture(val) {
      if (val !== undefined && that.blobName !== val) {
        that.blobName = val
        that.currenDescriptionsLoading = true
        fileStorage({blobName: val}).then(res => {
          var byteString = atob(res.bytes)
          var arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组
          var intArray = new Uint8Array(arrayBuffer) // 创建视图
          for (var i = 0; i < byteString.length; i++) {
            intArray[i] = byteString.charCodeAt(i)
          }
          const blob = new Blob([intArray], { type: '' })
          var img = new Image()
          img.width="100" 
          img.height="100"
          img.src = URL.createObjectURL(blob)
          var otest = document.getElementById("uploadPictureCardRef")
          otest.innerHTML = ''
          otest.appendChild(img)
          that.currenDescriptionsLoading = false
        }).catch(err => {
          console.log(err)
          that.currenDescriptionsLoading = false
        })
      }
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    colon: {
      type: Boolean,
      default: true
    },
    column: {
      type: Number,
      default: 1
    },
    border: {
      type: Boolean,
      default: false
    },
    descriptionsData: {
      type: Array,
      default: () => {
        return []
      }
    },
    direction: {
      type: String,
      default: 'horizontal'
    },
    tabsDesTions: {
      type: Array,
      default: () => {
        return []
      }
    },
    propsData: {
      type: Object,
      default: () => {
        return {}
      }
    }
    
  },
  methods:{
    // 转义枚举值
    initApiEnumList(item,data){
      let _item_enumList = {}
      item.enums_list.forEach((item,key)=>{
        _item_enumList[item.value] = item.label
      })
      return _item_enumList[data] || '未定义'
    },
  }
}
</script>
<style lang="scss">
.currenDescriptionsPage{
  th{
    min-width: 200px !important;
    width: auto;
  }
  td{
    span{
      display: inline-block;
      max-height: 150px;
      overflow: auto;
      min-width: 200px;
    }
  }
}
</style>