仿釘釘流程輕松實現JSON轉BPMN完整實現過程示例
更新時間：2023年08月18日 09:24:39 作者：pq217
這篇文章主要為大家介紹了仿釘釘流程輕松實現JSON轉BPMN完整實現過程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
前言
寫過工作流都會遇到這樣的難題，希望流程的設計可以類似釘釘一樣簡單明了，而不是超級不有好的bpmn設計器，上網大概搜了一下實現方案，前端仿釘釘設計器一大堆，例如wflow，smart-flow-design，參照這些源碼前端設計器不成問題
問題在于這樣的設計器數據是json格式，不符合bpmn協議，就無法和activiti，flowable等工作流直接對接
如果自己開發(fā)工作流引擎，但開發(fā)成本肯定比較大，所以還是希望能實現自定義的json和xml可以轉換
方案
轉換這個活可以前端干，也可以后端干，如果前端干可以使用bpmn-moddle，bpmn.js就是使用它生成的xml，但大概看了一下發(fā)現文檔稀缺，使用很起來很難
最終決定使用java轉換，因為發(fā)現activiti包中的BpmnModel可以很輕松畫出xml，而且基本不用看文檔，.方法名基本就能和bpmn協議對上號
json協議
前后端使用json來表達流程設計，那一定要訂一套自己的協議，大概按照smart-flow-design寫一個簡版的
smart-flow-design
{
"id": "節(jié)點id",
"name": "節(jié)點名稱",
"type": "申請節(jié)點/審核節(jié)點/分支節(jié)點/抄送節(jié)點",
"next": "下一節(jié)點",
"exclusive": [// 排他條件
{
// 條件
"condition": "條件表達式",
//分支節(jié)點內部流程
"process": {}
}
],
// 委派人
"assignee": {
"users": [],
"multiMode": "會簽/順序審批"
},
// 表單權限
"formPerms": [
{
"key": "字段key",
"perm": "權限類型 編輯/只讀/隱藏",
"required": true
}
]
}節(jié)點類型簡單實現幾個：申請節(jié)點/審核節(jié)點/分支節(jié)點/抄送節(jié)點
通過next指向下一節(jié)點，實現一個鏈表結構
如一個簡單的流程設計如下
簡單工作流
對應的json數據如下
{
"id": "1",
"name": "申請節(jié)點",
"type": "ROOT",
"next": {
"id": "2",
"name": "審批節(jié)點",
"type": "APPROVAL",
"next": {
"id": "3",
"name": "抄送節(jié)點",
"type": "CC"
}
}
}帶分支的設計如下
分支工作流
對應的json:
{
"id": "1",
"name": "申請節(jié)點",
"type": "ROOT",
"next": {
"id": "2",
"name": "條件節(jié)點",
"type": "EXCLUSIVE",
"exclusive": [
{
"condition": "amount>=100"
},
{
"condition": "amount<100",
"process": {
"id": "4",
"name": "審批人1",
"type": "APPROVAL",
"next": null
}
}
],
"next": {
"id": "3",
"name": "審批人2",
"type": "APPROVAL"
}
}
}基本上這個json數據結構就足夠標識很多場景了，分支條件可以自己再寫復雜一點，如果需要擴展新增屬性即可
java
java 創(chuàng)建一些實體來接受json，很簡單就不詳細寫了，大概如下
@Data
public class ProcessNode {
@ApiModelProperty(value = "節(jié)點ID")
private String id;
@ApiModelProperty(value = "節(jié)點名稱")
private String name;
@ApiModelProperty(value = "節(jié)點類型")
private String type;
@ApiModelProperty(value = "下一節(jié)點")
private ProcessNode next;
@ApiModelProperty(value = "分支")
private List<ExclusiveBranch> exclusive;
@ApiModelProperty(value = "委托人")
private Assignee assignee;
@ApiModelProperty(value = "表單權限")
private List<FormPerm> formPerms;
}
@Data
public class ExclusiveBranch {
@ApiModelProperty(value = "id")
private String id;
@ApiModelProperty(value = "分支條件")
private String condition;
@ApiModelProperty(value = "分支內部流程")
private ProcessNode process;
}
@Data
public class Assignee {
@ApiModelProperty(value = "委托人列表")
private List<String> users;
@ApiModelProperty(value = "多人審批方式")
private String multiMode;
}在controller使用@RequestBody接受一下前端傳來的json即可
轉BPMN
接下來就把這個java實體轉成xml，引入今天的主角：BpmnModel
引入依賴
<dependency>
<groupId>org.activiti</groupId>
<artifactId>activiti-bpmn-model</artifactId>
<version>7.1.0.M1</version>
</dependency>即可開始使用BpmnModel開始繪制bpmn協議的工作流
初始化
首先準備工作流
BpmnModel model = new BpmnModel();
Process process = new Process();
model.addProcess(process);
process.setId("Process_"+UUID.randomUUID());
process.setExecutable(true);其中process就相當于我們的圖紙，后續(xù)工作就是往這個圖紙上畫節(jié)點和線
繪制開始結束
由于json協議中不包含開始結束節(jié)點，所以首先要繪制出兩個節(jié)點
開始節(jié)點
// 新建開始節(jié)點
StartEvent startEvent = new StartEvent();
startEvent.setId("_start");
// 繪制到圖紙
process.addFlowElement(startEvent)
結束節(jié)點
// 新建結束節(jié)點
EndEvent endEvent = new EndEvent();
endEvent.setId("_end");
// 繪制到圖紙
process.addFlowElement(endEvent)
到此兩個節(jié)點就畫出來了，但是還沒有任何線
繪制bpmn
接下來就根據json的節(jié)點來繪制bpmn節(jié)點，同時還要考慮線的繪制節(jié)點的連接線
json協議中是next指向下一節(jié)點，所以繪制節(jié)點的方法一定是要使用遞歸的畫法，為了處理畫線問題，可以在繪制方法中添加兩個參數preId(上一節(jié)點ID)和endId(結束節(jié)點ID)
這樣邏輯為如下：
- 繪制bpmn節(jié)點
- 繪制上一節(jié)點與當前節(jié)點的連線
- 如果有next，遞歸繪制下一節(jié)點
- 如果沒有next，繪制當前節(jié)點與結束節(jié)點的連接線
考慮到上一根線可能有條件，所以再加入參數preExpression(上一根線的條件)，最終方法如下
/**
* 繪制節(jié)點
* @param process bpmn process 圖紙
* @param node json的節(jié)點
* @param preId 上一節(jié)點id
* @param endId 結束節(jié)點
* @param preExpression 上一節(jié)點表達式
*/
public void drawNode(Process process, ProcessNode node, String preId, String endId, String preExpression) {
// 根據type繪制不同種類的節(jié)點
Inout inout = drawNodeByType(process, node);
// 繪制前一根線
process.addFlowElement(createSequenceFlow(preId, inout.getIn(), preExpression));
if (node.getNext() == null) {
// 沒有下一步，繪制指向結束的線
process.addFlowElement(createSequenceFlow(inout.getOut(), endId, null));
} else {
// 有下一步，遞歸繪制下一個節(jié)點
drawNode(process, node.getNext(), inout.getOut(), endId, null);
}
}其中drawNodeByType(process, node)方法根據不同的種類畫不通過的節(jié)點，反回是一個Inout
@Data
@AllArgsConstructor
public class Inout {
private String in;
private String out;
}
代表進入節(jié)點的id和出節(jié)點的id，這是因為json的節(jié)點和bpmn的節(jié)點不是一一對應的，普通的審核節(jié)點，in和out都是審核節(jié)點id，而如果是分支節(jié)點，in代表分支的開始網關id，out代表分支結束網關的id，接下來分別以兩種節(jié)點類型舉例來實現
/**
* 繪制不同種類節(jié)點
* @param process
* @param node
* @return
*/
private Inout drawNodeByType(Process process, ProcessNode node) {
if (node.getType().equals("審核節(jié)點")) {
return drawAuditNode(process, node);
} else if (node.getType().equals("分支節(jié)點")) {
return drawExclusiveNode(process, node);
} else {
throw new IllegalArgumentException();
}
}審核節(jié)點
/**
* 繪制審核節(jié)點
* @param process
* @param node
* @return
*/
private Inout drawAuditNode(Process process, ProcessNode node) {
// 繪制節(jié)點
String id = "Node_"+UUID.randomUUID();
UserTask userTask = new UserTask();
userTask.setId(id);
userTask.setName(node.getName());
// 設置多實例
userTask.setAssignee("${user}");
MultiInstanceLoopCharacteristics multiInstanceLoopCharacteristics = new MultiInstanceLoopCharacteristics();
if (node.getAssignee().getMultiMode().equals("順序審批")) {
multiInstanceLoopCharacteristics.setSequential(true);
}
multiInstanceLoopCharacteristics.setElementVariable("user");
// 完成條件
multiInstanceLoopCharacteristics.setCompletionCondition("${nrOfInstances == nrOfCompletedInstances}");
multiInstanceLoopCharacteristics.setInputDataItem("${users}");
userTask.setLoopCharacteristics(multiInstanceLoopCharacteristics);
// 保存json節(jié)點配置到擴展屬性
Map<String, Object> extensions = new HashMap<>();
extensions.put("node", node);
BpmnUtil.addExtensionProperty(userTask, extensions);
// 只有一個節(jié)點，in&out相同
return new Inout(id, id);
}分支節(jié)點
/**
* 繪制分支節(jié)點
* @param process
* @param node
* @return
*/
private Inout drawExclusiveNode(Process process, ProcessNode node) {
// 開始網關
String startId = "Exclusive_"+UUID.randomUUID();
ExclusiveGateway startGateway = new ExclusiveGateway();
startGateway.setId(startId);
process.addFlowElement(startGateway);
// 結束網關
String endId = "Exclusive_"+UUID.randomUUID();
ExclusiveGateway endGateway = new ExclusiveGateway();
endGateway.setId(endId);
process.addFlowElement(endGateway);
// 繪制分支
List<ExclusiveBranch> branches = node.getExclusive();
for (ExclusiveBranch branch : branches) {
String expression = branch.getCondition();
if (branch.getProcess()==null) {
// 沒有子流程，直接繪制結束線
process.addFlowElement(createSequenceFlow(startId, endId, expression));
} else {
// 有子流程，遞歸繪制子流程
drawNode(process, branch.getProcess(), startId, endId, expression);
}
}
// int和out不一樣
return new Inout(startId, endId);
}
注意：繪制分支時如果有子流程，又回調用了drawNode，這是preId為開始網關id，endId是結束網關id，并且攜帶了表達式
其他類型的節(jié)點都類似，很簡單，不寫了
bpmn繪制完了，如果使用activiti就可以直接部署B(yǎng)pmnModel對象了
Deployment deployment = repositoryService
.createDeployment()
.addBpmnModel("test", bpmnModel)
.deploy();
自動布局
如果要轉換xml，上面的bpmnModel只有節(jié)點和線，并沒有布局，可以使用第三方輕松布局
<dependency>
<groupId>org.activiti</groupId>
<artifactId>activiti-bpmn-layout</artifactId>
<version>7.1.0.M1</version>
<scope>compile</scope>
</dependency>代碼一行就夠了
// 四.自動布局 new BpmnAutoLayout(bpmnModel).execute();
轉xml
如果想把BpmnModel轉換為xml，也很簡單，引入依賴
<dependency>
<groupId>org.activiti</groupId>
<artifactId>activiti-bpmn-converter</artifactId>
<version>7.1.0.M1</version>
</dependency>轉換代碼
// 五.轉xml
BpmnXMLConverter bpmnXMLConverter=new BpmnXMLConverter();
byte[] convertToXML = bpmnXMLConverter.convertToXML(bpmnModel);
String xml=new String(convertToXML);
xml = xml.replaceAll("<","<").replaceAll(">",">");最終
貼一下完整實例代碼(代碼只是簡版，只為提供思路
/**
* @Author pq
* @Date 2022/10/20 10:58
* @Description
*/
@SuppressWarnings("ALL")
public class BpmnConvert {
public String toBpmn(ProcessNode node) {
// 一.準備工作
BpmnModel bpmnModel = new BpmnModel();
Process process = new Process(); // 相當于圖紙
bpmnModel.addProcess(process);
process.setId("Process_"+UUID.randomUUID());
process.setExecutable(true);
// 二.開始結束節(jié)點
StartEvent startEvent = new StartEvent();// 新建開始節(jié)點
startEvent.setId("_start");
process.addFlowElement(startEvent);// 繪制到圖紙
EndEvent endEvent = new EndEvent(); // 新建結束節(jié)點
endEvent.setId("_end");// 繪制到圖紙
process.addFlowElement(endEvent);
// 三.遞歸繪制節(jié)點
drawNode(process, node, "_start", "_end", null);
// 四.自動布局
new BpmnAutoLayout(bpmnModel).execute();
// 五.轉xml
BpmnXMLConverter bpmnXMLConverter=new BpmnXMLConverter();
byte[] convertToXML = bpmnXMLConverter.convertToXML(bpmnModel);
String xml=new String(convertToXML);
xml = xml.replaceAll("<","<").replaceAll(">",">");
return xml;
}
/**
* 繪制節(jié)點
* @param process bpmn process 圖紙
* @param node json的節(jié)點
* @param preId 上一節(jié)點id
* @param endId 結束節(jié)點
* @param preExpression 上一節(jié)點表達式
*/
public void drawNode(Process process, ProcessNode node, String preId, String endId, String preExpression) {
// 根據type繪制不同種類的節(jié)點
Inout inout = drawNodeByType(process, node);
// 繪制前一根線
process.addFlowElement(createSequenceFlow(preId, inout.getIn(), preExpression));
if (node.getNext() == null) {
// 沒有下一步, 繪制指向結束的線
process.addFlowElement(createSequenceFlow(inout.getOut(), endId, null));
} else {
// 有下一步, 遞歸繪制下一個節(jié)點
drawNode(process, node.getNext(), inout.getOut(), endId, null);
}
}
/**
* 繪制不同種類節(jié)點
* @param process
* @param node
* @return
*/
private Inout drawNodeByType(Process process, ProcessNode node) {
if (node.getType().equals("審核節(jié)點")) {
return drawAuditNode(process, node);
} else if (node.getType().equals("分支節(jié)點")) {
return drawExclusiveNode(process, node);
} else {
throw new IllegalArgumentException();
}
}
/**
* 繪制審核節(jié)點
* @param process
* @param node
* @return
*/
private Inout drawAuditNode(Process process, ProcessNode node) {
// 繪制節(jié)點
String id = "Node_"+UUID.randomUUID();
UserTask userTask = new UserTask();
userTask.setId(id);
userTask.setName(node.getName());
// 設置多實例
userTask.setAssignee("${user}");
MultiInstanceLoopCharacteristics multiInstanceLoopCharacteristics = new MultiInstanceLoopCharacteristics();
if (node.getAssignee().getMultiMode().equals("順序審批")) {
multiInstanceLoopCharacteristics.setSequential(true);
}
multiInstanceLoopCharacteristics.setElementVariable("user");
// 完成條件
multiInstanceLoopCharacteristics.setCompletionCondition("${nrOfInstances == nrOfCompletedInstances}");
multiInstanceLoopCharacteristics.setInputDataItem("${users}");
userTask.setLoopCharacteristics(multiInstanceLoopCharacteristics);
// 保存json節(jié)點配置到擴展屬性
Map<String, Object> extensions = new HashMap<>();
extensions.put("node", node);
BpmnUtil.addExtensionProperty(userTask, extensions);
return new Inout(id, id);
}
/**
* 繪制分支節(jié)點
* @param process
* @param node
* @return
*/
private Inout drawExclusiveNode(Process process, ProcessNode node) {
// 開始網關
String startId = "Exclusive_"+UUID.randomUUID();
ExclusiveGateway startGateway = new ExclusiveGateway();
startGateway.setId(startId);
process.addFlowElement(startGateway);
// 結束網關
String endId = "Exclusive_"+UUID.randomUUID();
ExclusiveGateway endGateway = new ExclusiveGateway();
endGateway.setId(endId);
process.addFlowElement(endGateway);
// 繪制分支
List<ExclusiveBranch> branches = node.getExclusive();
for (ExclusiveBranch branch : branches) {
String expression = branch.getCondition();
if (branch.getProcess()==null) {
// 沒有子流程，直接繪制結束線
process.addFlowElement(createSequenceFlow(startId, endId, expression));
} else {
// 有子流程，遞歸繪制子流程
drawNode(process, branch.getProcess(), startId, endId, expression);
}
}
// int和out不一樣
return new Inout(startId, endId);
}
/**
* 創(chuàng)建連線
* @param from
* @param to
* @return
*/
public SequenceFlow createSequenceFlow(String from, String to, String conditionExpression) {
SequenceFlow flow = new SequenceFlow();
flow.setId(from + "-" + to);
flow.setSourceRef(from);
flow.setTargetRef(to);
if (conditionExpression != null) {
flow.setConditionExpression(conditionExpression);
}
return flow;
}
}核心代碼真的沒幾行，細節(jié)自己完善即可
我自己做了個相對復雜的json，轉換為xml最終在bpmn.js展示效果如下
功能都沒大問題，就是自動布局的線有點扭曲
以上就是仿釘釘流程輕松實現JSON轉BPMN完整實現過程示例的詳細內容，更多關于仿釘釘流程JSON轉BPMN的資料請關注腳本之家其它相關文章！
相關文章
枚舉是 Java 中的一種特殊類型，它用于表示一組固定值，這篇文章就是來和大家講講枚舉的作用與具體使用，感興趣的小伙伴可以跟隨小編一起學習一下2023-06-06
本文探討了Java8中CompletableFuture的原理和應用,詳解其異步編程能力、工作機制及實際使用方法,CompletableFuture通過鏈式調用和狀態(tài)管理優(yōu)化異步任務,提高Java應用的效率和性能2024-09-09
這篇文章主要介紹了springboot之自動裝配全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Java使用Freemarker頁面靜態(tài)化生成的實現
這篇文章主要介紹了Java使用Freemarker頁面靜態(tài)化生成的實現，頁面靜態(tài)化是將原來的動態(tài)網頁改為通過靜態(tài)化技術生成的靜態(tài)網頁,FreeMarker?是一個用?Java?語言編寫的模板引擎，它基于模板來生成文本輸，更多相關內容需要的小伙伴可以參考一下2022-06-06
這篇文章主要給大家介紹了關于Spring的常用配置,文中通過示例代碼介紹的非常詳細,對大家學習或者使用springboot具有一定的參考學習價值,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了Java如何基于Graphics2D實現海報制作,并且支持自定義顏色,背景,logo,貼圖,感興趣的小伙伴可以了解一下2024-04-04
SpringBoot的自動裝配是它的一大特點，可以大大提高開發(fā)效率，減少重復性代碼的編寫。本文將詳細講解SpringBoot如何實現自動裝配,需要的朋友可以參考下2023-05-05
本篇文章是對jetty的使用進行了詳細的分析解釋。需要的朋友參考下2013-05-05
這篇文章主要介紹了@SelectProvider的使用方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
native是與C++聯合開發(fā)的時候用的！使用native關鍵字說明這個方法是原生函數，也就是這個方法是用C/C++語言實現的，并且被編譯成了DLL，由java去調用。本文給大家介紹java 中native方法使用，感興趣的朋友一起看看吧2020-09-09