流程设计－流程设计实例：费用报销审批流程

报销审批需求说明

      1、报销审批属于财务部门主管的业务流程，所以需要放入财务管理的应用中。

       2、审批过程：拟稿人申请 --> 部门领导审核 --> 财务部门复审 --> 如果超过5000元需要公司领导审批 --> 财务人员办理 --> 结束。

       3、需要申请人填写的信息有：标题、报销事项的简要说明、报销类型、报销明细（包括费用发生日期、费用类型、费用说明、金额和备注）、电子发票可以通过附件上传等。

平台流程设计入口

报销审批流程开发

创建应用

报销审批属于财务管理应用，所以要新建一个名为“财务管理”的流程应用。

打开“流程管理平台”，点击“新建应用”按钮，如下图：

“应用名称”（必填）：填写“财务管理”；

“应用别名”：可随意填写； 

“应用描述”：可随意填写；

“应用类型”：可随意填写；

填写完后点击“完成”即可，如下图所示：

点击“财务管理”应用，即可打开设计界面，如下图所示：

左侧包含六种设计元素

表单配置：设计和开发流程中需要使用的表单。

流程配置：设计和开发流程各审核环节的信息。

数据配置：设计和管理流程中需要使用的数据，比如报销类型、请假类型等固定可选的数据等。

脚本配置：设计和开发流程中需要调用的脚本。

资源文件：提供流程中可以直接访问的固定的文档、图片，便于直接以URL方式访问。

应用属性：对应用的信息，权限进行管理和设定。

本章教程主要讲的是O2OA流程和表单两种元素的配置，其他的元素会在后续的高阶课程中陆续讲到。

创建表单

新建表单

在应用设计界面中选中“表单配置”导航，点击左上角的新建表单按钮 ，弹出表单模板选择对话框。

系统将弹出可供用户选择使用的常用表单模板：

点击“通用表单模板”，新建一个表单，并将表单名称改为“报销申请表单”。如下图：

修改表单

在基本信息表格中，删除多余的行。选中要删除的行的一个单元个，在操作条上点击“删除”按钮。如下图：

保留 “标题”、“选择字段”和“简要说明”行。

将文本组件“选择字段”改为：“报销类型”；

将文本组件“简要说明”改为“报销说明”。如下图：

然后将“报销类型”行中的“select”选择框改名为“reimburseType”用于记录报销类型，并设置可选值为：差旅报销、费用报销和其他报销。（报销的类型可根据您自己的业务添加），如下图：

将下面的“订单信息”改为“报销明细”

然后修改明细表（设计元素为：数据网格）

将数据网格的标识修改为“expenseList“;

将数据网格第二列标题修改为“费用发生日期”；

将数据网格第三列标题修改为“费用类型”；

将数据网格第四列标题修改为“费用说明”；

将数据网格第五列标题修改为“金额”，标识改为“amountCol”，并选中“合计数值”；

选中字段，点击删除按钮，将明细里的“费用发生日期”，“费用类型”，“费用说明”字段删除，如下图所示：

再在内容单元格中创建相应的字段。从工具区将需要的元素拖动至合适的位置，可创建一个设计元素。

• 在“费用发生日期”内容单元格中创建一个  日期选择  字段，命名为“expenseDate”，选择类型配置为“仅日期即可”，如下图所示：

• 在“费用类型”内容单元格中创建一个 下拉框  字段，命名为“expenseType”，值设置为交通费、培训费、通信费等等，如下图所示：

• 在“费用说明”内容单元格中创建一个  文本  字段，命名为“expenseExplain”；

• 将“金额”内容单元格中创建一个 数字字段，命名为“amountCol”；

全部修改完后如下图所示：

设计移动端表单

　　表单设计支持移动端表单的设计，点击右上方“Mobile”按钮切换到Mobile表单设计。

移动端表单默认将PC表单的所有内容同步过来，将表单样式更改为“手机样式”。当然我们还需要做一些调整。

首先删除移动端不需要和不支持的组件。我们删除最上方的文本组件，以及上面和下面的操作条组件。

然后调整最外层容器的宽度，

这样移动端表单就调整好了。

保存表单

点击左上角保存按钮，或按下快捷键Ctrl+S，即可保存表单，如下图所示：

保存完成后，可在表单配置中查看，如下图：

创建流程

新建流程

在应用设计界面中选中“流程配置”导航，点击左上角的新建流程按钮 ，弹出流程模板选择对话框。

因为我们要设计的报销审批有一个根据金额来决定是否需要公司领导审批的功能，所以我们选择“选择流程”模板：

根据模板创建流程后，将流程名称改为：“报销审批流程”：

新建活动

报销审批过程：拟稿人申请——部门领导审核——财务部门复审——如果超过5000元需要公司领导审批——财务人员办理——结束。

根据审批过程，分析得出，我们需要以下活动节点：

• 一个“开始活动”：代表流程开始；

• 一个“结束活动”，代表流程结束；

• 五个“人工活动”：用于申请人填写信息、部门领导审核、财务部门复审、公司领导审批和财务人员办理。

• 一个“选择活动”，用于判断金额控制流程走向。

流程模板中，已有一个“开始活动”、一个“结束活动”、一个“选择活动”和三个” 人工活动”，所以我们要创建两个人工活动。

在流程编辑界面的工具区，将人工活动拖动到流程编辑区域的任意位置，可以创建一个名为“未命名”的人工活动。我们创建两个，如下图：

修改活动属性：

一般情况下开始活动和结束活动不需要进行修改，我们主要修改人工活动。

• 申请人活动：选中“拟稿”活动，在属性区会列出，在“基本”标签页中，把“名称”修改为“申请人”，“表单”选择为“报销申请表单”(即绑定了流程需要展现的表单)。如下图：

• 部门领导审核活动：选择一个“未名称”活动，和申请人活动一样，把活动的名称修改为“部门领导审核”。再切换到“人员”标签页，在处理人配置中，选择“部门领导”职务。配置过程如下：

在“职位”处点击“+”按钮，弹出职务选择对话框，通过搜索，选择“正职领导”职务，点击“确定”，在弹出的后续对话框中点击“拟稿人所在组织”，再点击“确定”。如下图：

　　此处我们使用了职位（也可以称为：职务）来设置了活动的处理人，这是在组织管理中为每个组织设置的，您可以参考文档：https://www.yuque.com/o2oa/cfst8l/vm10py。我们推荐使用职位来设置处理人，这样当员工职责发生变化时，只需要修改组织管理中的职务即可，不需要修改流程的设计。

• 财务部门复审：选择一个“未名称”活动，和申请人活动一样，把活动的名称修改为“财务部门复审”。再切换到“人员”标签页，在处理人配置中，我们可以像“部门领导审核活动”一样，如果在组织管理中，已经为财务部门创建了类似“财务审核”这样的职务时，就直接选择此职务作为处理人，如下图：
  
  
  也可以在“身份”中选择合适的身份作为处理人，如下图：
  
  

• 公司领导审批：选择“办理A”活动，把活动的名称修改为“公司领导审批”。再切换到“人员”标签页，在处理人配置中，可在“身份”中选择合适的处理人（也可以配流程数据或者职位等）。

• 财务人员办理：选择“办理B”活动，把活动的名称修改为“财务人员办理”。再切换到“人员”标签页，在处理人配置中，在“身份”中选择合适的处理人（也可以配流程数据或者职位等）。

（关于活动处理人的设置方式，处理“职位”“身份”还有群组、组织、流程数据、脚本以及通过路由选择等方式。您可以参考文档：https://www.yuque.com/o2oa/cfst8l/tgcexxmckasfdmqy）

修改路由

我们已经设置好了所有活动，如下图：

接下来要将这些活动通过路由将这些活动按流程要求连接起来，以确保流程将按照我们的需求进行流转。

首先，申请人处理后，要交由”部门领导审核”， 所以要修改“送办理”这条路由。点中“送办理”路由的箭头部分，按住鼠标左键不放，将鼠标移动到“部门领导审核”活动上，然后松开鼠标左键，这样，就将“送办理”这条路由的终点，修改为“部门领导审核”活动了。

然后选中“送办理”路由（路由显示为橙色），在属性区，将名称改为“送部门领导审核”

部门领导审核后将流转给财务部门复审，所以要创建一条从“部门领导审核”活动到“财务部门复审”的路由。鼠标双击“部门领导审核”活动，移动鼠标，会发现在流程编辑区域有一条起点为“部门领导审核”活动，没有终点的“未命名”路由，路由箭头跟随鼠标移动，颜色为红色。移动鼠标到“财务部门复审”活动，单击鼠标左键，路由箭头将指向“财务部门复审”活动，这样就创建了一条从“部门领导审核”活动到“财务部门复审”的路由。

然后选中刚刚新建的路由，在属性区，将名称改为“送财务部门复审”。

财务部门复审后，有两个可能，一是总金额小于或等于5000的情况下，交由财务部门办理；二手总金额大于5000时需要公司领导审批。所以我们要建一条路由指向选择活动，命名为“财务审核通过”。创建方法与上述相同。

然后修改“公司领导审批”活动的“完成“路由，将其终点设置为 “财务人员办理”活动，并改名为”审批通过“。修改完成后如下图：

在选择活动中，我们要根据不同的条件来执行不同的路由，需要给选择条件的路由添加配置。先选中指向公司领导审批活动的路由，在属性框中切换到“条件“选项卡，点击编辑框，在编辑框中输入如下内容：

return parseFloat(this.data.expenseList.total.amountCol)> 5000;

其中parseFloat 是Javascript函数，将后面“()“中的数值转化为数字；

this.data是指流程实例中，通过表单收集的业务数据；

expenseList是表单中报销明细的数据网格；

total是指数据网格合计部分的数据；

amountCol是指数据网格中的amountCol列。

然后将此路由改名为“送公司领导审批“。如下图：

同样，我们要修改指向“财务人员办理“的路由，将条件修改为：

return parseFloat(this.data.expenseList.total.amountCol)<= 5000;

将路由名称修改为“送财务人员办理“。

保存流程

最后我们可以拖动各个流程节点和路由，使得图形更加美观，如下图：

点击工具栏的保存按钮，或按下快捷键Ctrl+S，即可保存流程图。

保存流程后，在流程配置界面中，可以看到新建的流程。如下图：

验证流程

选择一个有身份的人员登录系统，进入“办公中心”，点击“新建流程”按钮，在弹出框选择“财务管理”应用，点击“报销审批流程”即可启动流程，如下图所示：

以上是流程报销审批流程的样例设计说明，有关流程、活动机表单的详细设计内容，请继续阅读下面的章节。