From 844fdc796dfc3bb439228ee6506e48c48bf1bdbb Mon Sep 17 00:00:00 2001 From: lb Date: Tue, 14 Feb 2023 17:01:27 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E4=BA=A7=E5=93=81=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/DialogWithMenu.vue | 177 +++++++++++++++----- src/views/modules/pms/product/config.js | 205 ++++++++++++++---------- 2 files changed, 263 insertions(+), 119 deletions(-) diff --git a/src/components/DialogWithMenu.vue b/src/components/DialogWithMenu.vue index 6233c58..a3141aa 100644 --- a/src/components/DialogWithMenu.vue +++ b/src/components/DialogWithMenu.vue @@ -24,17 +24,21 @@ @click="handleAddParam()" >+ 添加 - - 上传 + + @@ -50,6 +54,7 @@ {{ tab.name }} +
@@ -114,7 +119,9 @@
-
+ + +
-
-
附件
+ + +
+ + 文件列表 +
+
    +
  • + {{ file.name }} + + + + + + + + + + + +
    • +
+
+ +
@@ -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; +} diff --git a/src/views/modules/pms/product/config.js b/src/views/modules/pms/product/config.js index 1487687..6f17e23 100644 --- a/src/views/modules/pms/product/config.js +++ b/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', - } - } -} \ No newline at end of file + base: "/pms/product", + page: "/pms/product/page", + subase: "/pms/productArrt", + subpage: "/pms/productArrt/page", + }, + }; +}