更改了用户设置角色 和角色设置菜单 角色设置权限的前端交互体验

QMPlusVuePage/src/view/superAdmin/authority/authority.vue

 <template>
-  <div>
+  <div class="authority">
     <div class="button-box clearflex">
       <el-button @click="addAuthority" type="primary">新增角色</el-button>
     </div>
@@ -9,8 +9,7 @@
       <el-table-column label="角色名称" min-width="180" prop="authorityName"></el-table-column>
       <el-table-column fixed="right" label="操作" width="500">
         <template slot-scope="scope">
-          <el-button @click="addAuthMenu(scope.row)" size="small" type="text">变更角色菜单</el-button>
-          <el-button @click="addAuthApi(scope.row)" size="small" type="text">变更角色Api</el-button>
+          <el-button @click="opdendrawer(scope.row)" size="small" type="text">设置权限</el-button>
           <el-button @click="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>
         </template>
       </el-table-column>
@@ -25,6 +24,7 @@
       @size-change="handleSizeChange"
       layout="total, sizes, prev, pager, next, jumper"
     ></el-pagination>
+
     <!-- 新增角色弹窗 -->
     <el-dialog :visible.sync="dialogFormVisible" title="新增角色">
       <el-form :model="form">
@@ -41,43 +41,16 @@
       </div>
     </el-dialog>
 
-    <!-- 关联menu弹窗 -->
-    <el-dialog :visible.sync="menuDialogFlag" title="关联菜单">
-      <el-tree
-        :data="menuTreeData"
-        :default-checked-keys="menuTreeIds"
-        :props="menuDefaultProps"
-        default-expand-all
-        highlight-current
-        node-key="ID"
-        ref="menuTree"
-        show-checkbox
-        v-if="menuDialogFlag"
-      ></el-tree>
-      <div class="dialog-footer" slot="footer">
-        <el-button @click="closeDialog">取 消</el-button>
-        <el-button @click="relation" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
-
-    <!-- 关联api弹窗 -->
-    <el-dialog :visible.sync="apiDialogFlag" title="关联api">
-      <el-tree
-        :data="apiTreeData"
-        :default-checked-keys="apiTreeIds"
-        :props="apiDefaultProps"
-        default-expand-all
-        highlight-current
-        node-key="path"
-        ref="apiTree"
-        show-checkbox
-        v-if="apiDialogFlag"
-      ></el-tree>
-      <div class="dialog-footer" slot="footer">
-        <el-button @click="closeDialog">取 消</el-button>
-        <el-button @click="authApiEnter" type="primary">确 定</el-button>
-      </div>
-    </el-dialog>
+    <el-drawer :visible.sync="drawer" v-if="drawer" :with-header="false" size="40%" title="角色配置">
+      <el-tabs class="role-box" type="border-card">
+        <el-tab-pane label="角色菜单">
+          <Menus :row="activeRow" />
+        </el-tab-pane>
+        <el-tab-pane label="角色api">
+          <apis :row="activeRow" />
+        </el-tab-pane>
+      </el-tabs>
+    </el-drawer>
   </div>
 </template>
 
@@ -89,9 +62,10 @@ import {
   deleteAuthority,
   createAuthority
 } from '@/api/authority'
-import { getBaseMenuTree, addMenuAuthority, getMenuAuthority } from '@/api/menu'
-import { getAllApis } from '@/api/api'
-import { casbinPUpdata, getPolicyPathByAuthorityId } from '@/api/casbin'
+
+import Menus from '@/view/superAdmin/authority/components/menus'
+import Apis from '@/view/superAdmin/authority/components/apis'
+
 import infoList from '@/components/mixins/infoList'
 export default {
   name: 'Authority',
@@ -100,22 +74,10 @@ export default {
     return {
       listApi: getAuthorityList,
       listKey: 'list',
+      drawer: false,
+      activeRow: {},
       activeUserId: 0,
-      menuTreeData: [],
-      menuTreeIds: [],
-      menuDefaultProps: {
-        children: 'children',
-        label: 'nickName'
-      },
-
-      apiTreeData: [],
-      apiTreeIds: [],
-      apiDefaultProps: {
-        children: 'children',
-        label: 'description'
-      },
       dialogFormVisible: false,
-      menuDialogFlag: false,
       apiDialogFlag: false,
       form: {
         authorityId: '',
@@ -123,7 +85,15 @@ export default {
       }
     }
   },
+  components: {
+    Menus,
+    Apis
+  },
   methods: {
+    opdendrawer(row) {
+      this.drawer = true
+      this.activeRow = row
+    },
     // 删除角色
     deleteAuth(row) {
       this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
@@ -158,7 +128,6 @@ export default {
     closeDialog() {
       this.initForm()
       this.dialogFormVisible = false
-      this.menuDialogFlag = false
       this.apiDialogFlag = false
     },
     // 确定弹窗
@@ -179,98 +148,23 @@ export default {
     // 增加角色
     addAuthority() {
       this.dialogFormVisible = true
-    },
-
-    // 关联用户列表关系
-    async addAuthMenu(row) {
-      const res1 = await getMenuAuthority({ authorityId: row.authorityId })
-      const menus = res1.data.menus
-      const arr = []
-      menus.map(item => {
-        // 防止直接选中父级造成全选
-        if (!menus.some(same => same.parentId === item.menuId)) {
-          arr.push(Number(item.menuId))
-        }
-      })
-      this.menuTreeIds = arr
-      this.activeUserId = row.authorityId
-      this.menuDialogFlag = true
-    },
-    // 关联树 确认方法
-    async relation() {
-      const checkArr = this.$refs.menuTree.getCheckedNodes(false, true)
-      const res = await addMenuAuthority({
-        menus: checkArr,
-        authorityId: this.activeUserId
-      })
-      if (res.success) {
-        this.$message({
-          type: 'success',
-          message: '添加成功!'
-        })
-      }
-      this.closeDialog()
-    },
-    // 创建api树方法
-    buildApiTree(apis) {
-      const apiObj = new Object()
-      apis &&
-        apis.map(item => {
-          if (apiObj.hasOwnProperty(item.group)) {
-            apiObj[item.group].push(item)
-          } else {
-            Object.assign(apiObj, { [item.group]: [item] })
-          }
-        })
-      const apiTree = []
-      for (const key in apiObj) {
-        const treeNode = {
-          ID: key,
-          description: key + '组',
-          children: apiObj[key]
-        }
-        apiTree.push(treeNode)
-      }
-      return apiTree
-    },
-    // 关联用户api关系
-    async addAuthApi(row) {
-      const res = await getPolicyPathByAuthorityId({
-        authorityId: row.authorityId
-      })
-      this.activeUserId = row.authorityId
-      this.apiTreeIds = res.data.paths || []
-      this.apiDialogFlag = true
-    },
-    // 关联关系确定
-    async authApiEnter() {
-      const checkArr = this.$refs.apiTree.getCheckedKeys(true)
-      const res = await casbinPUpdata({
-        authorityId: this.activeUserId,
-        paths: checkArr
-      })
-      if (res.success) {
-        this.$message({ type: 'success', message: res.msg })
-        this.closeDialog()
-      }
     }
-  },
-  async created() {
-    // 获取所有菜单树
-    const res = await getBaseMenuTree()
-    this.menuTreeData = res.data.menus
-    // 获取api并整理成树结构
-    const res2 = await getAllApis()
-    const apis = res2.data.apis
-    this.apiTreeData = this.buildApiTree(apis)
   }
 }
 </script>
-<style scoped lang="scss">
-.button-box {
-  padding: 10px 20px;
-  .el-button {
-    float: right;
+<style lang="scss">
+.authority {
+  .button-box {
+    padding: 10px 20px;
+    .el-button {
+      float: right;
+    }
   }
 }
+.role-box {
+    .el-tabs__content {
+      height: calc(100vh - 150px);
+      overflow: auto;
+    }
+  }
 </style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/authority/components/apis.vue

+<template>
+  <div>
+    <div class="clearflex">
+      <el-button @click="authApiEnter" class="fl-right" size="small" type="primary">确 定</el-button>
+    </div>
+    <el-tree
+      :data="apiTreeData"
+      :default-checked-keys="apiTreeIds"
+      :props="apiDefaultProps"
+      default-expand-all
+      highlight-current
+      node-key="path"
+      ref="apiTree"
+      show-checkbox
+    ></el-tree>
+  </div>
+</template>
+<script>
+import { getAllApis } from '@/api/api'
+import { casbinPUpdata, getPolicyPathByAuthorityId } from '@/api/casbin'
+export default {
+  name: 'Apis',
+  props: {
+    row: {
+      default: function() {
+        return {}
+      },
+      type: Object
+    }
+  },
+  data() {
+    return {
+      apiTreeData: [],
+      apiTreeIds: [],
+      apiDefaultProps: {
+        children: 'children',
+        label: 'description'
+      }
+    }
+  },
+  methods: {
+    // 创建api树方法
+    buildApiTree(apis) {
+      const apiObj = new Object()
+      apis &&
+        apis.map(item => {
+          if (apiObj.hasOwnProperty(item.group)) {
+            apiObj[item.group].push(item)
+          } else {
+            Object.assign(apiObj, { [item.group]: [item] })
+          }
+        })
+      const apiTree = []
+      for (const key in apiObj) {
+        const treeNode = {
+          ID: key,
+          description: key + '组',
+          children: apiObj[key]
+        }
+        apiTree.push(treeNode)
+      }
+      return apiTree
+    },
+    // 关联用户api关系
+    async addAuthApi(row) {
+      const res = await getPolicyPathByAuthorityId({
+        authorityId: this.row.authorityId
+      })
+      this.activeUserId = this.row.authorityId
+      this.apiTreeIds = res.data.paths || []
+    },
+    // 关联关系确定
+    async authApiEnter() {
+      const checkArr = this.$refs.apiTree.getCheckedKeys(true)
+      const res = await casbinPUpdata({
+        authorityId: this.activeUserId,
+        paths: checkArr
+      })
+      if (res.success) {
+        this.$message({ type: 'success', message: res.msg })
+      }
+    }
+  },
+  async created() {
+    // 获取api并整理成树结构
+    const res2 = await getAllApis()
+    const apis = res2.data.apis
+    this.apiTreeData = this.buildApiTree(apis)
+
+    const res = await getPolicyPathByAuthorityId({
+      authorityId: this.row.authorityId
+    })
+    this.activeUserId = this.row.authorityId
+    this.apiTreeIds = res.data.paths || []
+  }
+}
+</script>
+<style lang="scss">
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/authority/components/menus.vue

+<template>
+  <div>
+    <div class="clearflex">
+      <el-button @click="relation" class="fl-right" size="small" type="primary">确 定</el-button>
+    </div>
+    <el-tree
+      :data="menuTreeData"
+      :default-checked-keys="menuTreeIds"
+      :props="menuDefaultProps"
+      default-expand-all
+      highlight-current
+      node-key="ID"
+      ref="menuTree"
+      show-checkbox
+    ></el-tree>
+  </div>
+</template>
+<script>
+import { getBaseMenuTree, getMenuAuthority, addMenuAuthority } from '@/api/menu'
+
+export default {
+  name: 'Menus',
+  props: {
+    row: {
+      default: function() {
+        return {}
+      },
+      type: Object
+    }
+  },
+  data() {
+    return {
+      menuTreeData: [],
+      menuTreeIds: [],
+      menuDefaultProps: {
+        children: 'children',
+        label: 'nickName'
+      }
+    }
+  },
+  methods: {
+    // 关联树 确认方法
+    async relation() {
+      const checkArr = this.$refs.menuTree.getCheckedNodes(false, true)
+      const res = await addMenuAuthority({
+        menus: checkArr,
+        authorityId: this.row.authorityId
+      })
+      if (res.success) {
+        this.$message({
+          type: 'success',
+          message: '添加成功!'
+        })
+      }
+    }
+  },
+  async created() {
+    // 获取所有菜单树
+    const res = await getBaseMenuTree()
+    this.menuTreeData = res.data.menus
+
+    const res1 = await getMenuAuthority({ authorityId: this.row.authorityId })
+    const menus = res1.data.menus
+    const arr = []
+    menus.map(item => {
+      // 防止直接选中父级造成全选
+      if (!menus.some(same => same.parentId === item.menuId)) {
+        arr.push(Number(item.menuId))
+      }
+    })
+    this.menuTreeIds = arr
+  }
+}
+</script>
+<style lang="scss">
+</style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/menu/menu.vue

@@ -43,7 +43,7 @@
       layout="total, sizes, prev, pager, next, jumper"
     ></el-pagination>
 
-    <el-dialog :visible.sync="dialogFormVisible" title="新增菜单">
+    <el-dialog :before-close="handleClose" :visible.sync="dialogFormVisible" title="新增菜单">
       <el-form :inline="true" :model="form" label-width="80px">
         <el-form-item label="路径">
           <el-input autocomplete="off" v-model="form.path"></el-input>
@@ -116,6 +116,10 @@ export default {
     }
   },
   methods: {
+    handleClose(done){
+      this.initForm()
+      done()
+    },
     // 懒加载子菜单
     load(tree, treeNode, resolve) {
           resolve([
@@ -172,7 +176,6 @@ export default {
     },
     // 关闭弹窗
     closeDialog() {
-      this.initForm()
       this.dialogFormVisible = false
     },
     // 添加menu
@@ -189,15 +192,12 @@ export default {
           message: '添加成功!'
         })
         this.getTableData()
-        this.closeDialog()
       } else {
         this.$message({
           type: 'error',
           message: '添加失败!'
         })
-        this.closeDialog()
       }
-      this.initForm()
       this.dialogFormVisible = false
     },
     // 添加菜单方法，id为 0则为添加根菜单

QMPlusVuePage/src/view/superAdmin/user/user.vue

@@ -12,14 +12,20 @@
       <el-table-column label="uuid" min-width="250" prop="uuid"></el-table-column>
       <el-table-column label="用户名" min-width="150" prop="userName"></el-table-column>
       <el-table-column label="昵称" min-width="150" prop="nickName"></el-table-column>
-      <el-table-column label="用户级别" min-width="150">
+      <el-table-column label="用户角色" min-width="150">
         <template slot-scope="scope">
-          <div>{{scope.row.authority.authorityName}}</div>
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" label="操作" width="200">
-        <template slot-scope="scope">
-          <el-button @click="changeAuth(scope.row)" size="small" type="text">修改权限</el-button>
+          <el-select
+            @change="changeAuthority(scope.row)"
+            placeholder="请选择"
+            v-model="scope.row.authority.authorityId"
+          >
+            <el-option
+              :key="item.authorityId"
+              :label="item.authorityName"
+              :value="item.authorityId"
+              v-for="item in authOptions"
+            ></el-option>
+          </el-select>
         </template>
       </el-table-column>
     </el-table>
@@ -40,6 +46,7 @@
 <script>
 // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
 import { getUserList, setUserAuthority } from '@/api/user'
+import { getAuthorityList } from '@/api/authority'
 import infoList from '@/components/mixins/infoList'
 
 export default {
@@ -49,43 +56,23 @@ export default {
     return {
       listApi: getUserList,
       listKey: 'userList',
-      dialogFormVisible: false,
-      type: ''
+      authOptions: []
     }
   },
   methods: {
-    initForm() {
-      this.form = {
-        path: '',
-        group: '',
-        description: ''
-      }
-    },
-    changeAuth(row) {
-      this.$prompt('请输入级别ID', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
+    async changeAuthority(row) {
+      const res = await setUserAuthority({
+        uuid: row.uuid,
+        authorityId: row.authority.authorityId
       })
-        .then(async ({ value }) => {
-          const res = await setUserAuthority({
-            uuid: row.uuid,
-            authorityId: value
-          })
-          if (res.success) {
-            this.$message({
-              type: 'success',
-              message: '设置成功'
-            })
-            this.getTableData()
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '取消输入'
-          })
-        })
+      if (res.success) {
+        this.$message({ type: 'success', message: '角色设置成功' })
+      }
     }
+  },
+  async created() {
+    const res = await getAuthorityList({ page: 1, pageSize: 999 })
+    this.authOptions = res.data.list
   }
 }
 </script>