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

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

技术栈

前端

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

后端

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

成果展示

首页

在这里插入图片描述

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

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

  • 增加菜单快捷入口

流程模型

模型列表

在这里插入图片描述

模型设计

以报销流程为例

在这里插入图片描述

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

在这里插入图片描述

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

任务管理

待签收任务

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

在这里插入图片描述

待办任务

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

在这里插入图片描述

办理任务:

在这里插入图片描述

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

查看审批记录:

在这里插入图片描述

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

在这里插入图片描述

目前待优化的点:

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

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

已办任务

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV 直方图统计函数 cv::calcHist算是彻底弄明白了

参数说明 void calcHist( const Mat* images, int nimages,const int* channels, InputArray mask,OutputArray hist, int dims, const int* histSize,const float** ranges, bool uniform true, bool accumulate false );images 图像数组。每个图像的大小要一致&#xff0c…

最强算法视频公开课!(内容硬核,完全免费!

和录友们汇报一下,代码随想录算法公开课已经更新完毕了。 由我亲自录制了140期算法视频,覆盖了 《代码随想录》纸质版上全部题目的讲解。 视频全部免费开放在B站:代码随想录 目录就在视频播放的右边,完全按照代码随想录的顺序讲…

鸿蒙Hi3861学习七-Huawei LiteOS-M(信号量)

一、简介 信号量(Semaphore)是一种实现任务间通信的机制,实现任务之间同步或临界资源的互斥访问。常用于协助一组相互竞争的任务来访问临界资源。 在多任务系统中,各任务之间需要同步或互斥实现临界资源的保护,信号量功…

面对AI“龙卷风”破坏力 白宫“软着陆”欧盟“硬防御”

ChatGPT的风靡与风险将OpenAI的CEO山姆奥特曼(Sam Altman)送进白宫,他被蹲守在美国总统府邸的记者们围追,面对5月4日白宫发起的AI风险治理会议,奥特曼很官方地给出“重要也很及时”的回应,自信的反复强调“…

chatGPT润色中英论文软件-文章修改润色器

chatGPT可以润色英文论文吗? ChatGPT可以润色英文论文,它具备自动纠错、自动完善语法和严格全面的语法、句法和内容结构检查等功能,可以对英文论文进行高质量的润色和优化。此外,ChatGPT还支持学术翻译润色、查重及语言改写等服务…

Java入门指南:从零开始的基础语法

java语言概述 Java是一种高级编程语言,最初由Sun Microsystems(现在是Oracle Corporation的一部分)在1995年推出。Java以其简单、可移植和安全的特性而闻名,并广泛用于各种应用程序开发,从桌面应用程序到移动应用程序和…

icevision环境安装

Installation - IceVision # 1. git clone 代码# pip 换源: ~/.pip/pip.conf 隐藏文件[global] index-url https://pypi.tuna.tsinghua.edu.cn/simple [install] trusted-hostmirrors.aliyun.compip install -e .[all,dev]ImportError: cannot import name Multi…

ASEMI代理ADUM131E1BRWZ-RL原装ADI车规级ADUM131E1BRWZ-RL

编辑:ll ASEMI代理ADUM131E1BRWZ-RL原装ADI车规级ADUM131E1BRWZ-RL 型号:ADUM131E1BRWZ-RL 品牌:ADI /亚德诺 封装:SOIC-16-300mil 批号:2023 安装类型:表面贴装型 引脚数量:16 工作温度…

WPF异常处理详解

总目录 文章目录 总目录一、WPF异常1 未捕获异常2 模拟未捕获异常场景 二、处理未捕获异常1 DispatcherUnhandledException 异常捕获2 UnhandledException异常捕获3 UnobservedTaskException异常捕获4 异常捕获的综合使用 结语 一、WPF异常 1 未捕获异常 正常情况下&#xff…

又一里程碑,alibaba首推Java技术成长笔记,业内评级“钻石级”

前言 根据数据表明,阿里巴巴已经连续3年获评最受欢迎的中国互联网公司,实际上阿里巴巴无论在科技创新力还是社会创造价值这几个方面,都是具有一定代表里的。在行业内,很多互联网企业也将阿里作为自己的标杆,越来越多的…

【PSO-LSTM】基于PSO优化LSTM网络的电力负荷预测(Python代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

iOS与Android应用开发的对比:如何选择最佳开发平台?

第一章:引言 在移动应用开发领域,iOS和Android是最为流行的操作系统。选择最佳的开发平台可以使开发人员更有效地开发和发布应用程序。本文将分析iOS和Android应用开发的优缺点,并提供一些有关如何选择最佳开发平台的建议。 第二章&#xf…

Kali-linux攻击WordPress和其他应用程序

今天越来越多的企业利用SAAS(Software as a Service)工具应用在他们的业务中。例如,他们经常使用WordPress作为他们网站的内容管理系统,或者在局域网中使用Drupal框架。从这些应用程序中找到漏洞,是非常有价值的。 为…

《算经》中的百钱买百鸡问题,你会做吗?试下看看(39)

小朋友们好,大朋友们好! 我是猫妹,一名爱上Python编程的小学生。 欢迎和猫妹一起,趣味学Python。 今日主题 你知道我国历史上有个王朝叫北魏吗? 北魏(386年—534年),南北朝时期北…

AdaSparse: 自适应稀疏网络的多场景CTR预估建模

▐ 摘要 CTR(Click-through rate)预估一直是推荐/广告领域重要技术之一。近年来,通过统一模型来服务多个场景的预估建模已被证明是一种有效的手段。当前多场景预估技术面临的挑战主要来自两方面:1)跨场景泛化能力:尤其对稀疏场景&…

vscode IDE 能用的上的扩展工具功能介绍

记录分享vscode扩展,包括提升开发效率。必备。主题美化。ChatGPT等。 参考 vscode-extensions [Best] 记录分享方式,整理自己用的扩展,还有一键备份和还原方法。 ⭐快速下载和使用扩展 后面会介绍很多vscode扩展.这裡有一个技巧,…

为什么二极管具有单向导通性

大家都知道二极管具有单向导通性,比如一个双极性的信号通过二极管后会变成一个单极性的信号。 为了弄清这个问题先来看一下二极管的构成。 在纯净的硅晶体中掺入五价元素,比如磷,就形成了N型半导体,掺入的五价元素多余的电子很容…

uboot移植Linux-SD驱动代码解析

一、uboot与linux驱动 1.1、uboot本身是裸机程序 (1)狭义的驱动概念是指:操作系统中用来具体操控硬件的代码叫驱动 广义的驱动概念是指:凡是操控硬件的代码都叫驱动 (2)裸机程序中是直接使用寄存器的物理地址来操控硬件的,操作系统中必须通…

实时聊天如何做,让客户眼前一亮(一)

网站上的实时聊天功能应该非常有用,因为它允许客户支持立即帮助用户。在线实时聊天可以快速轻松地访问客户服务部门,而它也代表着企业的门面。 让我们讨论一下如何利用SaleSmartly(ss客服)在网站中的实时聊天视图如何提供出色的实…

纯前端JS实现文件上传解析渲染页面

AI真的能代替前端吗? 回答:不会完全代替 能用吗?复制到项目中只会报错 爆红 ……他完全不能理解你需要什么JavaScript(简称JS)是一种轻量级的脚本语言,主要用于在Web页面上添加交互行为。它由三个不同的…