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

在前面随笔《循序渐进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.OrganizationUnitId
      if (!ouid || typeof (ouid) === 'undefined') {
        this.msgError('请先选择组织机构!')
        return
      }
      this.$refs.selectuser.show()
    },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

循序渐进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)--- 功能点管理及权限控制  

VUE+Element 前端应用开发框架功能介绍 

循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

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

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

循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

电商商品数据库的设计和功能界面的处理 

循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理 

循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计

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

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

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

循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理 

循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理 

使用代码生成工具快速开发ABP框架项目 

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理 

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

 

主要研究技术:代码生成工具、会员管理系统、客户关系管理软件、病人资料管理软件、Visio二次开发、酒店管理系统、仓库管理系统等共享软件开发
专注于Winform开发框架/混合式开发框架Web开发框架Bootstrap开发框架微信门户开发框架的研究及应用
  转载请注明出处:
撰写人:伍华聪  http://www.iqidi.com 
    

posted on 2020-07-14 12:44  伍华聪  阅读(2862)  评论(0编辑  收藏  举报

导航