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>

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

@@ -1,116 +1,146 @@
-import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
-import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
-import StatusComponent from '@/components/noTemplateComponents/statusComponent'
-import { timeFilter, dictFilter } from '@/utils/filters'
+import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
+import TableTextComponent from "@/components/noTemplateComponents/detailComponent";
+import StatusComponent from "@/components/noTemplateComponents/statusComponent";
+import { timeFilter, dictFilter } from "@/utils/filters";
 
 export default function () {
-
   const tableProps = [
-    { type: 'index', label: '序号' },
+    { type: "index", label: "序号" },
     { prop: "createTime", label: "添加时间", filter: timeFilter },
-    { prop: 'name', label: '产品名称' },
-    { prop: 'code', label: '产品编码' },
-    { prop: 'typeDictValue', label: '产品类型', filter: dictFilter('product_type') },
-    { prop: 'specifications', label: '规格' },
-    { prop: 'unitDictValue', label: '单位', filter: dictFilter('unit') },
-    { prop: 'weight', label: '重量', filter: val => val ? val + ' kg' : '-' },
-    { prop: 'processTime', label: '产线完成单位产品用时', width: 200, filter: val => val + ' s' },
-    { prop: 'remark', label: '备注' },
-    { prop: 'description', label: '附件信息', subcomponent: TableTextComponent, buttonContent: '查看附件' },
+    { prop: "name", label: "产品名称" },
+    { prop: "code", label: "产品编码" },
+    { prop: "typeDictValue", label: "产品类型", filter: dictFilter("product_type") },
+    { prop: "specifications", label: "规格" },
+    { prop: "unitDictValue", label: "单位", filter: dictFilter("unit") },
+    { prop: "weight", label: "重量", filter: (val) => (val ? val + " kg" : "-") },
+    { prop: "processTime", label: "产线完成单位产品用时", width: 200, filter: (val) => val + " s" },
+    { prop: "remark", label: "备注" },
+    { prop: "description", label: "附件信息", subcomponent: TableTextComponent, buttonContent: "查看附件" },
     {
-      prop: 'operations',
-      name: '操作',
-      fixed: 'right',
+      prop: "operations",
+      name: "操作",
+      fixed: "right",
       width: 120,
       subcomponent: TableOperaionComponent,
-      options: ['edit', { name: 'delete', permission: 'pms:product:delete' }]
-    }
-  ]
-
+      options: ["edit", { name: "delete", permission: "pms:product:delete" }],
+    },
+  ];
 
   const headFormFields = [
     {
-      label: '关键字',
-      prop: 'key',
+      label: "关键字",
+      prop: "key",
       input: true,
-      default: { value: '' },
-      bind: { placeholder: '请输入产品名称或编码' }
+      default: { value: "" },
+      bind: { placeholder: "请输入产品名称或编码" },
     },
     {
       button: {
-        type: 'primary',
-        name: '查询'
-      }
+        type: "primary",
+        name: "查询",
+      },
     },
     {
       button: {
-        type: 'plain',
-        name: '新增',
-        permission: 'pms:product:save'
-      }
-    }
-  ]
-
+        type: "plain",
+        name: "新增",
+        permission: "pms:product:save",
+      },
+    },
+  ];
 
-  const dictList = JSON.parse(localStorage.getItem('dictList') || {})
+  const dictList = JSON.parse(localStorage.getItem("dictList") || {});
   const dialogConfigs = {
-    menu: [{ name: '产品信息', key: 'info' }, { name: '产品属性信息', key: 'attr', onlyEditMode: true }, { name: '附件', key: 'attachment', onlyEditMode: true }],
+    menu: [
+      { name: "产品信息", key: "info" },
+      { name: "产品属性信息", key: "attr", onlyEditMode: true },
+      {
+        name: "附件",
+        key: "attachment",
+        onlyEditMode: true,
+        actionUrl: window.SITE_CONFIG["apiURL"] + "/pms/attachment/uploadFileFormData?typeCode=ProductAttachment",
+      },
+    ],
     form: {
       rows: [
         [
-          { input: true, label: '产品名称/砖型名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称' } },
-          { input: true, label: '产品编码/砖型编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备编码' } },
+          {
+            input: true,
+            label: "产品名称/砖型名称",
+            prop: "name",
+            rules: { required: true, message: "not empty", trigger: "blur" },
+            elparams: { placeholder: "请输入设备名称" },
+          },
+          {
+            input: true,
+            label: "产品编码/砖型编码",
+            prop: "code",
+            rules: { required: true, message: "not empty", trigger: "blur" },
+            elparams: { placeholder: "请输入设备编码" },
+          },
           // { input: true, label: '版本号', prop: 'version', elparams: { placeholder: '请输入版本号' } },
           {
             select: true,
-            label: '产品类型',
-            prop: 'typeDictValue',
-            options: 'product_type' in dictList ? dictList['product_type'].map(item => ({ value: item.dictValue, label: item.dictLabel })) : [],
-            elparams: { placeholder: '选择一个产品类型' }
+            label: "产品类型",
+            prop: "typeDictValue",
+            options: "product_type" in dictList ? dictList["product_type"].map((item) => ({ value: item.dictValue, label: item.dictLabel })) : [],
+            elparams: { placeholder: "选择一个产品类型" },
           },
         ],
         [
           // { input: true, label: '单位平方数', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称编码' } },
           {
             select: true,
-            label: '单位',
-            prop: 'unitDictValue',
-            options: 'unit' in dictList ? dictList['unit'].map(item => ({ value: item.dictValue, label: item.dictLabel })) : [],
-            elparams: { placeholder: '选择单位' }
+            label: "单位",
+            prop: "unitDictValue",
+            options: "unit" in dictList ? dictList["unit"].map((item) => ({ value: item.dictValue, label: item.dictLabel })) : [],
+            elparams: { placeholder: "选择单位" },
+          },
+          {
+            input: true,
+            label: "规格",
+            prop: "specifications",
+            rules: { required: true, message: "not empty", trigger: "blur" },
+            elparams: { placeholder: "请输入规格" },
+          },
+          {
+            input: true,
+            label: "产线完成单位产品用时(s)",
+            prop: "processTime",
+            rules: { required: true, message: "not empty", trigger: "blur" },
+            elparams: { placeholder: "请输入规格" },
           },
-          { input: true, label: '规格', prop: 'specifications', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入规格' } },
-          { input: true, label: '产线完成单位产品用时(s)', prop: 'processTime', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入规格' } },
         ],
-        [{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
+        [{ textarea: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
       ],
       operations: [
-        { name: 'add', label: '保存', type: 'primary', permission: 'pms:product:save', showOnEdit: false },
-        { name: 'update', label: '更新', type: 'primary', permission: 'pms:product:update', showOnEdit: true },
-        { name: 'reset', label: '重置', type: 'warning', showAlways: true },
+        { name: "add", label: "保存", type: "primary", permission: "pms:product:save", showOnEdit: false },
+        { name: "update", label: "更新", type: "primary", permission: "pms:product:update", showOnEdit: true },
+        { name: "reset", label: "重置", type: "warning", showAlways: true },
         // { name: 'cancel', label: '取消', showAlways: true },
       ],
     },
     table: {
       // extraParams: ['stepId'],
-      extraParams: 'productId',
+      extraParams: "productId",
       props: [
-        { type: 'index', label: '序号' },
+        { type: "index", label: "序号" },
         { prop: "createTime", label: "添加时间", filter: timeFilter },
         // { prop: 'productId', label: '产品ID' },
-        { prop: 'name', label: '属性名称', isEditField: true },
-        { prop: 'value', label: '属性值', isEditField: true },
-        { prop: 'remark', label: '备注', isEditField: true },
+        { prop: "name", label: "属性名称", isEditField: true },
+        { prop: "value", label: "属性值", isEditField: true },
+        { prop: "remark", label: "备注", isEditField: true },
         {
-          prop: 'operations',
-          name: '操作',
-          fixed: 'right',
+          prop: "operations",
+          name: "操作",
+          fixed: "right",
           width: 120,
           subcomponent: TableOperaionComponent,
           options: [
-            { name: 'edit', permission: 'pms:productArrt:update' },
-            { name: 'delete', permission: 'pms:productArrt:delete' },
-          ]
-        }
+            { name: "edit", permission: "pms:productArrt:update" },
+            { name: "delete", permission: "pms:productArrt:delete" },
+          ],
+        },
       ],
       data: [
         // TOOD 暂时用不到，但获取可以考虑把拉取接口数据的函数迁移到此文件（没有太大必要）
@@ -118,25 +148,34 @@ export default function () {
     },
 
     subDialog: {
-      extraParam: 'productId',
+      extraParam: "productId",
       forceAttachCode: true, // 产品属性新增必填 code 字段......
       rows: [
         [
-          { input: true, label: '属性名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } },
-          { input: true, label: '属性值', prop: 'value', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性值' } },
+          {
+            input: true,
+            label: "属性名称",
+            prop: "name",
+            rules: { required: true, message: "not empty", trigger: "blur" },
+            elparams: { placeholder: "请输入属性名称" },
+          },
+          {
+            input: true,
+            label: "属性值",
+            prop: "value",
+            rules: { required: true, message: "not empty", trigger: "blur" },
+            elparams: { placeholder: "请输入属性值" },
+          },
         ],
-        [
-          { textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '添加备注' } },
-        ]
+        [{ textarea: true, label: "备注", prop: "remark", elparams: { placeholder: "添加备注" } }],
       ],
       operations: [
-        { name: 'add', label: '保存', type: 'primary', permission: 'pms:productArrt:save', showOnEdit: false },
-        { name: 'update', label: '更新', type: 'primary', permission: 'pms:productArrt:update', showOnEdit: true },
+        { name: "add", label: "保存", type: "primary", permission: "pms:productArrt:save", showOnEdit: false },
+        { name: "update", label: "更新", type: "primary", permission: "pms:productArrt:update", showOnEdit: true },
       ],
     },
   };
 
-
   return {
     dialogConfigs,
     tableConfig: {
@@ -145,13 +184,13 @@ export default function () {
     },
     headFormConfigs: {
       rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
-      fields: headFormFields // 名称是由 BaseSearchForm.vue 组件固定的
+      fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的
     },
     urls: {
-      base: '/pms/product',
-      page: '/pms/product/page',
-      subase: '/pms/productArrt',
-      subpage: '/pms/productArrt/page',
-    }
-  }
-}
+      base: "/pms/product",
+      page: "/pms/product/page",
+      subase: "/pms/productArrt",
+      subpage: "/pms/productArrt/page",
+    },
+  };
+}