详情弹窗回显bug处理

Code/Fe/src/components/currenDescriptions/index copy.vue

@@ -0,0 +1,181 @@
+<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
+    }
+  },
+  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>

Code/Fe/src/components/currenDescriptions/index.vue

@@ -15,45 +15,25 @@
       :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'">{{
+      <!-- 时间转换 -->
+      <span v-if="item.apiBaseType && item.apiBaseType == '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 v-else-if="item.isEnums">
+        {{ initApiEnumList(item,propsData[item.prop]) }}
       </span>
-      <span v-else-if="item.type && item.type == 'uploadPictureCard'">
-        <div id="uploadPictureCardRef">{{propsData[item.prop] | formatDatePicture}}</div>
+      <!-- 布尔 -->
+      <span v-else-if="item.apiBaseType == 'boolean'">
+        {{ propsData[item.prop] ? '是' : '否' }}
       </span>
-      <span v-else-if="item.type == 'filterList'" >
-        {{ propsData[item.prop] | triggerList(item.filters, "label") }}
+      <!-- 数值 -->
+      <span v-else-if="item.apiBaseType == 'number'">
+        {{ propsData[item.prop] }}
       </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 v-else>
+        {{ propsData[item.prop] ? propsData[item.prop] + "" : propsData[item.prop] }}
       </span>
-      <span v-else>{{ propsData[item.prop] ? propsData[item.prop] + "" : propsData[item.prop] }}</span>
     </el-descriptions-item>
   </template>
     <el-descriptions-item
@@ -161,6 +141,16 @@ export default {
       }
     }
     
+  },
+  methods:{
+    // 转义枚举值
+    initApiEnumList(item,data){
+      let _item_enumList = {}
+      item.enums_list.forEach((item,key)=>{
+        _item_enumList[item.value] = item.label
+      })
+      return _item_enumList[data] || '未定义'
+    },
   }
 }
 </script>
@@ -175,6 +165,7 @@ export default {
       display: inline-block;
       max-height: 150px;
       overflow: auto;
+      min-width: 200px;
     }
   }
 }

Code/Fe/src/mixins/TableMixins.js

@@ -195,13 +195,14 @@ export const tableMixins = {
       let _url = this.URLOption_detail ? this.URLOption_detail : this.URLOption_base
       getDetailed(val.id, _url)
         .then(res=>{
-          // 表头处理
-          let _parentName = this.URLOption_detailList.substr(0,this.URLOption_detailList.indexOf('/'))
-          this.apiColumns_DetailsTable = this.initTableColumns(this.initApiColumnsForDto(res.details[0],_parentName),'detail_api')
           // 打印使用的全部数据存储
           this.tableDataDetails = JSON.parse(JSON.stringify(res))
+          // 数据处理
           this.propsData = res
           if (res.details) {
+            // 表头处理
+            let _parentName = this.URLOption_detailList.substr(0,this.URLOption_detailList.indexOf('/'))
+            this.apiColumns_DetailsTable = this.initTableColumns(this.initApiColumnsForDto(res.details[0],_parentName),'detail_api')
             if(this.$refs.currenDrawer_Ref){
               this.$refs.currenDrawer_Ref.getDetailList(res,()=>{
                 this.inlineDialogCallback()