Vue Element前端應(yīng)用開發(fā)之用戶管理模塊的處理
1、權(quán)限管理模塊的設(shè)計
我們知道,權(quán)限管理一般都會涉及到用戶、組織機構(gòu)、角色,以及權(quán)限功能等方面的內(nèi)容,ABP框架的基礎(chǔ)內(nèi)容也是涉及到這幾方面的內(nèi)容,其中它們之間的關(guān)系基本上是多對多的關(guān)系,它們的關(guān)系如下所示。
權(quán)限模塊里面包含的一些主對象表和中間表,中間表主要用來存儲兩個對象之間的多對多關(guān)系,如角色包含多個用戶,用戶屬于多個機構(gòu),機構(gòu)包含多個角色等等。
結(jié)合ABP后端提供的接口,Vue前端我們要實現(xiàn)基礎(chǔ)的用戶、組織機構(gòu)、角色、功能權(quán)限等內(nèi)容的管理,以及維護它們之間的關(guān)系。Vue前端對于權(quán)限管理模塊的菜單列表如下所示。
上圖權(quán)限管理模塊中,包括用戶管理、機構(gòu)管理、角色管理、菜單管理、功能管理、審計日志、登錄日志等內(nèi)容模塊的管理。
其中用戶管理模塊,主要用來展示用戶信息列表,以及查看對應(yīng)用戶權(quán)限、維護密碼等處理。
用戶列表界面如下所示,包括對應(yīng)條件的查詢和列表展示、以及查看、添加、編輯、刪除、重置密碼等功能入口。
用戶信息查看界面如下所示
主要展示用戶基礎(chǔ)信息,和所屬的關(guān)系信息,其中權(quán)限部分列出對應(yīng)用戶包含的功能點,用于界面按鈕等方面的控制處理。
用戶添加界面,則主要用來處理錄入用戶基礎(chǔ)信息部分即可,如下界面所示。
用戶信息錄入,對用戶基礎(chǔ)表單數(shù)據(jù)進行校驗,符合格式要求才能錄入。
用戶編輯界面,基本上和上面的類似了,不在贅述。
另外,刪除用戶或者重置密碼,一般需對確認后再行操作,彈出一個對話框用戶確認再繼續(xù)。
2、用戶管理界面功能
以上我們介紹了權(quán)限管理模塊涉及的內(nèi)容和關(guān)系,并著重介紹了用戶管理界面中的內(nèi)容展示,下面介紹在Element中如何實現(xiàn)對上面界面的處理的。
首先我們需要根據(jù)ABP后端的接口進行前端JS端的類的封裝處理,其中前面說過,常規(guī)的Get/GetAll/Create/Update/Delete/Count等接口,我們放在BaseApi基類里面定義,其他子類繼承它即可。
權(quán)限模塊我們涉及到的用戶管理、機構(gòu)管理、角色管理、菜單管理、功能管理、審計日志、登錄日志等業(yè)務(wù)類,那么這些類繼承BaseApi,就會具有相關(guān)的接口了,如下所示繼承關(guān)系。
我們這里以UserAPI的JS類定義介紹,如下所示。
我們以其中一個接口為例進行介紹實現(xiàn)代碼,可以看到主要就是簡單封裝的調(diào)用即可。
GetGrantedFunctionsByUser(id) { // 獲取用戶權(quán)限列表 return request({ url: this.baseurl + 'GetGrantedFunctionsByUser', method: 'get', params: { id } }) }
有了這些業(yè)務(wù)類的準備,那么我們和后端ABP的API接口對接,就很容易了,如下圖所示。
剩下的就是對Vue + Element前端的界面處理事情了。
我們先來看看查詢的處理,常規(guī)的查詢涉及日期區(qū)間的查詢處理,這里我們用一個一個查詢?nèi)掌诘奶幚聿僮?,如下圖所示。
表單的界面代碼如下所示
<el-form ref="searchForm" :model="searchForm" label-width="80" :inline="true"> <el-form-item label="創(chuàng)建時間"> <el-date-picker v-model="searchForm.creationTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="開始日期" end-placeholder="結(jié)束日期" :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: '' },
頁面加載準備好,我們就調(diào)用獲取列表的數(shù)據(jù)即可。
created() { // 頁面加載后,加載列表數(shù)據(jù) this.getlist() },
獲取列表的處理操作如下代碼所示,主要就是準備構(gòu)建好對應(yīng)的查詢參數(shù),然后調(diào)用UserApi類的接口查詢列表即可。
getlist() { // 列表數(shù)據(jù)獲取 var CreationTimeStart = '' if (this.searchForm.creationTime && this.searchForm.creationTime.length > 0) { CreationTimeStart = this.parseTime(this.searchForm.creationTime[0], '{y}-{m}-vvxyksv9kd') } var CreationTimeEnd = '' if (this.searchForm.creationTime && this.searchForm.creationTime.length > 1) { CreationTimeEnd = this.parseTime(this.searchForm.creationTime[1], '{y}-{m}-vvxyksv9kd') } var param = { // 構(gòu)造常規(guī)的分頁查詢條件 SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize, MaxResultCount: this.pageinfo.pagesize, // 過濾條件 UserName: this.searchForm.UserName, PhoneNumber: this.searchForm.PhoneNumber, CreationTimeStart: CreationTimeStart, CreationTimeEnd: CreationTimeEnd }; // 獲取列表,綁定到模型上,并修改分頁數(shù)量 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() },
通過列表的查詢操作,我們就可以把數(shù)據(jù)獲取到,界面就會得到及時的更新顯示了
// 獲取列表,綁定到模型上,并修改分頁數(shù)量 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綁定了對應(yīng)的數(shù)據(jù),并設(shè)置好顯示的格式以及選擇操作事件、行雙擊事件等操作。
而el-table里面的顯示的列,需要根據(jù)我們返回數(shù)據(jù)的屬性名稱進行顯示,如下代碼所示。
而如果我們需要對屬性進行特殊的展示,我們就需要使用v-if條件或者過濾器進行處理了。如下是根據(jù)不同內(nèi)容,構(gòu)建標簽顯示內(nèi)容。
<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>
而對于時間,我們則可以使用格式化函數(shù)或者過濾器規(guī)范顯示的格式內(nèi)容。
<el-table-column align="center" label="創(chuàng)建時間" width="120" prop="creationTime" :formatter="dateFormat" />
其中:formatter="dateFormat" 指定了對應(yīng)的格式化處理函數(shù)。
dateFormat(row, column, cellValue) { // this.parseTime是在main.js中的全局掛載函數(shù) return cellValue ? this.parseTime(cellValue, '{y}-{m}-vvxyksv9kd') : '' // 完整格式:{y}-{m}-vvxyksv9kd {h}-{i}-{s} }, timeFormat(row, column, cellValue) { // this.parseTime是在main.js中的全局掛載函數(shù) return cellValue ? this.parseTime(cellValue, '{y}-{m}-vvxyksv9kd {h}:{i}:{s}') : '' // 完整格式:{y}-{m}-vvxyksv9kd {h}-{i}-{s} }
另外,操作列的代碼,主要就是構(gòu)建一些方法操作的入口,并傳遞對應(yīng)的變量,如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>
列表的底部分頁處理,也是利用對應(yīng)的屬性進行顯示即可,并處理分頁變化的事件。
<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>
最后完成列表界面代碼,顯示列表界面如下所示。
而對于查看、編輯、新增等對話框,一般我們需要創(chuàng)建對應(yīng)的表單屬性,用來承載對應(yīng)的信息的,如我們?yōu)榱瞬榭葱畔⒌男枰?,?chuàng)建一個viewForm的對象,如下所示。
viewForm: { // 查看表單 id: '', userName: '', surname: '', name: '', emailAddress: '', phoneNumber: '', ouNames: '' },
在查看信息對話框里面,我們展示對應(yīng)的用戶信息,包括基礎(chǔ)信息和相關(guān)的關(guān)系,如下界面代碼所示。
界面組件通過v-modal進行綁定對應(yīng)的ViewForm屬性對象即可。
最后,我們在觸發(fā)showView函數(shù)里面,獲取對應(yīng)的用戶信息,然后展示在界面上即可,showView函數(shù)代碼如下所示。
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 },
查看界面效果如下所示。
在新增或者編輯處理界面中,我們修改了數(shù)據(jù),都會提交到ABP后端進行錄入或者更新,因此就涉及到數(shù)據(jù)的回寫處理,然后提示客戶端狀態(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ù)方便在各個界面中統(tǒng)一處理。
以上就是關(guān)于用戶管理界面的內(nèi)容介紹,其中涉及到前端API類的封裝處理,界面組件的使用,以及一些常規(guī)操作,希望能夠帶給大家一些vue+element開發(fā)界面的參考。
以上就是Vue Element前端應(yīng)用開發(fā)之用戶管理模塊的處理的詳細內(nèi)容,更多關(guān)于Vue Element之用戶管理模塊的處理的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)
這篇文章主要介紹了vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue3 + vite + ts 中使用less文件全局變量的操作方法
這篇文章主要介紹了vue3 + vite + ts 中使用less文件全局變量的操作方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03jeecgboot-vue3查詢區(qū)label文字居左實現(xiàn)過程解析
這篇文章主要為大家介紹了jeecgboot-vue3查詢區(qū)label文字居左實現(xiàn)過程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪<BR>2023-08-08Vue3+Vite+TS使用elementPlus時踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時踩的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10