基于ExtJs技术的MVC模式的年假审批系统的设计与实现

张琦 乔玲玲 潘军 侯剑

【摘 要】针对某单位年假审批过程繁復，信息不透明，审批效率低下及传统web技术开发效率低下的问题，提出了基于ExtJs技术的MVC模式的年假审批系统的设计思路，给出了系统的MVC架构及ExtJs技术的B/S开发模式和应用实例，设计了系统功能模块以及人员数据结构及其搜索思路。对系统进行了实现和测试，结果表明ExtJS能提高开发效率，有助于提高系统的可维护性。

【关键词】ExtJs MVC 权限管理 审批管理 人事树

1 引言

单位年假审批过程繁杂，需要层层领导审批签字，浪费了大量人力；信息透明度低，只在公示栏小范围公示，不能面向全体员工；员工提出纸质申请，一旦出错，需要重新修改打印，再次申请，审批效率低下。针对以上问题，开发年假审批系统不仅能节省人力物力，还能提高工作效率和透明度。

传统的WEB前端技术存在一些不足，如：需要写大量的前端的HTML代码，在设计和布局上需要花费很长的时间去设计和思考，开发时间较长。Extjs具有如下优点：

（1）无需管理HTML，CSS等放置组合，布局设计等繁琐的问题，一切只需要调用ExtJS的组件库，ExtJs能够动态的生成HTML，CSS。

（2）开发时间短，只需要调用ExtJS的组件库，就能够实现网页中的组件元素。因此设计基于ExtJs技术的MVC模式的年假审批系统具有重要的现实意义。

2 MVC模式及ExtJS设计

2.1 MVC架构设计

MVC即模型（Model），视图（View）和控制（Controller）。MVC模式的目的就是实现Web系统的职能分工。Model层实现系统中的业务逻辑，View层用于与用户的交互，Controller层是Model与View之间沟通的桥梁，它可以分派用户的请求并选择恰当的视图进行显示，同时它也可以解释用户的输入并将它们映射为模型层可执行的操作。使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式，下图1为MVC数据交互图。

2.2 视图层ExtJS设计

ExtJS 作为网页前端的框架技术，搭建前台的WEB页面框架，接收数据的输入与输出，并允许用户操纵。

2.3 模型层存储过程设计

模型层的调用者是控制层，控制层根据不同的视图层的需求调用不同的模型，从而得到相应的数据。本系统中应用SQL Server2005的存储过程作为模型层。

2.4 控制层PHP设计

控制层接受用户的输入并调用模型和视图去完成用户的需求。本系统中，当ExtJS 请求PHP后，首先PHP解析ExtJS发送的命令，然后去数据库请求数据，最后将数据库中处理的数据返回给ExtJS。

3 系统设计与实现

3.1 系统审批流程

本系统完全模拟现实的审批过程，当一个员工提出申请年假后，首先判断年假天数的大小，若小于等于5天，年假单子只需要直属主管审批，若大于5天小于等于10天，年假单子首先需要直属主管审批，然后需要部门总监审批，若大于10天，年假单子需要直属主管、部门总监、副总层层审批，审批流程如下图2。根据申请天数的不同，审批经过的步骤也不同，提高了工作效率。

3.2 系统功能设计

根据系统需求和审批流程，本系统设计的功能模块为身份认证模块、个人模块，各部门信息管理模块，权限管理模块、年假管理模块、年假审批管理模块、年假统计模块。

身份认证模块主要对登录者进行身份验证和权限判断，只有合法用户才能登录成功并能执行其权限范围内的操作。

个人模块主要是个人申请年假和查询年假等功能。

各部门信息管理模块为增加、删除、修改、查询部门信息、岗位信息、和员工信息。

权限管理模块包括增加、删除、修改、查询权限信息，管理员信息，添加、取消权限岗位的映射关系。

年假管理模块为增加、删除、修改年假起始日期，查询年假起止日期以及对特殊人群（公司领导层，或为公司做出重大贡献的人）年假的增删改查。

年假审批管理模块是给那些具有审批权限的人，不同的审批者审批的范围不同，包括审批年假、查看审批日志及流程，查看待审批及已经审批年假。

年假统计模块是对年假的分年统计，可查看员工的详细信息，可查看某段时间内的年假信息。

3.3 系统实现

本系统是基于ExtJs技术设计的年假审批系统，由于篇幅有限，具体的数据库设计及程序代码部分在此不进行展开，仅对系统中涉及的重点问题进行讨论。

系统中最常用的功能为人员的搜索，由于人事关系复杂，本文采用树形结构（满人事树）描述人事关系以便进行搜索，用圆圈表示部门节点，用矩形表示人节点，满人事树结构图如图3所示：

通常应用宽度优先遍历算法求解满人事树结构。首先D1入队，然后D1出队，在_Human_Department（部门表）中，找到ParentId（上级部门）为D1的节点，可以找到D2与D3，D2与D3入队，D1入栈，接着让D2出队，找到ParentId（上级部门）为D2的节点，可以找到D4与D5，D4与D5入队，D2入栈，D3出队，这样一直查找，直到队列为空为止。应用宽度优先遍历算法找到只是部门节点的组织架构，并没有把人节点挂载进去。在人节点挂载中， _Human_Approval_Position_Relation（审批岗位人关联表）可以找到人节点对应的岗位，然后通过表_Human_Position（岗位表）找到岗位对应的部门，这样就找到人对应的部门，然后把人挂载到相应的部门下就可以了。

4 结论

本文研究了MVC模式及ExtJS技术，使用ExtJS技术完成了年假审批系统。本文结合了MVC的开发思想及ExtJS技术设计了系统结构，并给出了MVC的划分思路。应用了权限系统来做访问的控制，及人事树结构进行人员数据存储及搜索。实现了系统并进行了测试，结果表明ExtJS能提高开发效率，此系统具有良好的可维护性。

参考文献：

[1] 卫军，夏慧军，孟腊春. ExtJS Web应用程序开发指南[M]. 北京：机械工业出版社，2011.

[2] David Flanagan. JavaScript 权威指南 第五版[M]. 2007（8）-2010（8）. 李强，等译. 北京：机械工业出版社，2007.8.

[3] 徐风.六年PHP征途[J].phper.2007（04）.

[4] 陈乐.MVC模式在分布式环境下的应用研究[J].计算机工程，2006，32（19）：62-64.