我們知道，權(quán)限管理一般都會(huì)涉及到用戶(hù)、組織機(jī)構(gòu)、角色，以及權(quán)限功能等方面的內(nèi)容，ABP框架的基礎(chǔ)內(nèi)容也是涉及到這幾方面的內(nèi)容，其中它們之間的關(guān)系基本上是多對(duì)多的關(guān)系，它們的關(guān)系如下所示。

權(quán)限模塊里面包含的一些主對(duì)象表和中間表，中間表主要用來(lái)存儲(chǔ)兩個(gè)對(duì)象之間的多對(duì)多關(guān)系，如角色包含多個(gè)用戶(hù)，用戶(hù)屬于多個(gè)機(jī)構(gòu)，機(jī)構(gòu)包含多個(gè)角色等等。

結(jié)合ABP后端提供的接口，Vue前端我們要實(shí)現(xiàn)基礎(chǔ)的用戶(hù)、組織機(jī)構(gòu)、角色、功能權(quán)限等內(nèi)容的管理，以及維護(hù)它們之間的關(guān)系。Vue前端對(duì)于權(quán)限管理模塊的菜單列表如下所示。

上圖權(quán)限管理模塊中，包括用戶(hù)管理、機(jī)構(gòu)管理、角色管理、菜單管理、功能管理、審計(jì)日志、登錄日志等內(nèi)容模塊的管理。

其中用戶(hù)管理模塊，主要用來(lái)展示用戶(hù)信息列表，以及查看對(duì)應(yīng)用戶(hù)權(quán)限、維護(hù)密碼等處理。

用戶(hù)列表界面如下所示，包括對(duì)應(yīng)條件的查詢(xún)和列表展示、以及查看、添加、編輯、刪除、重置密碼等功能入口。

用戶(hù)信息查看界面如下所示

主要展示用戶(hù)基礎(chǔ)信息，和所屬的關(guān)系信息，其中權(quán)限部分列出對(duì)應(yīng)用戶(hù)包含的功能點(diǎn)，用于界面按鈕等方面的控制處理。

用戶(hù)添加界面，則主要用來(lái)處理錄入用戶(hù)基礎(chǔ)信息部分即可，如下界面所示。

用戶(hù)信息錄入，對(duì)用戶(hù)基礎(chǔ)表單數(shù)據(jù)進(jìn)行校驗(yàn)，符合格式要求才能錄入。

用戶(hù)編輯界面，基本上和上面的類(lèi)似了，不在贅述。

另外，刪除用戶(hù)或者重置密碼，一般需對(duì)確認(rèn)后再行操作，彈出一個(gè)對(duì)話(huà)框用戶(hù)確認(rèn)再繼續(xù)。

以上我們介紹了權(quán)限管理模塊涉及的內(nèi)容和關(guān)系，并著重介紹了用戶(hù)管理界面中的內(nèi)容展示，下面介紹在Element中如何實(shí)現(xiàn)對(duì)上面界面的處理的。

首先我們需要根據(jù)ABP后端的接口進(jìn)行前端JS端的類(lèi)的封裝處理，其中前面說(shuō)過(guò)，常規(guī)的Get/GetAll/Create/Update/Delete/Count等接口，我們放在BaseApi基類(lèi)里面定義，其他子類(lèi)繼承它即可。

權(quán)限模塊我們涉及到的用戶(hù)管理、機(jī)構(gòu)管理、角色管理、菜單管理、功能管理、審計(jì)日志、登錄日志等業(yè)務(wù)類(lèi)，那么這些類(lèi)繼承BaseApi，就會(huì)具有相關(guān)的接口了，如下所示繼承關(guān)系。

我們這里以UserAPI的JS類(lèi)定義介紹，如下所示。

我們以其中一個(gè)接口為例進(jìn)行介紹實(shí)現(xiàn)代碼，可以看到主要就是簡(jiǎn)單封裝的調(diào)用即可。

GetGrantedFunctionsByUser(id) { // 獲取用戶(hù)權(quán)限列表 return request({ url: this.baseurl + ’GetGrantedFunctionsByUser’, method: ’get’, params: { id } }) }

有了這些業(yè)務(wù)類(lèi)的準(zhǔn)備，那么我們和后端ABP的API接口對(duì)接，就很容易了，如下圖所示。

剩下的就是對(duì)Vue + Element前端的界面處理事情了。

我們先來(lái)看看查詢(xún)的處理，常規(guī)的查詢(xún)涉及日期區(qū)間的查詢(xún)處理，這里我們用一個(gè)一個(gè)查詢(xún)?nèi)掌诘奶幚聿僮鳎缦聢D所示。

表單的界面代碼如下所示

<el-form ref='searchForm' :model='searchForm' label- :inline='true'> <el-form-item label='創(chuàng)建時(shí)間'><el-date-picker v-model='searchForm.creationTime' type='daterange' unlink-panels range-separator='至' start-placeholder='開(kāi)始日期' end-placeholder='結(jié)束日期' :picker-options='pickerOptions'/> </el-form-item> <el-form-item label='用戶(hù)名' prop='UserName'><el-input v-model='searchForm.UserName' /> </el-form-item> <el-form-item label='手機(jī)' prop='PhoneNumber'><el-input v-model='searchForm.PhoneNumber' /> </el-form-item> </el-form>

其中定義了一個(gè)pickerOptions 屬性，用于快速選擇日期的，在data里面增加一個(gè)這樣的屬性即可。

pickerOptions: {shortcuts: [{ text: ’最近一周’, onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit(’pick’, [start, end]); }}, { text: ’最近一個(gè)月’, onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit(’pick’, [start, end]); }}, { text: ’最近三個(gè)月’, onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit(’pick’, [start, end]); }}] },

在頁(yè)面里面，我們定義了一些分頁(yè)查詢(xún)的處理?xiàng)l件和對(duì)象，如下所示。

查詢(xún)表單則定義一個(gè)單獨(dú)的表單對(duì)象，如下代碼所示

searchForm: { // 查詢(xún)表單 UserName: ’’, PhoneNumber: ’’, creationTime: ’’ },

頁(yè)面加載準(zhǔn)備好，我們就調(diào)用獲取列表的數(shù)據(jù)即可。

created() { // 頁(yè)面加載后，加載列表數(shù)據(jù)this.getlist()},

獲取列表的處理操作如下代碼所示，主要就是準(zhǔn)備構(gòu)建好對(duì)應(yīng)的查詢(xún)參數(shù)，然后調(diào)用UserApi類(lèi)的接口查詢(xún)列表即可。

getlist() { // 列表數(shù)據(jù)獲取 var CreationTimeStart = ’’ if (this.searchForm.creationTime && this.searchForm.creationTime.length > 0) {CreationTimeStart = this.parseTime(this.searchForm.creationTime[0], ’{y}-{m}-vyzdlmgt’) } var CreationTimeEnd = ’’ if (this.searchForm.creationTime && this.searchForm.creationTime.length > 1) {CreationTimeEnd = this.parseTime(this.searchForm.creationTime[1], ’{y}-{m}-vyzdlmgt’) } var param = { // 構(gòu)造常規(guī)的分頁(yè)查詢(xún)條件SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,MaxResultCount: this.pageinfo.pagesize,// 過(guò)濾條件UserName: this.searchForm.UserName,PhoneNumber: this.searchForm.PhoneNumber,CreationTimeStart: CreationTimeStart,CreationTimeEnd: CreationTimeEnd }; // 獲取列表，綁定到模型上，并修改分頁(yè)數(shù)量 this.listLoading = true user.GetAll(param).then(data => {this.list = data.result.itemsthis.pageinfo.total = data.result.totalCountthis.listLoading = false }) }, search() { // 查詢(xún)列表處理 this.pageinfo.pageindex = 1;// 重置為第一頁(yè)= this.getlist() },

通過(guò)列表的查詢(xún)操作，我們就可以把數(shù)據(jù)獲取到，界面就會(huì)得到及時(shí)的更新顯示了

// 獲取列表，綁定到模型上，并修改分頁(yè)數(shù)量 this.listLoading = true user.GetAll(param).then(data => {this.list = data.result.itemsthis.pageinfo.total = data.result.totalCountthis.listLoading = false })

而列表主要就是在界面使用el-table組件進(jìn)行展示的了，如下圖所示代碼。

el-table綁定了對(duì)應(yīng)的數(shù)據(jù)，并設(shè)置好顯示的格式以及選擇操作事件、行雙擊事件等操作。

而el-table里面的顯示的列，需要根據(jù)我們返回?cái)?shù)據(jù)的屬性名稱(chēng)進(jìn)行顯示，如下代碼所示。

而如果我們需要對(duì)屬性進(jìn)行特殊的展示，我們就需要使用v-if條件或者過(guò)濾器進(jìn)行處理了。如下是根據(jù)不同內(nèi)容，構(gòu)建標(biāo)簽顯示內(nèi)容。

<el-table-column label='賬號(hào)激活' width='80'><template slot-scope='scope'> <el-tag v-if='scope.row.isActive === true' type='success' effect='dark'>已激活</el-tag> <el-tag v-else type='danger' effect='dark'>未激活</el-tag></template> </el-table-column>

而對(duì)于時(shí)間，我們則可以使用格式化函數(shù)或者過(guò)濾器規(guī)范顯示的格式內(nèi)容。

<el-table-column label='創(chuàng)建時(shí)間' prop='creationTime' :formatter='dateFormat' />

其中:formatter='dateFormat' 指定了對(duì)應(yīng)的格式化處理函數(shù)。

dateFormat(row, column, cellValue) { // this.parseTime是在main.js中的全局掛載函數(shù) return cellValue ? this.parseTime(cellValue, ’{y}-{m}-vyzdlmgt’) : ’’ // 完整格式：{y}-{m}-vyzdlmgt {h}-{i}-{s} }, timeFormat(row, column, cellValue) { // this.parseTime是在main.js中的全局掛載函數(shù) return cellValue ? this.parseTime(cellValue, ’{y}-{m}-vyzdlmgt {h}:{i}:{s}’) : ’’ // 完整格式：{y}-{m}-vyzdlmgt {h}-{i}-{s} }

另外，操作列的代碼，主要就是構(gòu)建一些方法操作的入口，并傳遞對(duì)應(yīng)的變量，如ID值即可。

<el-table-column label='操作' width='190'><template scope='scope'> <el-row> <el-tooltip effect='light' content='查看' placement='top-start'> <el-button icon='el-icon-search' type='success' circle size='mini' @click='showView(scope.row.id)' /> </el-tooltip> <el-tooltip effect='light' content='編輯' placement='top-start'> <el-button icon='el-icon-edit' type='primary' circle size='mini' @click='showEdit(scope.row.id)' /> </el-tooltip> <el-tooltip effect='light' content='刪除' placement='top-start'> <el-button icon='el-icon-delete' type='danger' circle size='mini' @click='showDelete(scope.row.id)' /> </el-tooltip> <el-tooltip effect='light' content='重置密碼' placement='top-start'> <el-button icon='el-icon-setting' type='warning' circle size='mini' @click='showSetPass(scope.row.id)' /> </el-tooltip> </el-row></template> </el-table-column>

列表的底部分頁(yè)處理，也是利用對(duì)應(yīng)的屬性進(jìn)行顯示即可，并處理分頁(yè)變化的事件。

<div style='height:70px;'> <el-pagination:current-page='pageinfo.pageindex':page-size='pageinfo.pagesize':total='pageinfo.total':page-sizes='[10,20,30,40]'layout='total, sizes, prev, pager, next'@size-change='sizeChange'@current-change='currentChange' /> </div>

最后完成列表界面代碼，顯示列表界面如下所示。

而對(duì)于查看、編輯、新增等對(duì)話(huà)框，一般我們需要?jiǎng)?chuàng)建對(duì)應(yīng)的表單屬性，用來(lái)承載對(duì)應(yīng)的信息的，如我們?yōu)榱瞬榭葱畔⒌男枰瑒?chuàng)建一個(gè)viewForm的對(duì)象，如下所示。

viewForm: { // 查看表單id: ’’,userName: ’’,surname: ’’,name: ’’,emailAddress: ’’,phoneNumber: ’’,ouNames: ’’ },

在查看信息對(duì)話(huà)框里面，我們展示對(duì)應(yīng)的用戶(hù)信息，包括基礎(chǔ)信息和相關(guān)的關(guān)系，如下界面代碼所示。

界面組件通過(guò)v-modal進(jìn)行綁定對(duì)應(yīng)的ViewForm屬性對(duì)象即可。

最后，我們?cè)谟|發(fā)showView函數(shù)里面，獲取對(duì)應(yīng)的用戶(hù)信息，然后展示在界面上即可，showView函數(shù)代碼如下所示。

showView(id) { // 顯示查看對(duì)話(huà)框處理 var param = { id: id } user.Get(param).then(data => {// console.log(data.result)Object.assign(this.viewForm, data.result);this.getOuName(id).then(result => { this.viewForm.ouNames = result}) }) this.getFunctionsByUser(id) this.isView = true },

查看界面效果如下所示。

在新增或者編輯處理界面中，我們修改了數(shù)據(jù)，都會(huì)提交到ABP后端進(jìn)行錄入或者更新，因此就涉及到數(shù)據(jù)的回寫(xiě)處理，然后提示客戶(hù)端狀態(tài)即可。

下面是保存編輯界面的內(nèi)容操作。

saveEdit() { // 保存數(shù)據(jù)處理 this.$refs[’editForm’].validate(valid => {if (valid) { // 保存數(shù)據(jù) const form = this.editForm user.Update(form).then(data => { // console.log(data) if (data.success) { // 提示信息 this.msgSuccess(’更新成功!’) // 刷新數(shù)據(jù) this.getlist() } else { this.msgError(’更新失敗：’ + data.error) } this.$refs[’editForm’].resetFields() // 重置窗口狀態(tài) this.closeDialog() })} }) },

其中msgSuccess、msgError是全局掛載的提示信息函數(shù)，在入口main.js里面統(tǒng)一處理，封裝的函數(shù)方便在各個(gè)界面中統(tǒng)一處理。

以上就是關(guān)于用戶(hù)管理界面的內(nèi)容介紹，其中涉及到前端API類(lèi)的封裝處理，界面組件的使用，以及一些常規(guī)操作，希望能夠帶給大家一些vue+element開(kāi)發(fā)界面的參考。

以上就是Vue Element前端應(yīng)用開(kāi)發(fā)之用戶(hù)管理模塊的處理的詳細(xì)內(nèi)容，更多關(guān)于Vue Element之用戶(hù)管理模塊的處理的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！