flow chart support display condition_expression; doc update

blackholll · May 7, 2019 · 10d93ab · 10d93ab
1 parent 6195c13
commit 10d93ab
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ LOONFLOW 分为两部分:
 ## 效果图/动画
 loonflow只提供后端调用api和工作流的配置后台，感谢youshutong2080(使用vue.js)
 [shutongFlow](https://github.com/youshutong2080/shutongFlow) 和jimmy201602(使用bootstrap,  [workflowdemo](https://github.com/jimmy201602/workflowdemo)
-分别帮忙写的一个调用方demo,当前调用方demo功能还比较简陋,欢迎大家在使用过程中提pr.下面是效果图和动画
+分别帮忙写的一个调用方demo,**==当前调用方demo功能还比较简单,仅供参考,不建议直接用于生产==** ,欢迎大家在使用过程中提pr优化demo的功能.下面是效果图和动画
 
 #### vue版本demo
 ![create_ticket](/docs/images/create-ticket.png)

diff --git a/templates/workflow/flow_chart.html b/templates/workflow/flow_chart.html
@@ -110,7 +110,25 @@ <h1 id='h1'></h1>
                 if (result.code === 0) {
                   transition_list = result.data.value;
                   transition_list.forEach(function(transition0){
-                    g.setEdge(transition0.source_state_id, transition0.destination_state_id, {label: transition0.name, curve: d3.curveBasis });
+                    if (transition0.condition_expression !== '[]'){
+                      //条件表达式逻辑，这里根据流转的源状态id+100000保证setnode时id不会出现与其他id重复
+                      g.setNode(transition0.source_state_id+100000, {label: "条件表达式", style: "fill: #afa", shape: "diamond", otherAttr:{type_id: 0}});
+                      g.setEdge(transition0.source_state_id, transition0.source_state_id+100000, {
+                        label: transition0.name,
+                        curve: d3.curveBasis
+                      });
+                      JSON.parse(transition0.condition_expression).forEach(function(condition_expression0){
+                        g.setEdge(transition0.source_state_id+100000, condition_expression0.target_state_id, {
+                        label: condition_expression0.expression,
+                        curve: d3.curveBasis
+                      });
+                      })
+                    }else {
+                      g.setEdge(transition0.source_state_id, transition0.destination_state_id, {
+                        label: transition0.name,
+                        curve: d3.curveBasis
+                      });
+                    }
                   })
                   // Create the renderer
                   var render = new dagreD3.render();