循序漸進VUE+Element 前端應用開發(5)--- 表格…

2020-07-15 16:01:10來源:博客園 閱讀 ()

容器云強勢上線!快速搭建集群,上萬Linux鏡像隨意使用

循序漸進VUE+Element 前端應用開發(17)--- 菜單資源管理

權限管理系統中,菜單也屬于權限控制的一個資源,應該直接應用于角色,和權限功能點一樣,屬于角色控制的一環。不同角色用戶,登錄系統后,出現的系統菜單是不同的。在VUE+Element 前端中,我們菜單結合路由集合,實現可訪問路由的過濾,也就實現了對應角色菜單的展示和可訪問路由的控制,詳細可以參考隨筆《循序漸進VUE+Element 前端應用開發(3)--- 動態菜單和路由的關聯處理》,本篇隨筆主要介紹菜單管理模塊的界面和相關的實現邏輯。

在權限管理系統中,菜單也屬于權限控制的一個資源,應該直接應用于角色,和權限功能點一樣,屬于角色控制的一環。不同角色用戶,登錄系統后,出現的系統菜單是不同的。在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 前端應用開發(11)--- 圖標的維護和使用

循序漸進VUE+Element 前端應用開發(12)--- 整合ABP框架的前端登錄處理

循序漸進VUE+Element 前端應用開發(13)--- 前端API接口的封裝處理

循序漸進VUE+Element 前端應用開發(14)--- 根據ABP后端接口實現前端界面展示

循序漸進VUE+Element 前端應用開發(15)--- 用戶管理模塊的處理

循序漸進VUE+Element 前端應用開發(16)--- 組織機構和角色管理模塊的處理 

循序漸進VUE+Element 前端應用開發(17)--- 菜單管理


原文鏈接:https://www.cnblogs.com/wuhuacong/p/13299336.html
如有疑問請與原作者聯系

標簽:方式PSHTTPfor使用load

版權申明:本站文章部分自網絡,如有侵權,請聯系:west999com@outlook.com
特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有

上一篇:沒有了

下一篇:沒有了

韩国三级在线看免费