动态menu和角色关联

QMPlusVuePage/src/store/module/router.js

@@ -16,15 +16,25 @@ export const router = {
     actions: {
         // 从后台获取动态路由
         async SetAsyncRouter({ commit }) {
+            const baseRouter = [{
+                path: '/layout',
+                name: 'layout',
+                component: "view/layout/index.vue",
+                meta: {
+                    title: "底层layout"
+                },
+                children: []
+            }]
             const asyncRouterRes = await asyncMenu()
             const asyncRouter = asyncRouterRes.data.menus
-            asyncRouter.push({
+            baseRouter[0].children = asyncRouter
+            baseRouter.push({
                 path: '*',
                 redirect: '/404'
 
             })
-            asyncRouterHandle(asyncRouter)
-            commit('setAsyncRouter', asyncRouter)
+            asyncRouterHandle(baseRouter)
+            commit('setAsyncRouter', baseRouter)
         }
     },
     getters: {

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

@@ -6,8 +6,9 @@
     <el-table :data="tableData" border stripe>
       <el-table-column label="角色id" min-width="180" prop="authorityId"></el-table-column>
       <el-table-column label="角色名称" min-width="180" prop="authorityName"></el-table-column>
-      <el-table-column fixed="right" label="操作" width="100">
+      <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="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>
         </template>
       </el-table-column>
@@ -23,7 +24,7 @@
       hide-on-single-page
       layout="total, sizes, prev, pager, next, jumper"
     ></el-pagination>
-
+    <!-- 新增角色弹窗 -->
     <el-dialog :visible.sync="dialogFormVisible" title="新增角色">
       <el-form :model="form">
         <el-form-item label="角色ID">
@@ -38,35 +39,69 @@
         <el-button @click="enterDialog" type="primary">确 定</el-button>
       </div>
     </el-dialog>
+
+    <!-- 关联menu弹窗 -->
+    <el-dialog :visible.sync="menuDialogFlag" title="关联菜单">
+      <el-tree
+        :data="treeData"
+        :props="defaultProps"
+        default-expand-all
+        highlight-current
+        node-key="ID"
+        :default-checked-keys="treeIds"
+        ref="tree"
+        show-checkbox
+      ></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>
   </div>
 </template>
 
 <script>
-import { getAuthorityList, deleteAuthority, createAuthority } from '@/api/authority'
+import {
+  getAuthorityList,
+  deleteAuthority,
+  createAuthority
+} from '@/api/authority'
+import { getBaseMenuTree, addMenuAuthority, getMenuAuthority } from '@/api/menu'
 export default {
   name: 'Authority',
   data() {
     return {
+      activeUserId: 0,
       page: 1,
       total: 10,
       pageSize: 10,
       tableData: [],
+      treeData: [],
+      treeIds:[],
+      defaultProps: {
+        children: 'children',
+        label: 'nickName'
+      },
       dialogFormVisible: false,
-      form:{
-          authorityId:"",
-          authorityName:""
+      menuDialogFlag: false,
+      form: {
+        authorityId: '',
+        authorityName: ''
       }
     }
   },
   methods: {
+    // 条数
     handleSizeChange(val) {
       this.pageSize = val
       this.getAuthList()
     },
+    // 页码
     handleCurrentChange(val) {
       this.page = val
       this.getAuthList()
     },
+    // 删除角色
     deleteAuth(row) {
       this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
         confirmButtonText: '确定',
@@ -95,37 +130,43 @@ export default {
           })
         })
     },
-    initForm(){
-        for(const key in this.form){
-            this.form[key] = ''
-        }
+    // 初始化表单
+    initForm() {
+      for (const key in this.form) {
+        this.form[key] = ''
+      }
     },
-    closeDialog(){
-        this.initForm()
-        this.dialogFormVisible = false
+    // 关闭窗口
+    closeDialog() {
+      this.initForm()
+      this.dialogFormVisible = false
+      this.menuDialogFlag = false
     },
-    async enterDialog(){
-        const res = await createAuthority(this.form)
-        if(res.success){
-            this.$message({
-              type: 'success',
-              message: '添加成功!'
-            })
-            this.getAuthList()
-            this.closeDialog()
-        }else{
-            this.$message({
-              type: 'error',
-              message: '添加失败!'
-            })
-            this.closeDialog()
-        }
-        this.initForm()
-        this.dialogFormVisible = false
+    // 确定弹窗
+    async enterDialog() {
+      const res = await createAuthority(this.form)
+      if (res.success) {
+        this.$message({
+          type: 'success',
+          message: '添加成功!'
+        })
+        this.getAuthList()
+        this.closeDialog()
+      } else {
+        this.$message({
+          type: 'error',
+          message: '添加失败!'
+        })
+        this.closeDialog()
+      }
+      this.initForm()
+      this.dialogFormVisible = false
     },
+    // 增加角色
     addAuthority() {
-        this.dialogFormVisible = true
+      this.dialogFormVisible = true
     },
+    // 获取用户列表
     async getAuthList(page = this.page, pageSize = this.pageSize) {
       try {
         const table = await getAuthorityList({ page, pageSize })
@@ -133,10 +174,41 @@ export default {
       } catch (err) {
         console.log(err)
       }
+    },
+    async addAuthMenu(row) {
+      const res1 = await getMenuAuthority({authorityId:row.authorityId})
+      const menus = res1.data.menus
+      const arr = []
+      menus.map(item=>{arr.push(Number(item.menuId))})
+      this.treeIds = arr
+      const res2 = await getBaseMenuTree()
+      this.treeData = res2.data.menus
+      console.log(this.treeData)
+      this.activeUserId = row.authorityId
+      this.menuDialogFlag = true
+    },
+    // 关联树
+    async relation() {
+      const checkArr = this.$refs.tree
+        .getCheckedNodes()
+        .concat(this.$refs.tree.getHalfCheckedNodes())
+      const res = await addMenuAuthority({
+        menus: checkArr,
+        authorityId: this.activeUserId
+      })
+      if (res.success) {
+        this.$message({
+          type: 'success',
+          message: '添加成功!'
+        })
+      }
+      this.closeDialog()
     }
+    // 获取基础menu树
   },
   created() {
     this.getAuthList()
+    
   }
 }
 </script>