update 上传组件

src/components/uploadBtn/components/FileList.vue

@@ -8,7 +8,7 @@
         </span>
         <div class="h-4 space-x-2">
           <button class="el-icon-download color-blue" @click="handleDownload(file)" title="点击下载"></button>
-          <button class="el-icon-delete color-red" @click="handleDelete(file)" title="点击删除"></button>
+          <button class="el-icon-delete color-red" v-if="!detailMode" @click="handleDelete(file)" title="点击删除"></button>
         </div>
       </li>
       <li v-if="filteredList.length === 0">无</li>
@@ -51,6 +51,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    detailMode: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {

src/components/uploadBtn/index.vue

@@ -11,15 +11,20 @@
     >
       <el-button :disabled="disabled" size="small" type="primary">{{ buttonText }}</el-button>
       <div slot="tip" class="el-upload__tip">
+        <span key="noupload">
+          {{ tips.hint }}
+        </span>
+      </div>
+      <!-- <div slot="tip" class="el-upload__tip">
         <transition name="fade" mode="out-in">
           <span key="noupload" v-if="!showMsg">
             {{ tips.hint }}
           </span>
           <span key="uploaded" v-else class="success-msg"> {{ tips.success }} </span>
         </transition>
-      </div>
+      </div> -->
     </el-upload>
-    <FileList :file-list="uploadedFileList" @delete-a-file="handleRemoveFile" style="display: inline-block; position: absolute; top: 0; left: 72px" />
+    <FileList :detail-mode="disabled" :file-list="uploadedFileList" @delete-a-file="handleRemoveFile" style="display: inline-block; position: absolute; top: 0; left: 72px" />
   </div>
 </template>
 
@@ -81,8 +86,21 @@ export default {
   },
   methods: {
     handleRemoveFile(fileId) {
-      this.uploadedFileList = this.uploadedFileList.filter((file) => file.id.toString() !== fileId.toString());
-      this.$emit("update-file-list", this.uploadedFileList);
+      console.log("[UploadBtn] handleRemoveFile", fileId);
+      this.$confirm("确定删除此文件?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.uploadedFileList = this.uploadedFileList.filter((file) => file.id.toString() !== fileId.toString());
+          this.$emit("update-file-list", this.uploadedFileList);
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+        })
+        .catch(() => {});
     },
 
     handleUploadSuccess(response, file, fileList) {
@@ -96,12 +114,20 @@ export default {
           url: uploadedFile.fileUrl,
           typeCode: file.typeCode,
         };
+
+        /** 通知 */
+        this.$notify({
+          title: "成功",
+          message: "上传成功",
+          type: "success",
+        });
+
         this.uploadedFileList.push(fileItem);
         this.$emit("update-file-list", this.uploadedFileList);
-        this.showMsg = true;
-        setTimeout(() => {
-          this.showMsg = false;
-        }, 3000);
+        // this.showMsg = true;
+        // setTimeout(() => {
+        //   this.showMsg = false;
+        // }, 3000);
       }
     },
   },