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

最新推荐文章于 2024-05-23 13:49:51 发布
最新推荐文章于 2024-05-23 13:49:51 发布
阅读量1.7k 收藏 2
点赞数 5
文章标签： Flowable React bpmn-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiuxinfa123/article/details/130550219
版权

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

技术栈

前端

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

后端

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

成果展示

首页

在这里插入图片描述

目前的首页，做得很简陋，后续做法：

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

  • 增加菜单快捷入口

流程模型

模型列表

在这里插入图片描述

模型设计

以报销流程为例

在这里插入图片描述

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

在这里插入图片描述

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

任务管理

待签收任务

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

在这里插入图片描述

待办任务

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

在这里插入图片描述

办理任务：

在这里插入图片描述

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

查看审批记录：

在这里插入图片描述

流程跟踪，可视化流程走到哪里了：

在这里插入图片描述

目前待优化的点：

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

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

已办任务

在这里插入图片描述

qiuxinfa123
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
activiti7在线流程设计器_react + bpmnjs + antd实现流程设计器和流程跟踪
weixin_39595302的博客
11-22 3108
阅读原文查看github demo1. bpmn-js简介bpmn.js是一个BPMN2.0渲染工具包和web建模器.它使用JavaScript编写，在不需要后端服务器支持的前提下向现代浏览器内嵌入BPMN2.0流程图.在线测试: 在线绘制bpmn流程图2. 实现流程设计器首先，我们先来看看整体结构记住上面图中的文字2.1 自定义左侧工具栏(pallete)首先先看一下目录结构在Cust...
【工作流引擎】Flowable流程设计器 基于bpmnjs开发的vue组件
热门推荐
Vincent Vic
04-25 1万+
【工作流引擎】Flowable流程设计器 基于bpmnjs开发的vue组件设计器介绍集成设计器 设计器介绍 bpmn.js官网 bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成. 集成设计器 本文集成现成的Vue设计器组件 Element UI版本 workflow-bpmn-modeler Ant Design Vue 版本 workflow-bpmn-modeler-antdv npm i workflow-bpmn-modeler-antdv
react-bpmn:BPMN js的React扩展
03-05
Reactbpmn BPMN js的React扩展
2个 单选框 怎么让它动态的选择其中一个_基于react/vue搭建一个通用的表单管理配置平台...
weixin_39746552的博客
11-22 368
前言这篇文章是一篇应用性极强的文章，我们通过一个实际的应用场景，去解决某一类的问题，提供一种或者几种解决方案，来探索技术的魅力。接下来笔者主要分析表单定制平台的实现思路和技术方案，来实现一个类似于金数据或者问卷星一样的表单配置平台，大家也可以基于此方案，扩展出功能更加强大的可视化平台。正文为什么要做一个这样的平台呢？一方面是因为笔者多年来一直服务于B端产品，对于动态表单以及配置化表单有一...
深入React Flow Renderer（一）：构建可拖动低代码工作流（附代码地址）
最新发布
m0_73117087的博客
05-23 6888
在现代的Web开发中，构建可视化工作流和图形界面是一项常见的任务。传统上，这需要大量的前端工作，但现在有了一种强大的工具，可以使这个过程更加容易和高效——React Flow Renderer。本系列博客将深入介绍React Flow Renderer，这是一个用于构建可拖动低代码工作流的强大库。
基于Bpmnjs适配Flowable的流程设计器
liuwenjun05101的博客
04-19 646
Flowable在7.x的版本就不提供流程设计器UI，为了广大流程爱好者能更好的使用Flowable，开发了一套完全适配Flowable的bpmnjs的流程设计。
工作流引擎技术选型
Jae的博客
06-26 2258
市场上比较有名的开源流程引擎有osworkflow、jbpm、activiti、flowable、camunda。其中：Jbpm4、Activiti、Flowable、camunda四个框架同宗同源，祖先都是Jbpm4。由Salaboy团队基于由Activiti6核心迭代的新版本，但是没有给引擎注入更多的新特性，只是在Activiti6之外的上层封装了一些应用。从2017开始截至到2022年5月，Activiti7迭代到的最新版本为：7.3.0。
activiti7+bpmn.js+react
wh_xia_jun的专栏
06-10 3228
1、引入包 <dependency> <groupId>org.activiti</groupId> <artifactId>activiti-spring-boot-starter</artifactId> <version>7.1.0.M4</version> </dependency> <dep
我们的flowable改造（11）-----在一周年之际
Thubier
06-10 294
当我们拿到第一份集团转过来的工作流原型时，我们自己的团队技术积累是那么的贫瘠...可以说是一无所有......到今天，我们的产品基本功能已覆盖，在这里要感谢团队的成员的坚持。只有经历du ...
flowable实战（十六）:关于流程设计器： bpmn.js 彻底汉化
热水钟博客
12-24 1万+
一、bpmn.js官方例子有一个bpmn-js-examples/i18n专门讲了如何将bpmn-js中显示的字符转换为另一种语言的方案，本文根据官方的描述进行的实战。 二、原理： bpmn-js在实例化时，它把转换语言的功能（custom-translate）作为一个额外的配置模块，这样就覆盖了缺省的原来语言，在你 BpmnModeler实例化的js文件中，加入以下代码： var c...
spring boot + bpmnjs + flowable工作流前后不分离画流程图
liukangjie520的博客
05-12 2153
项目中要用到工作流，工作流引擎有很多，activity之前用过（仅仅用过）本来想在项目中集成activity，查了资料发现activity现在不维护了，之前开发activity的团队都离职跳到了flowable。很显然，flowable是activity的升级版，并且现在还在更新维护。从flowable官网（https://flowable.com/open-source/）可以直接下载。文档地址（https://flowable.com/open-source/docs/bpmn/ch02-Getting
GooFlow 工作流设计工具
01-14
GooFlow 工作流设计工具，js开发
workflow_editor_react:使用ReactJS的Panoptes的图形工作流程编辑器
05-04
工作流程编辑器React 使用ReactJS的Panoptes的图形工作流程编辑器。 安装 运行npm install开始。 npm run build将.cjsx文件编译成.js文件。 npm run watch将监视.cjsx文件，并在保存更改后自动生成。
svg-workflow-canvas:使用SVG的React工作流构建器
05-14
svg-workflow画布 使用基于SVG的画布对组件进行响应以进行工作流构建 安装 yarn add svg-workflow-canvas 用法 有关如何使用此组件的信息，请参见示例文件夹。 下面只是一个非常简单的示例。 import React from "react" ; import { Workflow } from "svg-workflow-canvas" ; export default ( ) => { const w1 = { nodes : [ { name : 'add-new-item' , id : '1' , icon : 'plus-circle' , position : { x : 3 , y : 7 } } , { name : 'create-user' , id : '2' , icon : 'user'
flowable-bpmn---idea的插件--超级好用
09-07
flowable-bpmn---idea的插件--超级好用
flowable-bpmn-intellij-plugin:可流动的Activiti（6.x）BPMN引擎IntelliJ的流程编辑器插件
05-04
为了阐明当专用建模者仅支持*.bpmn20.xml时，如何将*.xml用于BPMN图以及为什么将其用于BPMN图，请在此*.bpmn20.xml添加有关*.xml文件用法的注释： 这是什么 该项目提供了用于将流程编辑器集成到IntelliJ中的插件，...
react-bpmn:在React中显示BPMN 2.0图表
05-06
用法import ReactBpmn from 'react-bpmn' ;function App ( props ) { function onShown ( ) { console . log ( 'diagram shown' ) ; } function onLoading ( ) { console . log ( 'diagram loading' ) ; } function ...
workflow-bpmn-modeler:项目本项目基于vue和bpmn.io@7.0，实现flowable的modeler模型设计器
03-19
工作流程bpmn-modeler :fire:本项目基于vue和bpmn.io@7.0 ，实现bpmn.io@7.0的建模器流程设计器预览在线演示 :backhand_index_pointing_right:安装# 安装yarn add workflow-bpmn-modeler使用说明（最简demo） ...
工作流流程引擎flowable+springboot+vue3完整项目
11-15
本项目基于 RuoYi-Vue-Plus 进行二次开发，采用 Flowable 扩展工作流应用场景，支持在线表单设计和丰富的工作流程设计能力的一套完整项目。 主要针对Flowable工作流场景开发，前端采用vue3框架。 直接可以整合到...
vue3集成bpmn-js绘制flowable的流程图
06-01
首先，你需要安装 `bpmn-js` 和 `flowable-modeler` 两个依赖： ``` npm install bpmn-js flowable-modeler ``` 然后，你需要在 Vue 组件中引入 `bpmn-js` 和 `flowable-modeler` 的 CSS 文件： ```vue <template> <div id="canvas"></div> </template> <script> import BpmnViewer from 'bpmn-js/lib/NavigatedViewer'; import 'bpmn-js/dist/assets/diagram-js.css'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'; import 'flowable-modeler/release/styles/flowable.css'; export default { mounted() { const viewer = new BpmnViewer({ container: '#canvas', }); viewer.importXML(xmlString, () => { const canvas = viewer.get('canvas'); canvas.zoom('fit-viewport'); }); }, }; </script> ``` 这里使用了 `BpmnViewer` 组件，可以查看已存在的 BPMN 文件。如果你需要编辑已存在的 BPMN 文件，可以使用 `BpmnModeler` 组件。 在 `mounted` 生命周期中，我们创建了一个 `BpmnViewer` 实例，并通过 `xmlString` 字符串导入 BPMN 文件。最后，我们将 BPMN 图表缩放以适应视口大小。 这就是在 Vue3 中集成 `bpmn-js` 和 `flowable-modeler` 绘制 `flowable` 流程图的基本步骤。需要注意的是，这里的 `xmlString` 是指 BPMN 文件的 XML 字符串，你需要将其替换为你自己的 XML 字符串。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值