基于jeecgboot-vue3的Flowable流程-流程处理(一)

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

这部分修正一些流程处理中VForm3线上的一些bug问题

1、初始化流程提交与现实的前端页面代码

<!--初始化流程加载默认VForm3表单信息--><el-col :span="16" :offset="4" v-if="formConfOpen"><div class="test-form"><!--<form-builder ref="formBuilder" v-model="formVal" :buildData="formCode" /> --><v-form-render :form-json="formModel" :nbcioHeader="nbcioHeader" :form-data="formData" ref="vfRenderRef" /><div style="margin-bottom: 15px; text-align: center"><el-button type="primary" class="button" @click="submitForm">提交</el-button></div></div></el-col><!--初始化流程加载显示VForm3表单--><el-col :span="16" :offset="4" v-if="formViewOpen"><div class="test-form"><v-form-render :form-json="formModel" :form-data="formData" ref="vFormRenderRef" /></div></el-col></el-card>

2、流程图的显示代码

<el-card class="box-card"><template #header class="clearfix"><span class="el-icon-picture-outline">流程图</span></template><!-- 流程图 --><process-viewer:key="`designer-${loadIndex}`":style="'height:' + height" :xml="xmlData":finishedInfo="taskList":allCommentList="historyProcNodeList"ref="refNode"/> </el-card>

3、读取表单的历史记录信息

// 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值else if (res.result.hasOwnProperty('formData')) {console.log('flowRecord res.result.formData', res.result.formData);formModel.value = res.result.formData;console.log('res.result.formData=', res.result.formData);nextTick(async () => {vfRenderRef.value?.setFormJson(formModel.value || { formConfig: {}, widgetList: [] });});if (res.result.hasOwnProperty('routeName')) {if (startUserForm.isStartUserNode) {customForm.disabled = false;} else {customForm.disabled = true;}customForm.visible = true;customForm.formComponent = getFormComponent(res.result.routeName).component;customForm.model = res.result.formData;customForm.customFormData = res.result.formData;}console.log('customForm=', customForm);console.log('model=', customForm.model);if (res.result.formData.hasOwnProperty('formConfig')) {formConfOpen.value = true;} else {formConfOpen.value = false;}} else if (res.result.hasOwnProperty('taskFormData')) {console.log("flowRecord res.result.taskFormData", res.result.taskFormData);taskFormData.value = res.result.taskFormData;console.log("flowRecord taskFormData.value", taskFormData.value);taskFormOpen.value = true;nextTick(async () => {taskFormBuilder.value?.setFormJson(taskFormData.value || { formConfig: {}, widgetList: [] });});}

4、获取流程变量

/** 获取流程变量内容 */const processVariables = (taskId, deployId) => {if (taskId) {// 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示getProcessVariables(taskId, deployId).then((res) => {console.log('getProcessVariables res=', res);variables.value = res.result.variables;if (res.success) {if (res.result.hasOwnProperty('variables')) {formData.value = res.result.variables;variableOpen.value = true;formModel.value = res.result.formModel;taskForm.values = formData.value;taskForm.formData = formData.value; taskForm.formModel = formModel.value;   }getNextFlowNodeInfo(taskForm.taskId);} else {createMessage.error(res.message);}});}};

5、效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/26762.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Qt实现录频】

在Qt中实现录制视频可以通过使用Qt Multimedia模块来实现。你可以使用QCamera类来访问摄像头并捕获视频数据。以下是一个简单的示例代码,用于在Qt中实现录制视频: #include <QCamera> #include <QCameraInfo> #include <QCameraViewfinder> #include <…

nlp学习笔记

目录 很多入门例子 bert chinese 很多入门例子 https://github.com/lansinuote/Huggingface_Toturials bert chinese import torch import torch.nn as nn from transformers import AutoTokenizer, AutoModel, BertModel, TFBertModel, BertTokenizer# youpath = D:/bert-…

实时通信websocket和sse

microsoft/fetch-event-source是一个JavaScript库&#xff0c;用于处理服务器发送的事件&#xff08;Server-Sent Events&#xff0c;简称SSE&#xff09;。它提供了一个简单易用的API&#xff0c;使得客户端可以与服务器进行实时通信。这个库主要用于浏览器环境 安装依赖npm i…

【Mybatis】动态SQL的绑定和公共sql语句片段

Mybatis还有三个标签&#xff0c;分别是bind&#xff0c;sql和include ①bind&#xff1a;这个标签作用就是将OGNL标签里的值&#xff0c;进行二次加工&#xff0c;在绑定到另一个变量里&#xff0c;供其他标签使用&#xff0c;举个例子 调用getUsers方法的时候&#xff0c;我…

网络编程(二)TCP

一、TCP网络编程 网络编程模型&#xff1a; C/S模型&#xff1a;客户端服务器模型 优点&#xff1a; 客户端可以缓存一些数据&#xff0c;使用时直接在本地读取&#xff0c;无需每次重新下载&#xff1b; 由于客户端和服务器都是自己开发的&#xff0c;可以自定义协议 缺点&a…

【React】在 React 中的useDeferredValue的作用是什么,怎么使用

在React中,useDeferredValue是一个在React 18版本中引入的新Hook,其主要作用是为了优化渲染性能,特别是在处理大量状态更新或复杂渲染逻辑时,通过延迟某些非关键性的更新来提高用户体验和应用的流畅性。 作用: 优化渲染性能:当组件的某个状态或属性发生变化时,React通常…

文案提取小帮手轻松将视频为转文字!而且不限时长

作为一个自媒体的资深用户总在一个一个的敲字真的太慢了&#xff0c;而且很多创作者都知道追热点是和时间赛跑。如果你嫌弃自己手抄效率太低&#xff0c;看视频又嫌时间太长。 今天叫教你一个可以将视频转文字的工具&#xff0c; 这个工具就叫文案提取小帮手&#xff0c;而且…

Vue前端ffmpeg压缩视频再上传(全网唯一公开真正实现)

1.Vue项目中安装插件ffmpeg 1.1 插件版本依赖配置 两个插件的版本 "ffmpeg/core": "^0.10.0", "ffmpeg/ffmpeg": "^0.10.1"package.json 和 package-lock.json 都加入如下ffmpeg的版本配置&#xff1a; 1.2 把ffmpeg安装到项目依…

Java老人护理上门服务类型系统小程序APP源码

&#x1f338; 老人上门护理服务系统&#xff1a;温暖与专业并存 &#x1f338; 一、&#x1f3e0; 走进老人上门护理服务系统 随着社会的快速发展&#xff0c;我们越来越关注老年人的生活质量。老人上门护理服务系统应运而生&#xff0c;它结合了现代科技与人性化服务&#…

最小生成树prim算法详解

prim算法解决的是最小生成树问题&#xff0c;即在一个给定的无向图G中求一棵生成树T&#xff0c;使得这棵树拥有图G中的所有顶点&#xff0c;且所有边都是来自图G中的边&#xff0c;并且满足整棵树的边权之和最小。 prim算法的基本思想是对图G设置集合S来存放已被访问的顶点&a…

【源码】【Spring+SpringMVC+MyBatis】电子商城网上购物平台的设计与开发

学生成绩管理系统 系统功能开发环境开发技术前端技术后端技术 系统展示登录界面注册界面系统首页商品详情页下单界面付款界面购物车界面 源码获取↓↓↓↓&#xff1a; 源码可在后台私信联系博主或文末添加博主微信获取帮助 系统功能 登录、注册模块&#xff1a;如果用户第一次…

基于Java+Swing+mysql幼儿园信息管理系统V2

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…

Day31 - Day35

Day31 - Day35 Day31&#xff08;1999年text5&#xff09; Science, in practice, depends far less on the experiments it prepares than on the preparedness of the minds of the men who watch the experiments. 在实践中&#xff0c;科学对实验的依赖远少于对实验观察者…

【网络编程】基于UDP的服务器端/客户端

UDP可看作是信件邮寄&#xff0c;邮寄过程可能会信件丢失&#xff0c;是一种不可靠的数据传输服务。 但UDP性能更高&#xff0c;实现更加简洁。流控制是区分UDP和TCP的最重要标志。 IP的作用就是让离开主机B的UDP数据包传递给主机B&#xff0c;UDP根据端口号将传到主机的数据包…

Python - OS模块+sys模块

一、OS模块基本用法&#xff1a; import osprint(os.getcwd()) # 获取当前工作目录os.chdir(data) # 改变当前脚本工作目录&#xff1b;相当于终端里面的cd命令 print(os.getcwd()) # 获取当前工作目录 运行结果&#xff1a; D:\__TC22008_VBF\FOTA-vFlash-AutoTest D:\__TC22…

js/javascript获取时间戳的5种方法

1.获取时间戳精确到秒,13位 const timestamp Date.parse(new Date()); console.log(timestamp);//输出 1591669256000 13位 2.获取时间戳精确到毫秒,13位 const timestamp Math.round(new Date()); console.log(timestamp);//输出 1591669961203 13位 3.获取时间戳精…

conda虚拟环境报错总结

创建conda虚拟环境 文章前景&#xff08;小白篇&#xff09;为什么要安装Anaconda&#xff1f;&#xff1f;&#xff1f; Conda创建虚拟环境遇到的错误总结错误1&#xff1a;jupyter 里面没有显示我的虚拟环境怎么办&#xff1f;错误2&#xff1a;配置pycharm的时候conda虚拟环…

百货商城优选 当嘉士利饼干成为艺术品

近日&#xff0c;全国各大美院毕业展正如火如荼展开&#xff0c;其中中国美院一学生的毕业作品——“记忆饼干”从中脱颖而出&#xff0c;引发关注。短短一天时间&#xff0c;“记忆饼干”相关视频在全网已收获超7w网友点赞与收藏&#xff0c;更是激发网友们不断去线下打卡合影…

破解发展难题 台山这家合作社以农业社会化服务助推乡村振兴

风吹稻田千层浪&#xff0c;眼下&#xff0c;台山四九镇的早稻长势喜人&#xff0c;沉甸甸的稻穗迎风而动&#xff0c;已进入破口抽穗的关键期&#xff0c;即将在6月底陆续迎来丰收。在台山市明华汇种养专业合作社管理的稻田里&#xff0c;合作社负责人梁明喜正仔细观察着稻苗的…

node aws

基础&#xff08;菜鸟教程&#xff09;框架&#xff1a; expressEgg.js(底层框架express)koa(自定义强&#xff0c;小而精简&#xff0c;白话就是什么都没有&#xff0c;自己diy&#xff0c;考验架构技术&#xff0c;搞得好比nest.js开发效率还高&#xff0c;同时框架精简)nest…