張琦 喬玲玲 潘軍 侯劍

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

【關(guān)鍵詞】ExtJs MVC 權(quán)限管理 審批管理 人事樹

1 引言

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

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

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

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

2 MVC模式及ExtJS設(shè)計

2.1 MVC架構(gòu)設(shè)計

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

2.2 視圖層ExtJS設(shè)計

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

2.3 模型層存儲過程設(shè)計

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

2.4 控制層PHP設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)論

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

參考文獻：

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

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

[3] 徐風(fēng).六年P(guān)HP征途[J].phper.2007（04）.

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