基于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.