业务流程开发

本节说明如何开发一个业务流程，例如请假申请，我们可以通过“流程定义”、“流程图”、“菜单定义”来一步步实现请假申请业务流程！

1、创建流程

创建流程需要做前期准备

1、准备流程需求比如：请假单
2、准备流程表单字段比如：请假人、开始日期、结束日期、请假天数、请假事由等
3、定好每个字段的类型比如：请假人（文本）、开始/结束日期（data）、请假天数（文本）、请假事由（文本）
4、定好几个流程节点比如：开始->申请->审核->结束（演示做基础的四个节点流程）
5、建立2个账号，一个用于申请，一个用于审核

开始创建流程

本系统已配置好“流程定义”功能，我们只需要进入“开发设计”->“流程定义”中建立流程即可。

点击“增加业务流程” 弹出业务流程基础信息

注意：

1、流程状态选择“提交”
2、编号长度不得小于1
3、“业务表名称”中填写数据库表名，生成业务表，保存该流程的所有信息

2、创建表单字段

创建完流程后点击“编辑”进入创建表单字段

进入“业务流程基础信息”界面

点击右侧“新增”按钮，分别添加5个字段

注意：选择字段类型时根据前面拟定的类型选择

3、流程图

流程表单及字段添加完成后我们开始画流程图！

点击流程右侧的“流程图”按钮

进入流程的流程图界面，系统默认画了一个简单的流程图

我需要开始、申请、审核、结束等四个节点，还需要从左侧的控件中拖来一个，组成四个节点

点击各流程节点可以设置对应属性，

注意：创建一个基础的流程节点只需配置“标题”、“排除分派人执行”、“多人同时作业”、“授权于”等字段即可。

4、画流程节点界面

点击申请节点属性中的“定义界面”

进入绘制节点界面

本界面是基于vue + elementUi 开发的编辑器

界面左侧为控件类型：默认型组件、输入型组件、选择型组件、布局型组件

其中默认型组件是根据定义的流程字段而自动生成的组件并自动绑定字段

使用输入型、选择型、布局型等组件需要绑定字段

每个字段有对应的属性

绑定字段：选择需要绑定的字段
标题：控件的label名称
占位符：输入框内默认显示字符
Id标识：给控件html添加id属性
筛洗参数：
更新字段：
表单栅格：控制组件宽度来布局界面24/24
标签宽度：label的宽度
组件宽度：组件中控件宽度
默认值：
前缀、后缀：
前图标、后图标：
最多输入：必须在输入统计开启的情况下使用否则无效
显示标签：控制label是否显示
能否清空：
是否只读：
是否禁用：
是否必填：
v-if绑定KEY：vue中v-if=’key=value’
v-if绑定value: vue中v-if=’key=value’
正则校验：输入自定义正则
方法定义：
1. 如果该控件已经绑定方法，触发条件中直接写需要执行的方法如：get()
2. 反之需要写vue格式的事件如 @click=‘get’
3. 方法体中写方法即可如：get(){}
标题控件和分组控件中还有字体大小，内边距，外边距，背景颜色，字体颜色等，根据自身喜好设置即可

点击审核节点属性中的“定义界面”

进入审核界面绘制，绘制操作同申请节点

5、申请账号

点击“系统管理”->“用户管理”在“总部”下面的“默认”中添加“xiaowang”（设置为部门员工）和“lizong”（设置为部门总监）

6、定义菜单

在开发设计中的‘菜单定义’→‘系统菜单’→‘front’→请假管理’下添加新的菜单‘请假管理’url填写：/HTML5/datatable/index.html?page=leave#/home/taskList/leave?taskUrl=/workFlow/webEditor/showVue.html&activityId=26
红色填写流程名称,蓝色填写流程的节点ID替换
（说明：front为系统默认的菜单根目录，可以在/rc-web/src/main/webapp/HTML5/index2.jsp文件中配置。

注意：创建流程菜单时功能url【/HTML5/datatable/index.html?page=leave#/home/taskList/leave?taskUrl=/workFlow/webEditor/showVue.html&activityId=26】这是固定写法，【leave】是流程名称,【26】是流程的节点ID