【fix JUpload】解决上传文件无法回显,禁用状态删除按钮不消失

jero-web/src/components/jero/JFormContainer.vue

@@ -54,7 +54,8 @@ export default {
     pointer-events: auto !important;
   }
 
-  .jero-form-container-disabled .ant-upload-list-item-actions .anticon-delete,
+  /*.jero-form-container-disabled .ant-upload-list-item-actions .anticon-delete,*/
+  .jero-form-container-disabled .ant-upload-list-item .anticon-delete,
   .jero-form-container-disabled .ant-upload-list-item .anticon-close{
     display: none;
   }

jero-web/src/components/jero/JUpload.vue

@@ -47,9 +47,9 @@ import JImagePreviewModal from '@comp/jero/modal/JImagePreviewModal.vue'
 const FILE_TYPE_ALL = 'all'
 const FILE_TYPE_IMG = 'image'
 
-const uidGenerator = () => {
-  return '-' + parseInt(Math.random() * 10000 + 1 + '', 10)
-}
+// const uidGenerator = () => {
+//   return '-' + parseInt(Math.random() * 10000 + 1 + '', 10)
+// }
 
 const Base64 = require('js-base64').Base64
 
@@ -142,15 +142,16 @@ export default {
       immediate: true,
       handler () {
         const val = this.value
-        if (val instanceof Array) {
-          if (this.returnUrl) {
-            this.initFileList(val.join(','))
-          } else {
-            this.initFileListArr(val)
-          }
-        } else {
-          this.initFileList(val)
-        }
+        this.initFileList(val)
+        // if (val instanceof Array) {
+        //   if (this.returnUrl) {
+        //     this.initFileList(val.join(','))
+        //   } else {
+        //     this.initFileListArr(val)
+        //   }
+        // } else {
+        //   this.initFileList(val)
+        // }
       }
     }
   },
@@ -178,34 +179,59 @@ export default {
     // ---------------------------- end 图片左右换位置 -------------------------------------
   },
   methods: {
-    initFileListArr (val) {
+    // 将url的参数拆分成对象
+    urlToParams (url) {
+      const commonUrl = window._CONFIG.staticDomainURL
+      // url截取参数的部分
+      const paramsStr = url.slice(url.indexOf('?') + 1)
+      const paramsObj = {
+        url,
+        id: url.slice(url.indexOf(commonUrl) + commonUrl.length + 1, url.indexOf('?'))
+      }
+      paramsStr.split('&').forEach(item => {
+        const arr = item.split('=')
+        paramsObj[arr[0]] = arr[1]
+      })
+      return paramsObj
+    },
+    initFileList (val) {
       if (!val || val.length === 0) {
         this.fileList = []
         return
       }
-      for (let a = 0; a < val.length; a++) {
-        this.fileList.forEach((item) => {
-          if (item.url === val[a]) {
-            item.uid = uidGenerator()
-            item.response.status = 'done'
-          }
-        })
-      }
-    },
-    initFileList (paths) {
-      if (!paths || paths.length === 0) {
-        this.fileList = []
-        return
-      }
-      const arr = paths.split(',')
-      for (let a = 0; a < arr.length; a++) {
-        this.fileList.forEach((item) => {
-          if (item.url === arr[a]) {
-            item.uid = uidGenerator()
-            item.response.status = 'history'
-          }
-        })
+      // 所有文件url的数组
+      let arr = []
+      // 用于临时存储文件的数组,最终会被赋值到this.fileList
+      const fileList = []
+      if (val instanceof Array) {
+        // url数组直接返回，如果是对象数组，就将每个对象的url取出
+        arr = this.returnUrl ? val : val.map(item => item.filePath)
+      } else {
+        // 将字符串拆分数组(props声明value只能是Array或String)
+        arr = val.split(',')
       }
+      arr.forEach(url => {
+        if (url) {
+          const params = this.urlToParams(url)
+          fileList.push({
+            uid: params.id,
+            name: params.fullfilename,
+            status: 'done',
+            url,
+            // response用于下载和预览
+            response: {
+              success: true,
+              result: {
+                id: params.id,
+                fileName: params.fullfilename
+              },
+              status: 'history'
+            }
+          })
+        }
+      })
+      // 将处理好的数据回显
+      this.fileList = fileList
     },
     handlePathChange () {
       const uploadFiles = this.fileList
@@ -255,8 +281,9 @@ export default {
         if (info.file.response.success) {
           fileList = fileList.map((file) => {
             if (file.response) {
-              const reUrl = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`
-              file.url = getFileAccessHttpUrl(reUrl)
+              // const reUrl = `${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.response.result.fileName}`
+              // TODO getFileAccessHttpUrl方法会追加token，在之后拼参数
+              file.url = getFileAccessHttpUrl(file.response.result.id) + '&fullfilename=' + file.response.result.fileName
             }
             return file
           })
@@ -304,7 +331,7 @@ export default {
       const fileType = file.type
       // 截取文件后缀名
       const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1] : ''
-      const canPreview = CAN_PREVIEW_FILE_TYPE.some(tt => fileType.indexOf(tt) !== -1) || CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt)
+      const canPreview = fileType ? CAN_PREVIEW_FILE_TYPE.some(tt => fileType.indexOf(tt) !== -1) : CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt)
       // 判断是否为可预览格式的文件
       if (!canPreview) {
         this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
@@ -314,12 +341,12 @@ export default {
       }
       const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.response.result.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
       // 图片预览，使用自己添加的组件
-      if (fileType.indexOf(FILE_TYPE_IMG) !== -1) {
+      if (fileType && fileType.indexOf(FILE_TYPE_IMG) !== -1) {
         this.$refs.imagePreviewModal.open(fileFullUrl)
         return
       }
       // pdf预览
-      if (fileType.indexOf('pdf') !== -1) {
+      if (fileType && fileType.indexOf('pdf') !== -1) {
         const url = `/pdfjs/web/viewer.html?file=${encodeURIComponent(fileFullUrl)}`
         window.open(url)
         return