update upload&download

src/components/DialogJustForm.vue

@@ -51,9 +51,10 @@
               v-if="col.upload"
               :key="'upload_' + Math.random()"
               :action="col.actionUrl"
-              :file-list="col.fileList"
+              :file-list="dataForm['files']"
               :disabled="detailMode || !dataForm.id"
               v-bind="col.elparams"
+              @update-file-list="handleFilelistUpdate"
             />
 
             <quillEditor
@@ -142,21 +143,14 @@ export default {
   inject: ["urls"],
   data() {
     const dataForm = {};
-    const uploadComponentsList = []; // 保存当前窗口里的上传组件的配置信息的引用
 
     this.configs.form.rows.forEach((row) => {
       row.forEach((col) => {
-        // if (col.upload) dataForm[col.prop] = col.default ?? [];
-        // else dataForm[col.prop] = col.default ?? null;
         dataForm[col.prop] = col.default ?? null;
 
-        if (col.upload) {
-          uploadComponentsList.push(col);
-        }
-
         if (col.fetchData)
           col.fetchData().then(({ data: res }) => {
-            console.log("[Fetch Data]", res.data.list);
+            console.log("[DialogJustForm fetchData -->]", res.data.list);
             if (res.code === 0 && res.data.list) {
               this.$set(
                 col,
@@ -172,7 +166,7 @@ export default {
         else if (col.fetchTreeData) {
           // 获取设备类型时触发的，用于前端构建属性结构，约定，parentId 为0时是顶级节点
           col.fetchTreeData().then(({ data: res }) => {
-            console.log("[Fetch Tree Data]", res.data.list);
+            console.log("[DialogJustForm fetchTreeData -->]", res.data.list);
             if (res.code === 0 && res.data.list) {
               // 先把数据先重构成一个对象
               const obj = {};
@@ -181,7 +175,6 @@ export default {
               });
               // 再过滤这个对象
               let filteredList = reConstructTreeData(obj);
-              console.log("** filteredList **", filteredList);
               // 最后设置 options
               this.$set(col, "options", filteredList);
             } else {
@@ -195,7 +188,6 @@ export default {
       loadingStatus: false,
       dataForm,
       detailMode: false,
-      uploadComponentsList,
       baseDialogConfig: null,
       defaultQuillConfig: {
         modules: {
@@ -233,15 +225,14 @@ export default {
     },
   },
   methods: {
-    handleUploadSuccess(response, file, fileList) {
+    handleFilelistUpdate(newFilelist) {
-      /** 上传成功修改本地展示的文件名 */
+      // TODO: 直接访问 .files 可能不太合适
-      if (response.code === 0) {
+      this.dataForm.files = newFilelist.map((file) => ({
-        // const { fileName } = response.data[0];
+        id: file.id,
-        const fileName = response.data[0].fileUrl.split("/").pop();
+        name: file.name,
-        file.name = fileName;
+        url: file.url,
-      } else {
+        typeCode: file.typeCode
-        console.log("response, file, fileList", response, file, fileList);
+      }));
-      }
     },
 
     /** utitilities */
@@ -257,12 +248,11 @@ export default {
     resetForm(excludeId = false, immediate = false) {
       setTimeout(
         () => {
-          console.log("[Dialog Just Form] clearing form...");
           Object.keys(this.dataForm).forEach((key) => {
             if (excludeId && key === "id") return;
             this.dataForm[key] = null;
           });
-          console.log("[Dialog Just Form] cleared form...", this.dataForm);
+          console.log("[DialogJustForm resetForm()] clearing form...");
           this.$refs.dataForm.clearValidate();
           this.$emit("dialog-closed"); // 触发父组件销毁自己
         },
@@ -273,13 +263,11 @@ export default {
     /** init **/
     init(id, detailMode) {
       if (this.$refs.dataForm) {
-        console.log("[dialog REUSE] clearing form validation...");
+        console.log("[DialogJustForm] clearing form validation...");
         // 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
         this.$refs.dataForm.clearValidate();
       }
 
-      console.log("[Dialog Just Form] init():", id, detailMode);
-
       this.detailMode = detailMode ?? false;
       this.$nextTick(() => {
         this.dataForm.id = id || null;
@@ -290,30 +278,35 @@ export default {
           // 获取基本信息
           this.$http.get(this.urls.base + `/${this.dataForm.id}`).then(({ data: res }) => {
             if (res && res.code === 0) {
-              const dataFormKeys = Object.keys(this.dataForm);
+              this.dataForm = __pick(res.data, Object.keys(this.dataForm));
-              console.log("keys ===> ", dataFormKeys);
+              /** 格式化文件上传列表 */
-
+              if (Array.isArray(this.dataForm.files)) {
-              // console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
+                this.dataForm.files = this.dataForm.files.map((file) => ({
-              this.dataForm = __pick(res.data, dataFormKeys);
+                  id: file.id,
-              console.log("pick(res.data, dataFormKeys) ===> ", __pick(res.data, dataFormKeys));
+                  name: file.fileUrl.split("/").pop(),
+                  typeCode: file.typeCode,
+                  url: file.fileUrl,
+                }));
+              }
+              console.log("[DialogJustForm] init():", __pick(res.data, Object.keys(this.dataForm)));
             }
             this.loadingStatus = false;
           });
 
-          // 获取文件信息
+          // // 获取文件信息
-          this.uploadComponentsList.forEach((col) => {
+          // this.uploadComponentsList.forEach((col) => {
-            this.$http
+          //   this.$http
-              .get(col.fetchUrl, {
+          //     .get(col.fetchUrl, {
-                params: {
+          //       params: {
-                  limit: 999,
+          //         limit: 999,
-                  page: 1,
+          //         page: 1,
-                  [col.paramName]: this.dataForm.id,
+          //         [col.paramName]: this.dataForm.id,
-                },
+          //       },
-              })
+          //     })
-              .then(({ data: res }) => {
+          //     .then(({ data: res }) => {
-                console.log("fetch filelist:", res);
+          //       console.log("fetch filelist:", res);
-              });
+          //     });
-          });
+          // });
         } else {
           // 如果不是编辑
         }
@@ -356,13 +349,23 @@ export default {
 
             this.$refs.dataForm.validate((passed, result) => {
               if (passed) {
-                // 如果通过验证
                 this.loadingStatus = true;
                 const method = payload.name === "add" ? "POST" : "PUT";
+                let httpPayload = null;
+                /** 针对有文件上传选项的弹窗提供特殊的 payload */
+                if (this.dataForm.files) {
+                  httpPayload = {
+                    ...this.dataForm,
+                    fileIds: this.dataForm.files.map((file) => file.id),
+                  };
+                } else {
+                  httpPayload = this.dataForm;
+                }
+                /** 发送 */
                 this.$http({
                   url: this.urls.base,
                   method,
-                  data: this.dataForm,
+                  data: httpPayload,
                 })
                   .then(({ data: res }) => {
                     console.log("[add&update] res is: ", res);

src/components/uploadBtn/components/FileList.vue

@@ -7,8 +7,8 @@
           {{ file.name }}
         </span>
         <div class="h-4 space-x-2">
-          <button class="el-icon-download text-blue-300" @click="handleDownload(file)"></button>
+          <button class="el-icon-download color-blue" @click="handleDownload(file)" title="点击下载"></button>
-          <button class="el-icon-delete text-red-300" @click="handleDelete(file)"></button>
+          <button class="el-icon-delete color-red" @click="handleDelete(file)" title="点击删除"></button>
         </div>
       </li>
       <li v-if="filteredList.length === 0">无</li>
@@ -31,7 +31,7 @@
 
     <!-- </div> -->
     <div v-if="label" slot="reference" class="">{{ label }}</div>
-    <div v-else slot="reference" class="el-icon-folder-opened" style="margin-left: 24px; cursor: pointer;"> 已上传文件</div>
+    <div v-else slot="reference" class="el-icon-folder-opened" style="margin-left: 24px; cursor: pointer">已上传文件</div>
   </el-popover>
 </template>
 
@@ -58,6 +58,13 @@ export default {
       searchCondition: "",
     };
   },
+  watch: {
+    fileList(val) {
+      if (val) {
+        console.log("[FileList] fileList prop:", val);
+      }
+    },
+  },
   computed: {
     filteredList() {
       return this.fileList.filter((item) => item.name.startsWith(this.searchCondition));
@@ -65,10 +72,35 @@ export default {
   },
   methods: {
     handleDownload(file) {
-      console.log("handleDownload", file);
+      console.log("[FileList] handleDownload", file);
+      this.$http
+        .get("/pms/attachment/downloadFile", {
+          params: {
+            attachmentId: file.id,
+            type: 1,
+          },
+        })
+        .then(({ data: res }) => {
+          const blob = new Blob([res]);
+          if ("download" in document.createElement("a")) {
+            const alink = document.createElement("a");
+            alink.download = file.name;
+            alink.style.display = "none";
+            alink.target = "_blank";
+            alink.href = URL.createObjectURL(blob);
+            document.body.appendChild(alink);
+            alink.click();
+            URL.revokeObjectURL(alink.href);
+            document.body.removeChild(alink);
+          } else {
+            navigator.msSaveBlob(blob, fileName);
+          }
+        });
     },
     handleDelete(file) {
-      console.log("handleDelete", file);
+      console.log("[FileList] handleDelete", file);
+      // TODO: 警示删除操作
+      this.$emit("delete-a-file", file.id);
     },
     handleSearchClick() {
       console.log("[FileList] handleSearchClick()");
@@ -126,4 +158,27 @@ li {
   width: 24px;
   height: 24px;
 }
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  width: 8px;
+}
+::-webkit-scrollbar-button {
+  display: none;
+}
+::-webkit-scrollbar-thumb {
+  background: rgb(175, 175, 175);
+  border-radius: 4px;
+}
+
+.color-blue {
+  color: #0b58ff;
+  cursor: pointer;
+}
+.color-red {
+  color: rgba(222, 15, 15, 0.89);
+  cursor: pointer;
+}
 </style>

src/components/uploadBtn/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="" style="position: relative;">
+  <div class="" style="position: relative">
     <el-upload
       :disabled="disabled"
       name="files"
@@ -18,10 +18,8 @@
           <span key="uploaded" v-else class="success-msg"> {{ tips.success }} </span>
         </transition>
       </div>
-
     </el-upload>
-    <FileList :file-list="fileList" style="display: inline-block; position: absolute; top: 0; left: 72px;" />
+    <FileList :file-list="uploadedFileList" @delete-a-file="handleRemoveFile" style="display: inline-block; position: absolute; top: 0; left: 72px" />
-
   </div>
 </template>
 
@@ -47,7 +45,7 @@ export default {
       type: String,
       default: "http://192.168.1.62:8080/pms-am/pms/attachment/uploadFileFormData?typeCode=equipmentType", //
     },
-    fileListProp: {
+    fileList: {
       type: Array,
       default: () => [],
     },
@@ -58,7 +56,17 @@ export default {
   },
   components: { FileList },
   data() {
-    return { showMsg: false, fileList: [] };
+    return { showMsg: false, uploadedFileList: [] };
+  },
+  watch: {
+    // fileList: {
+    //   handler: (arr) => {
+    //     if (arr && arr.length > 0) {
+    //       this.uploadedFileList = arr;
+    //     }
+    //   },
+    //   immediate: true,
+    // },
   },
   computed: {
     uploadHeaders() {
@@ -67,28 +75,34 @@ export default {
       };
     },
   },
-  watch: {
+  mounted() {
-    fileListProp(list) {
+    console.log("[UploadBtn] mounted()", this.fileList, this.uploadedFileList);
-      this.fileList = list;
+    this.uploadedFileList = this.fileList ?? [];
-    },
   },
   methods: {
+    handleRemoveFile(fileId) {
+      this.uploadedFileList = this.uploadedFileList.filter((file) => file.id.toString() !== fileId.toString());
+      this.$emit("update-file-list", this.uploadedFileList);
+    },
+
     handleUploadSuccess(response, file, fileList) {
-      /** 上传成功修改本地展示的文件名 */
+      console.log("[UploadBtn] uploadedFileList", response, file, fileList, this.uploadedFileList);
+
       if (response.code === 0) {
-        // const { fileName } = response.data[0];
+        const uploadedFile = response.data[0];
-        const fileName = response.data[0].fileUrl.split("/").pop();
+        const fileItem = {
-        file.name = fileName;
+          id: uploadedFile.id,
+          name: uploadedFile.fileUrl.split("/").pop(),
+          url: uploadedFile.fileUrl,
+          typeCode: file.typeCode,
+        };
+        this.uploadedFileList.push(fileItem);
+        this.$emit("update-file-list", this.uploadedFileList);
         this.showMsg = true;
         setTimeout(() => {
           this.showMsg = false;
         }, 3000);
-      } else {
-        console.log("response, file, fileList", response, file, fileList);
       }
-
-      this.fileList = fileList;
-      console.log("[vue] fileList", this.fileList);
     },
   },
 };
@@ -114,19 +128,6 @@ export default {
   transition: opacity 500ms ease-out;
 }
 
-::-webkit-scrollbar {
-  width: 8px;
-}
-::-webkit-scrollbar-track {
-  width: 8px;
-}
-::-webkit-scrollbar-button {
-  display: none;
-}
-::-webkit-scrollbar-thumb {
-  background: rgb(175, 175, 175);
-  border-radius: 4px;
-}
 .success-msg {
   color: #67c23a;
 }

src/views/modules/pms/equipmentType/config.js

@@ -98,11 +98,8 @@ export default function () {
         [{
           upload: true,
           actionUrl: window.SITE_CONFIG['apiURL'] + '/pms/attachment/uploadFileFormData?typeCode=equipmentType',
-          fetchUrl: '/pms/equipmentTypeFile/page',
           label: "上传资料",
-          fileList: [],
+          prop: "files",
-          prop: "upload",
-          paramName: 'equipmentTypeId',
           elparams: null
         }],
       ],

src/views/modules/pms/material/config.js

@@ -13,8 +13,10 @@ export default function () {
     { prop: "type", label: "物料类型" },
     { prop: "enName", label: "英文名称" },
     { prop: "enAb", label: "英文缩写" },
-    { prop: "description", label: "详情", subcomponent: TableTextComponent },
+    { prop: "density", label: "堆积密度" },
-    { prop: "remark", label: "备注" },
+    // { prop: "description", label: "详情", subcomponent: TableTextComponent },
+    { prop: "description", label: "原料描述", },
+    { prop: "remark", label: "中文描述" },
     /** TODO: parentId 是用来前端重构成树形结构的... */
     {
       prop: "operations",
@@ -81,7 +83,8 @@ export default function () {
             rules: { required: true, message: "not empty", trigger: "blur" },
             elparams: { placeholder: "请输入物料编码" },
           },
-          { input: true, label: "规格", prop: "specifications", elparams: { placeholder: "规格" } },
+          { input: true, label: "堆积密度(g/cm3)", prop: "density", elparams: { placeholder: "堆积密度" } },
+
         ],
         [
           {
@@ -152,7 +155,10 @@ export default function () {
           },
 
         ],
-        [{ textarea: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
+        [
+          { input: true, label: "原料描述", prop: "description", elparams: { placeholder: "原料描述" } },
+        ],
+        [{ input: true, label: "中文描述", prop: "remark", elparams: { placeholder: "备注" } }],
       ],
       operations: [
         { name: "add", label: "保存", type: "primary", permission: "pms:material:save", showOnEdit: false },