Vue&Element開發框架中增加工作流處理，工作流的各個管理頁面的介面處理
我在起前面的幾篇隨筆中，大概介紹了工作流的一些場景化處理，包括如何把具體業務表單元件化，並在檢視和編輯介面中，動態載入元件內容，以及對於檢視申請單的主頁面，把審批、取消、發起會籤、會籤、批示分閱、閱辦等處理過程的進行模組化，並在主頁面中靈活引入整合，本篇隨筆綜合性的介紹Vue&Element開發框架中增加的工作流各個管理介面的內容，以供參考交流。
1、工作流模組化劃分
為了更有效的維護和管理工作流的設定和申請單資訊，我們把工作流的內容分為三個大部分：工作流維護、工作流業務、業務表單。
工作流維護，主要是工作流模板的管理，包括流程模板的管理、以及流程環節的管理
工作流業務，主要是根據系統模板，提供建立流程申請單的入口（業務受理列表），我的審批工作（當前使用者），所有審批工作（管理員維護），我的草稿（當前使用者）
業務表單，這是根據具體表單的資訊，提供查詢統計的處理，包括各類業務表單，如付款申請單、物品領用單等等。
這些工作流的業務選單如下所示。
2、流程環節管理
我們要開始一項工作流的申請單，首先需要配置好這個申請單的一些基本資訊，其中流程環節就是決定每個步驟執行那種處理型別（如審批、撤銷）的，因此流程環節也算是最基本的步驟型別定義了，也就是決定針對這型別的步驟的統一處理介面。
裡面預定義了一些如審批、歸檔、會籤、閱辦等系統性的步驟型別，還可以根據需要自定義處理型別，自定義處理型別後，我們建立對應的處理規則即可在檢視詳細申請的介面中進行呼叫處理。
3、流程模板管理
完成了流程步驟型別的定義，就可以開始流程模板的管理了，流程模板主要配置相關工作流的資訊，如表單的分類，對應資料表，流程步驟定義和順序等等。
流程步驟的介面管理如下所示，可以通過雙擊修改，拖動調整順序的方式管理各個步驟的資訊。
編輯介面中，實現對流程模板的一些資訊進行維護，如下所示。
最終，我們根據以上介面完成了流程模板和流程例項，以及相關步驟的設定處理，如下圖所示。
4、業務受理列表
我們完成了流程模板，對於啟用的流程模板，我們提供給使用者建立具體的流程例項申請單，也就是提供建立流程申請單的入口。
由於我們約定了模板的名稱和具體申請單的關係，因此檢視申請單和編輯申請單的時候，使用的是同一個路由地址頁面，而根據傳入引數的不同，動態展示元件資訊，供檢視或者編輯處理。
但我們建立具體的表單的時候，根據表單的編輯介面，錄入不同的流程申請單的資料，以及附件、清單、流程使用者等資訊。
對於主從表單的處理，我們可以通過利用Vxe-table外掛的方式直接錄入資料的方式進行錄入 。
5、我的審批工作
我的審批工作，主要是根據當前使用者列出不同型別（我發起的、我的待辦、我的已辦）等不同狀態的申請單，從而可以快速處理自己的工作流審批業務工作。
通過雙擊行記錄或者單擊檢視按鈕，可以開啟詳細的申請單資訊進行處理。
檢視申請單中，會根據申請單的狀態，以及當前使用者的身份等等，自動展示可以操作流程的按鈕。
其中流程日誌展示相關的流程日誌和系統日誌等資訊，供參考瞭解。
系統日誌資訊，則詳細記錄每個步驟的建立和處理資訊。如在使用者完成當前步驟的時候，自動建立新的流程步驟資訊的日誌。
6、所有審批工作
為了方便管理員檢視不同的業務表單，以便核對處理或者刪除等操作，我們提供了一個管理介面，可以看到所有申請單的記錄資訊，同時記錄提供刪除操作，刪除申請單的時候，會把該申請單的相關步驟資訊，執行使用者資訊，對應表單記錄等資訊一併抹除。
7、我的草稿
為了便於在建立申請單的時候暫存草稿資訊，我們提供了一個通用的草稿儲存表，用於儲存任何資訊的申請單資訊。
在申請單建立介面裡面，在末尾都會提供一個【儲存草稿】的按鈕，如下所示。
草稿的管理介面如下所示。
單擊編輯按鈕，可以對該草稿進行編輯，以便恢復到之前的錄入狀態。
8、業務表單
業務表單則是提供對具體型別的申請單資料進行檢視，如下選單所示。
這樣不同的表單，有不同的查詢介面，可以提供更加進行的業務表單資料查詢或者統計處理。
主要研究技術：程式碼生成工具、會員管理系統、客戶關係管理軟體、病人資料管理軟體、Visio二次開發、酒店管理系統、倉庫管理系統等共享軟體開發專注於Winform開發框架/混合式開發框架、Web開發框架、Bootstrap開發框架、微信門戶開發框架的研究及應用。
轉載請註明出處：
撰寫人：伍華聰 http://www.iqidi.com