基于ExtJs技術的MVC模式的年假審批系統(tǒng)的設計與實現

張琦 喬玲玲 潘軍 侯劍

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

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

1 引言

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

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

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

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

2 MVC模式及ExtJS設計

2.1 MVC架構設計

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

2.2 視圖層ExtJS設計

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

2.3 模型層存儲過程設計

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

2.4 控制層PHP設計

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

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

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

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

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

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

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

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

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

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

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

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

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

3.3 系統(tǒng)實現

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

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

通常應用寬度優(yōu)先遍歷算法求解滿人事樹結構。首先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 結論

本文研究了MVC模式及ExtJS技術，使用ExtJS技術完成了年假審批系統(tǒng)。本文結合了MVC的開發(fā)思想及ExtJS技術設計了系統(tǒng)結構，并給出了MVC的劃分思路。應用了權限系統(tǒng)來做訪問的控制，及人事樹結構進行人員數據存儲及搜索。實現了系統(tǒng)并進行了測試，結果表明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.