From 39bf107fbe6e8b5e18c75a084cb6504425204f84 Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 10 Feb 2023 16:57:29 +0800 Subject: [PATCH] update upload&download --- src/components/DialogJustForm.vue | 99 ++++++++++--------- .../uploadBtn/components/FileList.vue | 65 +++++++++++- src/components/uploadBtn/index.vue | 69 ++++++------- src/views/modules/pms/equipmentType/config.js | 5 +- src/views/modules/pms/material/config.js | 14 ++- 5 files changed, 157 insertions(+), 95 deletions(-) diff --git a/src/components/DialogJustForm.vue b/src/components/DialogJustForm.vue index 9590e6f..f789045 100644 --- a/src/components/DialogJustForm.vue +++ b/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" /> { 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) { - /** 上传成功修改本地展示的文件名 */ - if (response.code === 0) { - // const { fileName } = response.data[0]; - const fileName = response.data[0].fileUrl.split("/").pop(); - file.name = fileName; - } else { - console.log("response, file, fileList", response, file, fileList); - } + handleFilelistUpdate(newFilelist) { + // TODO: 直接访问 .files 可能不太合适 + this.dataForm.files = newFilelist.map((file) => ({ + id: file.id, + name: file.name, + url: file.url, + typeCode: file.typeCode + })); }, /** 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); - console.log("keys ===> ", dataFormKeys); - - // console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys)) - this.dataForm = __pick(res.data, dataFormKeys); - console.log("pick(res.data, dataFormKeys) ===> ", __pick(res.data, dataFormKeys)); + this.dataForm = __pick(res.data, Object.keys(this.dataForm)); + /** 格式化文件上传列表 */ + if (Array.isArray(this.dataForm.files)) { + this.dataForm.files = this.dataForm.files.map((file) => ({ + id: file.id, + 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.$http - .get(col.fetchUrl, { - params: { - limit: 999, - page: 1, - [col.paramName]: this.dataForm.id, - }, - }) - .then(({ data: res }) => { - console.log("fetch filelist:", res); - }); - }); + // // 获取文件信息 + // this.uploadComponentsList.forEach((col) => { + // this.$http + // .get(col.fetchUrl, { + // params: { + // limit: 999, + // page: 1, + // [col.paramName]: this.dataForm.id, + // }, + // }) + // .then(({ data: 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); diff --git a/src/components/uploadBtn/components/FileList.vue b/src/components/uploadBtn/components/FileList.vue index c2a6c54..8f07843 100644 --- a/src/components/uploadBtn/components/FileList.vue +++ b/src/components/uploadBtn/components/FileList.vue @@ -7,8 +7,8 @@ {{ file.name }}
- - + +
  • 无
    • @@ -31,7 +31,7 @@
    {{ label }}
    -
    已上传文件
    +
    已上传文件
    @@ -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; +} diff --git a/src/components/uploadBtn/index.vue b/src/components/uploadBtn/index.vue index effe73c..87c2b8a 100644 --- a/src/components/uploadBtn/index.vue +++ b/src/components/uploadBtn/index.vue @@ -1,5 +1,5 @@ @@ -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: { - fileListProp(list) { - this.fileList = list; - }, + mounted() { + console.log("[UploadBtn] mounted()", this.fileList, this.uploadedFileList); + 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 fileName = response.data[0].fileUrl.split("/").pop(); - file.name = fileName; + const uploadedFile = response.data[0]; + const fileItem = { + 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); }, }, }; @@ -96,7 +110,7 @@ export default { diff --git a/src/views/modules/pms/equipmentType/config.js b/src/views/modules/pms/equipmentType/config.js index b900177..b200247 100644 --- a/src/views/modules/pms/equipmentType/config.js +++ b/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: "upload", - paramName: 'equipmentTypeId', + prop: "files", elparams: null }], ], diff --git a/src/views/modules/pms/material/config.js b/src/views/modules/pms/material/config.js index 4713851..5c395be 100644 --- a/src/views/modules/pms/material/config.js +++ b/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: "remark", label: "备注" }, + { prop: "density", 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 },