添加权限管理界面

src/assets/css/global.css

@@ -2,6 +2,8 @@ html, body , #app {
     height: 100%;
     margin: 0;
     padding: 0;
+    min-width: 800px;
+
 }
 .el-breadcrumb{
     margin-bottom: 15px;
@@ -9,4 +11,8 @@ html, body , #app {
 }
 .el-card {
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
+}
+.el-table{
+    margin-top: 15px;
+    font-size: 12px;
 }

src/components/power/Rights.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: zhuyijun
+ * @Date: 2021-11-22 18:48:52
+ * @LastEditTime: 2021-11-22 19:56:50
+-->
+<template>
+  <div>
+    <!-- 面包屑导航区 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
+      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
+    </el-breadcrumb>
+    <!-- 卡片视图 -->
+    <el-card>
+
+      <el-table :data="rightsList"
+                border
+                stripe>
+        <el-table-column prop="id"
+                         label="编号" />
+        <el-table-column prop="authName"
+                         label="名称" />
+        <el-table-column prop="path"
+                         label="路径" />
+        <el-table-column label="权限等级"
+                         prop="level">d
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.level === '0'">一级</el-tag>
+            <el-tag v-else-if="scope.row.level === '1'"
+                    type="success">二级</el-tag>
+            <el-tag v-else
+                    type="warning">三级</el-tag>
+          </template>
+
+        </el-table-column>
+      </el-table>
+
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      // 权限列表
+      rightsList: [],
+    }
+  },
+  created () {
+    this.getRightsList()
+  },
+  methods: {
+    async getRightsList () {
+      const { data: res } = await this.$http.get('rights/list')
+      if (res.meta.status !== 200) {
+        return this.$message.error('获取权限列表失败')
+      }
+      this.rightsList = res.data
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/power/Roles.vue

@@ -0,0 +1,230 @@
+<!--
+ * @Description: 
+ * @Version: 1.0
+ * @Autor: zhuyijun
+ * @Date: 2021-11-22 19:57:15
+ * @LastEditTime: 2021-11-22 22:17:12
+-->
+<template>
+  <div>
+    <!-- 面包屑导航区 -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
+      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
+    </el-breadcrumb>
+
+    <!-- 卡片视图 -->
+    <el-card>
+      <!-- 添加角色按钮区 -->
+      <el-row>
+        <el-col>
+          <el-button type="primary">添加角色</el-button>
+        </el-col>
+      </el-row>
+
+      <!-- 角色列表区 -->
+      <el-table :data="rolesList"
+                stripe
+                border>
+        <!-- 展开列 -->
+        <el-table-column type="expand">
+          <!-- 作用域插槽 -->
+          <template slot-scope="scope">
+            <el-row v-for="(item1,i1) in scope.row.children"
+                    :key="item1.id"
+                    :class="['bdbottom','vcenter',i1 === 0 ? 'bdtop':'']">
+              <!-- 渲染一级权限 -->
+              <el-col :span="5">
+                <el-tag closable
+                        @close="removeRightById(scope.row,item1.id)">{{item1.authName}}</el-tag>
+                <i class="el-icon-caret-right"></i>
+              </el-col>
+              <!-- 渲染二级和三级权限 -->
+              <el-col :span="19">
+
+                <!-- 通过for循环 且套渲染二级权限 -->
+                <el-row v-for="(item2,i2) in item1.children"
+                        :key="item2.id"
+                        :class="['vcenter',i2 === 0? '':'bdtop']">
+
+                  <el-col :span="6">
+                    <el-tag type="success"
+                            closable
+                            @close="removeRightById(scope.row,item2.id)">{{item2.authName}}</el-tag>
+                    <i class="el-icon-caret-right"></i>
+                  </el-col>
+
+                  <el-col :span="18">
+                    <el-tag v-for="(item3) in item2.children"
+                            :key="item3.id"
+                            type="warning"
+                            closable
+                            @close="removeRightById(scope.row,item3.id)">{{item3.authName}}</el-tag>
+                  </el-col>
+
+                </el-row>
+
+              </el-col>
+            </el-row>
+          </template>
+        </el-table-column>
+        <!-- 索引列 -->
+        <el-table-column prop="id"
+                         label="编号" />
+        <!-- 角色名称 -->
+        <el-table-column label="角色名称"
+                         prop="roleName" />
+        <!-- 角色描述 -->
+        <el-table-column label="角色描述"
+                         prop="roleDesc" />
+        <!-- 操作 -->
+        <el-table-column label="操作"
+                         width="300">
+          <template slot-scope="scope">
+            <el-button type="primary"
+                       icon="el-icon-edit"
+                       size="mini">编辑</el-button>
+            <el-button type="danger"
+                       icon="el-icon-delete"
+                       size="mini">删除</el-button>
+            <el-button type="warning"
+                       icon="el-icon-setting"
+                       size="mini"
+                       @click="showSetRightsDialog(scope.row)">分配权限</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <!-- 分配权限的Dialog -->
+    <el-dialog title="分配权限"
+               :visible.sync="setRightDialogVisible"
+               width="50%"
+               @close="setRightDialogClosed">
+      <!-- 树形控件 -->
+      <el-tree :data="rightsList"
+               :props="treeProps"
+               show-checkbox
+               node-key="id"
+               default-expand-all
+               :default-checked-keys="defKeys"
+               ref="treeRef"></el-tree>
+
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="setRightDialogVisible = false">取 消</el-button>
+        <el-button type="primary"
+                   @click="allotRights">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      rolesList: [],
+      setRightDialogVisible: false,
+      rightsList: [],
+      //   树型控件属性绑定对象
+      treeProps: {
+        label: 'authName',
+        children: 'children'
+      },
+      //   默认选中的节点id值数组
+      defKeys: [],
+      // 当前即将分配权限的id
+      roleId: ''
+    }
+  },
+  created () {
+    this.getRolesList()
+  },
+  methods: {
+    async getRolesList () {
+      const { data: res } = await this.$http.get('roles')
+      if (res.meta.status !== 200) {
+        return this.$message.error('获取角色列表失败')
+      }
+      this.rolesList = res.data
+    },
+    // 提示是否删除权限
+    async removeRightById (role, id) {
+      const confirmResule = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(err => err)
+      if (confirmResule !== 'confirm') {
+        return this.$message.info('取消删除')
+      }
+      const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${id}`)
+      if (res.meta.status !== 200) {
+        return this.$message.error('删除权限失败')
+      }
+      // 为当前角色信息重新复制
+      role.children = res.data
+      this.$message.success('删除权限成功')
+    },
+    async showSetRightsDialog (role) {
+      this.roleId = role.id
+      //获取所有权限数据
+      const { data: res } = await this.$http.get(`rights/tree`)
+      if (res.meta.status !== 200) {
+        return this.$message.error('获取权限数据失败')
+      }
+      //获取到的权限数据保存到rightsList中
+      this.rightsList = res.data
+      //递归获取三级节点的id
+      this.getLeafKey(role, this.defKeys)
+      //显示dialog框
+      this.setRightDialogVisible = true
+    },
+    // 通过递归形式 获取角色下所有三级权限id，并保存到defKeys数组中
+    getLeafKey (node, arr) {
+      if (!node.children) {
+        // 如果当前node节点不包含children属性，则是三级节点
+        return arr.push(node.id)
+      }
+      node.children.forEach((item) => {
+        this.getLeafKey(item, arr)
+      })
+    },
+    // 监听分配权限对话框关闭事件
+    setRightDialogClosed () {
+      this.defKeys = []
+    },
+    // 为角色分配权限
+    async allotRights () {
+      const keys = [
+        ...this.$refs.treeRef.getCheckedKeys(),
+        ...this.$refs.treeRef.getHalfCheckedKeys()
+      ]
+      const idStr = keys.join(',')
+      const { data: res } = await this.$http.post(`roles/${this.roleId}/rights`, { rids: idStr })
+      if (res.meta.status != 200) {
+        return this.$message.error('分配权限失败')
+      }
+      this.getRolesList()
+      this.setRightDialogVisible = false
+      return this.$message.success('分配权限成功')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.el-tag {
+  margin: 7px;
+}
+.bdtop {
+  border-top: 1px solid #eee;
+}
+.bdbottom {
+  border-bottom: 1px solid #eee;
+}
+.vcenter {
+  display: flex;
+  align-items: center;
+}
+</style>

src/components/user/Users.vue

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 21:32:18
- * @LastEditTime: 2021-11-22 18:44:04
+ * @LastEditTime: 2021-11-22 22:53:50
 -->
 <template>
   <div>
@@ -96,7 +96,8 @@
                         :enterable="false">
               <el-button type="success"
                          icon="el-icon-setting"
-                         size="mini"></el-button>
+                         size="mini"
+                         @click="setRole(scope.row)"></el-button>
             </el-tooltip>
 
           </template>
@@ -220,6 +221,33 @@
                    @click="editUserInfo()">确 定</el-button>
       </span>
     </el-dialog>
+
+    <!-- 分配角色Dialog对话框 -->
+    <el-dialog title="分配角色"
+               :visible.sync="setRoleDialogVisible"
+               width="50%"
+               @click="setRoleDialogClosed">
+      <div>
+        <p>当前 用户 :{{this.userInfo.username}}</p>
+        <p>当前 角色 :{{this.userInfo.role_name}}</p>
+        <p>分配 新角色 :
+          <el-select v-model="selectedRoleId"
+                     placeholder="请选择">
+            <el-option v-for="item in rolesList"
+                       :key="item.id"
+                       :label="item.roleName"
+                       :value="item.id">
+            </el-option>
+          </el-select>
+        </p>
+      </div>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="editDialogVisible = false">取 消</el-button>
+        <el-button type="primary"
+                   @click="saveRoleInfo">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -294,7 +322,15 @@ export default {
           { required: true, message: '请输入手机号', trigger: 'blur' },
           { validator: checkMobile, trigger: 'blur' }
         ]
-      }
+      },
+      setRoleDialogVisible: false,
+      userInfo: {
+        id: ''
+      },
+      //所有角色的数据列表
+      rolesList: [],
+      //选种的角色
+      selectedRoleId: ''
     }
   },
   created () {
@@ -390,6 +426,34 @@ export default {
       }
       this.getUserList()
       this.$message.success('删除成功')
+    },
+    async setRole (userInfo) {
+      this.userInfo = userInfo
+      if (this.rolesList.length == 0) {
+        //获取所有角色列表
+        const { data: res } = await this.$http.get('roles')
+        if (res.meta.status != 200) {
+          return this.$message.error('获取角色列表失败')
+        }
+        this.rolesList = res.data
+      }
+      this.setRoleDialogVisible = true
+    },
+    setRoleDialogClosed () {
+      this.userList = []
+      this.selectedRoleId = ''
+    },
+    async saveRoleInfo () {
+      if (!this.selectedRoleId) {
+        return this.$message.error('请选择要分配的角色!')
+      }
+      const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, { rid: this.selectedRoleId })
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.getUserList()
+      this.setRoleDialogVisible = false
+      return this.$message.success(res.meta.msg)
     }
   }
 }

src/plugins/element.js

@@ -3,13 +3,14 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 23:56:19
- * @LastEditTime: 2021-11-22 18:19:25
+ * @LastEditTime: 2021-11-22 22:36:05
  */
 import Vue from 'vue'
 import {
     Button, Form, FormItem, Input, Message, Container, Header, Aside, Main, Footer,
     Menu, MenuItem, Submenu, Breadcrumb, BreadcrumbItem, Card, Row, Col, Table,
-    TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox
+    TableColumn, Switch, Tooltip, Pagination, Dialog, MessageBox, Tag, Tree, Select,
+    Option
 } from 'element-ui'
 Vue.use(Button)
 Vue.use(Form)
@@ -34,5 +35,9 @@ Vue.use(Switch)
 Vue.use(Tooltip)
 Vue.use(Pagination)
 Vue.use(Dialog)
+Vue.use(Tag)
+Vue.use(Tree)
+Vue.use(Select)
+Vue.use(Option)
 Vue.prototype.$message = Message
 Vue.prototype.$confirm = MessageBox.confirm

src/router/index.js

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-21 23:56:19
- * @LastEditTime: 2021-11-22 11:59:09
+ * @LastEditTime: 2021-11-22 19:58:08
  */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
@@ -11,7 +11,8 @@ import Login from '../components/Login.vue'
 import Home from '../components/Home.vue'
 import Welcome from '../components/Welcome.vue'
 import Users from '../components/user/Users.vue'
-
+import Rights from '../components/power/Rights.vue'
+import Roles from '../components/power/Roles.vue'
 Vue.use(VueRouter)
 
 const routes = [
@@ -37,6 +38,14 @@ const routes = [
             {
                 path: '/users',
                 component: Users
+            },
+            {
+                path: '/rights',
+                component: Rights
+            },
+            {
+                path: '/roles',
+                component: Roles
             }
         ]
     }