update 2023/2/15

src/components/DialogWithMenu.vue

@@ -33,9 +33,7 @@
           :headers="uploadHeaders"
           :on-success="handleUploadSuccess"
         >
-          <el-button plain type="primary" size="small" class="at-right-top" style="" @click="triggerUpload()">
+          <el-button plain type="primary" size="small" class="at-right-top" style=""> <i class="el-icon-upload"></i> 上传 </el-button>
-            <i class="el-icon-upload"></i> 上传
-          </el-button>
         </el-upload>
       </template>
 
@@ -150,19 +148,18 @@
           <!-- 附件标签页 -->
           <div v-if="dataForm.id && tab.key === 'attachment'" key="attachment">
             <!-- 附件列表 -->
-            文件列表
             <div class="">
               <ul class="file-list">
                 <li v-for="(file, index) in fileList" :key="index">
                   <span class="file-name">{{ file.name }}</span>
                   <span class="file-operations">
-                    <span class="file-icon preview" @click="handleFileClick('view')">
+                    <span class="file-icon preview" @click="handleFileClick('view', file)">
                       <i class="el-icon-view" style="cursor: pointer"></i>
                     </span>
-                    <span class="file-icon download" @click="handleFileClick('download')">
+                    <span class="file-icon download" @click="handleFileClick('download', file)">
                       <i class="el-icon-download" style="color: #0b58ff; cursor: pointer"></i>
                     </span>
-                    <span class="file-icon delete" @click="handleFileClick('delete')">
+                    <span class="file-icon delete" @click="handleFileClick('delete', file)">
                       <i class="el-icon-delete" style="color: red; cursor: pointer"></i>
                     </span>
                   </span>
@@ -387,7 +384,12 @@ export default {
         () => {
           Object.keys(this.dataForm).forEach((key) => {
             if (excludeId && key === "id") return;
-            this.dataForm[key] = null;
+            if ("files" in this.dataForm) this.dataForm.files = [];
+            if ("fileIds" in this.dataForm) this.dataForm.fileIds = [];
+            else this.dataForm[key] = null;
+            if (Array.isArray(this.fileList)) {
+              this.fileList = [];
+            }
           });
           this.activeMenu = this.configs.menu[0].name;
           this.$refs.dataForm[0].clearValidate();
@@ -441,19 +443,38 @@ export default {
     },
 
     /** handlers */
-    handleFileClick(type) {
+    handleFileClick(type, file) {
       switch (type) {
         case "view":
           break;
         case "download": {
+          /** 通知 */
+          this.$notify({
+            title: "成功",
+            message: "开始下载",
+            type: "success",
+          });
+          break;
         }
         case "delete": {
+          console.log("deleting", file);
+          const { id } = file;
+          this.fileList = this.fileList.filter((f) => f.id !== id);
+          this.updateRemoteFiles().then((res) => {
+            /** 通知 */
+            this.$notify({
+              title: "成功",
+              message: "已删除",
+              type: "success",
+            });
+          });
+          break;
         }
       }
     },
 
     handleUploadSuccess(response, file, fileList) {
-      console.log("[DialogWithMenu] uploadedFileList", response, file, fileList, this.uploadedFileList);
+      console.log("[DialogWithMenu] uploadedFileList", response, file, fileList);
 
       if (response.code === 0) {
         const uploadedFile = response.data[0];
@@ -464,6 +485,7 @@ export default {
           typeCode: file.typeCode,
         };
 
+        this.fileList.push(fileItem);
         /** 通知 */
         this.$notify({
           title: "成功",
@@ -471,15 +493,23 @@ export default {
           type: "success",
         });
 
-        this.fileList.push(fileItem);
+        this.updateRemoteFiles();
-        // this.uploadedFileList.push(fileItem);
-        // this.$emit("update-file-list", this.uploadedFileList);
-        this.updateFileList(this.fileList)
       }
     },
-    updateFileList(list) {
+
-      // this.$http.put()
+    updateRemoteFiles() {
+      return this.$http
+        .put("/pms/product", {
+          id: "id" in this.dataForm ? this.dataForm.id : "DEFAULT_ID",
+          // code: "code" in this.dataForm ? this.dataForm.code : "DEFAULT_CODE",
+          // ...this.dataForm,
+          fileIds: this.fileList.map((f) => f.id),
+        })
+        .then(({ data: res }) => {
+          console.log("updateFileList", this.fileList, res);
+        });
     },
+
     handleComponentModelUpdate(propName, { subject, payload: { data } }) {
       this.dataForm[propName] = JSON.stringify(data);
       console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
@@ -692,8 +722,8 @@ export default {
   z-index: 10000;
 }
 
-ul,
+ul.file-list,
-li {
+ul.file-list > li {
   padding: 0;
   margin: 0;
   list-style: none;
@@ -703,18 +733,24 @@ li {
   max-height: 20vh;
   overflow-y: auto;
   margin-top: 12px;
-  width: 240px;
+  /* width: 240px; */
   display: flex;
   flex-direction: column;
-  background-color: #ccc;
 }
 
-.file-list > li {
+ul.file-list > li {
+  border-radius: 4px;
+  background-color: #edededd2;
   padding: 8px;
+  margin-bottom: 2px;
   display: flex;
   justify-content: space-between;
 }
 
+ul.file-list > li:hover {
+  background-color: #ededed;
+}
+
 .file-operations {
   display: flex;
 }