• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

asp.net BS拖拽工作流设计及研发(附Demo源码)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文主要目录如下:

一、概述

二、需求分析及设计

三、数据结构设计

四、技术选型

五、界面和代码赏析

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【踩坑经历】一次Asp.NET小网站部署踩坑和解决经历发布时间:2022-07-10
下一篇:
让 SortTable 和 Asp.net Ajax 和睦相处发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap