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脚本