update 产品文件上传

src/components/DialogWithMenu.vue

@@ -24,17 +24,21 @@
         @click="handleAddParam()"
         >+ 添加</el-button
       >
-      <el-button
-        v-if="dataForm.id && !detailMode && /附件/.test(activeMenu)"
-        plain
-        type="primary"
-        size="small"
-        class="at-right-top"
-        style="margin-bottom: 16px"
-        @click="triggerUpload()"
-      >
-        <i class="el-icon-upload"></i> 上传</el-button
-      >
+      <template v-if="dataForm.id && !detailMode && /附件/.test(activeMenu)">
+        <el-upload
+          style="position: absolute; width: 100%; height: 0"
+          name="files"
+          :action="uploadUrl"
+          :show-file-list="false"
+          :headers="uploadHeaders"
+          :on-success="handleUploadSuccess"
+        >
+          <el-button plain type="primary" size="small" class="at-right-top" style="" @click="triggerUpload()">
+            <i class="el-icon-upload"></i> 上传
+          </el-button>
+        </el-upload>
+      </template>
+
       <!-- menu  -->
       <el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
         <!-- <el-tab-pane v-for="(tab, index) in configs.menu" :key="index" :label="tab.name" :name="tab.name"> -->
@@ -50,6 +54,7 @@
             {{ tab.name }}
           </span>
 
+          <!-- 表单标签页 -->
           <div v-if="tab.key === 'info'">
             <!-- form  -->
             <el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus">
@@ -114,7 +119,9 @@
               </el-row>
             </el-form>
           </div>
-          <div v-show="dataForm.id && tab.key === 'attr'" key="attr-list">
+
+          <!-- 表格标签页 -->
+          <div v-if="dataForm.id && tab.key === 'attr'" key="attr-list">
             <BaseListTable
               :table-config="null"
               :column-config="filteredTableProps"
@@ -138,9 +145,32 @@
               :total="attrTotal"
               layout="total, sizes, prev, next"
             ></el-pagination>
-            <!-- layout="total, sizes, prev, pager, next, jumper" -->
           </div>
-          <div v-show="dataForm.id && tab.key === 'attachment'" key="attachment">附件</div>
+
+          <!-- 附件标签页 -->
+          <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')">
+                      <i class="el-icon-view" style="cursor: pointer"></i>
+                    </span>
+                    <span class="file-icon download" @click="handleFileClick('download')">
+                      <i class="el-icon-download" style="color: #0b58ff; cursor: pointer"></i>
+                    </span>
+                    <span class="file-icon delete" @click="handleFileClick('delete')">
+                      <i class="el-icon-delete" style="color: red; cursor: pointer"></i>
+                    </span>
+                  </span>
+                </li>
+              </ul>
+            </div>
+            <!-- 提示信息 -->
+          </div>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -171,7 +201,7 @@
 import { pick as __pick } from "@/utils/filters";
 import SmallDialog from "@/components/SmallDialog.vue";
 import BaseListTable from "@/components/BaseListTable.vue";
-
+import Cookies from "js-cookie";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
@@ -314,6 +344,7 @@ export default {
       attrPage: 1,
       attrSize: 5,
       attrTotal: 0,
+      fileList: [{ name: "1.png" }, { name: "2.png" }],
     };
   },
   computed: {
@@ -328,26 +359,16 @@ export default {
     filteredTableProps() {
       return this.detailMode ? this.configs.table.props.filter((v) => v.prop !== "operations") : this.configs.table.props;
     },
+    uploadHeaders() {
+      return {
+        token: Cookies.get("token") || "",
+      };
+    },
+    uploadUrl() {
+      return this.configs.menu.find((item) => item.key === "attachment")?.actionUrl || "#";
+    },
   },
-  watch: {
-    // "dataForm.parentId": function (val, old) {
-    //   if (val && val !== "0") {
-    //     // 如果不是 '无' 选项，就锁定 typeDictValue(物料类别)，和 typeId(物料类型)
-    //     this.$http.get(`/pms/material/${val}`).then(({ data: res }) => {
-    //       if (res.code === 0) {
-    //         const { typeDictValue, typeId } = res.data;
-    //         this.dataForm.typeDictValue = typeDictValue;
-    //         this.dataForm.typeId = typeId;
-    //         this.disableXXX = true;
-    //       }
-    //     });
-    //   } else {
-    //     this.dataForm.typeDictValue = null;
-    //     this.dataForm.typeId = null;
-    //     this.disableXXX = false;
-    //   }
-    // },
-  },
+
   methods: {
     disableCondition(prop) {
       return this.detailMode || (this.disableXXX && this.autoDisabledList.indexOf(prop) !== -1);
@@ -397,6 +418,18 @@ export default {
             if (res && res.code === 0) {
               const dataFormKeys = Object.keys(this.dataForm);
               this.dataForm = __pick(res.data, dataFormKeys);
+              if ("files" in res.data) {
+                console.log("[DialogWithMenu] fileList===>", res.data.files, this.fileList);
+                /** 返回的文件列表 */
+                this.fileList = res.data.files
+                  ? res.data.files.map((file) => ({
+                      id: file.id,
+                      name: file.fileUrl.split("/").pop(),
+                      url: file.fileUrl,
+                      typeCode: file.typeCode,
+                    }))
+                  : [];
+              }
             }
             this.loadingStatus = false;
           });
@@ -408,10 +441,45 @@ export default {
     },
 
     /** handlers */
-    triggerUpload() {
-      // 出发 upload 界面
+    handleFileClick(type) {
+      switch (type) {
+        case "view":
+          break;
+        case "download": {
+        }
+        case "delete": {
+        }
+      }
     },
 
+    handleUploadSuccess(response, file, fileList) {
+      console.log("[DialogWithMenu] uploadedFileList", response, file, fileList, this.uploadedFileList);
+
+      if (response.code === 0) {
+        const uploadedFile = response.data[0];
+        const fileItem = {
+          id: uploadedFile.id,
+          name: uploadedFile.fileUrl.split("/").pop(),
+          url: uploadedFile.fileUrl,
+          typeCode: file.typeCode,
+        };
+
+        /** 通知 */
+        this.$notify({
+          title: "成功",
+          message: "上传成功",
+          type: "success",
+        });
+
+        this.fileList.push(fileItem);
+        // this.uploadedFileList.push(fileItem);
+        // this.$emit("update-file-list", this.uploadedFileList);
+        this.updateFileList(this.fileList)
+      }
+    },
+    updateFileList(list) {
+      // this.$http.put()
+    },
     handleComponentModelUpdate(propName, { subject, payload: { data } }) {
       this.dataForm[propName] = JSON.stringify(data);
       console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
@@ -623,4 +691,41 @@ export default {
   right: 0;
   z-index: 10000;
 }
+
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.file-list {
+  max-height: 20vh;
+  overflow-y: auto;
+  margin-top: 12px;
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  background-color: #ccc;
+}
+
+.file-list > li {
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.file-operations {
+  display: flex;
+}
+
+.file-icon {
+  margin-right: 8px;
+  font-size: 16px;
+  line-height: 1;
+  display: flex;
+  place-content: center;
+  width: 16px;
+  height: 16px;
+}
 </style>