附件上传调整

src/views/common/UpLoadComponent.vue

@@ -1,45 +1,32 @@
 <!--文件上传组件-->
 <template>
   <div :key="uploadKey">
-    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
-    <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
-               :limit="999" :http-request="httpRequest"
-               multiple
-               :on-exceed="(files, fileList) =>{
-                      $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
-                     }"
-               :show-file-list="false"
-               :on-change="changes"
-               :on-progress="uploadVideoProcess"
-               :file-list="fileList">
-		<template v-if="auth==='view'&&uploadFlag===false" #tip>
-			<el-button :loading="loading" type="primary" size="default" :disabled="true"> 点击上传 </el-button>
-		</template>
-		<template v-else #trigger>
-			<el-button :loading="loading" type="primary" size="default"> 点击上传 </el-button>
-		</template>
+    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{ dividerName
+      }}</el-divider>
+    <el-upload ref="upload" style="display: inline-block;" :show-header="'status'" action="" :limit="999"
+      :http-request="httpRequest" multiple :on-exceed="(files, fileList) => {
+        $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+      }" :show-file-list="false" :on-change="changes" :on-progress="uploadVideoProcess" :file-list="fileList">
+      <template v-if="auth === 'view' && uploadFlag === false" #tip>
+        <el-button :loading="loading" type="primary" size="default" :disabled="true"> 点击上传 </el-button>
+      </template>
+      <template v-else #trigger>
+        <el-button :loading="loading" type="primary" size="default"> 点击上传 </el-button>
+      </template>
     </el-upload>
     <div style="height: calc(100% - 80px);margin-top: 10px">
       <!-- 进度条 -->
       <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
-      <el-table
-        ref="uploadTable"
-        v-loading="loading"
-        :key="tableKey"
-        :data="dataListNew">
+      <el-table ref="uploadTable" v-loading="loading" :key="tableKey" :data="dataListNew">
         <el-table-column type="seq" width="40"></el-table-column>
         <el-table-column label="文件名称" prop="name" align="center">
           <template #default="scope">
             <div v-if="ifName(scope.row) === true">
-              <el-image
-                style="width: 30px; height: 30px;padding-top: 4px;"
-                :src="scope.row.lsUrl"
-                :preview-src-list="[scope.row.lsUrl]"
-				:preview-teleported="true"
-              ></el-image>
+              <el-image style="width: 30px; height: 30px;padding-top: 4px;" :src="scope.row.lsUrl"
+                :preview-src-list="[scope.row.lsUrl]" :preview-teleported="true"></el-image>
             </div>
             <div v-else>
-              <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+              <el-link type="primary" :underline="false" @click="showFile(scope.row)">{{ scope.row.name }}</el-link>
             </div>
           </template>
         </el-table-column>
@@ -47,354 +34,381 @@
         <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
         <el-table-column label="文件大小" prop="size" align="center">
           <template #default="scope">
-            {{getSize(scope.row.size)}}
+            {{ getSize(scope.row.size) }}
           </template>
         </el-table-column>
         <el-table-column label="操作" width="200px" fixed="right" align="center">
-          <template  #default="scope">
-            <el-button text type="primary" key="01" icon="el-icon-download" size="small" @click="toHref(scope.row)" >下载</el-button>
-            <el-button text type="primary" key="02" icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index,fileList)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
-<!--            <el-button v-if="createBy===scope.row.createBy.name" type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false">删除2</el-button>-->
+          <template #default="scope">
+            <el-button text type="primary" key="01" icon="el-icon-download" size="small"
+              @click="toHref(scope.row)">下载</el-button>
+            <el-button text type="primary" key="02" icon="el-icon-delete" size="small"
+              @click="deleteById(scope.row, scope.$index, fileList)"
+              :disabled="auth === 'view' && delFlag === false && createBy !== scope.row.createBy.name">删除</el-button>
+            <!--            <el-button v-if="createBy===scope.row.createBy.name" type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false">删除2</el-button>-->
           </template>
         </el-table-column>
       </el-table>
     </div>
-<!--    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>-->
+    <!--    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>-->
   </div>
 </template>
 
 <script>
+// eslint-disable-next-line no-unused-vars
+import OSSSerivce, {
+  httpRequest,
+  // eslint-disable-next-line no-unused-vars
+  handleRemove,
+  fileName,
+  // eslint-disable-next-line no-unused-vars
+  beforeAvatarUpload,
   // eslint-disable-next-line no-unused-vars
-  import OSSSerivce, {
-    httpRequest,
-    // eslint-disable-next-line no-unused-vars
-    handleRemove,
-    fileName,
-    // eslint-disable-next-line no-unused-vars
-    beforeAvatarUpload,
-    // eslint-disable-next-line no-unused-vars
-    openWindowOnUrl,
-    // eslint-disable-next-line no-unused-vars
-    toHref
-  } from '@/api/sys/OSSService'
-  // import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
-  import moment from 'moment'
-  export default {
-    data () {
-      return {
-		  uploadKey: '',
-        progressFlag: false,
-        loadProgress: 0,
-        fileList: [],
-        dataList: [],
-        dataListNew: [],
-        url: '',
-        showViewer: false,
-        ossService: null,
-        auth: '',
-        directory: 'public',
-        maxValue: 300,
-        tableKey: '',
-        fileLoading: true,
-        dividerName: '',
-        uploadFlag: false,
-        delFlag: false,
-        createBy: '',
-        showDivider: true,
-        loading: false,
-        dataListLength: ''
+  openWindowOnUrl,
+  // eslint-disable-next-line no-unused-vars
+  toHref
+} from '@/api/sys/OSSService'
+// import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+import moment from 'moment'
+export default {
+  data() {
+    return {
+      uploadKey: '',
+      progressFlag: false,
+      loadProgress: 0,
+      fileList: [],
+      dataList: [],
+      dataListNew: [],
+      url: '',
+      showViewer: false,
+      ossService: null,
+      auth: '',
+      directory: 'public',
+      maxValue: 300,
+      tableKey: '',
+      fileLoading: true,
+      dividerName: '',
+      uploadFlag: false,
+      delFlag: false,
+      createBy: '',
+      showDivider: true,
+      loading: false,
+      dataListLength: ''
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.ossService = new OSSSerivce()
+  },
+  components: {
+    // ElImageViewer
+  },
+  mounted() {
+    window.onPreview = this.onPreview
+  },
+  methods: {
+    /**
+     * dividerName: 组件中divider的名称赋值
+     * showDivider: ‘附件‘Divider是否展示
+     *     注：值为空时，默认值为true
+     *    showDivider=false时 ‘附件‘Divider隐藏
+     **/
+    setDividerName(dividerName, showDivider) {
+      if (this.commonJS.isNotEmpty(dividerName)) {
+        this.dividerName = dividerName
       }
-    },
-    watch: {
-    },
-    created () {
-      this.ossService = new OSSSerivce()
-    },
-    components: {
-      // ElImageViewer
-    },
-    mounted () {
-      window.onPreview = this.onPreview
-    },
-    methods: {
-      /**
-       * dividerName: 组件中divider的名称赋值
-       * showDivider: ‘附件‘Divider是否展示
-       *     注：值为空时，默认值为true
-       *    showDivider=false时 ‘附件‘Divider隐藏
-       **/
-      setDividerName (dividerName, showDivider) {
-        if (this.commonJS.isNotEmpty(dividerName)) {
-          this.dividerName = dividerName
-        }
-        if (this.commonJS.isNotEmpty(showDivider)) {
-          if (showDivider === false) {
-            this.showDivider = false
-          } else {
-            this.showDivider = true
-          }
+      if (this.commonJS.isNotEmpty(showDivider)) {
+        if (showDivider === false) {
+          this.showDivider = false
         } else {
           this.showDivider = true
         }
-      },
-      /**
-       * 文件上传组件初始化
-       * @param auth
-       *    auth的值为"view"时,不可上传/编辑文件
-       *    auth为其他值时,可上传/编辑文件
-       * @param fileList  要显示到文件上传列表中的文件。
-       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
-       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
-       * @param directory  要存放到oss的哪个文件夹下。
-       *    注：值为空时，默认存放到"public"文件夹
-       * @param maxValue  上传文件允许的最大值，单位：MB
-       *    注：值为空时，默认值为300MB
-       * @param dividerName  组件中divider的名称
-       *    注：值为空时，默认值为‘附件’
-       * @param uploadFlag  ‘上传文件’按钮是否禁用
-       *    注：值为空时，默认值为false
-       *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
-       * @param delFlag  ‘删除’按钮是否禁用
-       *    注：值为空时，默认值为false
-       *    auth=view&&delFlag=false时 ‘删除’按钮禁用
-       * @param showDivider  ‘附件‘Divider是否展示
-       *    注：值为空时，默认值为true
-       *    showDivider=false时 ‘附件‘Divider隐藏
-       */
-      async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
-        await this.fileLoadingFalse()
-        if (this.commonJS.isEmpty(fileList)) {
-          this.fileLoading = true
-        } else {
-          this.dataListLength = fileList.length
-        }
-        if (this.commonJS.isEmpty(dividerName)) {
-          this.dividerName = '附件'
-        } else {
-          this.dividerName = dividerName
-        }
-        if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
-          this.directory = directory
-        } else {
-          this.directory = 'public'
-        }
-        if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
-          this.maxValue = maxValue
-        } else {
-          this.maxValue = 300
-        }
-        this.auth = auth
-        if (this.commonJS.isEmpty(uploadFlag)) {
+      } else {
+        this.showDivider = true
+      }
+    },
+    /**
+     * 文件上传组件初始化
+     * @param auth
+     *    auth的值为"view"时,不可上传/编辑文件
+     *    auth为其他值时,可上传/编辑文件
+     * @param fileList  要显示到文件上传列表中的文件。
+     *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+     *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+     * @param directory  要存放到oss的哪个文件夹下。
+     *    注：值为空时，默认存放到"public"文件夹
+     * @param maxValue  上传文件允许的最大值，单位：MB
+     *    注：值为空时，默认值为300MB
+     * @param dividerName  组件中divider的名称
+     *    注：值为空时，默认值为‘附件’
+     * @param uploadFlag  ‘上传文件’按钮是否禁用
+     *    注：值为空时，默认值为false
+     *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
+     * @param delFlag  ‘删除’按钮是否禁用
+     *    注：值为空时，默认值为false
+     *    auth=view&&delFlag=false时 ‘删除’按钮禁用
+     * @param showDivider  ‘附件‘Divider是否展示
+     *    注：值为空时，默认值为true
+     *    showDivider=false时 ‘附件‘Divider隐藏
+     */
+    async newUpload(auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
+      await this.fileLoadingFalse()
+      if (this.commonJS.isEmpty(fileList)) {
+        this.fileLoading = true
+      } else {
+        this.dataListLength = fileList.length
+      }
+      if (this.commonJS.isEmpty(dividerName)) {
+        this.dividerName = '附件'
+      } else {
+        this.dividerName = dividerName
+      }
+      if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
+        this.directory = directory
+      } else {
+        this.directory = 'public'
+      }
+      if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
+        this.maxValue = maxValue
+      } else {
+        this.maxValue = 300
+      }
+      this.auth = auth
+      if (this.commonJS.isEmpty(uploadFlag)) {
+        this.uploadFlag = false
+      } else {
+        if (uploadFlag !== true && uploadFlag !== false) {
           this.uploadFlag = false
         } else {
-          if (uploadFlag !== true && uploadFlag !== false) {
-            this.uploadFlag = false
-          } else {
-            this.uploadFlag = uploadFlag
-          }
+          this.uploadFlag = uploadFlag
         }
-        if (this.commonJS.isEmpty(delFlag)) {
+      }
+      if (this.commonJS.isEmpty(delFlag)) {
+        this.delFlag = false
+      } else {
+        if (delFlag !== true && delFlag !== false) {
           this.delFlag = false
+          this.createBy = delFlag
         } else {
-          if (delFlag !== true && delFlag !== false) {
-            this.delFlag = false
-            this.createBy = delFlag
-          } else {
-            this.delFlag = delFlag
-          }
+          this.delFlag = delFlag
         }
-        for await (let item of fileList) {
-          await this.ossService.getFileSizeByUrl(item.url).then((data) => {
-            item.lsUrl = data.url
-            item.size = data.size
-            this.dataList.push(item)
-            this.dataListNew.push(item)
-            if (this.dataListNew.length === fileList.length) {
-              this.fileLoading = true
-            }
-          })
-        }
-        // this.dataList = JSON.parse(JSON.stringify(fileList))
-        // this.dataListNew = JSON.parse(JSON.stringify(fileList))
-        if (this.commonJS.isEmpty(showDivider)) {
-          this.showDivider = true
-        } else {
-          if (showDivider === false) {
-            this.showDivider = false
-          } else {
-            this.showDivider = true
+      }
+      for await (let item of fileList) {
+        await this.ossService.getFileSizeByUrl(item.url).then((data) => {
+          item.lsUrl = data.url
+          item.size = data.size
+          this.dataList.push(item)
+          this.dataListNew.push(item)
+          this.fileList.push(item)
+          if (this.dataListNew.length === fileList.length) {
+            this.fileLoading = true
           }
+        })
+      }
+      // this.dataList = JSON.parse(JSON.stringify(fileList))
+      // this.dataListNew = JSON.parse(JSON.stringify(fileList))
+      if (this.commonJS.isEmpty(showDivider)) {
+        this.showDivider = true
+      } else {
+        if (showDivider === false) {
+          this.showDivider = false
+        } else {
+          this.showDivider = true
+        }
+      }
+    },
+    async httpRequest(file) {
+      await httpRequest(file, fileName(file), this.directory, this.maxValue)
+    },
+    uploadVideoProcess(event, file, fileList) {
+      this.progressFlag = true // 显示进度条
+      this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+      if (this.loadProgress >= 100) {
+        this.loadProgress = 100
+        setTimeout(() => {
+          this.progressFlag = false
+        }, 1000) // 一秒后关闭进度条
+      }
+    },
+    getSize(value) {
+      if (this.commonJS.isEmpty(value)) {
+        return '0 B'
+      } else {
+        let val = parseInt(value)
+        if (this.commonJS.isEmpty(val)) {
+          return '0 B'
         }
-      },
-      async httpRequest (file) {
-        await httpRequest(file, fileName(file), this.directory, this.maxValue)
-      },
-      uploadVideoProcess (event, file, fileList) {
-        this.progressFlag = true // 显示进度条
-        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
-        if (this.loadProgress >= 100) {
-          this.loadProgress = 100
-          setTimeout(() => {
-            this.progressFlag = false
-          }, 1000) // 一秒后关闭进度条
+        if (isNaN(val)) {
+          return '0 B'
         }
-      },
-      getSize (value) {
-        if (this.commonJS.isEmpty(value)) {
+        if (val === 0) {
           return '0 B'
+        }
+        let k = 1024
+        let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
+        let i = Math.floor(Math.log(val) / Math.log(k))
+        let result = val / Math.pow(k, i);
+        let kb = parseFloat(result.toPrecision(3));
+        return kb + '' + sizes[i]
+      }
+    },
+    async changes(file, fileList) {
+      // if (file.status !== 'ready') {
+      //   return
+      // }
+
+
+      if (file.status !== 'ready') {
+        let fileListNamesList = []
+        console.log(JSON.stringify(this.fileList));
+        this.fileList.forEach(fileItem => {
+          fileListNamesList.push(fileItem.name)
+        })
+
+        if (fileListNamesList.indexOf(file.name) != -1) {
+          console.log(this.fileList);
+
+          this.$message.error(`${file.name}已存在，无法重复上传`)
+
+          return
         } else {
-          let val = parseInt(value)
-          if (this.commonJS.isEmpty(val)) {
-            return '0 B'
+
+          if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
+            this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
+            return
           }
-          if (isNaN(val)) {
-            return '0 B'
+          // this.dataListNew = []
+          // this.dataList.forEach((item) => {
+          //   this.dataListNew.push(item)
+          // })
+          var fileListNames = []
+          for (let fileItem of this.fileList) {
+            fileListNames.push(fileItem.name)
           }
-          if (val === 0) {
-            return '0 B'
+          // for (let item of fileList) {
+
+
+          let item1 = JSON.parse(JSON.stringify(file))
+          // if (fileListNames.length === 0 || fileListNames.indexOf(item1.name) === -1) {
+          this.fileList.push(item1)
+          // }
+          item1.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          item1.createBy = {
+            id: '',
+            name: ''
           }
-          let k = 1024
-          let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
-          let i = Math.floor(Math.log(val) / Math.log(k))
-			let result = val / Math.pow(k, i);
-			let kb = parseFloat(result.toPrecision(3));
-          return kb + '' + sizes[i]
-        }
-      },
-		async changes (file, fileList) {
-			// if (file.status !== 'ready') {
-			//   return
-			// }
-			if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
-				this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
-				return
-			}
-			this.dataListNew = []
-			this.dataList.forEach((item) => {
-				this.dataListNew.push(item)
-			})
-			var fileListNames = []
-			for (let fileItem of this.fileList) {
-				fileListNames.push(fileItem.name)
-			}
-			for (let item of fileList) {
-				if(fileListNames.length === 0 || fileListNames.indexOf(item.name) === -1){
-					this.fileList.push(item)
-				}
-				item.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
-				item.createBy = {
-					id: '',
-					name: ''
-				}
-				item.createBy.id = this.$store.state.user.id
-				item.createBy.name = this.$store.state.user.name
-				this.dataListNew.push(item)
-			}
-			for (let item of this.dataListNew) {
-				if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
-					item.url = item.raw.url
-					if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
-						this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
-							item.lsUrl = data
-						})
-					}
-				}
-			}
-		},
-      showFile (row) {
-      	console.log('row', row)
-        openWindowOnUrl(row)
-      },
-      onPreview (url) {
-        this.url = url
-        this.showViewer = true
-      },
-      // 关闭查看器
-      closeViewer () {
-        this.url = ''
-        this.showViewer = false
-      },
-      toHref (row) {
-        toHref(row)
-      },
-		async deleteById (row, index,fileList) {
-			// this.$refs.upload.handleRemove(this.dataListNew[index])
-			await this.dataListNew.splice(index, 1)
-			await this.dataList.splice(index, 1)
-			if (this.commonJS.isNotEmpty(row.id)) {
-				this.ossService.deleteMsgById(row.id)
-			}
-			var newFileList = [];
-			for (var i = 0; i < fileList.length; i++) {
-				if (fileList[i].name !== row.name) {
-					newFileList.push(fileList[i])
-				}
-			}
-			this.fileList = newFileList;
+          item1.createBy.id = this.$store.state.user.id
+          item1.createBy.name = this.$store.state.user.name
+          this.dataListNew.push(item1)
+          this.dataList.push(item1)
+          // }
+          for (let item of this.dataListNew) {
+            if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
+              item.url = item.raw.url
+              if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
+                this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
+                  item.lsUrl = data
+                })
+              }
+            }
 
-		},
-      /**
-       * 关闭dialog时使用  清除el-upload中上传的文件
-       */
-      clearUpload () {
-        this.$refs.upload.clearFiles()
-        this.dataList = []
-        this.dataListNew = []
-        this.createBy = ''
-      },
-      /**
-       * 获取当前文件列表中的文件数据
-       */
-      getDataList () {
-        return this.dataListNew
-      },
-      /**
-       * 判断进度条是否结束，附件是否加载完成
-       * @returns {boolean}
-       */
-      checkProgress () {
-        if (this.progressFlag === true) {
-          this.$message.warning('请等待附件上传完成再进行操作')
-          return true
-        }
-        if (this.fileLoading === false) {
-          this.$message.warning('请等待附件加载完成再进行操作')
-          if (this.dataListLength === this.dataListNew.length) {
-            this.fileLoading = true
           }
-          return true
-        }
-        return false
-      },
-      ifName (row) {
-        if (this.commonJS.isEmpty(row.name)) {
-          row.name = '---'
-          return false
         }
-        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
-        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
-          return true
-        } else {
-          return false
+      }
+    },
+    showFile(row) {
+      console.log('row', row)
+      openWindowOnUrl(row)
+    },
+    onPreview(url) {
+      this.url = url
+      this.showViewer = true
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.url = ''
+      this.showViewer = false
+    },
+    toHref(row) {
+      toHref(row)
+    },
+    async deleteById(row, index, fileList) {
+      // this.$refs.upload.handleRemove(this.dataListNew[index])
+      await this.dataListNew.splice(index, 1)
+      await this.dataList.splice(index, 1)
+      if (this.commonJS.isNotEmpty(row.id)) {
+        this.ossService.deleteMsgById(row.id)
+      }
+      var newFileList = [];
+      for (var i = 0; i < fileList.length; i++) {
+        if (fileList[i].name !== row.name) {
+          newFileList.push(fileList[i])
         }
-      },
-      fileLoadingFalse () {
-        this.fileLoading = false
-      },
-      // 开启/关闭页面的加载中状态
-      changeLoading (loading) {
-        if (this.commonJS.isNotEmpty(loading)) {
-          this.loading = loading
-        } else {
-          this.loading = false
+      }
+      this.fileList = newFileList;
+    },
+    /**
+     * 关闭dialog时使用  清除el-upload中上传的文件
+     */
+    clearUpload() {
+      this.$refs.upload.clearFiles()
+      this.dataList = []
+      this.dataListNew = []
+      this.createBy = ''
+    },
+    /**
+     * 获取当前文件列表中的文件数据
+     */
+    getDataList() {
+      return this.dataListNew
+    },
+    /**
+     * 判断进度条是否结束，附件是否加载完成
+     * @returns {boolean}
+     */
+    checkProgress() {
+      if (this.progressFlag === true) {
+        this.$message.warning('请等待附件上传完成再进行操作')
+        return true
+      }
+      if (this.fileLoading === false) {
+        this.$message.warning('请等待附件加载完成再进行操作')
+        if (this.dataListLength === this.dataListNew.length) {
+          this.fileLoading = true
         }
+        return true
+      }
+      return false
+    },
+    ifName(row) {
+      if (this.commonJS.isEmpty(row.name)) {
+        row.name = '---'
+        return false
+      }
+      let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+      if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+        return true
+      } else {
+        return false
+      }
+    },
+    fileLoadingFalse() {
+      this.fileLoading = false
+    },
+    // 开启/关闭页面的加载中状态
+    changeLoading(loading) {
+      if (this.commonJS.isNotEmpty(loading)) {
+        this.loading = loading
+      } else {
+        this.loading = false
       }
     }
   }
+}
 </script>
 <style>
-  .el-divider__text {
-    font-size: 16px;
-    font-weight: bold;
-  }
+.el-divider__text {
+  font-size: 16px;
+  font-weight: bold;
+}
 </style>

src/views/common/UpLoadComponentCcpm.vue

@@ -1,393 +1,404 @@
 <!--文件上传组件-->
 <template>
   <div>
-    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
-    <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
-               :limit="999" :http-request="httpRequest"
-               multiple
-               :on-exceed="(files, fileList) =>{
-                      $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
-                     }"
-               :show-file-list="false"
-               :on-change="changes"
-               :on-progress="uploadVideoProcess"
-               :file-list="fileList">
-		<template v-if="auth==='view'&&uploadFlag===false" #tip>
-			<el-button :loading="loading" type="primary" size="default" :disabled="true"> 点击上传 </el-button>
-		</template>
-		<template v-else #trigger>
-			<el-button :loading="loading" type="primary" size="default"> 点击上传 </el-button>
-		</template>
-	</el-upload>
+    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{ dividerName
+      }}</el-divider>
+    <el-upload ref="upload" style="display: inline-block; :show-header='status'" action="" :limit="999"
+      :http-request="httpRequest" multiple :on-exceed="(files, fileList) => {
+        $message.warning(`当前限制选择 999 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+      }" :show-file-list="false" :on-change="changes" :on-progress="uploadVideoProcess" :file-list="fileList">
+      <template v-if="auth === 'view' && uploadFlag === false" #tip>
+        <el-button :loading="loading" type="primary" size="default" :disabled="true"> 点击上传 </el-button>
+      </template>
+      <template v-else #trigger>
+        <el-button :loading="loading" type="primary" size="default"> 点击上传 </el-button>
+      </template>
+    </el-upload>
     <div style="height: calc(100% - 80px);margin-top: 10px">
       <!-- 进度条 -->
       <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
-      <el-table
-        ref="uploadTable"
-        v-loading="loading"
-        :key="tableKey"
-        :data="dataListNew">
+      <el-table ref="uploadTable" v-loading="loading" :key="tableKey" :data="dataListNew">
         <el-table-column type="seq" width="40"></el-table-column>
         <el-table-column label="文件名称" prop="name" align="center">
           <template #default="scope">
             <div v-if="ifName(scope.row) === true">
-              <el-image
-                style="width: 30px; height: 30px;padding-top: 4px"
-                :src="scope.row.lsUrl"
-                :preview-src-list="[scope.row.lsUrl]"
-              ></el-image>
+              <el-image style="width: 30px; height: 30px;padding-top: 4px" :src="scope.row.lsUrl"
+                :preview-src-list="[scope.row.lsUrl]"></el-image>
             </div>
             <div v-else>
-              <el-link  type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
+              <el-link type="primary" :underline="false" @click="showFile(scope.row)">{{ scope.row.name }}</el-link>
             </div>
           </template>
         </el-table-column>
         <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
         <el-table-column label="创建时间" prop="createDate" align="center"></el-table-column>
-<!--        <el-table-column label="文件大小" prop="size" align="center">-->
-<!--          <template slot-scope="scope">-->
-<!--            {{getSize(scope.row.size)}}-->
-<!--          </template>-->
-<!--        </el-table-column>-->
+        <!--        <el-table-column label="文件大小" prop="size" align="center">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            {{getSize(scope.row.size)}}-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
         <el-table-column label="操作" width="200px" fixed="right" align="center">
-          <template  #default="scope">
-            <el-button text type="primary" icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
-            <el-button text type="primary" icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index,fileList)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
-<!--            <el-button v-if="createBy===scope.row.createBy.name" type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false">删除2</el-button>-->
+          <template #default="scope">
+            <el-button text type="primary" icon="el-icon-edit" size="small" @click="toHref(scope.row)"
+              :disabled="false">下载</el-button>
+            <el-button text type="primary" icon="el-icon-delete" size="small"
+              @click="deleteById(scope.row, scope.$index, fileList)"
+              :disabled="auth === 'view' && delFlag === false && createBy !== scope.row.createBy.name">删除</el-button>
+            <!--            <el-button v-if="createBy===scope.row.createBy.name" type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false">删除2</el-button>-->
           </template>
         </el-table-column>
       </el-table>
     </div>
-<!--    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>-->
+    <!--    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>-->
   </div>
 </template>
 
 <script>
+// eslint-disable-next-line no-unused-vars
+import OSSSerivce, {
+  httpRequest,
+  // eslint-disable-next-line no-unused-vars
+  handleRemove,
+  fileName,
+  // eslint-disable-next-line no-unused-vars
+  beforeAvatarUpload,
   // eslint-disable-next-line no-unused-vars
-  import OSSSerivce, {
-    httpRequest,
-    // eslint-disable-next-line no-unused-vars
-    handleRemove,
-    fileName,
-    // eslint-disable-next-line no-unused-vars
-    beforeAvatarUpload,
-    // eslint-disable-next-line no-unused-vars
-    openWindowOnUrl,
-    // eslint-disable-next-line no-unused-vars
-    toHref
-  } from '@/api/sys/OSSService'
-  // import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
-  import moment from 'moment'
-  export default {
-    data () {
-      return {
-        progressFlag: false,
-        loadProgress: 0,
-        fileList: [],
-        dataList: [],
-        dataListNew: [],
-        url: '',
-        showViewer: false,
-        ossService: null,
-        auth: '',
-        directory: 'public',
-        maxValue: 300,
-        tableKey: '',
-        fileLoading: true,
-        dividerName: '',
-        uploadFlag: false,
-        delFlag: false,
-        createBy: '',
-        showDivider: true,
-        loading: false,
-        dataListLength: ''
+  openWindowOnUrl,
+  // eslint-disable-next-line no-unused-vars
+  toHref
+} from '@/api/sys/OSSService'
+// import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
+import moment from 'moment'
+export default {
+  data() {
+    return {
+      progressFlag: false,
+      loadProgress: 0,
+      fileList: [],
+      dataList: [],
+      dataListNew: [],
+      url: '',
+      showViewer: false,
+      ossService: null,
+      auth: '',
+      directory: 'public',
+      maxValue: 300,
+      tableKey: '',
+      fileLoading: true,
+      dividerName: '',
+      uploadFlag: false,
+      delFlag: false,
+      createBy: '',
+      showDivider: true,
+      loading: false,
+      dataListLength: ''
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.ossService = new OSSSerivce()
+  },
+  components: {
+    // ElImageViewer
+  },
+  mounted() {
+    window.onPreview = this.onPreview
+  },
+  methods: {
+    /**
+     * dividerName: 组件中divider的名称赋值
+     * showDivider: ‘附件‘Divider是否展示
+     *     注：值为空时，默认值为true
+     *    showDivider=false时 ‘附件‘Divider隐藏
+     **/
+    setDividerName(dividerName, showDivider) {
+      if (this.commonJS.isNotEmpty(dividerName)) {
+        this.dividerName = dividerName
       }
-    },
-    watch: {
-    },
-    created () {
-      this.ossService = new OSSSerivce()
-    },
-    components: {
-      // ElImageViewer
-    },
-    mounted () {
-      window.onPreview = this.onPreview
-    },
-    methods: {
-      /**
-       * dividerName: 组件中divider的名称赋值
-       * showDivider: ‘附件‘Divider是否展示
-       *     注：值为空时，默认值为true
-       *    showDivider=false时 ‘附件‘Divider隐藏
-       **/
-      setDividerName (dividerName, showDivider) {
-        if (this.commonJS.isNotEmpty(dividerName)) {
-          this.dividerName = dividerName
-        }
-        if (this.commonJS.isNotEmpty(showDivider)) {
-          if (showDivider === false) {
-            this.showDivider = false
-          } else {
-            this.showDivider = true
-          }
+      if (this.commonJS.isNotEmpty(showDivider)) {
+        if (showDivider === false) {
+          this.showDivider = false
         } else {
           this.showDivider = true
         }
-      },
-      /**
-       *  此组件目前仅供ccpm的附件查看
-       * 文件上传组件初始化
-       * @param auth
-       *    auth的值为"view"时,不可上传/编辑文件
-       *    auth为其他值时,可上传/编辑文件
-       * @param fileList  要显示到文件上传列表中的文件。
-       *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
-       *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
-       * @param directory  要存放到oss的哪个文件夹下。
-       *    注：值为空时，默认存放到"public"文件夹
-       * @param maxValue  上传文件允许的最大值，单位：MB
-       *    注：值为空时，默认值为300MB
-       * @param dividerName  组件中divider的名称
-       *    注：值为空时，默认值为‘附件’
-       * @param uploadFlag  ‘上传文件’按钮是否禁用
-       *    注：值为空时，默认值为false
-       *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
-       * @param delFlag  ‘删除’按钮是否禁用
-       *    注：值为空时，默认值为false
-       *    auth=view&&delFlag=false时 ‘删除’按钮禁用
-       * @param showDivider  ‘附件‘Divider是否展示
-       *    注：值为空时，默认值为true
-       *    showDivider=false时 ‘附件‘Divider隐藏
-       */
-      async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
-        await this.fileLoadingFalse()
-        if (this.commonJS.isEmpty(fileList)) {
-          this.fileLoading = true
-        } else {
-          this.dataListLength = fileList.length
-        }
-        if (this.commonJS.isEmpty(dividerName)) {
-          this.dividerName = '附件'
-        } else {
-          this.dividerName = dividerName
-        }
-        if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
-          this.directory = directory
-        } else {
-          this.directory = 'public'
-        }
-        if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
-          this.maxValue = maxValue
-        } else {
-          this.maxValue = 300
-        }
-        this.auth = auth
-        if (this.commonJS.isEmpty(uploadFlag)) {
+      } else {
+        this.showDivider = true
+      }
+    },
+    /**
+     *  此组件目前仅供ccpm的附件查看
+     * 文件上传组件初始化
+     * @param auth
+     *    auth的值为"view"时,不可上传/编辑文件
+     *    auth为其他值时,可上传/编辑文件
+     * @param fileList  要显示到文件上传列表中的文件。
+     *    注：文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
+     *    例：'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
+     * @param directory  要存放到oss的哪个文件夹下。
+     *    注：值为空时，默认存放到"public"文件夹
+     * @param maxValue  上传文件允许的最大值，单位：MB
+     *    注：值为空时，默认值为300MB
+     * @param dividerName  组件中divider的名称
+     *    注：值为空时，默认值为‘附件’
+     * @param uploadFlag  ‘上传文件’按钮是否禁用
+     *    注：值为空时，默认值为false
+     *    auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
+     * @param delFlag  ‘删除’按钮是否禁用
+     *    注：值为空时，默认值为false
+     *    auth=view&&delFlag=false时 ‘删除’按钮禁用
+     * @param showDivider  ‘附件‘Divider是否展示
+     *    注：值为空时，默认值为true
+     *    showDivider=false时 ‘附件‘Divider隐藏
+     */
+    async newUpload(auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
+      await this.fileLoadingFalse()
+      if (this.commonJS.isEmpty(fileList)) {
+        this.fileLoading = true
+      } else {
+        this.dataListLength = fileList.length
+      }
+      if (this.commonJS.isEmpty(dividerName)) {
+        this.dividerName = '附件'
+      } else {
+        this.dividerName = dividerName
+      }
+      if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
+        this.directory = directory
+      } else {
+        this.directory = 'public'
+      }
+      if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
+        this.maxValue = maxValue
+      } else {
+        this.maxValue = 300
+      }
+      this.auth = auth
+      if (this.commonJS.isEmpty(uploadFlag)) {
+        this.uploadFlag = false
+      } else {
+        if (uploadFlag !== true && uploadFlag !== false) {
           this.uploadFlag = false
         } else {
-          if (uploadFlag !== true && uploadFlag !== false) {
-            this.uploadFlag = false
-          } else {
-            this.uploadFlag = uploadFlag
-          }
+          this.uploadFlag = uploadFlag
         }
-        if (this.commonJS.isEmpty(delFlag)) {
+      }
+      if (this.commonJS.isEmpty(delFlag)) {
+        this.delFlag = false
+      } else {
+        if (delFlag !== true && delFlag !== false) {
           this.delFlag = false
+          this.createBy = delFlag
         } else {
-          if (delFlag !== true && delFlag !== false) {
-            this.delFlag = false
-            this.createBy = delFlag
-          } else {
-            this.delFlag = delFlag
-          }
+          this.delFlag = delFlag
         }
-        for await (let item of fileList) {
-          // await this.ossService.getFileSizeByUrl(item.url).then((data) => {
-          //   item.lsUrl = data.data.url
-          //   item.size = data.data.size
-          // })
-          this.dataList.push(item)
-          this.dataListNew.push(item)
-          if (this.dataListNew.length === fileList.length) {
-            this.fileLoading = true
-          }
+      }
+      for await (let item of fileList) {
+        // await this.ossService.getFileSizeByUrl(item.url).then((data) => {
+        //   item.lsUrl = data.data.url
+        //   item.size = data.data.size
+        // })
+        this.dataList.push(item)
+        this.dataListNew.push(item)
+        this.fileList.push(item)
+        if (this.dataListNew.length === fileList.length) {
+          this.fileLoading = true
         }
-        // this.dataList = JSON.parse(JSON.stringify(fileList))
-        // this.dataListNew = JSON.parse(JSON.stringify(fileList))
-        if (this.commonJS.isEmpty(showDivider)) {
-          this.showDivider = true
+      }
+      // this.dataList = JSON.parse(JSON.stringify(fileList))
+      // this.dataListNew = JSON.parse(JSON.stringify(fileList))
+      if (this.commonJS.isEmpty(showDivider)) {
+        this.showDivider = true
+      } else {
+        if (showDivider === false) {
+          this.showDivider = false
         } else {
-          if (showDivider === false) {
-            this.showDivider = false
-          } else {
-            this.showDivider = true
-          }
+          this.showDivider = true
+        }
+      }
+    },
+    async httpRequest(file) {
+      await httpRequest(file, fileName(file), this.directory, this.maxValue)
+    },
+    uploadVideoProcess(event, file, fileList) {
+      this.progressFlag = true // 显示进度条
+      this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
+      if (this.loadProgress >= 100) {
+        this.loadProgress = 100
+        setTimeout(() => {
+          this.progressFlag = false
+        }, 1000) // 一秒后关闭进度条
+      }
+    },
+    getSize(value) {
+      if (this.commonJS.isEmpty(value)) {
+        return '0 B'
+      } else {
+        let val = parseInt(value)
+        if (this.commonJS.isEmpty(val)) {
+          return '0 B'
         }
-      },
-      async httpRequest (file) {
-        await httpRequest(file, fileName(file), this.directory, this.maxValue)
-      },
-      uploadVideoProcess (event, file, fileList) {
-        this.progressFlag = true // 显示进度条
-        this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
-        if (this.loadProgress >= 100) {
-          this.loadProgress = 100
-          setTimeout(() => {
-            this.progressFlag = false
-          }, 1000) // 一秒后关闭进度条
+        if (isNaN(val)) {
+          return '0 B'
         }
-      },
-      getSize (value) {
-        if (this.commonJS.isEmpty(value)) {
+        if (val === 0) {
           return '0 B'
+        }
+        let k = 1024
+        let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
+        let i = Math.floor(Math.log(val) / Math.log(k))
+        return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
+      }
+    },
+    async changes(file, fileList) {
+
+      if (file.status !== 'ready') {
+        let fileListNamesList = []
+        for (let fileItem of this.fileList) {
+          fileListNamesList.push(fileItem.name)
+        }
+        if (fileListNamesList.indexOf(file.name) != -1) {
+          this.$message.error(`${file.name}已存在，无法重复上传`)
+
+          return
         } else {
-          let val = parseInt(value)
-          if (this.commonJS.isEmpty(val)) {
-            return '0 B'
+
+          if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
+            this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
+            return
           }
-          if (isNaN(val)) {
-            return '0 B'
+          // this.dataListNew = []
+          // this.dataList.forEach((item) => {
+          //   this.dataListNew.push(item)
+          // })
+          var fileListNames = []
+          for (let fileItem of this.fileList) {
+            fileListNames.push(fileItem.name)
           }
-          if (val === 0) {
-            return '0 B'
+          // for (let item of fileList) {
+
+
+          let item1 = JSON.parse(JSON.stringify(file))
+          // if (fileListNames.length === 0 || fileListNames.indexOf(item1.name) === -1) {
+          this.fileList.push(item1)
+          // }
+          item1.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          item1.createBy = {
+            id: '',
+            name: ''
           }
-          let k = 1024
-          let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
-          let i = Math.floor(Math.log(val) / Math.log(k))
-          return (val / Math.pow(k, i)).toPrecision(3) + '' + sizes[i]
-        }
-      },
-		async changes (file, fileList) {
-			// if (file.status !== 'ready') {
-			//   return
-			// }
-			if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
-				this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
-				return
-			}
-			this.dataListNew = []
-			this.dataList.forEach((item) => {
-				this.dataListNew.push(item)
-			})
-			var fileListNames = []
-			for (let fileItem of this.fileList) {
-				fileListNames.push(fileItem.name)
-			}
-			for (let item of fileList) {
-				if(fileListNames.length === 0 || fileListNames.indexOf(item.name) === -1){
-					this.fileList.push(item)
-				}
-				item.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
-				item.createBy = {
-					id: '',
-					name: ''
-				}
-				item.createBy.id = this.$store.state.user.id
-				item.createBy.name = this.$store.state.user.name
-				this.dataListNew.push(item)
-			}
-			for (let item of this.dataListNew) {
-				if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
-					item.url = item.raw.url
-					if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
-						this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
-							item.lsUrl = data
-						})
-					}
-				}
-			}
-		},
-      showFile (row) {
-        openWindowOnUrl(row)
-      },
-      onPreview (url) {
-        this.url = url
-        this.showViewer = true
-      },
-      // 关闭查看器
-      closeViewer () {
-        this.url = ''
-        this.showViewer = false
-      },
-      toHref (row) {
-        toHref(row)
-      },
-		async deleteById (row, index,fileList) {
-			// this.$refs.upload.handleRemove(this.dataListNew[index])
-			await this.dataListNew.splice(index, 1)
-			await this.dataList.splice(index, 1)
-			var newFileList = [];
-			for (var i = 0; i < fileList.length; i++) {
-				if (fileList[i].name !== row.name) {
-					newFileList.push(fileList[i])
-				}
-			}
-			this.fileList = newFileList;
+          item1.createBy.id = this.$store.state.user.id
+          item1.createBy.name = this.$store.state.user.name
+          this.dataListNew.push(item1)
+          this.dataList.push(item1)
+          // }
+          for (let item of this.dataListNew) {
+            if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
+              item.url = item.raw.url
+              if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
+                this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
+                  item.lsUrl = data
+                })
+              }
+            }
 
-		},
-      /**
-       * 关闭dialog时使用  清除el-upload中上传的文件
-       */
-      clearUpload () {
-        this.$refs.upload.uploadFiles = []
-        this.dataList = []
-        this.dataListNew = []
-        this.createBy = ''
-      },
-      /**
-       * 获取当前文件列表中的文件数据
-       */
-      getDataList () {
-        return this.dataListNew
-      },
-      /**
-       * 判断进度条是否结束，附件是否加载完成
-       * @returns {boolean}
-       */
-      checkProgress () {
-        if (this.progressFlag === true) {
-          this.$message.warning('请等待附件上传完成再进行操作')
-          return true
-        }
-        if (this.fileLoading === false) {
-          this.$message.warning('请等待附件加载完成再进行操作')
-          if (this.dataListLength === this.dataListNew.length) {
-            this.fileLoading = true
           }
-          return true
-        }
-        return false
-      },
-      ifName (row) {
-        if (this.commonJS.isEmpty(row.name)) {
-          row.name = '---'
-          return false
         }
-        let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
-        if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
-          return true
-        } else {
-          return false
+
+
+      }
+    },
+    showFile(row) {
+      openWindowOnUrl(row)
+    },
+    onPreview(url) {
+      this.url = url
+      this.showViewer = true
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.url = ''
+      this.showViewer = false
+    },
+    toHref(row) {
+      toHref(row)
+    },
+    async deleteById(row, index, fileList) {
+      // this.$refs.upload.handleRemove(this.dataListNew[index])
+      await this.dataListNew.splice(index, 1)
+      await this.dataList.splice(index, 1)
+      var newFileList = [];
+      for (var i = 0; i < fileList.length; i++) {
+        if (fileList[i].name !== row.name) {
+          newFileList.push(fileList[i])
         }
-      },
-      fileLoadingFalse () {
-        this.fileLoading = false
-      },
-      // 开启/关闭页面的加载中状态
-      changeLoading (loading) {
-        if (this.commonJS.isNotEmpty(loading)) {
-          this.loading = loading
-        } else {
-          this.loading = false
+      }
+      this.fileList = newFileList;
+
+    },
+    /**
+     * 关闭dialog时使用  清除el-upload中上传的文件
+     */
+    clearUpload() {
+      this.$refs.upload.uploadFiles = []
+      this.dataList = []
+      this.dataListNew = []
+      this.fileList = []
+      this.createBy = ''
+    },
+    /**
+     * 获取当前文件列表中的文件数据
+     */
+    getDataList() {
+      return this.dataListNew
+    },
+    /**
+     * 判断进度条是否结束，附件是否加载完成
+     * @returns {boolean}
+     */
+    checkProgress() {
+      if (this.progressFlag === true) {
+        this.$message.warning('请等待附件上传完成再进行操作')
+        return true
+      }
+      if (this.fileLoading === false) {
+        this.$message.warning('请等待附件加载完成再进行操作')
+        if (this.dataListLength === this.dataListNew.length) {
+          this.fileLoading = true
         }
+        return true
+      }
+      return false
+    },
+    ifName(row) {
+      if (this.commonJS.isEmpty(row.name)) {
+        row.name = '---'
+        return false
+      }
+      let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
+      if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
+        return true
+      } else {
+        return false
+      }
+    },
+    fileLoadingFalse() {
+      this.fileLoading = false
+    },
+    // 开启/关闭页面的加载中状态
+    changeLoading(loading) {
+      if (this.commonJS.isNotEmpty(loading)) {
+        this.loading = loading
+      } else {
+        this.loading = false
       }
     }
   }
+}
 </script>
 <style scoped>
-  .el-divider__text {
-    font-size: 16px;
-    font-weight: bold;
-  }
+.el-divider__text {
+  font-size: 16px;
+  font-weight: bold;
+}
 </style>