项目集成flowable有段时间了，发现行业的流程业务全是一条直线加3，4个人工审核的节点，并没有分支网关等其它节点。因此原来用的model设计器组件多参数复杂，客户现场的体验不是很好。所以根据现场的实际业务自己调api的方式实现个简单的流程设计器。
最终的实现的效果是由开始节点[StartEvent]和结束结点[EndEvent]及用户任务节点[UserTask]组成的直线审核流程，并兼容用原生的流程设计器打开编辑。最终的效果如下图所示：
最终的效果
前端界面设计介绍，用户界面可以增加节点，删除节点。对节点命名，定义节点的审核用户[普通用户或角色]，具体效果图如下所示：
用户界面
定义收集前端参数的对象，具体代码如下所示
@Data
public class ProcessParam {
//流程ID
private String modelId;
//流程定义key
private String key;
//流程名字
private String name;
//流程节点
private List<TaskParam> tasks;
//开始结点名称
private String startNodeName;
//结束节点名称
private String endNodeName;
}
@Data
public class TaskParam {
public TaskParam(){
}
public TaskParam(String name,String no,String userType,List<String> userOrRoleIds,String userOrRoleName){
this.name = name;
this.no = no;
this.userType = userType;
this.userOrRoleIds = userOrRoleIds;
this.userOrRoleName = userOrRoleName;
}
//节点名称
private String name;
//节点编号
private String no;
//审核用户类型 用户(user)或角色(role)
private String userType;
//审核用户或角色id
private List<String> userOrRoleIds;
//用户或角色名称
private String userOrRoleName;
}
保存流程设计器的数据，具体的代妈如下：
大体思路是，构建一个BpmnModel对象，构建出各节点对象并设置好相关的参数，如名称，编号，审核人等，用SequenceFlow对象按顺序连接各节点对象，特别注意要设置各节点对象的outgoing属性网上很多教程没有提到这个，不设置会导致连接不正确。最后用BpmnAutoLayout对象自动设置好节点的坐标信息，不然也会导致流程在原生设计器显示不正常。
public void saveModelData(ProcessParam processParam){
Model model = modelService.getModel(processParam.getModelId());
Process process = new Process();
process.setId(model.getKey());
process.setName(model.getName());
BpmnModel bpmnModelNew = new BpmnModel();
bpmnModelNew.addProcess(process);
List<TaskParam> nodeList = processParam.getTasks();
//开始事件
StartEvent startEvent = new StartEvent();
startEvent.setId("start");
startEvent.setName(processParam.getStartNodeName());
process.addFlowElement(startEvent);
FlowElement waitNode = startEvent;
int i = 0;
for ( ;i < nodeList.size(); i++) {
TaskParam taskParam = nodeList.get(i);
UserTask userTask = new UserTask();
userTask.setId((i+1)+"");
userTask.setName(taskParam.getName());
if("user".equals(taskParam.getUserType())){
userTask.setCandidateUsers(taskParam.getUserOrRoleIds());
}
if("role".equals(taskParam.getUserType())){
userTask.setCandidateGroups(taskParam.getUserOrRoleIds());
}
process.addFlowElement(userTask);
SequenceFlow sequenceFlow = new SequenceFlow(waitNode.getId(), userTask.getId());
process.addFlowElement(sequenceFlow);
//设置当前节点的出口这个很关键，不设置这个的话生的流程图会错乱，网上很多教程也没有提到
if(i==0){
((StartEvent) waitNode).setOutgoingFlows(ListUtil.toList(sequenceFlow));
}else {
((UserTask) waitNode).setOutgoingFlows(ListUtil.toList(sequenceFlow));
}
waitNode = userTask;
}
//结束事件
EndEvent completeEvent = new EndEvent();
completeEvent.setId("complete");
completeEvent.setName(processParam.getEndNodeName());
process.addFlowElement(completeEvent);
SequenceFlow endSequenceFlow = new SequenceFlow(waitNode.getId(), completeEvent.getId());
((UserTask) waitNode).setOutgoingFlows(ListUtil.toList(endSequenceFlow));
process.addFlowElement(endSequenceFlow);
//这句很关键让程序自动部局各节点的位置，网上很多教程没有提到
new BpmnAutoLayout(bpmnModelNew).execute();
//把BpmnModel转成json格式进行保存
BpmnJsonConverter jsonConverter = new BpmnJsonConverter();
ObjectNode jsonNode = jsonConverter.convertToJson(bpmnModelNew);
modelService.saveModel(model.getId(),model.getName(),model.getKey(),model.getDescription(),jsonNode.toString(),true,"",new UserWf());
}
从数据库获取流程设计数据给到前端，具体代码如下：
大体思路是：调用api获取model对象，从model对象获取流程的json字符串然后用工具类转成BpmnModel对象，然后根据他们的关系生成ProcessParam对象传到前端去。
public ProcessParam getModelData(String modelId){
ProcessParam processParam = new ProcessParam();
List<TaskParam> tasks = new ArrayList<>();
processParam.setTasks(tasks);
Model model = modelService.getModel(modelId);
processParam.setModelId(model.getId());
processParam.setKey(model.getKey());
processParam.setName(model.getName());
//获取流程设计器的json数据
String modelEditorJson = model.getModelEditorJson();
ObjectNode editorJsonNode = null;
try {
editorJsonNode = (ObjectNode) objectMapper.readTree(modelEditorJson);
} catch (IOException e) {
e.printStackTrace();
return processParam;
}
BpmnJsonConverter jsonConverter = new BpmnJsonConverter();
//把json转成bpmnModel对象
BpmnModel bpmnModel = jsonConverter.convertToBpmnModel(editorJsonNode);
Process process = bpmnModel.getMainProcess();
Map<String,FlowElement> allNode = process.getFlowElementMap();
if(allNode==null||allNode.size()<1){//没有节点信息直接返回
return processParam;
}
List<StartEvent> startEventList = process.findFlowElementsOfType(StartEvent.class);
StartEvent startEvent = startEventList.get(0);
processParam.setStartNodeName(startEvent.getName());
String nextNodeId = startEvent.getOutgoingFlows().get(0).getTargetRef();
while (allNode.get(nextNodeId)!=null){
FlowElement fe = allNode.get(nextNodeId);
if(fe instanceof UserTask){
UserTask userTask = (UserTask) fe;
List<String> userOrRoleIds = null;
String userOrRoleInfo = "";
String userType = null;
if(StrUtil.isNotBlank(userTask.getAssignee())){
userOrRoleIds = ListUtil.toList(userTask.getAssignee());
userType = "user";
}
if(userTask.getCandidateUsers()!=null&&userTask.getCandidateUsers().size()>0){
userOrRoleIds = userTask.getCandidateUsers();
userType = "user";
}
if(userTask.getCandidateGroups()!=null&&userTask.getCandidateGroups().size()>0){
userOrRoleIds = userTask.getCandidateGroups();
userType = "role";
}
//查询用户或角色名称
if ("user".equals(userType)) {
userOrRoleInfo = this.getUserInfo(userOrRoleIds);
}
if ("role".equals(userType)) {
userOrRoleInfo = this.getRoleInfo(userOrRoleIds);
}
if(userTask.getOutgoingFlows().size()>1){
throw new RuntimeException("不支持多个分支流程数据，请使用高级流程设计器");
}
tasks.add(new TaskParam(userTask.getName(),userTask.getId(),userType,userOrRoleIds,userOrRoleInfo));
nextNodeId = userTask.getOutgoingFlows().get(0).getTargetRef();
}else if(fe instanceof EndEvent){
EndEvent endEvent = (EndEvent) fe;
processParam.setEndNodeName(endEvent.getName());
nextNodeId = "";
break;
}else {
throw new RuntimeException("不支持当前流程数据，请使用高级流程设计器");
}
}
return processParam;
}
