按部就班VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理

时间 2020-07-18

标签按部就班 vue+element vue element 前端应用开发组织机构角色管理模块处理繁體版

原文原文链接

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

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

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

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

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

因为添加成员也是一个界面功能，通常状况下，若是咱们放在一个页面里面，可能会增长代码量，增长代码维护难度和下降可读性，所以咱们能够考虑把这些添加成员、添加角色的操做放在一个独立的组件模块里面进行设计，而后在主页面中引用组件便可。框架

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

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

二、角色管理界面

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

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

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

那么对应界面元素上，咱们就应该以不一样的Tab来展现这些信息，以下所示。其中能够看到不一样的Tab显示不一样的内容。

角色包含的权限以下所示

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

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

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

三、界面模块化的处理

上面模块中，涉及到多个页面内容的处理，若是把全部的内容所有放在一个页面里面，页面内容和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>