文档介绍：BS拖拽工作流设计及研发（附Demo源码）
BS拖拽工作流设计及研发（附Demo源码）
本文主要目录如下：
一、 概述
二、 需求分析及设计
三、 数据结构设计
四、 技术选型
五、 BS拖拽工作流设计及研发（附Demo源码）
BS拖拽工作流设计及研发（附Demo源码）
本文主要目录如下：
一、 概述
二、 需求分析及设计
三、 数据结构设计
四、 技术选型
五、 界面和代码赏析
六、 Demo源码下载
一、概述
BS应用系统或互联网网站中经常会有一些漂亮的流程图的 展示，传统的开发方式一般是由项目经理或产品经理根据客 户的需求画出流程图原型，然后交由美工设计效果图评审并 切割，再由研发这边根据美工切割的html结合实际业务流程 实现流程图的动态显示，这个过程涉及了各个工作角色，整 个过程工作量比较巨大，尤其是在美工和研发这两方面都需 要投入比较多的精力和时间，我这里所说的流程图并不是行 业专用流程，它可能是工作流、自由流、状态机中的任何一
个，那我们如何去抽象出一种能够满足大部分应用系统展示 漂亮流程图的组件呢？我觉得有必要结合一种典型的应用 场景，去设计、评审和研发，下图就是一种典型的应用场景， 这是运行态的一个流程图，它主要包括两部分图例和流程图 动态解析渲染。
二、需求分析及设计
1、用例分析
<组件总体用例>：主要包括图例信息、流程设计态和流 程运行态3部分；
<流程设计、图例信息>：
<流程运行态>
2、鲁棒图分析
基于鲁棒图分析我们可以很好的发现一些实体，如下图:
通过此图我们可以很好的发现流程图的一些实体信息，为以 后的数据结构设计做好了充分的铺垫。
3、需求矩阵
三、数据结构设计
经过充分的需求分析和设计，我们可以进行数据结构设计
了，见下图：
表名：DRAG_FLOW_INFOS 序号
列名
数据类型
长度
小数位
标识
主键
允许空
默认值
说明1
DF_ID
varchar
流程号2
DFL_ID
varchar
200
流程图例号3
DF_NAME
varchar
200
流程名称4
DF_DESC
varchar
3900
流程描述5
DF_DEPTNAME varchar
部门名称6
DF_DEPTCODE varchar
varchar
100
创建人号8
DF_CREATER varchar
200
创建者9
DF_CREATETIME datetime
创建时间10
DF_VERSION varchar
版本号（、 等）11
DF_ISACTIVE
varchar
是或否（只有活动的流程才可以使用，可以使用此字段把流程
Disable）12
DF_LASTMODIFIED datetime
备用字段113
DF_ISEDIT
varchar
是或否