From 85d74fafcf0ad25e71c9db596cb159fe538fe37d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=80=B8=E5=B0=98?= <79379732@qq.com> Date: Thu, 23 Mar 2023 00:56:46 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9C=AA=E4=B8=8E=E8=A1=A8=E5=8D=95=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=8F=8C=E5=90=91=E7=BB=91=E5=AE=9A=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=96=87=E4=BB=B6=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/components/parser/Parser.vue | 73 +++++++++++++++++-- ruoyi-ui/src/components/render/render.js | 35 +++++++-- .../flowable/task/myProcess/detail/index.vue | 19 ++++- 3 files changed, 110 insertions(+), 17 deletions(-) diff --git a/ruoyi-ui/src/components/parser/Parser.vue b/ruoyi-ui/src/components/parser/Parser.vue index 78b7369d..2a4cb1fa 100644 --- a/ruoyi-ui/src/components/parser/Parser.vue +++ b/ruoyi-ui/src/components/parser/Parser.vue @@ -104,18 +104,75 @@ function setValue(event, config, scheme) { } function buildListeners(scheme) { - const config = scheme.__config__ - const methods = this.formConf.__methods__ || {} - const listeners = {} + const config = scheme.__config__; + const methods = this.formConf.__methods__ || {}; + const listeners = {}; // 给__methods__中的方法绑定this和event - Object.keys(methods).forEach(key => { - listeners[key] = event => methods[key].call(this, event) - }) + Object.keys(methods).forEach((key) => { + listeners[key] = (event) => methods[key].call(this, event); + }); + // 响应 render.js 中的 vModel $emit('input', val) - listeners.input = event => setValue.call(this, event, config, scheme) + listeners.input = (event) => setValue.call(this, event, config, scheme); + + // 上传表单元素组件的成功、移除和预览事件 + if (config.tag === "el-upload") { + listeners.upload = (response, file, fileList) => + setUpload.call(this, config, scheme, response, file, fileList); + + listeners.deleteUpload = (file, fileList) => + deleteUpload.call(this, config, scheme, file, fileList); + + listeners.previewUpload = (file, fileList) => + window.open(file.url, "_blank"); + } + + return listeners; +} + +//获取上传表单元素组件 上传的文件 +function setUpload(config, scheme, response, file, fileList) { + //response: 上传接口返回的数据 + let fileObj = { + name: response.fileName, + url: response.url, + fileType: response.contentType, + }; + let oldValue = ""; + try { + oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__]); + } catch (err) { + console.warn(err); + } + + if (oldValue) { + oldValue.push(fileObj); + } else { + oldValue = [fileObj]; + } + + this.$set(config, "defaultValue", JSON.stringify(oldValue)); + this.$set( + this[this.formConf.formModel], + scheme.__vModel__, + JSON.stringify(oldValue) + ); +} + +//获取上传表单元素组件 删除文件后的文件列表 +function deleteUpload(config, scheme, file, fileList) { + let oldValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__]); - return listeners + //file 删除的文件 + //过滤掉删除的文件 + let newValue = oldValue.filter((item) => item.name !== file.name); + this.$set(config, "defaultValue", JSON.stringify(newValue)); + this.$set( + this[this.formConf.formModel], + scheme.__vModel__, + JSON.stringify(newValue) + ); } export default { diff --git a/ruoyi-ui/src/components/render/render.js b/ruoyi-ui/src/components/render/render.js index f3325dcd..08301564 100644 --- a/ruoyi-ui/src/components/render/render.js +++ b/ruoyi-ui/src/components/render/render.js @@ -14,12 +14,37 @@ keys.forEach(key => { componentChild[tag] = value }) -function vModel(dataObject, defaultValue) { - dataObject.props.value = defaultValue +function vModel(dataObject, defaultValue, config) { + // 获取上传表单元素组件上传的文件 + if (config.tag === "el-upload") { + // 上传表单元素组件的成功和移除事件 + dataObject.attrs["on-success"] = (response, file, fileList) => { + this.$emit("upload", response, file, fileList); + }; - dataObject.on.input = val => { - this.$emit('input', val) + dataObject.attrs["on-remove"] = (file, fileList) => { + this.$emit("deleteUpload", file, fileList); + }; + + dataObject.attrs["on-preview"] = (file, fileList) => { + this.$emit("previewUpload", file, fileList); + }; + + // 获取上传表单元素的默认值 + try { + dataObject.props["file-list"] = JSON.parse(defaultValue); + } catch (err) { + console.warn(err); + } + + return; } + + // 获取普通表单元素的值 + dataObject.props.value = defaultValue; + dataObject.on.input = (val) => { + this.$emit("input", val); + }; } function mountSlotFiles(h, confClone, children) { @@ -50,7 +75,7 @@ function buildDataObject(confClone, dataObject) { Object.keys(confClone).forEach(key => { const val = confClone[key] if (key === '__vModel__') { - vModel.call(this, dataObject, confClone.__config__.defaultValue) + vModel.call(this, dataObject, confClone.__config__.defaultValue, confClone.__config__) } else if (dataObject[key] !== undefined) { if (dataObject[key] === null || dataObject[key] instanceof RegExp diff --git a/ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue b/ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue index 3251ca04..a23818e3 100644 --- a/ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue +++ b/ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue @@ -154,12 +154,23 @@ export default { }) }, fillFormData(form, data) { - form.fields.forEach(item => { - const val = data[item.__vModel__] + form.fields.forEach((item) => { + const vModel = item.__vModel__; + const val = data[item.__vModel__]; + + // 特殊处理el-upload，回显图片 + if (item.__config__.tag === "el-upload") { + // 回显图片 + item["file-list"] = (val || []).map((url) => ({ + name: `${vModel}${i}`, + url, + })); + } + if (val) { - item.__config__.defaultValue = val + item.__config__.defaultValue = val; } - }) + }); }, /** 获取流程变量内容 */ processVariables(taskId) {