From 8aab90d0da2b6902e4b526810ab98381b614aaec Mon Sep 17 00:00:00 2001
From: keepsty <shen543525631@163.com>
Date: Wed, 14 Apr 2021 19:17:23 +0800
Subject: [PATCH] rights done

---
 src/assets/css/global.css       |   5 +
 src/components/power/Rights.vue |  52 ++++++
 src/components/power/Roles.vue  | 274 ++++++++++++++++++++++++++++++++
 src/components/user/Users.vue   |  76 +++++++--
 src/plugins/element.js          |   8 +
 src/router/index.js             |  24 ++-
 6 files changed, 414 insertions(+), 25 deletions(-)
 create mode 100644 src/components/power/Rights.vue
 create mode 100644 src/components/power/Roles.vue

diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index 5fda299..01b1c13 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -5,6 +5,11 @@ body,
     height: 100%;
     margin: 0;
     padding: 0;
+    min-width: 1366px;
+}
+.vcenter {
+    display: flex;
+    align-items: center;
 }
 
 .el-breadcrumb {
diff --git a/src/components/power/Rights.vue b/src/components/power/Rights.vue
new file mode 100644
index 0000000..a43afee
--- /dev/null
+++ b/src/components/power/Rights.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
+      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
+    </el-breadcrumb>
+
+    <el-card >
+      <el-table :data="rightsList" style="width: 100%" border stripe>
+        <el-table-column type="index"></el-table-column>
+        <el-table-column prop="authName" label="权限名称"></el-table-column>
+        <el-table-column prop="path" label="路径"></el-table-column>
+        <el-table-column prop="level" label="权限等级">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.level === '0'">一级</el-tag>
+            <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
+            <el-tag type="warning" v-else>三级</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Rights',
+  data () {
+    return {
+      rightsList: []
+    }
+  },
+  created () {
+    this.getRightList()
+  },
+  methods: {
+    async getRightList() {
+      const { data: res } = await this.$http.get('rights/list')
+      if (res.meta.status !== 200) {
+        return this.$message.error('获取权限列表失败')
+      }
+      this.rightsList = res.data
+      console.log(this.rightsList)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/power/Roles.vue b/src/components/power/Roles.vue
new file mode 100644
index 0000000..ffe3c1b
--- /dev/null
+++ b/src/components/power/Roles.vue
@@ -0,0 +1,274 @@
+<template xmlns:el-col="http://www.w3.org/1999/html">
+  <div>
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item><a href="/">权限管理</a></el-breadcrumb-item>
+      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
+    </el-breadcrumb>
+
+    <el-card >
+<!--      添加按钮区域-->
+      <el-row :gutter="20">
+        <el-col :span="5">
+          <el-button type="primary" @click="addDialogVisible = true">添加角色</el-button>
+        </el-col>
+      </el-row>
+<!--      角色列表区域-->
+      <el-table :data="roleList" style="width: 100%" border stripe>
+<!--        拓展列-->
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <el-row :class="['bdbottom', i1 === 0 ? 'bdtop':'', 'vcenter']" v-for="(item1, i1) in scope.row.children" :key="item1.id">
+              <el-col :span="5">
+                <el-tag  @close="removeRightById(scope.row,item3.id)" closable>{{ item1.authName }}</el-tag>
+                <i class="el-icon-caret-right"></i>
+              </el-col>
+              <el-col :span="19">
+                <el-row :class="[i2 === 0 ? '':'bdtop', 'vcenter']" v-for="(item2,i2) in item1.children" :key="item2.id" >
+                  <el-col span="6">
+                    <el-tag type="success" @close="removeRightById(scope.row,item2.id)" closable>{{ 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" @close="removeRightById(scope.row,item3.id)" closable>{{ item3.authName }}</el-tag>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+            <pre>
+            </pre>
+          </template>
+        </el-table-column>
+        <el-table-column type="index"></el-table-column>
+        <el-table-column prop="roleName" label="角色名称"></el-table-column>
+        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
+        <el-table-column width="300" label="操作">
+          <template slot-scope="scope">
+<!--          <template>-->
+            <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">编 辑</el-button>
+            <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeRolesById(scope.row.id)">删 除</el-button>
+            <el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+<!--    添加角色对话框-->
+    <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
+      <el-form ref="addFormRef" :model="addForm" label-width="70px">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="addForm.roleName"></el-input>
+        </el-form-item>
+        <el-form-item label="角色描述" prop="roleDesc">
+          <el-input v-model="addForm.roleDesc"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+       <el-button @click="addDialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="addRoles">确 定</el-button>
+      </span>
+    </el-dialog>
+
+<!--    修改角色对话框-->
+    <el-dialog title="修改角色" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed" center>
+      <el-form ref="editFormRef" label-width="70px" :model="editForm">
+        <el-form-item label="角色名称">
+          <el-input v-model="editForm.roleName"></el-input>
+        </el-form-item>
+        <el-form-item label="角色描述">
+          <el-input v-model="editForm.roleDesc"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="editDialogClosed">取 消</el-button>
+    <el-button type="primary" @click="editRoleInfo">确 定</el-button>
+  </span>
+    </el-dialog>
+
+<!--    设置权限标签-->
+    <el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%">
+<!--      <span>这是一段信息</span>-->
+      <el-tree :data="rightslist" :props="treeProps" ref="treeRef" default-expand-all show-checkbox :default-checked-keys="defKeys" node-key="id"></el-tree>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="setRightDialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="allotRigths">确 定</el-button>
+  </span>
+    </el-dialog>
+
+</div>
+</template>
+
+<script>
+export default {
+  name: 'Roles',
+  data () {
+    return {
+      roleList: [],
+      roleId: '',
+      rightslist: [],
+      queryInfo: {
+        query: '',
+        // 当前页数
+        pagenum: 1,
+        // 每夜显示多少条
+        pagesize: 2
+      },
+      total: 0,
+      addDialogVisible: false,
+      editDialogVisible: false,
+      setRightDialogVisible: false,
+      addForm: {
+        roleName: '',
+        roleDesc: ''
+      },
+      editForm: {},
+      // 树形控件绑定事件
+      treeProps: {
+        label: 'authName',
+        children: 'children'
+      },
+      defKeys: []
+    }
+  },
+  created () {
+    this.getRolesList()
+  },
+  methods: {
+    async getRolesList () {
+      const { data: res } = await this.$http.get('roles')
+      if (res.meta.status !== 200) {
+        return this.$message.error('获取权限列表失败')
+      }
+      this.roleList = res.data
+      // console.log(this.roleList)
+    },
+    addDialogClosed () {
+      this.$refs.addFormRef.resetFields()
+    },
+    async addRoles () {
+      const { data: res } = await this.$http.post('roles', this.addForm)
+      if (res.meta.status !== 201) {
+        this.$message.error('添加角色失败')
+      }
+      this.$message.success('添加角色成功')
+      this.addDialogVisible = false
+      this.getRolesList()
+    },
+    editDialogClosed () {
+      this.$refs.editFormRef.resetFields()
+      this.editDialogVisible = false
+    },
+    async showEditDialog (id) {
+      // return Promise.resolve(undefined)
+      const { data: res } = await this.$http.get('roles/' + id)
+      if (res.meta.status !== 200) {
+        this.$message.error('获取角色失败')
+      }
+      this.editForm = res.data
+      this.editDialogVisible = true
+    },
+    async editRoleInfo () {
+      // console.log(this.editForm.id)
+      const { data: res } = await this.$http.put('roles/' + this.editForm.roleId, { roleName: this.editForm.roleName, roleDesc: this.editForm.roleDesc })
+      if (res.meta.status !== 200) {
+        return this.$message.error('修改角色失败')
+      }
+      this.editDialogVisible = false
+      this.getRolesList()
+      this.$message.success('修改角色成功')
+    },
+    async removeRolesById (id) {
+      const confirmResult = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(err => err)
+      // 如果返回 confirm 表示用户点击确认
+      // 返回 cancal 点击了取消
+      // console.log(confirmResult)
+      if (confirmResult !== 'confirm') {
+        return this.$message.info('已取消删除角色操作')
+      }
+      const { data: res } = await this.$http.delete('roles/' + id)
+      if (res.meta.status !== 200) {
+        return this.$message.error('删除角色失败')
+      }
+      this.$message.success('确认删除角色')
+      this.getRolesList()
+    },
+    async removeRightById (role, rightId) {
+      const confirmResult = await this.$confirm('此操作将永久删除此权限, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(err => err)
+      // 如果返回 confirm 表示用户点击确认
+      // 返回 cancal 点击了取消
+      // console.log(confirmResult)
+      if (confirmResult !== 'confirm') {
+        return this.$message.info('已取消删除权限操作')
+      }
+      const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)
+      if (res.meta.status !== 200) {
+        return this.$message.error('删除权限失败')
+      }
+      this.$message.success('确认删除权限')
+      // this.getUserList()
+      role.children = res.data
+    },
+    async showSetRightDialog (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
+      // console.log(this.rightslist)
+      // 获取三级节点
+      this.defKeys = []
+      this.getLeafKeys(role, this.defKeys)
+      this.setRightDialogVisible = true
+      // console.log(id)
+    },
+    // 通过递归的形式，获取角色下所有三级权限id
+    // 并保存到defKeys数组中
+    getLeafKeys (node, arr) {
+      // 如果当前node节点不包含children，则是三级节点
+      if (!node.children) {
+        return arr.push(node.id)
+      }
+      node.children.forEach(item => this.getLeafKeys(item, arr))
+    },
+    setRightDialogClosed() {
+      this.defKeys = []
+    },
+    async allotRigths () {
+      const keys = [
+        ...this.$refs.treeRef.getCheckedKeys(),
+        ...this.$refs.treeRef.getHalfCheckedKeys()
+      ]
+      // console.log(keys)
+      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.$message.success('更新角色权限成功')
+      this.setRightDialogVisible = false
+    }
+  }
+}
+</script>
+
+<style Lang="less" scoped>
+.el-tag {
+  margin: 7px
+}
+.bdtop {
+  border-top: 1px solid #eeeeee;
+}
+.bdbottom {
+  border-bottom: 1px solid #eeeeee;
+}
+</style>
diff --git a/src/components/user/Users.vue b/src/components/user/Users.vue
index ba01b34..651ff23 100644
--- a/src/components/user/Users.vue
+++ b/src/components/user/Users.vue
@@ -21,11 +21,11 @@
 <!--      用户列表区域-->
       <el-table :data="userList" style="width: 100%" border stripe>
         <el-table-column type="index"></el-table-column>
-        <el-table-column prop="username" label="姓名" width="150"></el-table-column>
-        <el-table-column prop="email" label="邮箱" width="150"></el-table-column>
-        <el-table-column prop="mobile" label="电话" width="150"></el-table-column>
-        <el-table-column prop="role_name" label="角色" width="150"></el-table-column>
-        <el-table-column prop="mg_state" label="状态" width="150">
+        <el-table-column prop="username" label="姓名"></el-table-column>
+        <el-table-column prop="email" label="邮箱"></el-table-column>
+        <el-table-column prop="mobile" label="电话"></el-table-column>
+        <el-table-column prop="role_name" label="角色"></el-table-column>
+        <el-table-column prop="mg_state" label="状态">
           <template v-slot="scope">
 <!--            {{scope.row}}-->
             <el-switch
@@ -38,11 +38,11 @@
         </el-table-column>
         <el-table-column label="操作" width="180">
           <template slot-scope="scope">
-            {{scope.username}}
+<!--            {{scope.username}}-->
             <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
             <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
             <el-tooltip effect="dark" content="配置权限" :enterable=false placement="top">
-              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
+              <el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetDialog(scope.row)"></el-button>
             </el-tooltip>
           </template>
         </el-table-column>
@@ -63,7 +63,7 @@
           <el-input v-model="addForm.username"></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="password">
-          <el-input v-model="addForm.password"></el-input>
+          <el-input v-model="addForm.password" type="password"></el-input>
         </el-form-item>
         <el-form-item label="邮箱" prop="email">
           <el-input v-model="addForm.email"></el-input>
@@ -95,6 +95,31 @@
     <el-button type="primary" @click="editUserInfo">确 定</el-button>
   </span>
     </el-dialog>
+<!--    分配用户角色对话框-->
+    <el-dialog title="提示" :visible.sync="setRoleDialogVisible" width="30%" >
+      <el-form ref="setFormRef" :model="userInfo"  label-width="80px">
+        <el-form-item label="用 户 名">
+          <el-input v-model="userInfo.username" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="当前角色">
+          <el-input v-model="userInfo.role_name" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="角色列表">
+          <el-select v-model="selectRoleId" placeholder="请选择" >
+            <el-option
+              v-for="item in rolesList"
+              :key="item.id"
+              :label="item.roleName"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="userRoleChanged">确 定</el-button>
+  </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -166,7 +191,13 @@ export default {
           { required: true, message: '请输入手机号', trigger: 'blur' },
           { validator: checkMobile, trigger: 'blur' }
         ]
-      }
+      },
+      setRoleDialogVisible: false,
+      // 用于分配用户数据接收
+      userInfo: {},
+      // 所有角色列表
+      rolesList: [],
+      selectRoleId: ''
     }
   },
   methods: {
@@ -207,7 +238,7 @@ export default {
         // 可以进行真正的添加用户功能
         const { data: res } = await this.$http.post('users', this.addForm)
         if (res.meta.status !== 201) {
-          console.log(res.meta.status)
+          // console.log(res.meta.status)
           this.$message.error('添加用户失败')
         }
         this.$message.success('添加用户成功')
@@ -256,6 +287,31 @@ export default {
       }
       this.$message.success('确认删除用户')
       this.getUserList()
+    },
+    async showSetDialog (user) {
+      this.userInfo = user
+      // 展示对话框前获取全部角色列表
+      const { data: res } = await this.$http.get('roles')
+      if (res.meta.status !== 200) {
+        return this.$message.error('获取角色列表失败')
+      }
+      this.rolesList = res.data
+      this.setRoleDialogVisible = true
+    },
+    async userRoleChanged () {
+      if (!this.selectRoleId) {
+        return this.$message.error('请选择分配的角色')
+      }
+      const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, {
+        rid: this.selectRoleId
+      })
+      if (res.meta.status !== 200) {
+        return this.$message.error('分配用户角色失败')
+      }
+      this.getUserList()
+      this.selectRoleId = ''
+      this.rolesList = []
+      this.setRoleDialogVisible = false
     }
   }
 }
diff --git a/src/plugins/element.js b/src/plugins/element.js
index 1b734a9..c12de2c 100644
--- a/src/plugins/element.js
+++ b/src/plugins/element.js
@@ -24,6 +24,10 @@ import {
   Tooltip,
   Pagination,
   Dialog,
+  Tag,
+  Tree,
+  Select,
+  Option,
   MessageBox
 } from 'element-ui'
 
@@ -50,5 +54,9 @@ Vue.use(Switch)
 Vue.use(Tooltip)
 Vue.use(Dialog)
 Vue.use(Pagination)
+Vue.use(Tag)
+Vue.use(Tree)
+Vue.use(Select)
+Vue.use(Option)
 Vue.prototype.$message = Message
 Vue.prototype.$confirm = MessageBox.confirm
diff --git a/src/router/index.js b/src/router/index.js
index 6589463..c90b6e1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,29 +4,23 @@ import Login from '../components/Login.vue'
 import Home from '../components/Home.vue'
 import Welcome from '../components/Welcome'
 import Users from '@/components/user/Users'
+import Rights from '@/components/power/Rights'
+import Roles from '@/components/power/Roles'
 
 Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: '/login',
-    component: Login
-  },
-  {
-    path: '/',
-    redirect: '/login'
-  },
+  { path: '/login', component: Login },
+  { path: '/', redirect: '/login' },
   {
     path: '/home',
     component: Home,
     redirect: '/welcome',
-    children: [{
-      path: '/welcome',
-      component: Welcome
-    }, {
-      path: '/users',
-      component: Users
-    }]
+    children: [
+      { path: '/welcome', component: Welcome },
+      { path: '/users', component: Users },
+      { path: '/rights', component: Rights },
+      { path: '/roles', component: Roles }]
   }
 ]
 
-- 
Gitee