附件组件

src/views/common/UpLoadComponent.vue

@@ -12,7 +12,7 @@
                :on-change="changes"
                :on-progress="uploadVideoProcess"
                :file-list="fileList">
-      <el-button :loading="loading" type="primary" size="mini" :slot="auth==='view'&&uploadFlag===false?'tip':'trigger'" :disabled="auth==='view'&&uploadFlag===false">点击上传</el-button>
+      <el-button :loading="loading" type="primary" size="default" :disabled="auth==='view'&&uploadFlag===false" :slot="auth==='view'&&uploadFlag===false?'tip':'trigger'" >点击上传</el-button>
     </el-upload>
     <div style="height: calc(100% - 80px);margin-top: 10px">
       <!-- 进度条 -->
@@ -24,12 +24,13 @@
         :data="dataListNew">
         <el-table-column type="seq" width="40"></el-table-column>
         <el-table-column label="文件名称" prop="name" align="center">
-          <template scope="scope">
+          <template #default="scope">
             <div v-if="ifName(scope.row) === true">
               <el-image
-                style="width: 30px; height: 30px;padding-top: 4px"
+                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>
@@ -38,16 +39,16 @@
           </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="createTime" align="center"></el-table-column>
         <el-table-column label="文件大小" prop="size" align="center">
-          <template slot-scope="scope">
+          <template #default="scope">
             {{getSize(scope.row.size)}}
           </template>
         </el-table-column>
         <el-table-column label="操作" width="200px" fixed="right" align="center">
-          <template  scope="scope">
-            <el-button type="text"  icon="el-icon-edit" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
-            <el-button type="text"  icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
+          <template  #default="scope">
+            <el-button text type="primary" key="01" icon="el-icon-download" size="small" @click="toHref(scope.row)" :disabled="false">下载</el-button>
+            <el-button text type="primary" key="02" icon="el-icon-delete" size="small"  @click="deleteById(scope.row, scope.$index)" :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>
@@ -198,8 +199,8 @@
         }
         for await (let item of fileList) {
           await this.ossService.getFileSizeByUrl(item.url).then((data) => {
-            item.lsUrl = data.data.url
-            item.size = data.data.size
+            item.lsUrl = data.url
+            item.size = data.size
             this.dataList.push(item)
             this.dataListNew.push(item)
             if (this.dataListNew.length === fileList.length) {
@@ -249,7 +250,9 @@
           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]
+			let result = val / Math.pow(k, i);
+			let kb = parseFloat(result.toPrecision(3));
+          return kb + '' + sizes[i]
         }
       },
       async changes (file, fileList) {
@@ -265,7 +268,7 @@
           this.dataListNew.push(item)
         })
         for (let item of fileList) {
-          item.createDate = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          item.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
           item.createBy = {
             id: '',
             name: ''
@@ -279,7 +282,7 @@
             item.url = item.raw.url
             if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
               await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
-                item.lsUrl = data.data
+                item.lsUrl = data
               })
             }
           }
@@ -302,25 +305,28 @@
         toHref(row)
       },
       deleteById (row, index) {
+	  	this.$refs.upload.handleRemove(this.dataListNew[index])
         this.dataListNew.splice(index, 1)
-        if (row.id !== null && row.id !== '' && row.id !== undefined) {
-          this.dataList.splice(index, 1)
-          // this.ossService.deleteMsgById(row.id)
-        } else {
-          let num
-          if (this.dataList.length > 0) {
-            num = this.dataList.length - 1
-          } else {
-            num = 0
-          }
-          this.$refs.upload.uploadFiles.splice(index - num, 1)
-        }
+		  this.dataList.splice(index, 1)
+		  this.tableKey = Math.random()
+        // if (row.id !== null && row.id !== '' && row.id !== undefined) {
+        //   this.dataList.splice(index, 1)
+        //   // this.ossService.deleteMsgById(row.id)
+        // } else {
+        //   let num
+        //   if (this.dataList.length > 0) {
+        //     num = this.dataList.length - 1
+        //   } else {
+        //     num = 0
+        //   }
+        //   this.$refs.upload.uploadFiles.splice(index - num, 1)
+        // }
       },
       /**
        * 关闭dialog时使用  清除el-upload中上传的文件
        */
       clearUpload () {
-        this.$refs.upload.uploadFiles = []
+        this.$refs.upload.clearFiles()
         this.dataList = []
         this.dataListNew = []
         this.createBy = ''
@@ -375,7 +381,7 @@
     }
   }
 </script>
-<style scoped>
+<style>
   .el-divider__text {
     font-size: 16px;
     font-weight: bold;