一、简述
在上一章已经把怎么获取activiti表做了说明，下面我们来进行在线流程编辑器的整合。
Springboot2.0+gradle7.0+activiti6.0搭建后台在线流程编辑器——表生成
二、整合
1、需要整合的jar包在上一章的build.gradle文件里也有说明，我这里只贴出主要的jar包：
//项目中需要的依赖
dependencies {
implementation ('org.springframework.boot:spring-boot-starter-web'){
exclude group:'org.springframework.security',module:'spring-security-config'
}
implementation ('org.activiti:activiti-spring-boot-starter-basic:6.0.0'){
exclude group:'org.springframework.boot',module:'spring-boot-starter-actuator'
exclude group:'org.springframework.boot',module:'spring-boot-starter-web'
exclude group:'org.springframework.security',module:'spring-security-config'
}
implementation ('org.activiti:activiti-json-converter:6.0.0'){
exclude group:'org.activiti',module:'activiti-bpmn-model'
exclude group:'org.springframework.security',module:'spring-security-config'
}
implementation 'commons-io:commons-io:2.5'
implementation ('org.activiti:activiti-modeler:5.23.0'){
exclude group:'org.springframework.security',module:'spring-security-config'
}
implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:1.3.2'
implementation 'mysql:mysql-connector-java:8.0.17'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
testImplementation group: 'junit', name: 'junit', version: '4.11'
testImplementation 'org.junit.jupiter:junit-jupiter-api:5.6.0'
testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine'
}
2、在application.yml文件里配置activiti
#activiti 配置
activiti:
#自动部署验证设置:true-开启（默认）、false-关闭
check-process-definitions: false
# true activiti会对数据库中所有表进行更新操作。如果表不存在，则自动创建。（开发时常用）
#flase 默认值。activiti在启动时，会对比数据库表中保存的版本，如果没有表或者版本不匹配，将抛出异常。（生产环境常用）
#可以在创建好表后，将其设置为false
database-schema-update: true
#保存历史数据级别设置为full最高级别，便于历史数据的追溯
history-level: full
3、将源码包中的activiti-6/war/activiti-explorer.war解压，开始添加编辑器需要的文件以及后端代码：
将diagram-viewer、editor-app、modeler.html文件拷到自己项目里，同时在class文件夹下找到stencilset.json这个文件，拷到自己项目的resources下要和application.yml同级。
4、解压名为activiti-6\libs\activiti-modeler-6-sources.jar的jar包，我们还需要把ModelEditorJsonRestResource、ModelSaveRestResource、StencilsetRestResource这三个java类做支撑，
也要放到我们的项目里，包名位置自己定。
5、到这一步还没有完成，我们还需要修改下activiti的文件，把它自己配置的路径修改成我们自己的
1）修改app-cfg.js文件里的路径：
2）查看拷进来的三个java类的路径是否需要修改以及ModelSaveRestResource这个类的@Controller和获取参数的 @RequestParam这个注解(ps：如果你启动项目可以访问编辑页面，但是保存不成功，就需要看看这两处是不是需要修改）
6、到这一步，我们还需要一个Controller来进入编辑页面，也就是需要新建一个流程model，把它重定向到modeler.html页面：
@Controller
@RequestMapping("/myAct")
public class MyActController {
@Resource
private RepositoryService repositoryService;
@Resource
private ObjectMapper objectMapper;
@Resource
private RuntimeService runtimeService;
/**
* 新创建model
* @param request
* @param response
* @throws UnsupportedEncodingException
*/
@RequestMapping("/create")
public void newModel(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
try {
//创建一个新的model
Model model = repositoryService.newModel();
//设置默认参数
String name = "new-process";
String description="";
Integer revision = 1;
String key = "process";
//设置model 基本配置参数
ObjectNode modelNode = objectMapper.createObjectNode();
modelNode.put(ModelDataJsonConstants.MODEL_NAME,name);
modelNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION,description);
modelNode.put(ModelDataJsonConstants.MODEL_REVISION,revision);
model.setName(name);
model.setKey(key);
model.setMetaInfo(modelNode.toString());
//设置ModelEditorSource
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.set("stencilset",stencilSetNode);
//执行新增和创建编辑模型
repositoryService.saveModel(model);
repositoryService.addModelEditorSource(model.getId(),editorNode.toString().getBytes("utf-8"));
response.sendRedirect(request.getContextPath() + "/view/modeler.html?modelId=" + model.getId());
} catch (Exception e) {
e.printStackTrace();
}
}
7、启动项目就可以进入编辑页面了：
http://localhost:8080/act/myAct/create
8、我们创建流程保存后还需要发布和启动，发布（部署）过的流程启动了才能用，在启动的时候我们可以绑定自己的表单用来进行数据审批等，这个可以根据自身情况进行编写。
/**
* 部署（发布）流程
* @param modelId
* @return
*/
@RequestMapping(value = "deploy/{modelId}")
@ResponseBody
public String deploy(@PathVariable("modelId") String modelId){
try {
//获取model
Model modelData= repositoryService.getModel(modelId);
//获取模型编辑后的数据信息
ObjectNode objectNode = (ObjectNode) new ObjectMapper().readTree(repositoryService.getModelEditorSource(modelData.getId()));
//根据编辑后的数据信息创建bpmn文件模板
BpmnModel bpmnModel = new BpmnJsonConverter().convertToBpmnModel(objectNode);
byte[] bpmnBytes = new BpmnXMLConverter().convertToXML(bpmnModel);
String processName = modelData.getName()+".bpmn20.xml";
//部署
Deployment deployment = repositoryService.createDeployment().name(modelData.getName())
.addString(processName,new String(bpmnBytes,"UTF-8"))
.deploy();
return "流程部署成功，部署ID= " + deployment.getId();
} catch (IOException e) {
e.printStackTrace();
return "部署流程失败！流程图错误";
}
}
/**
* 启动流程
*/
@RequestMapping(value = "start/{modelId}")
@ResponseBody
public String start(@PathVariable("modelId") String modelId){
try {
runtimeService.startProcessInstanceById(modelId);
Long count = runtimeService.createProcessInstanceQuery().count();
System.out.println("流程实例数量为：" + count);
} catch (Exception e) {
e.printStackTrace();
System.out.println("流程启动失败");
}
return "流程启动成功";
}
这里基本就完成了，可以看到我的编辑器页面是汉化过的，如果想汉化请点击：activiti在线编辑器汉化