From 10d93abd074ff7c2b6247010701d0463518d5e6d Mon Sep 17 00:00:00 2001 From: blackholll Date: Wed, 8 May 2019 00:07:10 +0800 Subject: [PATCH] flow chart support display condition_expression; doc update --- README.md | 2 +- templates/workflow/flow_chart.html | 20 +++++++++++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0d8ffb9e..ddc06a6d 100644 --- 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 index f5460346..b15b18a3 100644 --- a/templates/workflow/flow_chart.html +++ b/templates/workflow/flow_chart.html @@ -110,7 +110,25 @@

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();