WMS_IAC_FE/PC/InterFace.Dash/src/components/currenDescriptions/index copy.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.type && item.type == 'date'">{{
        propsData[item.prop] | formatOnlyDate
      }}</span>
      <span v-else-if="item.type && item.type == 'dateTime'">{{
        propsData[item.prop] | formatDate
      }}</span>
      <span v-else-if="item.type && item.type == 'objectDateTime'">{{
        propsData[item.prop]?propsData[item.prop][item.showProp]:"" | formatDate
      }}</span>
      <span v-else-if="item.type && item.type == 'object'">
        {{ propsData[item.prop]?propsData[item.prop][item.showProp]:"" }}
      </span>
      <span v-else-if="item.type && item.type == 'filter'">
        {{ propsData[item.prop] | trigger(item.filters,"label", item.dictType) }}
      </span>
      <span v-else-if="item.type && item.type == 'objectFilter'">
        {{ propsData[item.prop]?propsData[item.prop][item.showProp]:false | trigger(item.filters,"label") }}
      </span>
      <span v-else-if="item.type && item.type == 'percent'">
        {{ propsData[item.prop] +'%' }}
      </span>
      <span v-else-if="item.type && item.type == 'uploadPictureCard'">
        <div id="uploadPictureCardRef">{{propsData[item.prop] | formatDatePicture}}</div>
      </span>
      <span v-else-if="item.type == 'filterList'" >
        {{ propsData[item.prop] | triggerList(item.filters, "label") }}
      </span>
      <!-- 文本域 -->
      <span v-else-if="item.type == 'textarea'">
        <template>
          <el-input
            :type="item.type"
            v-model="propsData[item.prop]"
            :rows="item.rows"
            :readonly="item.readonly"
          ></el-input>
        </template>
      </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
    }
  },
  mounted(){
    console.log(85,this.tabsDesTions)
  },
  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 {}
      }
    }
    
  }
}
</script>
<style lang="scss">
.currenDescriptionsPage{
  th{
    min-width: 200px !important;
    width: auto;
  }
  td{
    span{
      display: inline-block;
      max-height: 150px;
      overflow: auto;
    }
  }
}
</style>