基于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()

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

})

直接看运行图

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

相关推荐
hackeroink4 分钟前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者2 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-2 小时前
验证码机制
前端·后端
燃先生._.3 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖4 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235244 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240255 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar5 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人6 小时前
前端知识补充—CSS
前端·css