ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理

embedded/2024/9/23 5:24:14/

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/

更多nbcio-boot功能请看演示系统 

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://122.227.135.243:9888

1、后端的处理

      因为这个收回审批的提交跟原先的VForm表单提交不一样了,如下界面,这个是可以表单信息里进行修改了,修改后要能提交保存起来,因为原先肯定没有考虑这些

       因为原先提交的时候保存起来,在变量里面,所以用下面的formConf.setFormData(variables);就可以了,但这个variables需求前端进行重新设置修改后的值。

java">FormConf formConf = new FormConf();Map<String, Object> formModel = JsonUtils.parseObject(formInfo.getContent(), Map.class);if (null != formModel && !formModel.isEmpty()) {formConf.setTitle(title);formConf.setDisabled(true);formConf.setFormBtns(false);formConf.setFormModel(formModel);formConf.setFormData(variables);procFormList.add(formConf);}

2、前端的处理

判断是否是退回到第一个节点

java">taskFormVisible.value = data.existTaskForm;if (taskFormVisible.value) {taskFormData.value = data.taskFormData;}if(data.startUserNode) {startUserForm.value.isStartUserNode = true;}formVisible.value = true;nextTick(() => {processFormList.value.forEach((item: any, index: any) => {if (item.disabled && !startUserForm.value.isStartUserNode) {vFormRenderRef.value[index].disableForm();}})})

是的话,不要disable了,可以进行编辑,

同时通过任务修改如下:

java">/** 通过任务 */const handleComplete = () => {const isExistTaskForm = taskFormRef !== undefined;// 校验表单taskFormRef.value?.validate(async (valid: boolean) => {if (valid) {if (isExistTaskForm) {const data = await vFormRenderRef.value[0]?.getFormData();const Widgetlist = await vFormRenderRef.value[0]?.getFieldWidgets();//替换文件上传成功后的文件名称与url,以便后面回显用let fileUpload = Widgetlist?.filter(item => item.type === "file-upload");fileUpload?.forEach((fileitem) => {data[`${fileitem.name}`]?.forEach((dataitem,index) => {data[`${fileitem.name}`][index].name = data[`${fileitem.name}`][index].response.data?.newFileName;data[`${fileitem.name}`][index].url = data[`${fileitem.name}`][index].response.data?.url;})})//替换图片上传成功后的文件名称与url,以便后面回显用let picUpload = Widgetlist?.filter(item => item.type === "picture-upload");picUpload?.forEach((picitem) => {data[`${picitem.name}`]?.forEach((dataitem,index) => {data[`${picitem.name}`][index].name = data[`${picitem.name}`][index].response.data?.newFileName;data[`${picitem.name}`][index].url = data[`${picitem.name}`][index].response.data?.url;})})const variables = data;taskFormData.formValue = data;variables.variables = taskFormData;taskForm.variables = variables;}console.log("handleComplete taskForm",taskForm)const res = await complete(taskForm)proxy?.$modal.msgSuccess(res.msg);goBack();}});}

3、效果图如下:


http://www.ppmy.cn/embedded/13098.html

相关文章

ele pls 表格行内样式超出隐藏

使用 模板实现方案&#xff1a; 实现效果&#xff1a; 相关样式&#xff1a;

Cocos Creator 3D资源的导入与动画播放详解

在Cocos Creator中&#xff0c;导入和播放3D资源是非常重要的一部分&#xff0c;本文将详细介绍如何在Cocos Creator中导入3D资源并播放动画。 对惹&#xff0c;这里有一个游戏开发交流小组&#xff0c;大家可以点击进来一起交流一下开发经验呀&#xff01; 首先&#xff0c;…

每日OJ题_BFS解决拓扑排序③_力扣LCR 114. 火星词典

目录 力扣LCR 114. 火星词典 解析代码 力扣LCR 114. 火星词典 LCR 114. 火星词典 难度 困难 现有一种使用英语字母的外星文语言&#xff0c;这门语言的字母顺序与英语顺序不同。 给定一个字符串列表 words &#xff0c;作为这门语言的词典&#xff0c;words 中的字符串已…

一u的高度,即 44毫米

一u的长度是在计算机科学里, 一个 U 是一层底盘的高度,即 44毫米 一寸一尺一丈长度 1、一寸一尺一丈是我国传统的长度单位&#xff0c;它们之间的关系是十进制。 2、1丈10尺&#xff0c;1尺10寸&#xff1b;1丈3.33米&#xff0c;1尺3.33分米&#xff0c;1寸3.33厘米。 3、…

【笔记】关于 RILJ 中 “< OPERATOR” 运营商名称来源代码流程

功能背景说明 分析日志中关于AT “< OPERATOR” 的运营商名称信息来源。 04-22 22:53:25.915403 2140 2140 D RILJ : [0209]> OPERATOR [PHONE0] 04-22 22:53:25.922854 2140 2157 D RILJ : [0209]< OPERATOR {telering, telering, 23207} [PHONE0] 与MD交…

Azure AKS集群监控告警表达式配置

背景需求 Azure AKS集群中&#xff0c;需要对部署的服务进行监控和告警&#xff0c;需要创建并启用预警规则&#xff0c;而这里怎么去监控每个pod级别的CPU和内存&#xff0c;需要自己写搜索查询 解决方法 搜索和查询的语句如下&#xff0c;需要自己替换其中的部分信息,其中…

【库函数】Linux下动态库.so和静态库.a的生成和使用

目录 &#x1f31e;1. Linux下静态库和动态库的基本概念 &#x1f31e;2. 动态库 &#x1f30a;2.1 动态库如何生成 &#x1f30d;2.1.1 文件详情 &#x1f30d;2.1.2 编译生成动态库 &#x1f30a;2.2 动态库如何使用 &#x1f30d;2.2.1 案例 &#x1f30d;2.2.2 动态…

OceanBase数据库日常运维快速上手

这里为大家汇总了从租户创建、连接数据库&#xff0c;到数据库的备份、归档、资源配置调整等&#xff0c;在OceanBase数据库日常运维中的操作指南。 创建租户 方法一&#xff1a;通过OCP 创建 确认可分配资源 想要了解具体可分配的内存量&#xff0c;可以通过【资源管理】功…