From c2657b190ef0e1443a61a81d5bf4afc1776d107c Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 17 Feb 2023 10:44:29 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E9=99=84=E4=BB=B6=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BaseDialog.vue | 649 ------------------ src/components/BaseSearchForm copy.vue | 181 ----- src/components/BaseTable.vue | 206 ------ src/components/BaseUpload.vue | 19 - src/components/DialogJustForm.vue | 100 +-- src/components/DialogWithMenu.vue | 191 ++++-- src/components/README.config.md | 2 - .../noTemplateComponents/textBtn.js | 2 - .../uploadBtn/components/FileList.vue | 14 +- src/components/uploadBtn/index.vue | 33 +- src/views/atomViews/ListViewWithHead.vue | 13 +- src/views/modules/pms/product/config.js | 2 +- 12 files changed, 240 insertions(+), 1172 deletions(-) delete mode 100644 src/components/BaseDialog.vue delete mode 100644 src/components/BaseSearchForm copy.vue delete mode 100644 src/components/BaseTable.vue delete mode 100644 src/components/BaseUpload.vue delete mode 100644 src/components/README.config.md delete mode 100644 src/components/noTemplateComponents/textBtn.js diff --git a/src/components/BaseDialog.vue b/src/components/BaseDialog.vue deleted file mode 100644 index 62ed241..0000000 --- a/src/components/BaseDialog.vue +++ /dev/null @@ -1,649 +0,0 @@ - - - - - diff --git a/src/components/BaseSearchForm copy.vue b/src/components/BaseSearchForm copy.vue deleted file mode 100644 index 81e7835..0000000 --- a/src/components/BaseSearchForm copy.vue +++ /dev/null @@ -1,181 +0,0 @@ - - - - - diff --git a/src/components/BaseTable.vue b/src/components/BaseTable.vue deleted file mode 100644 index 6fdfb34..0000000 --- a/src/components/BaseTable.vue +++ /dev/null @@ -1,206 +0,0 @@ - - - diff --git a/src/components/BaseUpload.vue b/src/components/BaseUpload.vue deleted file mode 100644 index b2b935d..0000000 --- a/src/components/BaseUpload.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - diff --git a/src/components/DialogJustForm.vue b/src/components/DialogJustForm.vue index 35bafa8..75f3507 100644 --- a/src/components/DialogJustForm.vue +++ b/src/components/DialogJustForm.vue @@ -210,6 +210,8 @@ export default { url: file.url, typeCode: file.typeCode, })); + // 更新请求 + this.addOrUpdate("PUT"); }, /** utitilities */ @@ -265,7 +267,7 @@ export default { url: file.fileUrl, })); } - console.log("[DialogJustForm] init():", __pick(res.data, Object.keys(this.dataForm))); + console.log("[DialogJustForm] init():", this.dataForm); } this.loadingStatus = false; }); @@ -290,6 +292,53 @@ export default { console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]); }, + addOrUpdate(method = "POST") { + if ("parentId" in this.dataForm) { + console.log("[DialogJustForm parentId]", this.dataForm.parentId); + // 对特殊的键做特殊处理，如 parentId 是一个 cascader，获取的值是 ["xxx"]，后端只需要xxx + const lastItem = this.dataForm.parentId.length - 1; + this.dataForm.parentId = this.dataForm.parentId[lastItem]; + } + + this.$refs.dataForm.validate((passed, result) => { + if (passed) { + this.loadingStatus = true; + + let httpPayload = null; + /** 针对有文件上传选项的弹窗提供特殊的 payload */ + if (this.dataForm.files) { + httpPayload = { + ...this.dataForm, + fileIds: this.dataForm.files.map((file) => file.id), + }; + } else { + httpPayload = this.dataForm; + } + /** 发送 */ + return this.$http({ + url: this.urls.base, + method, + data: httpPayload, + }) + .then(({ data: res }) => { + console.log("[add&update] res is: ", res); + if (res.code === 0) { + this.$message.success(method === "POST" ? "添加成功" : "更新成功"); + this.$emit("refreshDataList"); + this.loadingStatus = false; + if (method === "POST") this.handleClose(); + } + }) + .catch((errMsg) => { + this.$message.error("参数错误：" + errMsg); + if (this.loadingStatus) this.loadingStatus = false; + }); + } else { + this.$message.error("请核查字段信息"); + } + }); + }, + handleBtnClick(payload) { console.log("btn click payload: ", payload); @@ -302,52 +351,9 @@ export default { this.resetForm(true, true); // true means exclude id, immediate execution break; case "add": - case "update": { - if ("parentId" in this.dataForm) { - console.log("[DialogJustForm parentId]", this.dataForm.parentId); - // 对特殊的键做特殊处理，如 parentId 是一个 cascader，获取的值是 ["xxx"]，后端只需要xxx - const lastItem = this.dataForm.parentId.length - 1; - this.dataForm.parentId = this.dataForm.parentId[lastItem]; - } - - 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: httpPayload, - }) - .then(({ data: res }) => { - console.log("[add&update] res is: ", res); - if (res.code === 0) { - this.$message.success(payload.name === "add" ? "添加成功" : "更新成功"); - this.$emit("refreshDataList"); - this.loadingStatus = false; - this.handleClose(); - } - }) - .catch((errMsg) => { - this.$message.error("参数错误：" + errMsg); - if (this.loadingStatus) this.loadingStatus = false; - }); - } else { - this.$message.error("请核查字段信息"); - } - }); - } + case "update": + this.addOrUpdate((payload.name === "add" ? "POST" : "PUT")); + break; } } else { console.log("[x] 不是这么用的! 缺少name属性"); diff --git a/src/components/DialogWithMenu.vue b/src/components/DialogWithMenu.vue index b7fdd88..ca1318a 100644 --- a/src/components/DialogWithMenu.vue +++ b/src/components/DialogWithMenu.vue @@ -32,6 +32,7 @@ :show-file-list="false" :headers="uploadHeaders" :on-success="handleUploadSuccess" + :before-upload="handleUploadCheck" > 上传 @@ -128,6 +129,7 @@ :current-page="attrPage" :current-size="attrSize" :refresh-layout-key="Math.random()" + v-loading="loadingStatus" />
+
文件大小不要超过 2MB
-
+
  • {{ file.name }} @@ -166,11 +169,17 @@
- + + +
+ +
+
+ item.name === this.activeMenu)?.key; + return notDetailMode && (showAlways || ((editMode || addMode) && permission)) && currentMenuKey === "info"; }, + resetForm(excludeId = false, immediate = false) { setTimeout( () => { @@ -399,7 +412,7 @@ export default { }, /** init **/ - init(id, detailMode) { + init(id, detailMode, menu) { // this.dialogVisible = true; if (this.$refs.dataForm && this.$refs.dataForm.length) { // 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可 @@ -434,6 +447,10 @@ export default { } } this.loadingStatus = false; + // 是否要跳转到附件页 + if (menu && menu.key === "attachment") { + this.activeMenu = this.configs.menu.find((item) => item.key === menu.key)?.name; + } }); } else { // 如果不是编辑 @@ -445,31 +462,97 @@ export default { /** handlers */ handleFileClick(type, file) { switch (type) { - case "view": - break; - case "download": { - /** 通知 */ - this.$notify({ - title: "成功", - message: "开始下载", - type: "success", - }); + case "view": { + // 加载图片 + this.$http + .get("/pms/attachment/downloadFile", { + params: { + attachmentId: file.id, + type: 0, // 0 预览，1 下载 + }, + responseType: "blob", + }) + .then(({ data: res }) => { + console.log("preivew", res); + if (/image/i.test(res.type)) { + // 显示图片 + this.currentImgUrl = URL.createObjectURL(res); + this.imgPreviewDialogVisible = true; + } else { + this.$message({ + message: "非图片文件请下载后预览", + type: "error", + duration: 1500, + }); + } + }); 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", + + case "download": { + // 下载图片 + this.$http + .get("/pms/attachment/downloadFile", { + params: { + attachmentId: file.id, + type: 1, // 0 预览，1 下载 + }, + responseType: "blob", + }) + .then(({ data: res }) => { + const blob = new Blob([res]); + + /** 通知 */ + this.$notify({ + title: "成功", + message: "开始下载", + type: "success", + duration: 1200, + }); + + 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); + } }); - }); + break; } + + case "delete": { + return this.$confirm(`确定删除图片: ${file.name}`, "提示", { + confirmButtonText: "确认", + cancelButtonText: "我再想想", + type: "warning", + }) + .then(() => { + this.loadingStatus = true; + const newFilelist = this.fileList.filter((f) => f.id !== file.id); + this.updateRemoteFiles(newFilelist).then((msg) => { + if (msg && msg === "success") { + this.fileList = newFilelist; + this.loadingStatus = false; + /** 通知 */ + this.$notify({ + title: "成功", + message: "已删除", + type: "success", + duration: 1200, + }); + } + }); + }) + .catch((err) => {}); + } } }, @@ -485,31 +568,47 @@ export default { typeCode: file.typeCode, }; - this.fileList.push(fileItem); - /** 通知 */ - this.$notify({ - title: "成功", - message: "上传成功", - type: "success", + this.loadingStatus = true; + this.updateRemoteFiles([...this.fileList, fileItem]).then((msg) => { + if (msg && msg === "success") { + this.fileList.push(fileItem); + this.loadingStatus = false; + /** 通知 */ + this.$notify({ + title: "成功", + message: "上传成功", + type: "success", + duration: 1200, + }); + } }); - - this.updateRemoteFiles(); } }, - updateRemoteFiles() { + updateRemoteFiles(filelist) { 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), + fileIds: filelist.map((f) => f.id), }) .then(({ data: res }) => { - console.log("updateFileList", this.fileList, res); + if (res.code === 0) return "success"; }); }, + handleUploadCheck(file) { + console.log("[before upload]", file); + const LIMIT = 2 * 1024 * 1024; // bytes + if (file.size > LIMIT) { + this.$message({ + message: "文件大小不能超过 2MB", + type: "error", + duration: 1500, + }); + return false; + } else return true; + }, + handleComponentModelUpdate(propName, { subject, payload: { data } }) { this.dataForm[propName] = JSON.stringify(data); console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]); @@ -538,6 +637,15 @@ export default { // 如果通过验证 this.loadingStatus = true; const method = payload.name === "add" ? "POST" : "PUT"; + + // 判断是否有附件选项 + const hasAttachment = !!this.configs.menu.find((item) => item.key === "attachment"); + if (hasAttachment) { + const fileIds = this.fileList.map((item) => item.id); + this.$set(this.dataForm, "fileIds", fileIds); + } + + // 实际发送请求 this.$http({ url: this.urls.base, method, @@ -555,15 +663,11 @@ export default { if (this.loadingStatus) this.loadingStatus = false; }); } else { - // 没有通过验证 - // this.$message.error(JSON.stringify(result)); this.$message.error("请核查字段信息"); } }); } } - } else { - console.log("[x] 不是这么用的! 缺少name属性"); } }, handleTabClick(payload) { @@ -764,4 +868,7 @@ ul.file-list > li:hover { width: 16px; height: 16px; } + +/* .image-preview-dialog { +} */ diff --git a/src/components/README.config.md b/src/components/README.config.md deleted file mode 100644 index af95d2e..0000000 --- a/src/components/README.config.md +++ /dev/null @@ -1,2 +0,0 @@ -配置文件选项总结 - diff --git a/src/components/noTemplateComponents/textBtn.js b/src/components/noTemplateComponents/textBtn.js deleted file mode 100644 index 5cf2ac1..0000000 --- a/src/components/noTemplateComponents/textBtn.js +++ /dev/null @@ -1,2 +0,0 @@ -// 表格中的可点击文本 -export default {} \ No newline at end of file diff --git a/src/components/uploadBtn/components/FileList.vue b/src/components/uploadBtn/components/FileList.vue index db7751a..dba512a 100644 --- a/src/components/uploadBtn/components/FileList.vue +++ b/src/components/uploadBtn/components/FileList.vue @@ -53,8 +53,8 @@ export default { }, detailMode: { type: Boolean, - default: false - } + default: false, + }, }, data() { return { @@ -83,9 +83,19 @@ export default { attachmentId: file.id, type: 1, }, + responseType: "blob", }) .then(({ data: res }) => { const blob = new Blob([res]); + + /** 通知 */ + this.$notify({ + title: "成功", + message: "开始下载", + type: "success", + duration: 1200, + }); + if ("download" in document.createElement("a")) { const alink = document.createElement("a"); alink.download = file.name; diff --git a/src/components/uploadBtn/index.vue b/src/components/uploadBtn/index.vue index c78fc85..61b6204 100644 --- a/src/components/uploadBtn/index.vue +++ b/src/components/uploadBtn/index.vue @@ -8,6 +8,7 @@ :show-file-list="false" :headers="uploadHeaders" :on-success="handleUploadSuccess" + :before-upload="handleUploadCheck" > {{ buttonText }}
@@ -42,7 +43,7 @@ export default { tips: { type: Object, default: () => ({ - hint: "只能上传jpg/png文件, 且不超过500kb", + hint: "文件大小不超过 2MB", success: "上传成功!", }), }, @@ -64,14 +65,9 @@ export default { return { showMsg: false, uploadedFileList: [] }; }, watch: { - // fileList: { - // handler: (arr) => { - // if (arr && arr.length > 0) { - // this.uploadedFileList = arr; - // } - // }, - // immediate: true, - // }, + fileList(val) { + this.uploadedFileList = val ?? []; + } }, computed: { uploadHeaders() { @@ -103,6 +99,18 @@ export default { .catch(() => {}); }, + handleUploadCheck(file) { + const LIMIT = 2 * 1024 * 1024; // bytes + if (file.size > LIMIT) { + this.$message({ + message: "文件大小不能超过 2MB", + type: "error", + duration: 1500, + }); + return false; + } else return true; + }, + handleUploadSuccess(response, file, fileList) { console.log("[UploadBtn] uploadedFileList", response, file, fileList, this.uploadedFileList); @@ -115,13 +123,6 @@ export default { typeCode: file.typeCode, }; - /** 通知 */ - this.$notify({ - title: "成功", - message: "上传成功", - type: "success", - }); - this.uploadedFileList.push(fileItem); this.$emit("update-file-list", this.uploadedFileList); // this.showMsg = true; diff --git a/src/views/atomViews/ListViewWithHead.vue b/src/views/atomViews/ListViewWithHead.vue index c887529..896901e 100644 --- a/src/views/atomViews/ListViewWithHead.vue +++ b/src/views/atomViews/ListViewWithHead.vue @@ -224,12 +224,12 @@ export default { break; } case "status": { - console.log('status', data) + console.log("status", data); // TODO: 类似于这种字符串，可以统一集中到一个文件里 const { id, code } = data; const queryCondition = { id, code }; - if ("enabled" in data) queryCondition.enabled = data['enabled']; - if ("status" in data) queryCondition.status = data['status']; + if ("enabled" in data) queryCondition.enabled = data["enabled"]; + if ("status" in data) queryCondition.status = data["status"]; // 更改状态，更改状态需要 id 和 code 然后是 状态 enabled this.$http.put(this.urls.base, queryCondition).then(({ data: res }) => { if (res.code === 0) { @@ -238,6 +238,9 @@ export default { }); break; } + case "view-attachment": { + this.openDialog(data, false, { key: "attachment" }); + } } }, @@ -268,11 +271,11 @@ export default { }, /** 打开对话框 */ - openDialog(row_id, detail_mode) { + openDialog(row_id, detail_mode, tag_info) { this.dialogVisible = true; this.$nextTick(() => { - this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode); + this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode, tag_info); }); }, }, diff --git a/src/views/modules/pms/product/config.js b/src/views/modules/pms/product/config.js index 6f17e23..f4fc98b 100644 --- a/src/views/modules/pms/product/config.js +++ b/src/views/modules/pms/product/config.js @@ -15,7 +15,7 @@ export default function () { { 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: "description", label: "附件信息", subcomponent: TableTextComponent, buttonContent: "查看附件", actionName: 'view-attachment' }, { prop: "operations", name: "操作",