框架中需要整合流程設計，選擇了流程設計器GooFlow作為Web端的UI組件
GooFlow下載地址：
提取碼：wucr
參考示例源碼如下：
頂部有保存，撤銷，重做的按鈕，可以綁定自定義事件。
左側工具欄，提供基本的流程節點和按鈕，也支持自定義。
導出結果，把流程設計器頁面的數據已json格式顯示出來
集成后效果如下圖：
主要實現以下功能，點擊節點，可以修改節點ID，節點名稱；點擊自動節點，可以給該節點增加或移除審批人；點擊確認保存流程圖json結果。
數據表設計：
（1）流程實例表
WF_Instance，流程發起產生一條記錄，記錄當前節點Id和下一個節點Id,當下一節點為結束
1 /// <summary> 2 /// 流程實例表 3 /// </summary> 4 public class WF_Instance : CoreBaseEntity 5 { 6 /// <summary> 7 ///是否結束 8 /// </summary> 9 [Display(Name = "是否結束")] 10 [Description("是否結束")] 11 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 12 public TrueOrFlase IsFinished { get; set; } 13 /// <summary> 14 /// 下一個節點ID 15 /// </summary> 16 [Display(Name = "下一個節點ID")] 17 [Description("下一個節點ID")] 18 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 19 public string NextNodeID { get; set; } 20 /// <summary> 21 /// 當前節點ID 22 /// </summary> 23 [Display(Name = "當前節點ID")] 24 [Description("當前節點ID")] 25 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 26 public string CurrentNodeID { get; set; } 27 /// <summary> 28 /// F_InstanceId 29 /// </summary> 30 [Display(Name = "F_InstanceId")] 31 [Description("F_InstanceId")] 32 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 33 public string F_InstanceId { get; set; } 34 /// <summary> 35 /// CurrentNode 36 /// </summary> 37 [Display(Name = "當前節點名稱")] 38 [Description("當前節點名稱")] 39 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 40 public string CurrentNode { get; set; } 41 /// <summary> 42 /// F_SchemeId 43 /// </summary> 44 [Display(Name = "流程模板ID")] 45 [Description("流程模板ID")] 46 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 47 public string F_SchemeId { get; set; } 48 /// <summary> 49 /// OutCode 50 /// </summary> 51 [Display(Name = "訂單編號")] 52 [Description("訂單編號")] 53 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 54 public string OutCode { get; set; } 55 /// <summary> 56 /// NextNode 57 /// </summary> 58 [Display(Name = "下一個節點名稱")] 59 [Description("下一個節點名稱")] 60 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 61 public string NextNode { get; set; } 62 }
（2）流程節點表
WF_Instance_Node
1 public class WF_Instance_Node : CoreBaseEntity 2 { 3 /// <summary> 4 /// F_InstanceNodeID 5 /// </summary> 6 [Display(Name = "F_InstanceNodeID")] 7 [Description("F_InstanceNodeID")] 8 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 9 public string F_InstanceNodeID { get; set; } 10 /// <summary> 11 /// 上一個節點名稱 12 /// </summary> 13 [Display(Name = "上一個節點名稱")] 14 [Description("上一個節點名稱")] 15 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 16 public string BeforeNode { get; set; } 17 /// <summary> 18 /// 當前節點名稱 19 /// </summary> 20 [Display(Name = "當前節點名稱")] 21 [Description("當前節點名稱")] 22 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 23 public string CurrentNode { get; set; } 24 25 /// <summary> 26 /// 下個節點 27 /// </summary> 28 [Display(Name = "下個節點")] 29 [Description("下個節點")] 30 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 31 public string NextNode { get; set; } 32 /// <summary> 33 /// 上一個節點名稱 34 /// </summary> 35 [Display(Name = "上一個節點名稱")] 36 [Description("上一個節點名稱")] 37 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 38 public string BeforeNodeId { get; set; } 39 /// <summary> 40 /// 當前節點名稱 41 /// </summary> 42 [Display(Name = "當前節點名稱")] 43 [Description("當前節點名稱")] 44 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 45 public string CurrentNodeId { get; set; } 46 /// <summary> 47 /// 下個節點 48 /// </summary> 49 [Display(Name = "下個節點")] 50 [Description("下個節點")] 51 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 52 public string NextNodeId { get; set; } 53 /// <summary> 54 /// IsFinish 55 /// </summary> 56 [Display(Name = "IsFinish")] 57 [Description("IsFinish")] 58 public TrueOrFlase IsFinish { get; set; } 59 /// <summary> 60 /// F_InstanceId 61 /// </summary> 62 [Display(Name = "F_InstanceId")] 63 [Description("F_InstanceId")] 64 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 65 public string F_InstanceId { get; set; } 66 }
生成的Json格式：
1 { 2 "title": "newFlow_1", 3 "nodes": { 4 "demo_node_1": { 5 "name": "開始", 6 "left": 42, 7 "top": 38, 8 "type": "start round mix", 9 "width": 26, 10 "height": 26, 11 "alt": true, 12 "user": "123" 13 }, 14 "demo_node_2": { 15 "name": "結束", 16 "left": 797, 17 "top": 42, 18 "type": "end round mix", 19 "width": 26, 20 "height": 26, 21 "alt": true, 22 "user": "123" 23 }, 24 "1590218903325": { 25 "name": "步驟1", 26 "left": 303, 27 "top": 45, 28 "type": "node", 29 "userlist": [{ 30 "username": "管理員2號", 31 "userid": "1", 32 "deptname": "游戲部", 33 "deptcode": "1.4" 34 }], 35 "width": 104, 36 "height": 26, 37 "alt": true 38 } 39 }, 40 "lines": { 41 "1590218933638": { 42 "type": "sl", 43 "from": "demo_node_1", 44 "to": "1590218903325", 45 "name": "", 46 "alt": true 47 }, 48 "1590218935259": { 49 "type": "sl", 50 "from": "1590218903325", 51 "to": "demo_node_2", 52 "name": "", 53 "alt": true 54 } 55 }, 56 "areas": {}, 57 "initNum": 27, 58 "user": "管理員" 59 }
后台代碼（簡要）：
1 //解析流程設計器的Json字符串 2 SchemeJson model = JsonConvert.DeserializeObject<SchemeJson>(schemeMol.SchemeJson); 3 var nodes = model.nodes; 4 var lines = model.lines; 5 //記錄節點間的關系 6 //略
（3）流程節點審批明細表
WF_Instance_NodeDetail，記錄節點審批人
1 public class WF_Instance_NodeDetail : CoreBaseEntity 2 { 3 /// <summary> 4 /// F_InstanceNodeID 5 /// </summary> 6 [Display(Name = "F_InstanceNodeID")] 7 [Description("F_InstanceNodeID")] 8 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 9 public string F_InstanceNodeID { get; set; } 10 /// <summary> 11 /// Handler 12 /// </summary> 13 [Display(Name = "處理人名字")] 14 [Description("處理人名字")] 15 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 16 public string Handler { get; set; } 17 /// <summary> 18 /// F_InstanceId 19 /// </summary> 20 [Display(Name = "F_InstanceId")] 21 [Description("F_InstanceId")] 22 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 23 public string F_InstanceId { get; set; } 24 /// <summary> 25 /// HandlerID 26 /// </summary> 27 [Display(Name = "HandlerID")] 28 [Description("HandlerID")] 29 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 30 public string HandlerID { get; set; } 31 /// <summary> 32 /// HandleOpnion 33 /// </summary> 34 [Display(Name = " 處理意見")] 35 [Description(" 處理意見")] 36 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 37 public string HandleOpnion { get; set; } 38 /// <summary> 39 /// NodeName 40 /// </summary> 41 [Display(Name = "NodeName")] 42 [Description("NodeName")] 43 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 44 public string NodeName { get; set; } 45 /// <summary> 46 /// F_InstanceNodeDetailID 47 /// </summary> 48 [Display(Name = "F_InstanceNodeDetailID")] 49 [Description("F_InstanceNodeDetailID")] 50 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 51 public string F_InstanceNodeDetailID { get; set; } 52 /// <summary> 53 /// NodeID 54 /// </summary> 55 [Display(Name = "NodeID")] 56 [Description("NodeID")] 57 [StringLength(50, ErrorMessage = "{0}最多輸入{1}個字符")] 58 public string NodeID { get; set; } 59 /// <summary> 60 /// HandleResult 61 /// </summary> 62 [Display(Name = "處理結果")] 63 [Description("處理結果")] 64 65 public TrueOrFlase HandleResult { get; set; } 66 }
以上，僅用於學習和總結