直播火了得有一陣子了重绷，最近“釘釘”移動辦公類APP熱潮也趕來了。 談到移動辦公OA，今天我想提一下其中最重要的一個部分 - “工作流引擎”奋渔。
Paste_Image.png
js工作流組件很多，但是要找一款適合自己的卻有點難壮啊，所以嫉鲸，咬咬牙，決定自己做一款歹啼。本著“不重復(fù)造輪子”的原則玄渗，我打算還是基于gojs封裝流程圖組件比較現(xiàn)實一點。先給大家看一下俺的成果：
在線Demo http://demo.e5j.net/flowdiagram/site/samples/_demo.html
希望支持FlowDiagram的童鞋能夠到Github給我們一個star https://github.com/mengmakies/FlowDiagram
https://gitee.com/markies/FlowDiagram/
基于GOJS封裝的流程圖設(shè)計（展示）工具類狸眼，主要分為兩個工具類（FlowDesigner和FlowDisplay）藤树。
流程圖設(shè)計 (FlowDesigner)
流程設(shè)計器操作指南:
- 在任意位置雙擊設(shè)計器空白處，新建步驟拓萌；
- 選中步驟岁钓，單擊右鍵，彈出右鍵菜單；
- 鼠標(biāo)滑過步驟屡限，顯示連接點品嚣，拖動連接點即可創(chuàng)建新的連接線；
- 鼠標(biāo)滑過步驟：顯示tooltip钧大。
流程圖展示 (FlowDisplay)
工具庫依賴于go.js翰撑、jquery以及l(fā)ayer.js
流程圖數(shù)據(jù)
{ "class": "go.GraphLinksModel",
"modelData": {"position":"-5 -5"},
"nodeDataArray": [
{"key":"1", "text":"開始", "figure":"Circle", "fill":"#4fba4f", "stepType":1, "loc":"90 110"},
{"key":"2", "text":"結(jié)束", "figure":"Circle", "fill":"#CE0620", "stepType":4, "loc":"770 110"},
{"key":"3", "text":"填寫請假信息 ", "loc":"210 110", "remark":""},
{"key":"4", "text":"部門經(jīng)理審核 ", "loc":"370 110", "remark":""},
{"key":"5", "text":"人事審核 ", "loc":"640 110", "remark":""},
{"key":"6", "text":"副總經(jīng)理審核 ", "loc":"510 40", "remark":""},
{"key":"7", "text":"總經(jīng)理審核 ", "loc":"500 180", "remark":""} ],
"linkDataArray": [
{"from":"1", "to":"3"},
{"from":"3", "to":"4"},
{"from":"4", "to":"5"},
{"from":"5", "to":"2"},
{"from":"4", "to":"6", "key":"1001", "text":"小于5天 ", "remark":"", "condition":"Days<5"},
{"from":"6", "to":"5"},
{"from":"4", "to":"7", "key":"1002", "text":"大于5天 ", "remark":"", "condition":"Days>5"},
{"from":"7", "to":"5"}
]}
使用方法
1. 引入js庫文件
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="js/layer/layer.js"></script><!--彈出框、提示tip-->
<script src="go.js"></script>
<script src="js/flow-desinger.js"></script><!--流程圖設(shè)計器-->
<script src="js/flow-display.js"></script><!--流程圖展示-->
2. 流程圖設(shè)計 flow-desinger.js
var areaFlow = document.getElementById('mySavedModel');
var myDesigner= new FlowDesigner('myFlowDesignerDiv');// 流程圖設(shè)計器
myDesigner.initToolbar('myPaletteDiv');// 初始化控件面板
myDesigner.displayFlow(areaFlow.value);// 在設(shè)計面板中顯示流程圖
3.流程圖展示 flow-display.js
var areaFlow = document.getElementById('mySavedModel');
var myDisplay = new FlowDisplay('myDisplayDiv');// 流程圖顯示器
var flowPath = '3,4,6,5';// 流程路徑拓型。3,4,6,5是步驟的id额嘿，最后一個步驟為"待處理"或"已完成"的步驟
var isCompleted = false;// "待處理"或"已結(jié)束"
myDisplay.loadFlow(areaFlow.value);// 顯示流程圖
myDisplay.animateFlowPath(flowPath, isCompleted);// 動畫顯示流程路徑
詳細(xì)代碼請參考目錄下的html文件：
/gojs1.6.10/site/samples/_demo.html
http://git.oschina.net/markies/FlowDiagram/raw/master/gojs1.6.10/site/samples/_demo.html
