一、功能简介

gooflow功能清单
1、自定义流程绘制
2、自定义属性添加
3、支持3种步骤类型
普通审批步骤
自动决策步骤
手动决策步骤

4、决策方式(支持js决策，sql语句决策)

5、审批人员参与方式，可以自定配置，系统目前自带（员工，部门，岗位，sql语句4种方式）
6、响应方式（支持多人审批通过，和单人审批通过）
7、事件执行方式（审批通过后可以触发配置事件）
8、消息提醒(支持实时提醒)
9、流程决策条件，自定义配置

流程审批功能
1、提交
2、退回
3、退回上一步
4、退回到开始节点
5、表单退回
6、审批不同过
7、附件上传
8、生成word文档
9、查看流程图。

 

二、流程界面展示

1.流程设计主界面(右边显示流程元素的属性)

2.提供了自动决策和手动决策2中方案，方案可以是js脚本，或者sql语句。

3.流程参与者，提供了3种类型。

4.流程条件：每一个流程条件都有关键值，对应到决策方案中.

5.自定义属性:方便自己新功能的扩展

6.任务列表也

7.流转界面

 

 

Gooflow0.6 UI界面下载

GooFlow0.8 ui界面下载

[特点]

 

以下从纯技术实现层面具体描述:

0

[一、GooFlow设计器的界面]

Y

X

如上图所示：工作区宽度高度均为可见区的2倍，X，Y轴的方向如图所示，于CSS样式中顶距top和左距left是一样的；

左边是流程图绘制工具栏，从上至下依次为：选择指针、转换连接线、开始节点、结束节点、任务节点、自动节点、决策节点、状态节点、扩展附加节点、分支结点、聚合结点、复合子流程结点；最后一个不是节点，而是节点连线编辑与分组区域编辑两种工作区状态的切换开关，当切换至分组区域编辑后，只能操作分组区域块，节点与连线都被锁定；反之即然。

顶部是展示流程图标题和放置一些功能按钮的操作栏，这些按钮除了系统自带的外，还可由用户自定义。

如果初始化中设置不要左边工具栏和顶部的操作按钮，则该UI就变成了一个流程图查看/跟踪器。

[二、GooFlow设计器的工作区元素]

开始节点、结束节点为圆形，复合节点是绿色，其余结点均是淡蓝色圆角矩形，双击节点中的文字，可直接进行编辑；

转换连线和直接和中段可上下移动的折线、中段可左右移动的折线共三种样式，双击线条可直接编辑线条的文字说明内容；

分组区域需要左下角的开关被按下后才可编辑，有四种随机颜色，点击左上角的圆形图标后可改变颜色，双击文本可直接编辑。

节点被选中时的样子:

 

连线被选中时的样子:

 

分组区域变为可操作时的样子:

 

 

 

[三、GooFlow类的构造函数]

function GooFlow(bgDiv,property){}

传参:

bgDiv：JQUERY对象，要渲染的DOM，必须含有ID。

Property是详细的初始化参数：{

width：UI的宽度;

height：UI的高度;

initNum：计算默认ID值的起始SEQUENCE,默认不填时为1;

haveHead：BOOL值,是否需要展示标题及顶部按钮的顶部栏;

initLabelText：初始化时标题的内容,默认不填时为newFlow_1;

haveTool：BOOL值,是否需要左边的工具栏(这决定了渲染完成后是编辑模式还是纯浏览模式)

useOperStack：BOOL值，决定了是否要用事务序列管理工作区内的操作事务，选TRUE的话，将开启正常使用撤销undo和重做redo的功能，该设定只在可编辑状态时有效。

toolBtns：一个数组，决定了左边的工具栏中，除了基本的结点/连线按钮图标外，还有哪些类型的结点；具体写法如：["task","node","chat","state","plug"]。数组中每个单元就是这些结点类型的名称，可用系统中已给的， 也可自定义，但自定义一个类型name时,需要定义其CSS样式类.ico_name。例如：

.ico_plug{background:url(img/gooflow_icon.png) no-repeat -135px -45px}