在前面隨筆介紹了ABP+Vue前后端的整合處理，包括介紹了ABP的后端設計，以及前端對ABP介面API的ES6的封裝，通過JS的繼承類處理，極大減少了重復臃腫的代碼，可以簡化對后端API介面的封裝，而且前端使用Element組件，很好展示API獲得的資料，通過在界面中展示樹狀串列，以及表格串列資料，可以構建一個很好的串列展示界面，而常規的界面，通過也包括了新增、編輯、查看等展示場景，一般我們通過對話框的方式進行展示處理，本篇隨筆以權限管理模塊中的用戶管理為媒介，進行相關功能的介紹和界面設計的處理，
1、權限管理模塊的設計
我們知道，權限管理一般都會涉及到用戶、組織機構、角色，以及權限功能等方面的內容，ABP框架的基礎內容也是涉及到這幾方面的內容，其中它們之間的關系基本上是多對多的關系，它們的關系如下所示，
權限模塊里面包含的一些主物件表和中間表，中間表主要用來存盤兩個物件之間的多對多關系，如角色包含多個用戶，用戶屬于多個機構，機構包含多個角色等等，
結合ABP后端提供的介面，Vue前端我們要實作基礎的用戶、組織機構、角色、功能權限等內容的管理，以及維護它們之間的關系，Vue前端對于權限管理模塊的選單串列如下所示，
上圖權限管理模塊中，包括用戶管理、機構管理、角色管理、選單管理、功能管理、審計日志、登錄日志等內容模塊的管理，
其中用戶管理模塊，主要用來展示用戶資訊串列，以及查看對應用戶權限、維護密碼等處理，
用戶串列界面如下所示，包括對應條件的查詢和串列展示、以及查看、添加、編輯、洗掉、重置密碼等功能入口，
用戶資訊查看界面如下所示
主要展示用戶基礎資訊，和所屬的關系資訊，其中權限部分列出對應用戶包含的功能點，用于界面按鈕等方面的控制處理，
用戶添加界面，則主要用來處理錄入用戶基礎資訊部分即可，如下界面所示，
用戶資訊錄入，對用戶基礎表單資料進行校驗，符合格式要求才能錄入，
用戶編輯界面，基本上和上面的類似了，不在贅述，
另外，洗掉用戶或者重置密碼，一般需對確認后再行操作，彈出一個對話框用戶確認再繼續，
ABP+Vue的框架參考的是已完成的ABP+Winform的功能界面進行開發，具體也可以了解下Winform版本框架《ABP開發框架前后端開發系列---（14）基于Winform的ABP快速開發框架》
2、用戶管理界面功能
以上我們介紹了權限管理模塊涉及的內容和關系，并著重介紹了用戶管理界面中的內容展示，下面介紹在Element中如何實作對上面界面的處理的，
首先我們需要根據ABP后端的介面進行前端JS端的類的封裝處理，其中前面說過，常規的Get/GetAll/Create/Update/Delete/Count等介面，我們放在BaseApi基類里面定義，其他子類繼承它即可，
權限模塊我們涉及到的用戶管理、機構管理、角色管理、選單管理、功能管理、審計日志、登錄日志等業務類，那么這些類繼承BaseApi，就會具有相關的介面了，如下所示繼承關系，
我們這里以UserAPI的JS類定義介紹，如下所示，
我們以其中一個介面為例進行介紹實作代碼，可以看到主要就是簡單封裝的呼叫即可，
GetGrantedFunctionsByUser(id) { // 獲取用戶權限串列
return request({
url: this.baseurl + 'GetGrantedFunctionsByUser',
method: 'get',
params: { id }
})
}
有了這些業務類的準備，那么我們和后端ABP的API介面對接，就很容易了，如下圖所示，
剩下的就是對Vue + Element前端的界面處理事情了，
我們先來看看查詢的處理，常規的查詢涉及日期區間的查詢處理，這里我們用一個一個查詢日期的處理操作，如下圖所示，
表單的界面代碼如下所示
<el-form ref="searchForm" :model="searchForm" label-width="80" :inline="true"> <el-form-item label="創建時間"> <el-date-picker v-model="searchForm.creationTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期" :picker-options="pickerOptions" /> </el-form-item> <el-form-item label="用戶名" prop="UserName"> <el-input v-model="searchForm.UserName" /> </el-form-item> <el-form-item label="手機" prop="PhoneNumber"> <el-input v-model="searchForm.PhoneNumber" /> </el-form-item> </el-form>
其中定義了一個pickerOptions 屬性，用于快速選擇日期的，在data里面增加一個這樣的屬性即可，
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: '最近一個月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); } }, { text: '最近三個月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit('pick', [start, end]); } }] },
在頁面里面，我們定義了一些分頁查詢的處理條件和物件，如下所示，
查詢表單則定義一個單獨的表單物件，如下代碼所示
searchForm: { // 查詢表單
UserName: '',
PhoneNumber: '',
creationTime: ''
},
頁面加載準備好，我們就呼叫獲取串列的資料即可，
created() { // 頁面加載后，加載串列資料
this.getlist()
},
獲取串列的處理操作如下代碼所示，主要就是準備構建好對應的查詢引數，然后呼叫UserApi類的介面查詢串列即可，
getlist() { // 串列資料獲取
var CreationTimeStart = ''
if (this.searchForm.creationTime && this.searchForm.creationTime.length > 0) {
CreationTimeStart = this.parseTime(this.searchForm.creationTime[0], '{y}-{m}-{d}')
}
var CreationTimeEnd = ''
if (this.searchForm.creationTime && this.searchForm.creationTime.length > 1) {
CreationTimeEnd = this.parseTime(this.searchForm.creationTime[1], '{y}-{m}-{d}')
}
var param = { // 構造常規的分頁查詢條件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize,
// 過濾條件
UserName: this.searchForm.UserName,
PhoneNumber: this.searchForm.PhoneNumber,
CreationTimeStart: CreationTimeStart,
CreationTimeEnd: CreationTimeEnd
};
// 獲取串列，系結到模型上，并修改分頁數量
this.listLoading = true
user.GetAll(param).then(data => {
this.list = data.result.items
this.pageinfo.total = data.result.totalCount
this.listLoading = false
})
},
search() { // 查詢串列處理
this.pageinfo.pageindex = 1;// 重置為第一頁=
this.getlist()
},
通過串列的查詢操作，我們就可以把資料獲取到，界面就會得到及時的更新顯示了
// 獲取串列，系結到模型上，并修改分頁數量 this.listLoading = true user.GetAll(param).then(data => { this.list = data.result.items this.pageinfo.total = data.result.totalCount this.listLoading = false })
而串列主要就是在界面使用el-table組件進行展示的了，如下圖所示代碼，
el-table系結了對應的資料，并設定好顯示的格式以及選擇操作事件、行雙擊事件等操作，
而el-table里面的顯示的列，需要根據我們回傳資料的屬性名稱進行顯示，如下代碼所示，
而如果我們需要對屬性進行特殊的展示，我們就需要使用v-if條件或者過濾器進行處理了，如下是根據不同內容，構建標簽顯示內容，
<el-table-column align="center" label="賬號激活" 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>
而對于時間，我們則可以使用格式化函式或者過濾器規范顯示的格式內容，
<el-table-column align="center" label="創建時間" width="120" prop="creationTime" :formatter="dateFormat" />
其中 :formatter="dateFormat" 指定了對應的格式化處理函式，
dateFormat(row, column, cellValue) { // this.parseTime是在main.js中的全域掛載函式 return cellValue ? this.parseTime(cellValue, '{y}-{m}-{d}') : '' // 完整格式：{y}-{m}-{d} {h}-{i}-{s} }, timeFormat(row, column, cellValue) { // this.parseTime是在main.js中的全域掛載函式 return cellValue ? this.parseTime(cellValue, '{y}-{m}-{d} {h}:{i}:{s}') : '' // 完整格式：{y}-{m}-{d} {h}-{i}-{s} }
另外，操作列的代碼，主要就是構建一些方法操作的入口，并傳遞對應的變數，如ID值即可，
<el-table-column align="center" 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>
串列的底部分頁處理，也是利用對應的屬性進行顯示即可，并處理分頁變化的事件，
<div class="block" 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>
最后完成串列界面代碼，顯示串列界面如下所示，
而對于查看、編輯、新增等對話框，一般我們需要創建對應的表單屬性，用來承載對應的資訊的，如我們為了查看資訊的需要，創建一個viewForm的物件，如下所示，
viewForm: { // 查看表單
id: '',
userName: '',
surname: '',
name: '',
emailAddress: '',
phoneNumber: '',
ouNames: ''
},
在查看資訊對話框里面，我們展示對應的用戶資訊，包括基礎資訊和相關的關系，如下界面代碼所示，
界面組件通過v-modal進行系結對應的ViewForm屬性物件即可，
最后，我們在觸發showView函式里面，獲取對應的用戶資訊，然后展示在界面上即可，showView函式代碼如下所示，
showView(id) { // 顯示查看對話框處理
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
},
查看界面效果如下所示，
在新增或者編輯處理界面中，我們修改了資料，都會提交到ABP后端進行錄入或者更新，因此就涉及到資料的回寫處理，然后提示客戶端狀態即可，
下面是保存編輯界面的內容操作，
saveEdit() { // 保存資料處理
this.$refs['editForm'].validate(valid => {
if (valid) {
// 保存資料
const form = this.editForm
user.Update(form).then(data => {
// console.log(data)
if (data.success) {
// 提示資訊
this.msgSuccess('更新成功!')
// 重繪資料
this.getlist()
} else {
this.msgError('更新失敗：' + data.error)
}
this.$refs['editForm'].resetFields()
// 重置視窗狀態
this.closeDialog()
})
}
})
},
其中msgSuccess、msgError 是全域掛載的提示資訊函式，在入口main.js里面統一處理，封裝的函式方便在各個界面中統一處理，
以上就是關于用戶管理界面的內容介紹，其中涉及到前端API類的封裝處理，界面組件的使用，以及一些常規操作，希望能夠帶給大家一些vue+element開發界面的參考，
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進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 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示
循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用
循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理
循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理
循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端介面實作前端界面展示
循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理
循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理
循序漸進VUE+Element 前端應用開發(17）--- 選單管理
循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7093.html
標籤：Html/Css
上一篇：客車網上售票系統--需求分析