简单的费用报销审批流程开发

文章正文
发布时间:2024-12-09 16:22

本篇主要使用实例开发的方式讲述如何在O2OA平台中开发一个简单的费用报销流程,包括流程设计,配置,表单设计,条件判断以及如何验证流程开发成果。

需求

今天以OA系统中的报销审批流程为例来讲一下流程应用管理。首先介绍一下报销流程的需求,主要分为两部分,流程和表单。

流程

OA的报销流程部分,我们将其分成两种情况:报销金额<=3000元时,审批路径为:【提交报销】→【部门领导审核】→【会计初审】→【分管领导审批】→【会计核定】;报销金额>3000元时,审批路径为:【提交报销】→【部门领导审核】→【会计初审】→【公司领导审批】→【会计核定】

报销流程需求.png

表单

OA表单部分:表单包含字段有标题、申请人、申请部门、费用发生地、项目名称、报销种类、单据张数、账户名称、收款账号、开户银行、公务描述和报销明细。

报销流程的表单.png

如何用O2OA平台进行报销流程搭建?

用开发者身份(管理员事先已在组织管理中配置好)登陆到首页。

1.png

登录后,进入到平台首页,点开左上角O2OA应用菜单

image.png


打开O2OA平台中的流程应用管理,点击“新建应用”

4.png

输入应用名称为:报销管理。

创建应用.png

“应用名称”(必填):填写“报销管理”;

“应用别名”:可随意填写;

“应用描述”:可随意填写;

“应用类型”:可随意填写;

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

点击打开报销管理应用,可以看到下面的界面

报销管理应用界面.png


左侧包含六种设计元素

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

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

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

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

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

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

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

OA办公系统:PC端表单开发

在“表单配置”导航中,点击新建图标新建一个表单,然后弹出模板可供选择。

表单模板选择.png

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

报销申请表.png

在“基本信息”表格中修改字段标题为需要的字段。

报销种类.png

行数不够时,可以选中一个单元格增加行

插入单元格.png

新增的行标题单元格设置样式为“标题单元格”,内容单元格设置样式为“内容单元格”

image (7).png


拖动左侧“文本”控件到新增的标题单元格中

image (8).png


删除多余的内容控件,重新拖入左侧符合业务需求的内容控件并修改相应的配置

标题:“文本字段”subject,设置默认值和非空校验return this.workContext.getWork().title;

这边前端脚本在O2OA API里面有很清楚的用法介绍,具体访问地址是:api

image (9).png

申请人:“人员组织” creatorPerson ,设置默认值return this.workContext.getWork().creatorIdentityDn;

申请部门:“人员组织” creatorUnit ,设置默认值return this.workContext.getWork().creatorUnitDn;

费用发生地:“地址” place

项目名称:“文本字段” projectName

报销种类:“下拉框” type ,可选值:差旅报销、雇员报销。默认值:return "差旅报销";

image (10).png

单据张数:“数字字段” number

账户名称:“文本字段” account

收款账号:“文本字段” receivingAccount

开户银行:“文本字段” bankAccount

公务描述:“多行文本” description

修改“订单列表”为“报销明细”,报销明细列改为序号、科目名称、开始日期、结束日期、费用描述、发票金额

image (11).png

删除多余的内容控件,重新拖入左侧符合业务需求的内容控件并修改相应的配置

科目名称:“下拉框” subjectName ,可选值:火车票、飞机票、住宿、餐费、其他

image (12).png

开始日期:“日期选择” startDate

结束日期:“日期选择” endDate

费用描述:“文本字段” costDescription

发票金额:“数字字段” amount

设置“发票金额”列合计数值,其他列都为不需要

image (13).png


设置报销明细:不能为空。报销明细使用的是“数据表格”控件,内容存储为数组,所以这里配置时需要选择“值长度”。

image (14).png

删除审批信息模块

OA办公系统:Mobile(移动端)表单开发

点击右上方“Mobile”按钮切换到Mobile表单。


从PC端同步过来的表单信息带有固定宽度,Mobile(移动)端并不需要,所以把对应的div上的固定宽度删掉,让它自适应手机宽度即可。

image (15).png


至此,我们完成了报销审批流程的表单部分的开发。下一章,我们将介绍报销审批流程的中的流程开发部分。

O2OA拖曳式流程图开发

新建默认流程

新建默认流程.png

首先我们修改流程名字为“报销审批流程”,然后按照需求把所有的节点活动先拖过来,分别修改一下名字

修改流程名字.png


接下来就要画上面的路由了,双击活动节点出现路由,然后修改一下路由的名称。此处的路由就是审批过程指向,按照业务需求从哪个环节到哪个环节。

配置路由.png

接下来,我们要给每个活动配置对应的处理人,在是“提交报销”环节中,系统自动判断当处理人为空时默认处理人为拟稿人,所以这个环节可以不做配置。

接下来是“部门领导审核”环节,这个环节的处理人应该是拟稿人所在的部门领导,需要做一下配置:在“请审核”路由上配置选择人员creatorLeader,选择范围为拟稿人所在部门的部门正副职,可以用职务来做到这个功能。

每个活动配置对应的处理人.png

配置好了路由上的选择人员后,我们要把这个人员跟“部门领导审核”关联起来,就需要配置“部门领导审核”环节处理人为creatorLeader,这里选择流程数据为刚刚路由上配置的creatorLeader。

关联.png

配置好了路由上的选择人员后,我们要把这个人员跟“部门领导审核”关联起来,就需要配置“部门领导审核”环节处理人为creatorLeader,这里选择流程数据为刚刚路由上配置的creatorLeader。

部门正职.png

“财务领导审核”环节,我们来默认它的处理人应该是财务部部门正职领导,可以直接在处理人环节选择到这个职务

image (25).png

image (25).png

选择职务后有个弹框让我们添加职务参数,这个意思呢就是我们前面选择了职务名称,但是每个组织都可以有相同的职务,比如说部门正职,那我们这个环节到底是要取到哪个组织的部门正职呢,这里的参数就是这个意思,我们可以选择组织“财务部”然后确定


添加职务参数.png

需要注意的是,这边的“选择”环节我们不需要配置处理人,但是选择环节出去的两条路由我们需要配置一下条件,因为要根据金额的不同而走到不同的环节。

选中小于等于3000的这条路由,可以看到条件这个页签,在里面输入 return parseFloat(this.data.datatable.total.amount) <=3000; 同样的在大于3000的路由条件里输入 return parseFloat(this.data.datatable.total.amount) >3000;

配置条件.png

同样的“分管领导审批”和“公司领导审批”也是指定的职务,指定公司下的公司领导和分管领导职务,我们去组织里添加一下。

组织配置职务.png

最后一个环节“会计核定”,用户呢说,我有两个会计,我需要AB角去处理,那么我们怎么办呢?首先我们一样要去配置会计的职务,这里我们需要把两个会计都配置上,然后在“会计核定”环节选择上这个职务

AB角处理.png

这里我们需要说明一下“会计核定”环节的处理方式问题了,这个呢是一个知识点,大家需要重点记一下啊

处理方式.png

处理方式分为四种

单人:单人是可以多人同时收到待办,但是其中一个人处理后另一个人的待办会消失掉

并行:并行是可以多人同时收到待办,多人可以同时处理,所有待办人都处理完后流转到下一环节

串行:串行是多人顺序收到待办,比如ABC三个人,A先收到待办处理完后B收到待办,再C收到待办,然后到下一环节

抢办:抢办是多人同时收到待办,但是其中一个人打开文件后另一个人再打开会提示当前文件已经被锁定,等其中一个人处理后另一个人的待办会消失掉

默认处理方式都是单人啊,可以按照业务需求去修改,我们这里AB角呢就不需要修改的,单人就可以实现的。

现在呢我们处理人就配置完了,还剩下最后一步我们需要把前面做的表单跟当前流程关联起来

这个需要在“提交报销”环节配置表单“报销申请表单”就好,后面的环节可以配置也可以不配置,如果没有配置表单就会沿用上一个环节的表单

关联表单.png

结束环节增加给拟稿人发送待阅的功能。待阅人脚本:return this.workContext.getWork().creatorIdentity;

待阅人.png


至此,我们的报销审批流程就开发完毕,可以进行使用了。