基于React的工作流 bpmn.js基本使用(3)-流程模拟的使用(运行过程中暂停、继续,多分路运行)

前言

根据运行过程中的节点id、节点类型,我们可以做到完全的自定义控制,动画的运行和暂停,以及多节点的状态改变。以下是所做的几个示例 实例化完成之后 获取bpmnModler的动画实例,get('animation')

1. 引入bpmn.js,构建bpmn图

2. 引入流程模拟的插件

BPMN官方提供了各种各样的模块,比如执行模拟,就使用了流程模拟模块

js 复制代码
// 模拟流转流程
import TokenSimulation from "bpmn-js-token-simulation";

在实例化 BpmnModeler的时候添加动画插件 在 additionalModules:[TokenSimulation]

在这个动画上有很多的集成进去的工具,可以给到我们使用

js 复制代码
animation:提供动画效果,可以在模拟执行期间显示BPMIN元素的状态变化
contextPads:在设计器中显示上下文菜单,可以让您进行一些常见的操作,如添加、删除和复制元素等disableModeling:禁用设计器中的模型编辑功能
elementNotifications:在设计器中显示元素通知,例如错误和警告信息
elementSupport:支持BPMN元素
exclusiveGatewaySettings:提供配置独占网关的功能
log:提供日志记录功能,可以记录在模拟执行期间发生的事件和操作
notifications:提供通知功能,可以在设计器中显示通知消息
pauseSimulation:在模拟执行期间暂停模拟执行
preserveElementColors:保留BPMN元素的颜色
processInstanceIds:提供生成和管理BPMN进程实例ID的功能
processInstanceSettings:提供配置BPMN进程实例的功能
processInstances:提供管理BPMN进程实例的功能
resetsimulation:提供重置模拟执行的功能
setAnimationspeed:提供设置动画速度的功能
showProcessInstance:在设计器中显示BPMN进程实例
simulationstate:提供访问和管理模拟执行状态的功能
toggleMode:提供在设计器中切换模式的功能
tokencount:提供访问和管理模拟执行期间的令牌数量的功能
tokenSimulationBehavior:提供BPMN模拟执行的行为设置
tokenSimulationEditorActions:提供模拟执行期间的编辑操作
tokenSimulationKeyboardBindings:提供模拟执行期间的键盘绑定

开启模拟流程

主要用的是切换模式的工具toggleMode

js 复制代码
this.bpmnModeler.get("toggleMode").toggteMode()  

这样就能切换流程模拟的开、关

怎么控制流程模拟运行的执行动画的,对动画暂停和运行

上面我们将插件集成到bpmnModeler里面,然后我们通过获取 this.bpmnModeler.get('animation'),可以获取到动画执行过程中的动画实例事件的集合,然后给这个动画的事件添加上 监听事件,就可以实时获取到动画执行到的每一个节点,可以通过获取到的这个节点,进行业务校验,是否继续下面的流程

js 复制代码
const animation=this.bpmnModeler.get('animation')
const animationBus=animation._eventBus
// 然后给这个动画的事件添加上 监听事件,就可以实时获取到
animationBus.on('tokenSimulation.generateToken',(e)=>{
// 业务事件处理
...
// 获取进程实例
const pauseSimulation = this.bpmnModeler.get('pauseSimulation');

//暂停方法
pauseSimulation.pause()

// 继续的方法
pauseSimulation.toggle()

// 节点颜色改变等方法   
// 插入错误信息日志等

})

直接看运行图

多条线路运行,其中一条节点业务信息错误暂停,另一条继续运行

相关推荐
m0_zj1 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠1 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象1 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
百度网站快速收录1 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
Loong_DQX2 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing2 小时前
react redux监测值的变化
前端·javascript·react.js
engchina2 小时前
CSS 样式化表格:从基础到高级技巧
前端·css
m0_528723812 小时前
react中useEffect的使用
前端·javascript·react.js
大模型铲屎官3 小时前
HTML从入门到精通:链接与图像标签全解析
开发语言·前端·javascript·html·编程·链接标签·图像标签
大模型铲屎官3 小时前
HTML 列表标签全解析:无序与有序列表的深度应用
前端·javascript·html·有序列表·列表标签·无序列表