Flowable+React+bpmn-js实现工作流

由于新东家使用的是React,不是Vue,而自己一直想做一个关于工作流的应用出来,断断续续,花了几个月的时间,开发了工作流的功能,后面会继续完善。

技术栈

前端

前端是基于React开发的,使用了antd做页面布局,bpmn-js做流程图设计,使用vite工具打包

后端

后端是基于SpringBoot开发的,整合了flowable工作流引擎,mybatis-plus做持久层,SpringSecurity做认证和授权,jwt做token的生成、校验、解析

成果展示

首页

Flowable+React+bpmn-js实现工作流_第1张图片

目前的首页,做得很简陋,后续做法:

  • 增加待办列表:推送待办到首页

  • 增加菜单快捷入口

流程模型

模型列表

Flowable+React+bpmn-js实现工作流_第2张图片

模型设计

以报销流程为例

Flowable+React+bpmn-js实现工作流_第3张图片

这里有两个并行多实例节点:会计审批和出纳审批,是支持多实例的:

Flowable+React+bpmn-js实现工作流_第4张图片

多实例的完成条件,设置为比例(0.01~1)之间,满足条件,则流转到下一个节点。比如这里的会计审批节点,设置为0.01,代表只需要一个人审批即可。

任务管理

待签收任务

包括了个人待签收和岗位待签收(这里是角色待签收)

Flowable+React+bpmn-js实现工作流_第5张图片

待办任务

签收任务之后,就会把任务变成自己的待办任务了

Flowable+React+bpmn-js实现工作流_第6张图片

办理任务:

Flowable+React+bpmn-js实现工作流_第7张图片

这个页面待优化,应该点了对应的按钮,弹窗显示对应的栏位,这个暂时没有做

查看审批记录:

Flowable+React+bpmn-js实现工作流_第8张图片

流程跟踪,可视化流程走到哪里了:

Flowable+React+bpmn-js实现工作流_第9张图片

目前待优化的点:

  • 走过的有些线没有高亮显示

  • 对于退回的节点,还是会高亮显示(退回到目标节点之后的节点,都不应该高亮显示)

已办任务

Flowable+React+bpmn-js实现工作流_第10张图片

你可能感兴趣的:(Flowable,React,bpmn-js)