循序渐进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
如有疑问请与原作者联系

标签:使用PS用户HTTPweb数据

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:没有了

下一篇:没有了