2023年2月

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

在前面随笔《
循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理
》中介绍了用户管理模块的内容，包括用户列表的展示，各种查看、编辑、新增对话框的界面处理和后台数据处理操作，本篇随笔继续深化Vue + Element权限管理模块管理的内容，介绍组织机构和角色管理模块的处理，通过组织机构和角色管理模块的介绍，使得我们了解界面组件化模块的开发思路和做法，提高我们界面设计的技巧，并减少代码的复杂性，提高界面代码的可读性，同时也是利用组件的复用管理。

1、组织机构管理模块界面

组织机构管理模块界面如下所示，包括组织机构的成员管理和角色管理，在ABP基础领域里面，组织机构可以包含0到多个成员，也可以包含0到多个角色，因此界面设计如下所示。

在对象UML的图例中，应该是如下所示的效果图，组织机构包含组织成员和角色的内容。

在界面上，组织成员还需要添加成员的功能，同理角色也需要添加角色的处理，如下UML图示。

由于添加成员也是一个界面功能，一般情况下，如果我们放在一个页面里面，可能会增加代码量，增加代码维护难度和降低可读性，因此我们可以考虑把这些添加成员、添加角色的操作放在一个独立的组件模块里面进行设计，然后在主页面中引用组件即可。

组织机构添加成员的界面是弹出一个对话框，然后在其中查询选择系统用户列表，确认即可完成添加成员操作。

对于添加角色操作，也是类似的处理，把它们的逻辑和界面处理，封装为一个独立的界面组件，这个在Vue+Element是非常方便的，也是常用隐藏复杂性的做法。添加角色界面效果如下所示，弹出对话框中选择系统角色，确认添加到对应的组织机构即可。

2、角色管理界面

角色管理首先也是以列表展示系统角色的内容，如下界面所示。

其中每个角色，除了包含基本信息外，还会包含拥有的权限（功能控制点）、包含用户，以及拥有的菜单，其中权限是用来控制界面元素，如操作按钮的显示的，而拥有的菜单，则是用户以指定账号登录系统后，获得对应角色的菜单，然后构建对应的访问入口的。

角色界面模块UML类图如下所示。

那么对应界面元素上，我们就应该以不同的Tab来展示这些信息，如下所示。其中可以看到不同的Tab显示不同的内容。

角色包含的权限如下所示

其中拥有的菜单也是一个树形列表，和权限类似，如下界面所示。

上面几个图是查看界面的内容，而添加或者编辑角色，则需要对树形列表进行勾选操作，以便为角色选择对应的权限和拥有的菜单权限。

我们以菜单权限为例，编辑角色信息的时候，对应的树形列表应该可以勾选，确认后把勾选的用户选择提交到后台保存处理。

3、界面模块化的处理

上面模块中，涉及到多个页面内容的处理，如果把所有的内容全部放在一个页面里面，页面内容和JS的逻辑代码将会比较臃肿，难以维护，增加编辑界面代码的难度。

其实界面设计，也是可以以UML的类图为规则，一个业务界面一个组件的方式来构建界面，而界面组件可以在多个地方重用，有时候可以设计不同的属性来区分即可。

我们回到组织机构里面添加成员和添加角色的操作UML图。

其中添加成员、添加角色，涉及界面的列表数据展示以及对应的添加展示操作，独立一个界面还是比较方便的，而且添加成员，在角色维护模块里面也需要用到，那么可以兼容两个场景来设计组件模块。

完成添加成员、添加角色的界面组件后，我们就可以在组织机构界面里面引入使用。

接着加入对应的组件集合里面即可。

然后在界面部分加入对应的组件呈现代码，如下所示。

有了这些准备，我们就可以在需要触发界面显示的时候，调用代码展示对应的对话框界面组件即可。

    addUser() { //显示添加成员对话框
      var ouid = this.searchForm.OrganizationUnitIdif (!ouid || typeof (ouid) === 'undefined') {this.msgError('请先选择组织机构!')return}this.$refs.selectuser.show()

    },



    addRole() {//显示添加成员对话框
      var ouid = this.searchForm.OrganizationUnitIdif (!ouid || typeof (ouid) === 'undefined') {this.msgError('请先选择组织机构!')return}this.$refs.selectrole.show()

    },

对于角色模块也是类似，我们尽可能设计更多可以重用的界面模块，减少主模块页面代码，并提高组件的复用率。

之前介绍过，角色界面模块UML类图如下所示。

我们也可以依据这个来对模块的内容进行划分，不同业务设计不同的界面组件，最后整合一起使用即可。

这样我们查看角色详细信息的时候，界面代码就可以减少很多，只需要引入对应的界面组件即可，如下代码所示。

    <el-dialogtitle="查看信息":visible="isView":modal-append-to-body="false"@close="closeDialog">
      <el-col>
        <el-tabsvalue="basicPage"type="border-card">
          <el-tab-panename="basicPage"label="基本信息">
            <el-formref="viewForm":model="viewForm"label-width="120px">
              <el-form-itemlabel="角色名">
                <el-inputv-model="viewForm.name"disabled/>
              </el-form-item>
              <el-form-itemlabel="角色显示名">
                <el-inputv-model="viewForm.displayName"disabled/>
              </el-form-item>
              <el-form-itemlabel="角色描述">
                <el-inputv-model="viewForm.description"type="textarea"disabled/>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-panename="permitPage"label="权限">
           <rolefunction ref="rolefunction" :role-id="selectRoleId" />
          </el-tab-pane>

          <el-tab-panename="userPage"label="用户">
           <roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" />
          </el-tab-pane>

          <el-tab-panename="menuPage"label="菜单">
           <rolemenu ref="rolemenu" :role-id="selectRoleId" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <divslot="footer"class="dialog-footer">
        <el-buttontype="success"@click="closeDialog">关闭</el-button>
      </div>
    </el-dialog>

上面着重部分就是引入对应的界面组件，这样在编辑界面里面，我们依旧可以重用这部分的界面组件，界面组件的界面内容展示控制是内处理的，我们在主界面不用管理，非常方便。

角色查看详细界面效果如下所示。

角色的编辑界面代码如下所示。

    <el-dialogtitle="编辑信息":visible="isEdit":modal-append-to-body="false"@close="closeDialog">
      <el-col>
        <el-tabsvalue="basicPage2"type="border-card">
          <el-tab-panename="basicPage2"label="基本信息">
            <el-formref="editForm":rules="rules":model="editForm"label-width="120px">
              <el-form-itemlabel="角色名">
                <el-inputv-model="editForm.name" />
              </el-form-item>
              <el-form-itemlabel="角色显示名">
                <el-inputv-model="editForm.displayName" />
              </el-form-item>
              <el-form-itemlabel="角色描述">
                <el-inputv-model="editForm.description"type="textarea" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-panename="permitPage2"label="权限">
            <rolefunction ref="rolefunction2" :showcheck="true" :role-id="selectRoleId" />
          </el-tab-pane>

          <el-tab-panename="userPage2"label="用户">
            <roleuser ref="roleuser2" :role-id="selectRoleId" :can-add="true" :can-delete="true" />
          </el-tab-pane>

          <el-tab-panename="menuPage2"label="菜单">
            <rolemenu ref="rolemenu2" :showcheck="true" :role-id="selectRoleId" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <divslot="footer"class="dialog-footer">
        <el-buttontype="primary"@click="saveEdit()">确定</el-button>
        <el-buttontype="success"@click="closeDialog">关闭</el-button>
      </div>
    </el-dialog>
  </div>

角色的编辑界面效果如下所示。

在界面组件模块里面，如果我们需要接受父组件或界面调用的时候，传入参数使用Props来定义即可。

而如果需要组件返回对应的内容，如勾选树列表的选项，那么我们在组件定义中设计一个函数用来返回组件的内容即可。

这样我们在父窗口或者父组件中就可以获得子组件的数据了。

通过上面的介绍，我们应该理解到，尽可能按界面展示业务逻辑来区分不同的组件模块，可以极大降低主界面的维护复杂性，而且界面组件也是内聚处理的，因此使用的时候也是非常方便。

通过设计不同的界面组件，我们可以组织起来更加强大的界面展示，而并不影响维护的比便利性，这个就是模块化处理的优势所在。

为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

循序渐进VUE+Element 前端应用开发(17）--- 菜单资源管理

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

在权限管理系统中，菜单也属于权限控制的一个资源，应该直接应用于角色，和权限功能点一样，属于角色控制的一环。不同角色用户，登录系统后，出现的系统菜单是不同的。在VUE+Element 前端中，我们菜单结合路由集合，实现可访问路由的过滤，也就实现了对应角色菜单的展示和可访问路由的控制，详细可以参考随笔《
循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理
》，本篇随笔主要介绍菜单管理模块的界面和相关的实现逻辑。

1、菜单资源及管理界面介绍

前面介绍过，权限管理一般都会涉及到用户、组织机构、角色，以及权限功能等方面的内容，ABP框架的基础内容也是涉及到这几方面的内容，其中它们之间的关系基本上是多对多的关系，它们的关系如下所示。

加入菜单资源，以及整理它们之间的关系和表的信息，整理图示如下。

菜单列表管理界面如下图所示，主要包括树状列表展示菜单结构，以及具体的菜单列表查询处理。

菜单查看明细界面如下所示，主要就是简单展示菜单相关的属性数据。

而菜单的编辑或新增界面，需要考虑从已有菜单中选择列表，以及选择图标信息。

其中的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>)
}returnvnodes

  }

通过各个地方进行修改，我们就可以使用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 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

在一个业务管理系统中，如果我们需要实现权限控制功能，我们需要定义好对应的权限功能点，然后在界面中对界面元素的功能点进行绑定，这样就可以在后台动态分配权限进行动态控制了，一般来说，权限功能点是针对角色进行控制的，也就是简称RBAC（Role Based Access Control）。在前面随笔中，我们介绍了菜单资源，在权限管理系统中，菜单也是属于权限控制的一个资源，其也是作用于角色层面上的。本篇随笔介绍功能点管理及权限控制，功能点是作为一个业务对象数据进行管理，在角色范畴上进行分配，而在界面元素控制上，VUE+Element 前端引入Vue自定义指令Directives进行控制。

1、权限功能点管理

我们在前面分析过一个权限系统的表和关系的说明，如下所示。

权限功能点的管理就是对TB_Function的表的管理操作，这个表是我们定义用于系统控制的功能点。

权限功能点的管理为了展示它的树状结果，包括树列表的管理和明细列表的管理，如下图所示。

功能点的查看界面如下所示，除了展示对应功能点的详细信息外，还列出这个功能点被那些角色拥有使用。

功能点的新增界面如下所示，主要就是选择父节点和录入功能点的信息即可。

而为了更加方便批量录入权限功能点，我们可以以业务表为基础进行批量录入，如下所示。

这样添加客户信息的功能点名称，会自动变为：Customer/Add，其他的类似，这样可以快速添加针对这个业务表的相关功能点。

有了这些功能点的定义，我们就可以结合角色管理进行分配给不同的角色了。如下是在角色编辑界面中，为角色分配不同的权限控制点。

2、VUE+Element 前端权限控制

前面内容介绍了权限功能点的管理，以及基于角色的权限实现分配处理，这些都为前端实现界面元素的权限控制做准备的。

由于用户相关的菜单、权限集合是在用户范畴里面，我们可以在UserApi里面定义对应的后端接口调用。

其中 GetGrantedFunctionsByUser 方法就是获取指定用户的权限功能点集合的函数。

UserApi的类文件user.js内容如下所示。

其中 GetGrantedFunctionsByUser 方法就是获取指定用户的权限功能点集合的函数，函数代码如下所示。

  GetGrantedFunctionsByUser(id) { //获取用户权限列表
    returnrequest({

      url:this.baseurl + 'GetGrantedFunctionsByUser',

      method:'get',

      params: { id }

    })

  }

在用户的Store/Modules/user.js里面，我们增加一个功能点的状态信息，如下所示。

然后在用户每次获取信息的时候，把它的功能点信息也存储起来，那么界面就可以根据这个存储内容进行相应的权限控制了。

在Mutation里面添加一个设置用户状态信息的函数，如下所示。

  SET_PERMITS: (state, permits) =>{

    state.permits=permits

  }

这样我们在用户信息获取的getInfo函数里面，就可以顺便一起获取用户的包含的权限功能点信息集合了。

  //获取用户信息
getInfo({ commit, state }) {return new Promise((resolve, reject) =>{

      user.getInfo(state.userid).then(response=>{

        const { result }=response

       

        ....................



        commit('SET_ROLES', { roles, roleNames })

        commit('SET_NAME', name)

        commit('SET_INTRODUCTION', fullName)// 获取用户权限

        user.GetGrantedFunctionsByUser(state.userid).then(data => {

          var list = data.result.items

          if (list) {

            var permits = []

            list.forEach(element => {

              if (element && element.name && typeof (element.name) !== 'undefined') {

                permits.push(element.name.toLowerCase()) // 小写

              }

            });

            // 设置用户功能权限点

            commit('SET_PERMITS', permits)

          }

        })



        resolve(result)

      }).catch(error =>{

        reject(error)

      })

    })

  },

现在前端也有这些权限功能点控制集合了，这些就是对应当前登录用户的可访问权限集合了。

接下来的就是需要根据这些权限集合，进行界面元素的控制了，如对一些操作按钮，如新增、编辑、删除、导入、导出等操作的按钮是否可以显示进行管理。

这个操作就是设计到Vue的自定义指令操作了，如不了解的自定义Directives的使用的，可以参考下官方介绍：
https://cn.vuejs.org/v2/guide/custom-directive.html

如我们定义一个v-permit 的自定义指令来处理权限功能点的绑定处理，那么界面应该如下处理。

    <el-rowstyle="float:right;padding-bottom:10px">
      <el-buttonicon="el-icon-search"type="primary"size="mini"round @click="search()">查询</el-button>
      <el-buttonicon="el-icon-refresh-left"type="warning"size="mini"round plain @click="resetSeachForm('searchForm')">重置</el-button>
      <el-buttonv-permit="['User/add']"icon="el-icon-plus"type="success"size="mini"round @click="showAdd()">添加</el-button>
      <el-buttonv-permit="['User/import']"icon="el-icon-upload2"type="warning"size="mini"round @click="showImport()">导入</el-button>
      <el-buttonv-permit="['User/export']"icon="el-icon-download"type="warning"size="mini"round @click="showImport()">导出</el-button>
    </el-row>

通过类似
v-permit="['User/add']"
的方式操作，就可以指定这个操作按钮的功能点，如果用户具有这些功能点，那么就可以使用，否则就不显示了。

我们在directive目录中定义一个permit.js的自定义指令文件，用来进行相应的处理的。

然后在index.js的发布文件里面定义装载处理逻辑，如下代码所示

import permit from './permit'const install= function(Vue) {

  Vue.directive('permit', permit)

}if(window.Vue) {

  window['permit'] =permit//eslint-disable-next-line no-undef
Vue.use(install)

}



permission.install=install

exportdefault permission

最后，在main.js里面全局装载自定义指令的操作，如下代码所示。

//全局引入并使用权限控制点的自定义指令
import permission from './directive/permission'Vue.use(permission)

有了store模块里面的状态信息，以及自定义指令的支持，在界面上对应按钮元素上，就可以利用这些权限点进行控制操作了。

为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志