位置: IT常识 - 正文

springboot集成Camunda,加前端bpmn页面流程编辑器(springboot集成camunda+bpmn)

编辑:rootadmin
springboot集成Camunda,加前端bpmn页面流程编辑器 1.后端搭建

推荐整理分享springboot集成Camunda,加前端bpmn页面流程编辑器(springboot集成camunda+bpmn),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:springboot集成camunda+bpmn,springboot集成camunda教程,springboot集成camunda教程,springboot集成camel,springboot集成camunda,springboot集成camunda后403,springboot集成camunda 源码,springboot集成camunda,内容如对您有帮助,希望把文章链接给更多的朋友!

搭建流程引擎后端的时候,主要注意springboot版本和Camunda版本之间的兼容性。此次springboot版本2.6.4,Camunda版本7.18.0。pom文件内容如下:

<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.6.4</version></parent><groupId>com.example</groupId><artifactId>camunda-demo2</artifactId><version>0.0.1-SNAPSHOT</version><properties><springboot.version>2.6.4</springboot.version><camunda.springboot.version>7.18.0</camunda.springboot.version><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><!-- <scope>runtime</scope>--></dependency><!-- <dependency>--><!-- <groupId>org.springframework.boot</groupId>--><!-- <artifactId>spring-boot-starter-test</artifactId>--><!-- <scope>test</scope>--><!-- </dependency>--><dependency><groupId>org.camunda.bpm.springboot</groupId><artifactId>camunda-bpm-spring-boot-starter</artifactId><version>${camunda.springboot.version}</version></dependency><dependency><groupId>org.camunda.bpm.springboot</groupId><artifactId>camunda-bpm-spring-boot-starter-rest</artifactId><version>${camunda.springboot.version}</version></dependency><dependency><groupId>org.camunda.bpm.springboot</groupId><artifactId>camunda-bpm-spring-boot-starter-webapp</artifactId><version>${camunda.springboot.version}</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

pom文件配置好后,通过一般的注解入口@SpringBootApplication,即可启动Camunda流程引擎。

2.数据库改造

Camunda默认使用的数据库为自带的h2内存数据库,此时一般需要将其改成mysql数据库,在配置文件配置数据库即可,application.yaml如下:

spring:datasource:url: jdbc:mysql://localhost:3306/cmd_dev?characterEncoding=UTF-8&useUnicode=true&useSSL=false&zeroDateTimeBehavior=convertToNull&serverTimezone=Asia/Shanghaidriver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: 123456camunda.bpm:admin-user:id: demopassword: demofirstName: Tomfilter:create: All tasks

一般Camunda会自动初始化mysql生成act_开头的49张表,如需手动初始化sql,可去官网找到对应版本(此例中Camunda版本为7.18.0)的sql脚本文件,https://camunda.com/download/,

下载windows安装压缩包,./configuration/sql目录下即可找到sql文件,engine和identity都执行。

不需要增加java代码或配置,直接启动即成功切换数据库。

3.流程接口文档

流程接口可以直接使用rest-api,参考官方文档https://docs.camunda.org/manual/7.18/reference/rest/。

a.部署流程

文档地址:https://docs.camunda.org/manual/7.18/reference/rest/deployment/post-deployment/

接口路径 POST /deployment/create

全路径:post http://localhost:8080/engine-rest/deployment/create

将流程文件 流程.bpmn 通过此接口即可完成流程部署,返回definitionId;

b.启动流程实例

文档地址https://docs.camunda.org/manual/7.18/reference/rest/process-definition/post-start-process-instance/

接口路径 POST /process-definition/{id}/start

其中id为上一步获取到的definitionId;

c.提交任务

接口路径 post /task/{id}/complete

d.获取待办任务

接口地址 get /task

参数assignee承办人,选用一对一模式(一个任务对应一个参与者)可通过此参数获取本人待办

参数candidateUser候选人,需要用到一对多模式,可用参数candidateUser获取本人待办

e.审批意见

接口地址 post /task/{id}/comment/create

当然,除了官方提供的rest-api,也可以自定义开发api,通过以下代码同样可以实现流程部署:

    @Autowiredprivate RepositoryService repositoryService;InputStream in;try {in= new FileInputStream("D:/ab/a.bpmn");} catch (FileNotFoundException e) {throw new RuntimeException(e);}Deployment deploy = repositoryService.createDeployment().addInputStream("b.bpmn", in) //流程定义文件名称.name("nameA") //流程部署名称.source("sourceA") //流程部署source.deploy();

所有class类官方文档https://docs.camunda.org/javadoc/camunda-bpm-platform/7.18/allclasses.html

其中:

RepositoryService: 对流程定义即bpm文件的相关操作;

RuntimeService: 通过流程定义产生的流程实例,由RuntimeService操作

TaskService: 由用户去执行的任务的相关操作

IdentityService: 管理组和用户

springboot集成Camunda,加前端bpmn页面流程编辑器(springboot集成camunda+bpmn)

FormService: 可选的表单服务

HistoryService: 历史记录服务

4.流程编辑器bpmn

可参考开源项目https://gitcode.net/mirrors/PL-FE/bpmn-camunda?utm_source=csdn_github_accelerator

编辑流程图bpmn文件:

<?xml version="1.0" encoding="UTF-8"?><definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="5.1.2"><process id="Process_7" name="流程7" isExecutable="true"><startEvent id="StartEvent_1y45yut" name="开始"><outgoing>Flow_0yq3fo1</outgoing></startEvent><userTask id="Activity_04i1hw0" name="审批7" camunda:assignee="${deptMajor}"><incoming>Flow_1ona6kc</incoming><outgoing>Flow_0r1n32u</outgoing></userTask><userTask id="Activity_1x3adqc" name="结算7" camunda:assignee="${orgMajor}"><incoming>Flow_0yedygk</incoming><outgoing>Flow_1kw655g</outgoing></userTask><endEvent id="Event_06xx78w"><incoming>Flow_0r1n32u</incoming><incoming>Flow_1kw655g</incoming></endEvent><exclusiveGateway id="Gateway_19qnoe0"><incoming>Flow_0yq3fo1</incoming><outgoing>Flow_1ona6kc</outgoing><outgoing>Flow_0yedygk</outgoing></exclusiveGateway><sequenceFlow id="Flow_0yq3fo1" sourceRef="StartEvent_1y45yut" targetRef="Gateway_19qnoe0" /><sequenceFlow id="Flow_1ona6kc" sourceRef="Gateway_19qnoe0" targetRef="Activity_04i1hw0"><conditionExpression xsi:type="tFormalExpression">${flag==1}</conditionExpression></sequenceFlow><sequenceFlow id="Flow_0yedygk" sourceRef="Gateway_19qnoe0" targetRef="Activity_1x3adqc"><conditionExpression xsi:type="tFormalExpression">${flag==2}</conditionExpression></sequenceFlow><sequenceFlow id="Flow_0r1n32u" sourceRef="Activity_04i1hw0" targetRef="Event_06xx78w" /><sequenceFlow id="Flow_1kw655g" sourceRef="Activity_1x3adqc" targetRef="Event_06xx78w" /></process><bpmndi:BPMNDiagram id="BpmnDiagram_1"><bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_7"><bpmndi:BPMNEdge id="Flow_1kw655g_di" bpmnElement="Flow_1kw655g"><omgdi:waypoint x="370" y="200" /><omgdi:waypoint x="500" y="200" /><omgdi:waypoint x="500" y="138" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0r1n32u_di" bpmnElement="Flow_0r1n32u"><omgdi:waypoint x="370" y="30" /><omgdi:waypoint x="500" y="30" /><omgdi:waypoint x="500" y="102" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0yedygk_di" bpmnElement="Flow_0yedygk"><omgdi:waypoint x="150" y="145" /><omgdi:waypoint x="150" y="200" /><omgdi:waypoint x="270" y="200" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_1ona6kc_di" bpmnElement="Flow_1ona6kc"><omgdi:waypoint x="150" y="95" /><omgdi:waypoint x="150" y="30" /><omgdi:waypoint x="270" y="30" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0yq3fo1_di" bpmnElement="Flow_0yq3fo1"><omgdi:waypoint x="38" y="120" /><omgdi:waypoint x="125" y="120" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut"><omgdc:Bounds x="2" y="102" width="36" height="36" /><bpmndi:BPMNLabel><omgdc:Bounds x="10" y="145" width="22" height="14" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_04i1hw0_di" bpmnElement="Activity_04i1hw0"><omgdc:Bounds x="270" y="-10" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Activity_1x3adqc_di" bpmnElement="Activity_1x3adqc"><omgdc:Bounds x="270" y="160" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_06xx78w_di" bpmnElement="Event_06xx78w"><omgdc:Bounds x="482" y="102" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Gateway_19qnoe0_di" bpmnElement="Gateway_19qnoe0" isMarkerVisible="true"><omgdc:Bounds x="125" y="95" width="50" height="50" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></definitions>

其中:”可执行文件“,这个选项需要勾选上,不然流程部署后,3.b.启动流程实例步骤获取不到definitionId

创建任务的时候,要选择用户任务

,而不是普通任务

默认的编辑器没有用户任务,需要在前端项目node_modules文件夹下找到

bpmn-js/lib/features/palette/paletteprovider.js

参照create.task添加create.user-task:

    'create.task': createAction('bpmn:Task', 'activity', 'bpmn-icon-task',translate('Create Task')),'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task',translate('Create User Task')),a.设置参与者

assignee承办人对应用户任务的”代理人“属性,也可以选用一对多的candidateUser候选人或候选组

设置参与者的时候,可以直接写死参与者的id,也可以通过使用流程变量来动态设置参与者,格式如下:

${deptMajor}

其中流程变量deptMajor,在启动流程时候,需要定义数据类型(值可以先不定义)

参照接口3.b POST /process-definition/{id}/start

在请求体传入如下json数据,初始化流程变量:

{"variables": {"deptMajor" : {"value" : "123","type": "String"},"orgMajor" : {"value" : null,"type": "String"},"flag" : {"value" : 2,"type": "Integer"}}}b.流程分支控制

设计流程图时,网关各分支增加条件,条件类型为表达式:${flag==1}

然后如上启动流程的时候给流程变量flag初始化和赋值,后续提交任务的时候,也可随时通过修改流程变量的值来控制流程分支的走向。

5.常用表

act_ge_bytearray 记录部署的bpmn流程文件

act_re_deployment 部署发布的流程会在此产生记录

act_re_procdef 已发布的流程定义(BPMN流程模型定义表)

act_hi_procinst 历史流程实例表

act_hi_actinst 历史活动实例表

act_hi_identitylink 历史任务执行人表

act_ru_task 任务表

act_ru_identitylink 任务执行人表

act_ru_execution BPMN流程运行时记录表

6.当前流程图高亮

基本思路为通过接口查出流程定义的xml内容,然后找到当前正在运行的节点,通过方法canvas.addMarker(actId, 'highlight'),修改其样式:

<template><div class="containers"><div id="canvas" ref="canvas"></div></div></template><script>import BpmnViewer from 'bpmn-js'import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'let bpmnViewer = nullconst webUrl = "http://localhost:8095/camunda"export default {name: 'bpmnView',data () {return {msg: 'Welcome to yjr Vue.js App',bpmnModeler: null}},mounted() {bpmnViewer = new BpmnViewer({container: '#canvas',width: '100%',height: '100%',additionalModules: [MoveCanvasModule // 移动整个画布]})this.greet()},methods: {createBpmnViewer :async function (bpmnXML) {try {await bpmnViewer.importXML(bpmnXML);} catch (err) {console.error('error loading BPMN 2.0 XML', err);}let canvas = bpmnViewer.get('canvas')canvas.zoom('fit-viewport', 'auto')},greet: function () {const that = thisconst processDefinitionId = this.$route.query.processDefinitionIdthis.$http.get(webUrl + '/engine-rest/process-definition/' + processDefinitionId + '/xml').then((response)=>{if(response.data.bpmn20Xml){that.createBpmnViewer(response.data.bpmn20Xml)that.getAct();}}).catch((response)=>{console.log(response);})},getAct: function () {const that = thisconst processInstanceId = this.$route.query.processInstanceIdlet canvas = bpmnViewer.get('canvas')this.$http.get(webUrl + '/web/processInstance/getAct?processInstanceId=' + processInstanceId).then((response)=>{if(response.data.code == 200){let list = response.data.data;for(var actId in list){canvas.addMarker(list[actId], 'highlight');}}}).catch((response)=>{console.log(response);})}}}</script><style>.highlight .djs-visual > :nth-child(1) {stroke: green !important;fill: rgba(0, 80, 0, 0.4) !important;}.djs-container{height: 80vh !important;}</style>

效果如下:

具体js中初始化及方法可参考bpmn官网:bpmn-js walkthrough | Toolkits | bpmn.io

本文链接地址:https://www.jiuchutong.com/zhishi/277736.html 转载请保留说明!

上一篇:电脑系统出问题时如何减少损失?(电脑系统出问题了怎么办)

下一篇:共享文档无法访问设置教程(共享文档无法访问如何解决)

  • 微信网页版屏蔽消息的方法(禁止微信打开网页)

    微信网页版屏蔽消息的方法(禁止微信打开网页)

  • 魅族 18 Pro的防水性能是多少(魅族18支持防尘防水吗)

    魅族 18 Pro的防水性能是多少(魅族18支持防尘防水吗)

  • 快手申请仲裁的意思是什么(快手小店申请仲裁管用吗)

    快手申请仲裁的意思是什么(快手小店申请仲裁管用吗)

  • iphone11软件更新在哪(iphone11软件更新小红点怎么去掉)

    iphone11软件更新在哪(iphone11软件更新小红点怎么去掉)

  • mate30上市时间

    mate30上市时间

  • 抖音注销后还有粉丝吗(抖音注销后还有IP地址吗)

    抖音注销后还有粉丝吗(抖音注销后还有IP地址吗)

  • 微博说更新太快怎么办(微博说更新太快怎么回事)

    微博说更新太快怎么办(微博说更新太快怎么回事)

  • 小米10青春版多少hz(小米10青春版多少刷新率)

    小米10青春版多少hz(小米10青春版多少刷新率)

  • 快手什么情况账号会封禁(快手什么情况账号被冻结)

    快手什么情况账号会封禁(快手什么情况账号被冻结)

  • 小米note黑屏充电没反应(小米手机黑屏充电没反应是怎么回事)

    小米note黑屏充电没反应(小米手机黑屏充电没反应是怎么回事)

  • 知乎我喜欢在哪看(知乎 我喜欢在哪里)

    知乎我喜欢在哪看(知乎 我喜欢在哪里)

  • 台式电脑的摄像头在哪(台式电脑的摄像头和麦克风)

    台式电脑的摄像头在哪(台式电脑的摄像头和麦克风)

  • 看qq看点会被好友发现吗(看qq看点会被好友看到吗)

    看qq看点会被好友发现吗(看qq看点会被好友看到吗)

  • 苹果7p支持nfc功能吗(苹果7p带nfc功能)

    苹果7p支持nfc功能吗(苹果7p带nfc功能)

  • 小米平板黑屏打不开怎么办(小米平板黑屏假死)

    小米平板黑屏打不开怎么办(小米平板黑屏假死)

  • 苹果x多长时间充满电(苹果x多长时间换屏一次)

    苹果x多长时间充满电(苹果x多长时间换屏一次)

  • 网易云音乐的积分有什么用(网易云音乐的积极作用)

    网易云音乐的积分有什么用(网易云音乐的积极作用)

  • 淘宝托管运营有用吗(白沟淘宝运营托管)

    淘宝托管运营有用吗(白沟淘宝运营托管)

  • 摄像头里面有水雾怎么办(摄像头里面有水雾怎么去除)

    摄像头里面有水雾怎么办(摄像头里面有水雾怎么去除)

  • 安卓可以投屏ipad么(安卓可以投屏apple tv吗)

    安卓可以投屏ipad么(安卓可以投屏apple tv吗)

  • 苹果手机咋整抬头灯(苹果手机咋整抬屏亮屏)

    苹果手机咋整抬头灯(苹果手机咋整抬屏亮屏)

  • 苹果手机怎么关闭wifi自动更新(苹果手机怎么关闭5g开关)

    苹果手机怎么关闭wifi自动更新(苹果手机怎么关闭5g开关)

  • iphone激活时远程管理(苹果激活的时候远程管理是什么意思)

    iphone激活时远程管理(苹果激活的时候远程管理是什么意思)

  • 三星s10有必要贴膜吗(三星s10自带贴膜可以撕掉吗)

    三星s10有必要贴膜吗(三星s10自带贴膜可以撕掉吗)

  • 荣耀手环3可以接电话吗(荣耀手环3可以刷门禁卡吗)

    荣耀手环3可以接电话吗(荣耀手环3可以刷门禁卡吗)

  • 惠普4540s有i7吗(惠普4540s 有i7的处理器吗)

    惠普4540s有i7吗(惠普4540s 有i7的处理器吗)

  • 苹果x可以控制空调吗(苹果x控制中心变成了搜索)

    苹果x可以控制空调吗(苹果x控制中心变成了搜索)

  • iphone11和iphonex区别(iphone11和iphonex一样吗)

    iphone11和iphonex区别(iphone11和iphonex一样吗)

  • 手机腾讯qq黑名单在哪(手机qq8.5.0黑名单)

    手机腾讯qq黑名单在哪(手机qq8.5.0黑名单)

  • 支付宝怎么信用卡还贷(支付宝怎么信用卡提现)

    支付宝怎么信用卡还贷(支付宝怎么信用卡提现)

  • WPS表格如何制作斜线(wps表格如何制作表格)

    WPS表格如何制作斜线(wps表格如何制作表格)

  • vx怎么群发(vx怎么群发消息给个人)

    vx怎么群发(vx怎么群发消息给个人)

  • ps橡皮擦工具组中橡皮擦工具的使用方法(ps橡皮擦工具的作用是什么)

    ps橡皮擦工具组中橡皮擦工具的使用方法(ps橡皮擦工具的作用是什么)

  • 小规模纳税人收入是含税还是不含税
  • 政府补助是属于什么财务活动
  • 出口货物如何申报
  • 外汇储备保值增值
  • 总承包单位可以分包吗
  • 中标服务费计入什么会计科目
  • 资产负债表本月期末余额怎么填
  • 小规模公司初期注销流程
  • 邮局可以开发票吗 税点多少
  • 一般纳税人差额征税申报表怎么填
  • 半年度奖金怎么算
  • 外商投资企业土地使用税什么时候交
  • 收到客户承兑怎么做账
  • 销售产生的磅差入什么科目?
  • 企业进货不收发票怎么做帐?
  • 小微企业所得税优惠政策最新2023
  • 超过离线开票限定时长09d11f怎么解决
  • 企业的公益性捐赠支出
  • 补发住房补贴征求意见
  • 花店怎么做会计工作
  • 营业范围是销售范围吗
  • 招标服务费计算公式
  • 交上年企业所得税怎么做会计分录
  • 投资收益亏损后会怎么样
  • 浅谈linux的发展方向和应用范围
  • vue移动端预览pdf
  • 购置资产是什么财务活动
  • 商业企业低值易耗品科目核算的内容
  • gcasInstallHelper.exe是什么进程 作用是什么 gcasInstallHelper进程查询
  • svchost一直在下载什么
  • 装修材料如何入账
  • php gtk
  • js正则表达式删除特定字符
  • kaggle如何入门
  • 公司支付员工生育津贴怎么做账
  • 微信支付php开发流程
  • 汇兑损益计入哪里
  • 路径规划是什么意思
  • 反射dll
  • 股权划转有税费吗
  • 计提工资后面附什么
  • 税务局退的税款如何做账
  • 确定负债排列顺序的依据
  • 出口属于什么行业
  • 保险公司的奖励制度
  • 生活垃圾处理费合法吗
  • 支付大型设备税率是多少
  • 公司新装宽带怎么安装
  • 出口转内销补交进口增值税时间
  • 以存货抵偿债务
  • 替其他公司支付工资怎么做账
  • 资产报废需要税费吗
  • 制造费用和管理费用怎么结转
  • 什么是对公账户?
  • 进项税大于销项税需要交增值税吗
  • 待转销项税额对应科目
  • 生产企业代理出口退税
  • sqlserver登录日志
  • Windows10下MySQL5.7.19安装教程 MySQL忘记root密码修改方法
  • 怎么验证触发器的执行
  • windows电源图标消失
  • win7系统系统
  • win7安装cad2022
  • linux ii
  • android开发环境搭建需要哪些工具
  • Tutorial 8:Scaling Transformation
  • cocos creator2.4
  • 位图字体图片
  • nodejs cgi
  • js设置标签内容
  • python jsonp
  • json读取字符串
  • js实现带搜索功能的下拉菜单
  • 婚前买房婚后个人还贷卖房怎么签字
  • 北京税务局发票查询
  • 为什么虚开增值税属于犯罪行为
  • 国家医保平台查不到住院记录
  • 何为金税三期
  • 应征增值税不含销售额3%和5%征收的有什么区别
  • 四川税收总额
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设