張琦 喬玲玲 潘軍 侯劍

【摘 要】針對某單位年假審批過程繁復，信息不透明，審批效率低下及傳統(tǒng)web技術開發(fā)效率低下的問題，提出了基于ExtJs技術的MVC模式的年假審批系統(tǒng)的設計思路，給出了系統(tǒng)的MVC架構及ExtJs技術的B/S開發(fā)模式和應用實例，設計了系統(tǒng)功能模塊以及人員數(shù)據(jù)結(jié)構及其搜索思路。對系統(tǒng)進行了實現(xiàn)和測試，結(jié)果表明ExtJS能提高開發(fā)效率，有助于提高系統(tǒng)的可維護性。

【關鍵詞】ExtJs MVC 權限管理 審批管理 人事樹

1 引言

單位年假審批過程繁雜，需要層層領導審批簽字，浪費了大量人力；信息透明度低，只在公示欄小范圍公示，不能面向全體員工；員工提出紙質(zhì)申請，一旦出錯，需要重新修改打印，再次申請，審批效率低下。針對以上問題，開發(fā)年假審批系統(tǒng)不僅能節(jié)省人力物力，還能提高工作效率和透明度。

傳統(tǒng)的WEB前端技術存在一些不足，如：需要寫大量的前端的HTML代碼，在設計和布局上需要花費很長的時間去設計和思考，開發(fā)時間較長。Extjs具有如下優(yōu)點：

（1）無需管理HTML，CSS等放置組合，布局設計等繁瑣的問題，一切只需要調(diào)用ExtJS的組件庫，ExtJs能夠動態(tài)的生成HTML，CSS。

（2）開發(fā)時間短，只需要調(diào)用ExtJS的組件庫，就能夠?qū)崿F(xiàn)網(wǎng)頁中的組件元素。因此設計基于ExtJs技術的MVC模式的年假審批系統(tǒng)具有重要的現(xiàn)實意義。

2 MVC模式及ExtJS設計

2.1 MVC架構設計

MVC即模型（Model），視圖（View）和控制（Controller）。MVC模式的目的就是實現(xiàn)Web系統(tǒng)的職能分工。Model層實現(xiàn)系統(tǒng)中的業(yè)務邏輯，View層用于與用戶的交互，Controller層是Model與View之間溝通的橋梁，它可以分派用戶的請求并選擇恰當?shù)囊晥D進行顯示，同時它也可以解釋用戶的輸入并將它們映射為模型層可執(zhí)行的操作。使用MVC的目的是將M和V的實現(xiàn)代碼分離，從而使同一個程序可以使用不同的表現(xiàn)形式，下圖1為MVC數(shù)據(jù)交互圖。

2.2 視圖層ExtJS設計

ExtJS 作為網(wǎng)頁前端的框架技術，搭建前臺的WEB頁面框架，接收數(shù)據(jù)的輸入與輸出，并允許用戶操縱。

2.3 模型層存儲過程設計

模型層的調(diào)用者是控制層，控制層根據(jù)不同的視圖層的需求調(diào)用不同的模型，從而得到相應的數(shù)據(jù)。本系統(tǒng)中應用SQL Server2005的存儲過程作為模型層。

2.4 控制層PHP設計

控制層接受用戶的輸入并調(diào)用模型和視圖去完成用戶的需求。本系統(tǒng)中，當ExtJS 請求PHP后，首先PHP解析ExtJS發(fā)送的命令，然后去數(shù)據(jù)庫請求數(shù)據(jù)，最后將數(shù)據(jù)庫中處理的數(shù)據(jù)返回給ExtJS。

3 系統(tǒng)設計與實現(xiàn)

3.1 系統(tǒng)審批流程

本系統(tǒng)完全模擬現(xiàn)實的審批過程，當一個員工提出申請年假后，首先判斷年假天數(shù)的大小，若小于等于5天，年假單子只需要直屬主管審批，若大于5天小于等于10天，年假單子首先需要直屬主管審批，然后需要部門總監(jiān)審批，若大于10天，年假單子需要直屬主管、部門總監(jiān)、副總層層審批，審批流程如下圖2。根據(jù)申請?zhí)鞌?shù)的不同，審批經(jīng)過的步驟也不同，提高了工作效率。

3.2 系統(tǒng)功能設計

根據(jù)系統(tǒng)需求和審批流程，本系統(tǒng)設計的功能模塊為身份認證模塊、個人模塊，各部門信息管理模塊，權限管理模塊、年假管理模塊、年假審批管理模塊、年假統(tǒng)計模塊。

身份認證模塊主要對登錄者進行身份驗證和權限判斷，只有合法用戶才能登錄成功并能執(zhí)行其權限范圍內(nèi)的操作。

個人模塊主要是個人申請年假和查詢年假等功能。

各部門信息管理模塊為增加、刪除、修改、查詢部門信息、崗位信息、和員工信息。

權限管理模塊包括增加、刪除、修改、查詢權限信息，管理員信息，添加、取消權限崗位的映射關系。

年假管理模塊為增加、刪除、修改年假起始日期，查詢年假起止日期以及對特殊人群（公司領導層，或為公司做出重大貢獻的人）年假的增刪改查。

年假審批管理模塊是給那些具有審批權限的人，不同的審批者審批的范圍不同，包括審批年假、查看審批日志及流程，查看待審批及已經(jīng)審批年假。

年假統(tǒng)計模塊是對年假的分年統(tǒng)計，可查看員工的詳細信息，可查看某段時間內(nèi)的年假信息。

3.3 系統(tǒng)實現(xiàn)

本系統(tǒng)是基于ExtJs技術設計的年假審批系統(tǒng)，由于篇幅有限，具體的數(shù)據(jù)庫設計及程序代碼部分在此不進行展開，僅對系統(tǒng)中涉及的重點問題進行討論。

系統(tǒng)中最常用的功能為人員的搜索，由于人事關系復雜，本文采用樹形結(jié)構（滿人事樹）描述人事關系以便進行搜索，用圓圈表示部門節(jié)點，用矩形表示人節(jié)點，滿人事樹結(jié)構圖如圖3所示：

通常應用寬度優(yōu)先遍歷算法求解滿人事樹結(jié)構。首先D1入隊，然后D1出隊，在_Human_Department（部門表）中，找到ParentId（上級部門）為D1的節(jié)點，可以找到D2與D3，D2與D3入隊，D1入棧，接著讓D2出隊，找到ParentId（上級部門）為D2的節(jié)點，可以找到D4與D5，D4與D5入隊，D2入棧，D3出隊，這樣一直查找，直到隊列為空為止。應用寬度優(yōu)先遍歷算法找到只是部門節(jié)點的組織架構，并沒有把人節(jié)點掛載進去。在人節(jié)點掛載中， _Human_Approval_Position_Relation（審批崗位人關聯(lián)表）可以找到人節(jié)點對應的崗位，然后通過表_Human_Position（崗位表）找到崗位對應的部門，這樣就找到人對應的部門，然后把人掛載到相應的部門下就可以了。

4 結(jié)論

本文研究了MVC模式及ExtJS技術，使用ExtJS技術完成了年假審批系統(tǒng)。本文結(jié)合了MVC的開發(fā)思想及ExtJS技術設計了系統(tǒng)結(jié)構，并給出了MVC的劃分思路。應用了權限系統(tǒng)來做訪問的控制，及人事樹結(jié)構進行人員數(shù)據(jù)存儲及搜索。實現(xiàn)了系統(tǒng)并進行了測試，結(jié)果表明ExtJS能提高開發(fā)效率，此系統(tǒng)具有良好的可維護性。

參考文獻：

[1] 衛(wèi)軍，夏慧軍，孟臘春. ExtJS Web應用程序開發(fā)指南[M]. 北京：機械工業(yè)出版社，2011.

[2] David Flanagan. JavaScript 權威指南 第五版[M]. 2007（8）-2010（8）. 李強，等譯. 北京：機械工業(yè)出版社，2007.8.

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

[4] 陳樂.MVC模式在分布式環(huán)境下的應用研究[J].計算機工程，2006，32（19）：62-64.