在權限管理系統中，選單也屬于權限控制的一個資源，應該直接應用于角色，和權限功能點一樣，屬于角色控制的一環，不同角色用戶，登錄系統后，出現的系統選單是不同的，在VUE+Element 前端中，我們選單結合路由集合，實作可訪問路由的過濾，也就實作了對應角色選單的展示和可訪問路由的控制，詳細可以參考隨筆《循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理》，本篇隨筆主要介紹選單管理模塊的界面和相關的實作邏輯，
1、選單資源及管理界面介紹
前面介紹過，權限管理一般都會涉及到用戶、組織機構、角色，以及權限功能等方面的內容，ABP框架的基礎內容也是涉及到這幾方面的內容，其中它們之間的關系基本上是多對多的關系，它們的關系如下所示，
加入選單資源，以及整理它們之間的關系和表的資訊，整理圖示如下，
結合ABP后端提供的介面，Vue前端我們要實作基礎的用戶、組織機構、角色、功能權限等內容的管理，以及維護它們之間的關系，Vue前端對于權限管理模塊的選單串列如下所示，
選單串列管理界面如下圖所示，主要包括樹狀串列展示選單結構，以及具體的選單串列查詢處理，
選單查看明細界面如下所示，主要就是簡單展示選單相關的屬性資料，
而選單的編輯或新增界面，需要考慮從已有選單中選擇串列，以及選擇圖示資訊，
其中的Awesome圖示，我們封裝了選擇圖示的組件，只從Font Awesome圖示中選擇，畢竟自帶的Element圖示太少，不太滿足要求，
關于Awesome圖示組件的使用，可以參考下之前我寫過的隨筆《循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用》，
其中的Web圖示選擇控制元件，是根據e-icon-picker控制元件進行修改，以采用Font Awesome圖示集合的處理
// Vue-Awesome圖示自動加入 const req = require.context('vue-awesome/icons', true, /\.js$/) const requireAll = requireContext => requireContext.keys() const re = /\.\/(.*)\.js/ const fontAwesome = requireAll(req).filter((key) => { return key.indexOf('index.js') < 0 }).map(i => { return i.match(re)[1] })
選單的展示我們也根據配置，從Awesome中選擇構建選單的圖示專案即可，
選單項的組件，是在Layout/Components/Sidebar/Item.vue進行修改，以適應Awesome圖示的處理
render(createElement, context) { const { icon, title } = context.props const vnodes = [] if (icon) { // vnodes.push(<svg-icon icon-class={icon} />) // 使用自定義svg圖示 // vnodes.push(<i class={icon}/>) // 使用內置element圖示 vnodes.push(<v-icon name={icon} scale='1.1' style='padding-right:3px'/>)// 使用awesome圖示 } if (title) { vnodes.push(<span slot='title'>{(title)}</span>) } return vnodes }
通過各個地方進行修改，我們就可以使用Awesome的圖示集合了，
2、選單和路由的結合管理
在前面隨筆《循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理》我介紹了用戶動態配置的選單資源，結合本系統的所有路由，實作選單的顯示外，還過濾了系統路由，實作可訪問路由的管理，兩者結合實作了系統有效的選單和路由的控制，
前端通過介面動態獲取選單串列，通過選單的名稱和路由名稱的對應關系，我們以選單集合為對照，然后過濾本地所有靜態路由的串列，然后獲得用戶可以訪問的路由串列，設定動態路由給前端，從而實作了界面根據用戶角色/權限的不同，而變化用戶的選單界面和可訪問路由集合，
選單路由處理的大概的操作程序如下所示
前端界面的動態選單、本地路由、選單導航和可訪問路由的幾個概念如下所示，
在前端界面處理中，我們通過Element界面組件的方式展示動態選單資訊，并結合選單和路由的關系，實作選單跳轉到對應視圖的處理程序，
因此，系統管理里面的選單資訊配置界面中，選單的Web地址，對應的是系統靜態路由的名稱，如下界面所示，
之前定義系統的路由資訊格式如下所示
// 定義本系統的所有路由，具體路由呈現經過選單資料過濾 export const asyncRoutes = { 'dashboard': { path: '/dashboard', component: Layout, children: [{ path: 'dashboard', name: 'dashboard', component: () => import('@/views/dashboard/index') }] }, 'product': { path: '/product', component: Layout, children: [{ path: '/product', name: 'product', component: () => import('@/views/Product/index') }] }, .............................. //省略部分 'icon': { path: '/icon', component: Layout, children: [{ path: '/icon', name: 'icon', component: () => import('@/views/icons/index') }] }, 'external-link': { path: 'http://www.iqidi.com', name: 'external-link' } }
有了這些準備，我們在用戶登錄系統后，就從后臺獲取對應的選單串列，
在系統登錄處理程序中，考慮到初始化的時候，如果用戶是管理員admin，并且獲取用戶選單為空，可以考慮使用預設的靜態選單資源，可以讓用戶先配置好權限選單，
// 系統靜態選單 var staticmenus = await GetStaticMenus() // console.log(menus) // 如果用戶是admin 并且角色集合中沒有選單，則使用靜態選單 var username = store.getters.name // 用戶名 if (username === 'admin') { if (!menus || typeof (menus) === 'undefined' || menus.length === 0) { menus = staticmenus // 系統管理員，初始化的時候使用靜態選單 } }
由于之前開發了一個基于Winform的ABP前端應用，因此我們選單為了整合兩個應用，在選單表示增加一個一個Tag標簽，用來區分是Winform界面的選單還是Web的選單，畢竟兩者選單的處理方式是不同的，
addForm: { // 添加表單
id: this.guid(),
pid: '',
name: '',
url: '',
seq: '001',
isTop: false,
expand: 1,
visible: 1,
webIcon: '',
tag: 'web'// Web專用
},
WInform客戶端的選單也是從服務器端請求資料，并動態構建的，Winform端的選單展示效果如下所示，
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進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/5411.html
標籤：Html/Css