循序漸進VUE+Element 前端應用開發(16)--- 組織機構和角色管理模組的處理
在前面隨筆《循序漸進VUE+Element 前端應用開發(15)--- 使用者管理模組的處理》中介紹了使用者管理模組的內容,包括使用者列表的展示,各種檢視、編輯、新增對話方塊的介面處理和後臺資料處理操作,本篇隨筆繼續深化Vue + Element許可權管理模組管理的內容,介紹組織機構和角色管理模組的處理,通過組織機構和角色管理模組的介紹,使得我們瞭解介面元件化模組的開發思路和做法,提高我們介面設計的技巧,並減少程式碼的複雜性,提高介面程式碼的可讀性,同時也是利用元件的複用管理。
1、組織機構管理模組介面
組織機構管理模組介面如下所示,包括組織機構的成員管理和角色管理,在ABP基礎領域裡面,組織機構可以包含0到多個成員,也可以包含0到多個角色,因此介面設計如下所示。
在物件UML的圖例中,應該是如下所示的效果圖,組織機構包含組織成員和角色的內容。
在介面上,組織成員還需要新增成員的功能,同理角色也需要新增角色的處理,如下UML圖示。
由於新增成員也是一個介面功能,一般情況下,如果我們放在一個頁面裡面,可能會增加程式碼量,增加程式碼維護難度和降低可讀性,因此我們可以考慮把這些新增成員、新增角色的操作放在一個獨立的元件模組裡面進行設計,然後在主頁面中引用元件即可。
組織機構新增成員的介面是彈出一個對話方塊,然後在其中查詢選擇系統使用者列表,確認即可完成新增成員操作。
對於新增角色操作,也是類似的處理,把它們的邏輯和介面處理,封裝為一個獨立的介面元件,這個在Vue+Element是非常方便的,也是常用隱藏複雜性的做法。新增角色介面效果如下所示,彈出對話方塊中選擇系統角色,確認新增到對應的組織機構即可。
2、角色管理介面
角色管理首先也是以列表展示系統角色的內容,如下介面所示。
其中每個角色,除了包含基本資訊外,還會包含擁有的許可權(功能控制點)、包含使用者,以及擁有的選單,其中許可權是用來控制介面元素,如操作按鈕的顯示的,而擁有的選單,則是使用者以指定賬號登入系統後,獲得對應角色的選單,然後構建對應的訪問入口的。
角色介面模組UML類圖如下所示。
那麼對應介面元素上,我們就應該以不同的Tab來展示這些資訊,如下所示。 其中可以看到不同的Tab顯示不同的內容。
角色包含的許可權如下所示
其中擁有的選單也是一個樹形列表,和許可權類似,如下介面所示。
上面幾個圖是檢視介面的內容,而新增或者編輯角色,則需要對樹形列表進行勾選操作,以便為角色選擇對應的許可權和擁有的選單許可權。
我們以選單許可權為例,編輯角色資訊的時候,對應的樹形列表應該可以勾選,確認後把勾選的使用者選擇提交到後臺儲存處理。
3、介面模組化的處理
上面模組中,涉及到多個頁面內容的處理,如果把所有的內容全部放在一個頁面裡面,頁面內容和JS的邏輯程式碼將會比較臃腫,難以維護,增加編輯介面程式碼的難度。
其實介面設計,也是可以以UML的類圖為規則,一個業務介面一個元件的方式來構建介面,而介面元件可以在多個地方重用,有時候可以設計不同的屬性來區分即可。
我們回到組織機構裡面新增成員和新增角色的操作UML圖。
其中新增成員、新增角色,涉及介面的列表資料展示以及對應的新增展示操作,獨立一個介面還是比較方便的,而且新增成員 ,在角色維護模組裡面也需要用到,那麼可以相容兩個場景來設計元件模組。
完成新增成員、新增角色的介面元件後,我們就可以在組織機構介面裡面引入使用。
接著加入對應的元件集合裡面即可。
然後在介面部分加入對應的元件呈現程式碼,如下所示。
有了這些準備,我們就可以在需要觸發介面顯示的時候,呼叫程式碼展示對應的對話方塊介面元件即可。
addUser() { // 顯示新增成員對話方塊 var ouid = this.searchForm.OrganizationUnitId if (!ouid || typeof (ouid) === 'undefined') { this.msgError('請先選擇組織機構!') return } this.$refs.selectuser.show() }, addRole() { // 顯示新增成員對話方塊 var ouid = this.searchForm.OrganizationUnitId if (!ouid || typeof (ouid) === 'undefined') { this.msgError('請先選擇組織機構!') return } this.$refs.selectrole.show() },
對於角色模組也是類似,我們儘可能設計更多可以重用的介面模組,減少主模組頁面程式碼,並提高元件的複用率。
之前介紹過,角色介面模組UML類圖如下所示。
我們也可以依據這個來對模組的內容進行劃分,不同業務設計不同的介面元件,最後整合一起使用即可。
這樣我們檢視角色詳細資訊的時候,介面程式碼就可以減少很多,只需要引入對應的介面元件即可,如下程式碼所示。
<el-dialog title="檢視資訊" :visible="isView" :modal-append-to-body="false" @close="closeDialog"> <el-col> <el-tabs value="basicPage" type="border-card"> <el-tab-pane name="basicPage" label="基本資訊"> <el-form ref="viewForm" :model="viewForm" label-width="120px"> <el-form-item label="角色名"> <el-input v-model="viewForm.name" disabled /> </el-form-item> <el-form-item label="角色顯示名"> <el-input v-model="viewForm.displayName" disabled /> </el-form-item> <el-form-item label="角色描述"> <el-input v-model="viewForm.description" type="textarea" disabled /> </el-form-item> </el-form> </el-tab-pane> <el-tab-pane name="permitPage" label="許可權"> <rolefunction ref="rolefunction" :role-id="selectRoleId" /> </el-tab-pane> <el-tab-pane name="userPage" label="使用者"> <roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" /> </el-tab-pane> <el-tab-pane name="menuPage" label="選單"> <rolemenu ref="rolemenu" :role-id="selectRoleId" /> </el-tab-pane> </el-tabs> </el-col> <div slot="footer" class="dialog-footer"> <el-button type="success" @click="closeDialog">關閉</el-button> </div> </el-dialog>
上面著重部分就是引入對應的介面元件,這樣在編輯介面裡面,我們依舊可以重用這部分的介面元件,介面元件的介面內容展示控制是內處理的,我們在主介面不用管理,非常方便。
角色檢視詳細介面效果如下所示。
角色的編輯介面程式碼如下所示。
<el-dialog title="編輯資訊" :visible="isEdit" :modal-append-to-body="false" @close="closeDialog"> <el-col> <el-tabs value="basicPage2" type="border-card"> <el-tab-pane name="basicPage2" label="基本資訊"> <el-form ref="editForm" :rules="rules" :model="editForm" label-width="120px"> <el-form-item label="角色名"> <el-input v-model="editForm.name" /> </el-form-item> <el-form-item label="角色顯示名"> <el-input v-model="editForm.displayName" /> </el-form-item> <el-form-item label="角色描述"> <el-input v-model="editForm.description" type="textarea" /> </el-form-item> </el-form> </el-tab-pane> <el-tab-pane name="permitPage2" label="許可權"> <rolefunction ref="rolefunction2" :showcheck="true" :role-id="selectRoleId" /> </el-tab-pane> <el-tab-pane name="userPage2" label="使用者"> <roleuser ref="roleuser2" :role-id="selectRoleId" :can-add="true" :can-delete="true" /> </el-tab-pane> <el-tab-pane name="menuPage2" label="選單"> <rolemenu ref="rolemenu2" :showcheck="true" :role-id="selectRoleId" /> </el-tab-pane> </el-tabs> </el-col> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="saveEdit()">確定</el-button> <el-button type="success" @click="closeDialog">關閉</el-button> </div> </el-dialog> </div>
角色的編輯介面效果如下所示。
在介面元件模組裡面,如果我們需要接受父元件或介面呼叫的時候,傳入引數使用Props來定義即可。
而如果需要元件返回對應的內容,如勾選樹列表的選項,那麼我們在元件定義中設計一個函式用來返回元件的內容即可。
這樣我們在父視窗或者父元件中就可以獲得子元件的資料了。
通過上面的介紹,我們應該理解到,儘可能按介面展示業務邏輯來區分不同的元件模組,可以極大降低主介面的維護複雜性,而且介面元件也是內聚處理的,因此使用的時候也是非常方便。
通過設計不同的介面元件,我們可以組織起來更加強大的介面展示,而並不影響維護的比便利性,這個就是模組化處理的優勢所在。
為了方便讀者理解,我列出一下前面幾篇隨筆的連線,供參考:
循序漸進VUE+Element 前端應用開發(1)--- 開發環境的準備工作
循序漸進VUE+Element 前端應用開發(2)--- Vuex中的API、Store和View的使用
循序漸進VUE+Element 前端應用開發(3)--- 動態選單和路由的關聯處理
循序漸進VUE+Element 前端應用開發(4)--- 獲取後端資料及產品資訊頁面的處理
循序漸進VUE+Element 前端應用開發(5)--- 表格列表頁面的查詢,列表展示和欄位轉義處理
循序漸進VUE+Element 前端應用開發(6)--- 常規Element 介面元件的使用
循序漸進VUE+Element 前端應用開發(7)--- 介紹一些常規的JS處理函式
循序漸進VUE+Element 前端應用開發(8)--- 樹列表元件的使用
循序漸進VUE+Element 前端應用開發(9)--- 介面語言國際化的處理
循序漸進VUE+Element 前端應用開發(11)--- 圖示的維護和使用
循序漸進VUE+Element 前端應用開發(12)--- 整合ABP框架的前端登入處理
循序漸進VUE+Element 前端應用開發(13)--- 前端API介面的封裝處理
循序漸進VUE+Element 前端應用開發(14)--- 根據ABP後端介面實現前端介面展示
循序漸進VUE+Element 前端應用開發(15)--- 使用者管理模組的處理
循序漸進VUE+Element 前端應用開發(16)--- 組織機構和角色管理模組的處理&n