最近又要开始弄工作流,出现bug要修改,前同事离职了两个多月了,目前也没有新招到后端java,目前一个人顶着。 

     Activiti Modeler 是 Activiti 官方提供的一款在线流程设计的前端插件,可以方便流程设计与开发人员绘制流程图,保存流程模型,部署至流程定义等等

   记录一下如何在spring boot项目中集成Activiti Modeler。

1、下载activiti-explorer

首先我们需要获取activiti-explorer.zip,这个是activiti-5.22.0才有的,压缩包可以在网络上下载,或者从官网下载https://www.activiti.org/get-started 下载5.x版本

SpringBoot 整合activiti7 二次开发_ActivitiModeler

可以先放在tomcat下启动开一下效果

SpringBoot 整合activiti7 二次开发_流程设计_02

    2.在项目中集成

集成静态文件:

在项目的resources下新建static/modeler目录

将如图3个目录复制到static/modeler目录下

SpringBoot 整合activiti7 二次开发_ActivitiModeler_03

然后去csdn上下载activiti explorer的汉化文件(stencilset.json和en.json),官网下载的项目这两个文件都是纯英文的。

下图是我的百度网盘保存的,现在csdn上好像不能直接分享网盘链接了

SpringBoot 整合activiti7 二次开发_流程设计_04

SpringBoot 整合activiti7 二次开发_ActivitiModeler_05

 

SpringBoot 整合activiti7 二次开发_流程设计_06

 

  • 将下载好的汉化文件stencilset.json复制到src/main/resources目录下
  • 用下载好的汉化文件en.json替换 static/modeler/editor-app/i18n/en.json文件

 

SpringBoot 整合activiti7 二次开发_SpringBoot_07

在 com/sxdx/workflow/activiti/rest下新建modeler目录。将下载文件的 activiti-5.22.0\Activiti-master\modules\activiti-modeler\src\\main\java\org\activiti\rest\editor 目录下的所有文件(不包含目录)拷贝到 com/sxdx/workflow/activiti/rest/modeler目录下:

SpringBoot 整合activiti7 二次开发_流程设计_08

 最后效果如下所示:

SpringBoot 整合activiti7 二次开发_集成_09

 如果你只是在tomcat上部署的官方项目,则替换路径在如下所示

SpringBoot 整合activiti7 二次开发_SpringBoot_10

2.3 代码修改

依次修改如下代码:
1、static/modeler/editor-app/app-cfg.js

SpringBoot 整合activiti7 二次开发_流程设计_11

2、static/modeler/editor-app/configuration/toolbar-default-actions.js

SpringBoot 整合activiti7 二次开发_流程设计_12

 3、com/sxdx/workflow/activiti/rest/modeler 下的3个java文件中的所有方法的访问路径前都添加/modeler

SpringBoot 整合activiti7 二次开发_集成_13

4、将ModelSaveRestResourcesaveModel改为POST访问,否则Activiti Modeler无法保存。

@RequestMapping(value="/modeler/model/{modelId}/save", method = RequestMethod.POST)
  @ResponseStatus(value = HttpStatus.OK)
  public void saveModel(@PathVariable String modelId, @RequestBody MultiValueMap<String, String> values) {
    //省略
  }

3、访问验证

启动服务,访问http://localhost:8080/modeler/modeler.html

 

SpringBoot 整合activiti7 二次开发_集成_14

SpringBoot 整合activiti7 二次开发_集成_14

会发现只有一个布局,各种功能及组件都没有显示出来。这是因为我们没有定义流程模型

4、创建一个模型

4.1 代码创建一个流程模型

创建一个测试类 ModelerControllerTest

package com.sxdx.workflow.activiti.rest;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.node.ObjectNode;
import org.activiti.editor.constants.ModelDataJsonConstants;
import org.activiti.engine.RepositoryService;
import org.activiti.engine.repository.Model;
import org.apache.commons.lang3.StringUtils;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;

import javax.annotation.Resource;

import static org.activiti.editor.constants.ModelDataJsonConstants.MODEL_DESCRIPTION;
import static org.activiti.editor.constants.ModelDataJsonConstants.MODEL_NAME;

@SpringBootTest
@RunWith(SpringRunner.class)
public class ModelerControllerTest {

    @Resource
    private RepositoryService repositoryService;

    /**
     * 创建模型
     */
    @Test
    public void create() {
        String name = "请假流程";
        String key = "leave";
        String description = "这是一个简单的请假流程";

        try {
            ObjectMapper objectMapper = new ObjectMapper();
            ObjectNode editorNode = objectMapper.createObjectNode();
            editorNode.put("id", "canvas");
            editorNode.put("resourceId", "canvas");

            ObjectNode stencilSetNode = objectMapper.createObjectNode();
            stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");

            editorNode.put("stencilset", stencilSetNode);

            ObjectNode modelObjectNode = objectMapper.createObjectNode();
            modelObjectNode.put(MODEL_NAME, name);
            modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
            description = StringUtils.defaultString(description);
            modelObjectNode.put(MODEL_DESCRIPTION, description);

            Model newModel = repositoryService.newModel();
            newModel.setMetaInfo(modelObjectNode.toString());
            newModel.setName(name);
            newModel.setKey(StringUtils.defaultString(key));

            repositoryService.saveModel(newModel);
            repositoryService.addModelEditorSource(newModel.getId(), editorNode.toString().getBytes("utf-8"));

            System.out.println("生成的moduleId:"+newModel.getId());

        } catch (Exception e) {

        }
    }
}

 我们查看一下 act_re_model 表,会看到刚才创建的流程

4.2 再次访问

这次访问:http://localhost:8080/modeler/modeler.html?modelId=1, 这次就显示正常了。接下来我们就可以绘制流程图了。

注意:这个modelId参数是必须的,否则modeler的组件无法显示。

SpringBoot 整合activiti7 二次开发_ActivitiModeler_16

如果出现访问404 ,请查看一下以下文件目录,static和modeler是有层级关系的,如果目录显示static.modeler则会404。

SpringBoot 整合activiti7 二次开发_流程设计_17