springboot集成Camunda，加前端bpmn页面流程编辑器

1.后端搭建

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


    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.6.4
    

    com.example
    camunda-demo2
    0.0.1-SNAPSHOT

    
        2.6.4
        7.18.0
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
            mysql
            mysql-connector-java
<!--            runtime-->
        
<!--        -->
<!--            org.springframework.boot-->
<!--            spring-boot-starter-test-->
<!--            test-->
<!--        -->
        
            org.camunda.bpm.springboot
            camunda-bpm-spring-boot-starter
            ${camunda.springboot.version}
        

        
            org.camunda.bpm.springboot
            camunda-bpm-spring-boot-starter-rest
            ${camunda.springboot.version}
        

        
            org.camunda.bpm.springboot
            camunda-bpm-spring-boot-starter-webapp
            ${camunda.springboot.version}
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin

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/Shanghai
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 123456

camunda.bpm:
  admin-user:
    id: demo
    password: demo
    firstName: Tom
  filter:
    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，通过以下代码同样可以实现流程部署：

    @Autowired
    private 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：管理组和用户

FormService：可选的表单服务

HistoryService：历史记录服务

4.流程编辑器bpmn

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

编辑流程图bpmn文件：

springboot集成Camunda，加前端bpmn页面流程编辑器


  
    
      Flow_0yq3fo1
    
    
      Flow_1ona6kc
      Flow_0r1n32u
    
    
      Flow_0yedygk
      Flow_1kw655g
    
    
      Flow_0r1n32u
      Flow_1kw655g
    
    
      Flow_0yq3fo1
      Flow_1ona6kc
      Flow_0yedygk
    
    
    
      ${flag==1}
    
    
      ${flag==2}

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

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

springboot集成Camunda，加前端bpmn页面流程编辑器

，而不是普通任务

springboot集成Camunda，加前端bpmn页面流程编辑器

默认的编辑器没有用户任务，需要在前端项目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’)，修改其样式：

  
    
  



  import BpmnViewer from 'bpmn-js'
  import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
  let bpmnViewer = null
  const 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 = this
            const processDefinitionId = this.$route.query.processDefinitionId
            this.$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 = this
          const processInstanceId = this.$route.query.processInstanceId
          let 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);
            })
        }
    }
  }


.highlight .djs-visual > :nth-child(1) {
  stroke: green !important;
  fill: rgba(0, 80, 0, 0.4) !important;
}
.djs-container{
    height: 80vh !important;
  }

效果如下：

springboot集成Camunda，加前端bpmn页面流程编辑器

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

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/024a4cffb6.html

springboot集成Camunda，加前端bpmn页面流程编辑器

1.后端搭建

2.数据库改造

3.流程接口文档

a.部署流程

b.启动流程实例

c.提交任务

d.获取待办任务

e.审批意见

4.流程编辑器bpmn

a.设置参与者

b.流程分支控制

5.常用表

6.当前流程图高亮

相关推荐