asp.net BS拖拽工作流設計及研發（附Demo源碼）

本文主要目錄如下：

一、概述

二、需求分析及設計

三、數據結構設計

四、技術選型

五、界面和代碼賞析

六、Demo源碼下載

 

一、概述

BS應用系統或互聯網網站中經常會有一些漂亮的流程圖的展示，傳統的開發方式一般是由項目經理或產品經理根據客戶的需求畫出流程圖原型，然后交由美工設計效果圖評審並切割，再由研發這邊根據美工切割的html結合實際業務流程實現流程圖的動態顯示，這個過程涉及了各個工作角色，整個過程工作量比較巨大，尤其是在美工和研發這兩方面都需要投入比較多的精力和時間，我這里所說的流程圖並不是行業專用流程，它可能是工作流、自由流、狀態機中的任何一個，那我們如何去抽象出一種能夠滿足大部分應用系統展示漂亮流程圖的組件呢？我覺得有必要結合一種典型的應用場景，去設計、評審和研發，下圖就是一種典型的應用場景，這是運行態的一個流程圖，它主要包括兩部分圖例和流程圖動態解析渲染。

二、需求分析及設計

1、用例分析

<組件總體用例>：主要包括圖例信息、流程設計態和流程運行態3部分；

<流程設計、圖例信息>：

<流程運行態>

 

2、魯棒圖分析

基於魯棒圖分析我們可以很好的發現一些實體，如下圖：

通過此圖我們可以很好的發現流程圖的一些實體信息，為以后的數據結構設計做好了充分的鋪墊。

3、需求矩陣

三、數據結構設計

經過充分的需求分析和設計，我們可以進行數據結構設計了，見下圖:

 

表名：DRAG_FLOW_INFOS 

序號	列名	數據類型	長度	小數位	標識	主鍵	允許空	默認值	說明
1	DF_ID	varchar	200	0		是	否		流程號
2	DFL_ID	varchar	200	0			是		流程圖例號
3	DF_NAME	varchar	200	0			是		流程名稱
4	DF_DESC	varchar	3900	0			是		流程描述
5	DF_DEPTNAME	varchar	200	0			是		部門名稱
6	DF_DEPTCODE	varchar	100	0			是		部門編碼
7	DF_CREATER_ID	varchar	100	0			是		創建人號
8	DF_CREATER	varchar	200	0			是		創建者
9	DF_CREATETIME	datetime	8	3			是		創建時間
10	DF_VERSION	varchar	10	0			是		版本號（v1.0、v2.0等）
11	DF_ISACTIVE	varchar	4	0			是		是或否(只有活動的流程才可以使用，可以使用此字段把流程Disable)
12	DF_LASTMODIFIED	datetime	8	3			是		備用字段1
13	DF_ISEDIT	varchar	4	0			是		是或否

表名：DRAG_FLOW_LEGENDELEMENTS 

序號	列名	數據類型	長度	小數位	標識	主鍵	允許空	默認值	說明
1	DFLE_ID	varchar	200	0			是		元素號
2	DFL_ID	varchar	200	0			是		圖例號
3	DFLE_INNERTEXT	varchar	400	0			是
4	DFLE_TYPE	varchar	20	0			是		分為實線矩形、虛線框矩形、橢圓、未辦框、正辦框、已辦框、未辦框等
5	DFLE_TEXT_CUTLENGTH	int	4	0			是
6	DFLE_ISHIDDEN	varchar	4	0			是		是否（顯示是否隱藏，默認為否）

表名：DRAG_FLOW_LEGENDINFOS 

序號	列名	數據類型	長度	小數位	標識	主鍵	允許空	默認值	說明
1	DFL_ID	varchar	200	0			是		圖例號
2	DFL_STYLE	varchar	20	0			是		樣式
3	DFL_ISDEFAULT	varchar	4	0			是		是否默認圖例
4	DFL_CREATORID	varchar	100	0			是		創建者ID
5	DFL_CREATOR	varchar	200	0			是		創建者
6	DFL_CREATDATE	datetime	8	3			是		創建時間
7	DFL_LASTUPDATEDATE	datetime	8	3			是		最近修改時間
8	DFLE_ISDRAGED	varchar	4	0			是		是否（拖拽）

表名：DRAG_FLOW_STEPS 

序號	列名	數據類型	長度	小數位	標識	主鍵	允許空	默認值	說明
1	DFS_ID	varchar	200	0			是		步驟號
2	DF_ID	varchar	200	0			是		流程號
3	DFS_NAME	varchar	200	0			是		步驟名稱
4	DFS_DESC	varchar	3800	0			是		步驟描述
5	DFS_TYPE	varchar	20	0			是		步驟類型（實線矩形、虛線矩形、橢圓、空白框等）
6	DFS_ORDERNO	int	4	0			是		排序號
7	DFS_X	float	8	0			是		坐標X
8	DFS_Y	float	8	0			是		坐標Y
9	DFS_WIDTH	int	4	0			是		寬度
10	DFS_HEIGHT	int	4	0			是		高度
11	DFS_PARENTID	varchar	200	0			是		父ID
12	DFS_TITLE_CUTLENGTH	int	4	0			是		標題切割長度
13	DFS_DESC_CUTLENGTH	int	4	0			是		描述切割長度
14	DFS_STYLE	varchar	40	0			是		樣式
15	DFS_ISROOTSTEP	varchar	4	0			是		是或否（是否首步驟）

表名：DRAG_FLOW_STEPSRELATION 

序號	列名	數據類型	長度	小數位	標識	主鍵	允許空	默認值	說明
1	DFSR_ID	varchar	200	0			是		步驟關系ID
2	DF_ID	varchar	200	0			是		流程ID
3	DFS_SOURCEID	varchar	200	0			是		源步驟ID
4	DFS_TARGETID	varchar	200	0			是		目標步驟號
5	DFSR_CSSCLASS	varchar	50	0			是		連接器樣式
6	DFSR_CONNECTOR	varchar	100	0			是		連接器（Flowchart、Bezier、Straight、StateMachine等），默認為Flowchart
7	DFSR_ANCHORS	varchar	1000	0			是		錨點集合，類似["Center", "Center"]
8	DFSR_ANCHOR	varchar	100	0			是		錨點類型，此字段優於DFSR_Anchors字段，值有Continuous、AutoDefault、Assign、Perimeter、Center等，默認為Continuous
9	DFSR_PAINTSTYLE	varchar	1000	0			是		繪制樣式
10	DFSR_ENDPOINT	varchar	1000	0			是		端點有：Blank、Image、Rectangle、Dot等
11	DFSR_ENDPOIONTSTYLE	varchar	1000	0			是		端點樣式
12	DFSR_HOVERSTYLE	varchar	1000	0			是		盤旋樣式
13	DFSR_OVERLAYS	varchar	1000	0			是		填充物
14	DFSR_LABEL	varchar	1000	0			是		標簽
15	DFSR_LABELSTYLE	varchar	1000	0			是		標簽樣式

表名：DRAG_FLOW_VERSION

序號	列名	數據類型	長度	小數位	標識	主鍵	允許空	默認值	說明
1	DFV_CUR_ID	varchar	200	0		是	否		當前版本流程號
2	DFV_BEF_ID	varchar	200	0		是	否		之前版本流程號

四、技術選型

1、流程圖UI界面主樣式-BootStrap：GitHub上這樣介紹 bootstrap：簡單靈活可用於架構流行的用戶界面和交互接口的html,css,javascript工具集。基於html5、css3的bootstrap，具有大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式向導文檔，自定義JQuery插件，完整的類庫，基於Less等，BootStrap設計非常優雅，唯一的缺憾是不兼容IE6，不過做應用系統的現在應該可以拋棄 IE6了，據調查IE6是中國的重災區，由於它本身的安全性等缺陷，很容易遭受各種攻擊；

2、流程圖、圖例管理-EasyUI：jQuery easyui 為網頁開發提供了一堆的常用UI組件，包括菜單、對話框、布局、窗簾、表格、表單等等，它的布局和表格非常簡潔和優雅；

3、流程圖設計態-JSPlum,我找了半天才找到它，這真是一個優秀的js流程圖框架，封裝的非常好，支持3種主流的渲染模式：SVG、Canvas和VML，技術底層library也支持：JQuery、MoonTools、YUI3，這里我們果斷選擇JQuery+VML模式，做應用嗎要考慮到各種應用場景！　　

五、界面及代碼賞析

1、流程設計態界面，見下圖：

2、代碼這一塊我這邊把相關代碼結構進行一下簡答的說明，這里不再贅述，如果有感興趣的朋友，可以下載代碼；

 

六、Demo源碼下載：

 DragFlow.RAR

2、數據結構SQL下載：

SQL腳本