組織機(jī)構(gòu)管理模塊界面如下所示，包括組織機(jī)構(gòu)的成員管理和角色管理，在ABP基礎(chǔ)領(lǐng)域里面，組織機(jī)構(gòu)可以包含0到多個(gè)成員，也可以包含0到多個(gè)角色，因此界面設(shè)計(jì)如下所示。

在對(duì)象UML的圖例中，應(yīng)該是如下所示的效果圖，組織機(jī)構(gòu)包含組織成員和角色的內(nèi)容。

在界面上，組織成員還需要添加成員的功能，同理角色也需要添加角色的處理，如下UML圖示。

由于添加成員也是一個(gè)界面功能，一般情況下，如果我們放在一個(gè)頁面里面，可能會(huì)增加代碼量，增加代碼維護(hù)難度和降低可讀性，因此我們可以考慮把這些添加成員、添加角色的操作放在一個(gè)獨(dú)立的組件模塊里面進(jìn)行設(shè)計(jì)，然后在主頁面中引用組件即可。

組織機(jī)構(gòu)添加成員的界面是彈出一個(gè)對(duì)話框，然后在其中查詢選擇系統(tǒng)用戶列表，確認(rèn)即可完成添加成員操作。

對(duì)于添加角色操作，也是類似的處理，把它們的邏輯和界面處理，封裝為一個(gè)獨(dú)立的界面組件，這個(gè)在Vue+Element是非常方便的，也是常用隱藏復(fù)雜性的做法。添加角色界面效果如下所示，彈出對(duì)話框中選擇系統(tǒng)角色，確認(rèn)添加到對(duì)應(yīng)的組織機(jī)構(gòu)即可。

角色管理首先也是以列表展示系統(tǒng)角色的內(nèi)容，如下界面所示。

其中每個(gè)角色，除了包含基本信息外，還會(huì)包含擁有的權(quán)限（功能控制點(diǎn)）、包含用戶，以及擁有的菜單，其中權(quán)限是用來控制界面元素，如操作按鈕的顯示的，而擁有的菜單，則是用戶以指定賬號(hào)登錄系統(tǒng)后，獲得對(duì)應(yīng)角色的菜單，然后構(gòu)建對(duì)應(yīng)的訪問入口的。

角色界面模塊UML類圖如下所示。

那么對(duì)應(yīng)界面元素上，我們就應(yīng)該以不同的Tab來展示這些信息，如下所示。其中可以看到不同的Tab顯示不同的內(nèi)容。

角色包含的權(quán)限如下所示

其中擁有的菜單也是一個(gè)樹形列表，和權(quán)限類似，如下界面所示。

上面幾個(gè)圖是查看界面的內(nèi)容，而添加或者編輯角色，則需要對(duì)樹形列表進(jìn)行勾選操作，以便為角色選擇對(duì)應(yīng)的權(quán)限和擁有的菜單權(quán)限。

我們以菜單權(quán)限為例，編輯角色信息的時(shí)候，對(duì)應(yīng)的樹形列表應(yīng)該可以勾選，確認(rèn)后把勾選的用戶選擇提交到后臺(tái)保存處理

上面模塊中，涉及到多個(gè)頁面內(nèi)容的處理，如果把所有的內(nèi)容全部放在一個(gè)頁面里面，頁面內(nèi)容和JS的邏輯代碼將會(huì)比較臃腫，難以維護(hù)，增加編輯界面代碼的難度。

其實(shí)界面設(shè)計(jì)，也是可以以UML的類圖為規(guī)則，一個(gè)業(yè)務(wù)界面一個(gè)組件的方式來構(gòu)建界面，而界面組件可以在多個(gè)地方重用，有時(shí)候可以設(shè)計(jì)不同的屬性來區(qū)分即可。

我們回到組織機(jī)構(gòu)里面添加成員和添加角色的操作UML圖。

其中添加成員、添加角色，涉及界面的列表數(shù)據(jù)展示以及對(duì)應(yīng)的添加展示操作，獨(dú)立一個(gè)界面還是比較方便的，而且添加成員 ，在角色維護(hù)模塊里面也需要用到，那么可以兼容兩個(gè)場(chǎng)景來設(shè)計(jì)組件模塊。

完成添加成員、添加角色的界面組件后，我們就可以在組織機(jī)構(gòu)界面里面引入使用。

接著加入對(duì)應(yīng)的組件集合里面即可。

然后在界面部分加入對(duì)應(yīng)的組件呈現(xiàn)代碼，如下所示。

有了這些準(zhǔn)備，我們就可以在需要觸發(fā)界面顯示的時(shí)候，調(diào)用代碼展示對(duì)應(yīng)的對(duì)話框界面組件即可。

addUser() { // 顯示添加成員對(duì)話框 var ouid = this.searchForm.OrganizationUnitId if (!ouid || typeof (ouid) === ’undefined’) {this.msgError(’請(qǐng)先選擇組織機(jī)構(gòu)!’)return } this.$refs.selectuser.show() }, addRole() { // 顯示添加成員對(duì)話框 var ouid = this.searchForm.OrganizationUnitId if (!ouid || typeof (ouid) === ’undefined’) {this.msgError(’請(qǐng)先選擇組織機(jī)構(gòu)!’)return } this.$refs.selectrole.show() },

對(duì)于角色模塊也是類似，我們盡可能設(shè)計(jì)更多可以重用的界面模塊，減少主模塊頁面代碼，并提高組件的復(fù)用率。

之前介紹過，角色界面模塊UML類圖如下所示。

我們也可以依據(jù)這個(gè)來對(duì)模塊的內(nèi)容進(jìn)行劃分，不同業(yè)務(wù)設(shè)計(jì)不同的界面組件，最后整合一起使用即可。

這樣我們查看角色詳細(xì)信息的時(shí)候，界面代碼就可以減少很多，只需要引入對(duì)應(yīng)的界面組件即可，如下代碼所示。

<el-dialog :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='權(quán)限'> <rolefunction ref='rolefunction' :role- /> </el-tab-pane> <el-tab-pane name='userPage' label='用戶'> <roleuser ref='roleuser' :role- :can-add='false' :can-delete='false' /> </el-tab-pane> <el-tab-pane name='menuPage' label='菜單'> <rolemenu ref='rolemenu' :role- /> </el-tab-pane></el-tabs> </el-col> <div slot='footer' class='dialog-footer'><el-button type='success' @click='closeDialog'>關(guān)閉</el-button> </div> </el-dialog>

上面著重部分就是引入對(duì)應(yīng)的界面組件，這樣在編輯界面里面，我們依舊可以重用這部分的界面組件，界面組件的界面內(nèi)容展示控制是內(nèi)處理的，我們?cè)谥鹘缑娌挥霉芾恚浅７奖恪?/p>

角色查看詳細(xì)界面效果如下所示。

角色的編輯界面代碼如下所示。

<el-dialog :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='權(quán)限'> <rolefunction ref='rolefunction2' :showcheck='true' :role- /> </el-tab-pane> <el-tab-pane name='userPage2' label='用戶'> <roleuser ref='roleuser2' :role- :can-add='true' :can-delete='true' /> </el-tab-pane> <el-tab-pane name='menuPage2' label='菜單'> <rolemenu ref='rolemenu2' :showcheck='true' :role- /> </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'>關(guān)閉</el-button> </div> </el-dialog> </div>

角色的編輯界面效果如下所示。

在界面組件模塊里面，如果我們需要接受父組件或界面調(diào)用的時(shí)候，傳入?yún)?shù)使用Props來定義即可。

而如果需要組件返回對(duì)應(yīng)的內(nèi)容，如勾選樹列表的選項(xiàng)，那么我們?cè)诮M件定義中設(shè)計(jì)一個(gè)函數(shù)用來返回組件的內(nèi)容即可。

這樣我們?cè)诟复翱诨蛘吒附M件中就可以獲得子組件的數(shù)據(jù)了。

通過上面的介紹，我們應(yīng)該理解到，盡可能按界面展示業(yè)務(wù)邏輯來區(qū)分不同的組件模塊，可以極大降低主界面的維護(hù)復(fù)雜性，而且界面組件也是內(nèi)聚處理的，因此使用的時(shí)候也是非常方便。

通過設(shè)計(jì)不同的界面組件，我們可以組織起來更加強(qiáng)大的界面展示，而并不影響維護(hù)的比便利性，這個(gè)就是模塊化處理的優(yōu)勢(shì)所在。

以上就是Vue Element前端應(yīng)用開發(fā)之組織機(jī)構(gòu)和角色管理的詳細(xì)內(nèi)容，更多關(guān)于Vue Element之組織機(jī)構(gòu)和角色管理的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！