"釘釘"OA后台最方便的流程圖js組件

來源於  https://www.jianshu.com/p/ebeb34687ac1

 

直播火了得有一陣子了，最近“釘釘”移動辦公類APP熱潮也趕來了。 談到移動辦公OA，今天我想提一下其中最重要的一個部分 - “工作流引擎”。

 

Paste_Image.png

js工作流組件很多，但是要找一款適合自己的卻有點難，所以，咬咬牙，決定自己做一款。本着“不重復造輪子”的原則，我打算還是基於gojs封裝流程圖組件比較現實一點。先給大家看一下俺的成果：

在線Demo http://www.c3dn.net/gojs/samples/demo.html

希望支持FlowDiagram的童鞋能夠到Github給我們一個star https://github.com/mengmakies/FlowDiagram
https://gitee.com/markies/FlowDiagram/

---

基於GOJS封裝的流程圖設計（展示）工具類，主要分為兩個工具類（FlowDesigner和FlowDisplay）。

 

流程圖設計 (FlowDesigner)

流程設計器操作指南:

1. 在任意位置雙擊設計器空白處，新建步驟；
2. 選中步驟，單擊右鍵，彈出右鍵菜單；
3. 鼠標滑過步驟，顯示連接點，拖動連接點即可創建新的連接線；
4. 鼠標滑過步驟：顯示tooltip。

 

流程圖展示 (FlowDisplay)

工具庫依賴於go.js、jquery以及layer.js

• http://gojs.net/
• http://jquery.com/
• http://layer.layui.com/

流程圖數據

{ "class": "go.GraphLinksModel", "modelData": {"position":"-5 -5"}, "nodeDataArray": [ {"key":"1", "text":"開始", "figure":"Circle", "fill":"#4fba4f", "stepType":1, "loc":"90 110"}, {"key":"2", "text":"結束", "figure":"Circle", "fill":"#CE0620", "stepType":4, "loc":"770 110"}, {"key":"3", "text":"填寫請假信息 ", "loc":"210 110", "remark":""}, {"key":"4", "text":"部門經理審核 ", "loc":"370 110", "remark":""}, {"key":"5", "text":"人事審核 ", "loc":"640 110", "remark":""}, {"key":"6", "text":"副總經理審核 ", "loc":"510 40", "remark":""}, {"key":"7", "text":"總經理審核 ", "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><!--流程圖設計器--> <script src="js/flow-display.js"></script><!--流程圖展示--> 

2. 流程圖設計 flow-desinger.js

    var areaFlow = document.getElementById('mySavedModel'); var myDesigner= new FlowDesigner('myFlowDesignerDiv');// 流程圖設計器 myDesigner.initToolbar('myPaletteDiv');// 初始化控件面板 myDesigner.displayFlow(areaFlow.value);// 在設計面板中顯示流程圖 

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;// "待處理"或"已結束" myDisplay.loadFlow(areaFlow.value);// 顯示流程圖 myDisplay.animateFlowPath(flowPath, isCompleted);// 動畫顯示流程路徑 

詳細代碼請參考目錄下的html文件：
/gojs1.6.10/site/samples/_demo.html
http://git.oschina.net/markies/FlowDiagram/raw/master/gojs1.6.10/site/samples/_demo.html

Github地址：https://github.com/mengmakies/FlowDiagram

作者：江南孤鶩
鏈接：https://www.jianshu.com/p/ebeb34687ac1
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。