实现权限列表

1. 权限列表

添加权限列表路由

创建权限管理组件（Rights.vue），并在router.js添加对应的路由规则

import Rights from '@/views/rightsManagement/Rights.vue'
......
path: '/home', component: Home, redirect: '/welcome', children: [
{ path: "/welcome", component: Welcome },
{ path: "/users", component: Users },
{ path: "/rights", component: Rights }
]
......

添加面包屑导航

在Rights.vue中添加面包屑组件展示导航路径

权限操作相关API

创建 api/role.js

import http from '../utils/http.js'
// get请求 获取所有角色列表
export function getRoles() {
return http.get('roles', null)
}
// post请求 新增角色信息
export function addRoles(params) {
return http.post('roles', params)
}
// 根据id获取角色信息
export function getRolesById(id) {
return http.get(`roles/${id}`, null)
}
// 修改角色信息
export function updateRoles(id, params) {
return http.put(`roles/${id}`, params)
}
// 删除角色信息
export function deleteRoles(id) {
return http.delete(`roles/${id}`, null)
}

创建 api/right.js

import http from '../utils/http.js'
// get请求 获取所有权限列表
export function getRights() {
return http.get('rights/list', null)
}
// 删除权限
export function delRight(roleId, rightId) {
return http.delete(`roles/${roleId}/rights/${rightId}`, null)
}
// 获取权限树
export function getRightTree() {
return http.get('rights/tree', null)
}
// 设置权限
export function setRight(roleId, rights) {
return http.post(`roles/${roleId}/rights`, rights)
}

显示数据

在data中添加一个rightsList数据，在methods中提供一个getRightsList方法发送请求获取权限列表数据，在mounted中调用这个方法获取数据

<template>
<div class="main">
<el-card>
<!-- 表格展示数据 -->
<el-table :data="rightsList" border stripe class="table">
<el-table-column type="index"></el-table-column>
<el-table-column label="权限名称" prop="authName"></el-table-column>
<el-table-column label="路径" prop="path"></el-table-column>
<el-table-column label="权限等级" prop="label">
<template slot-scope="scope">
<el-tag v-if="scope.row.level === '0'">一级权限</el-tag>
<el-tag v-if="scope.row.level === '1'" type="success">二级权限</el-tag>
<el-tag v-if="scope.row.level === '2'" type="warning">三级权限</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import {
getRights
} from '@/api/rights.js'
export default {
name: 'rightsList',
data() {
return {
// 保存请求回来的数据
rightsList: []
}
},
mounted() {
this.getRightsList()
},
methods: {
getRightsList() {
// 发送请求获取权限列表数据
getRights().then(res => {
const data = res.data
// 如果返回状态为异常状态则报错并返回
if (data.meta.status !== 200) {
return this.$message.error(data.meta.mgs)
}
// 如果返回状态正常，将请求的数据保存在data中
this.rightsList = data.data
}).catch(err => {
console.log(err)
})
}
}
}
</script>
<style lang="scss" scoped>
</style>

2.角色列表

添加角色列表路由

添加角色列表子组件（rightsManagement/Roles.vue），并添加对应的规则

{
path: '/home',
name: 'home',
component: Home,
children: [
{ path: '', redirect: 'welcome' },
{ path: 'welcome', component: Welcome },
{ path: 'users', component: Users },
{ path: 'rights', component: Rights },
{ path: 'roles', component: Roles }
]
}

添加面包屑导航

在Roles.vue中添加面包屑组件展示导航路径

显示数据

在data中添加一个roleList数据，在methods中提供一个getRoleList方法发送请求获取权限列表数据，在created）中调用这个方法获取数据

<!-- 角色列表区域 -->
<!-- row-key="id" 是2019年3月提供的新特性，
if there's nested data, rowKey is required.
如果这是一个嵌套的数据，rowkey 是必须添加的属性 -->
<template>
<div class="main">
<el-card>
<!-- 表格展示数据 -->
<el-table row-key="id" :data="roleList" border :tree-props="{children: 'no'}">
<el-table-column type="expand"></el-table-column>
<el-table-column type="index"></el-table-column>
<el-table-column label="角色名称" prop="roleName"></el-table-column>
<el-table-column label="角色描述" prop="roleDesc"></el-table-column>
<el-table-column label="操作" width="300px">
<template>
<el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
<el-button size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import {
getRoles
} from '../api/role.js'
export default {
data() {
return {
// 保存角色信息
roleList: []
}
},
created() {
this.getRoleList()
},
methods: {
getRoleList() {
// 发送请求获取角色列表数据
getRoles().then(res => {
const data = res.data
// 如果返回状态为异常状态则报错并返回
if (data.meta.status !== 200) {
return this.$message.error(data.meta.mgs)
}
// 如果返回状态正常，将请求的数据保存在data中
this.roleList = data.data
}).catch(err => {
console.log(err)
})
}
}
}
</script>
<style lang="scss" scoped>
</style>

生成权限下拉列表

使用三重嵌套for循环生成权限下拉列表

<!-- 添加展开列 -->
<el-table-column type="expand">
<template v-slot="scope">
<el-row :class="['bdbottom','v-center',i1===0?'bdtop':'']" v-for="(item1,i1) in scope.row.children" :key="item1.id">
<!-- 渲染一级权限 -->
<el-col :span="5">
<el-tag>
{{item1.authName}}
</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- 渲染二，三级权限 -->
<el-col :span="19">
<!-- 通过for循环嵌套渲染二级权限
-->
<el-row :class="['v-center',i2===0?'':'bdtop' ]" v-for="(item2,i2) in item1.children" :key="item2.id">
<el-col :span="6">
<el-tag type="success">{{item2.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<el-col :span="18" class="col-height">
<el-tag type="warning" class="margin-left" v-for="(item3) in item2.children" :key="item3.id">
{{item3.authName}}
</el-tag>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
</el-table-column>

美化样式

通过给一级权限el-row添加display:flex,align-items:center的方式解决一级权限垂直居中的问题，二级权限也类似添加，因为需要给多个内容添加，可以将这个样式设置为一个.vcenter{display:flex;align-items:center}

.bdtop {
border-top: 1px solid #eee;
}
.bdbottom {
border-bottom: 2px solid #eee;
}
.v-center {
display: flex;
align-items: center;
}
.col-height{
line-height: 40px;
}
.margin-left{
margin-left: 5px;
}

添加角色

<!-- 对话框组件 -->
<el-dialog :visible.sync="addDialogVisible" width="50%" title="添加角色" @close="addDialogClosed()">
<el-form :model="addForm" ref="addFormRef" 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="addDialogClosed()">取 消</el-button>
<el-button type="primary" @click="saveRole()">确 定</el-button>
</span>
</el-dialog>

<script>
import { getRoles, addRoles } from '../api/role.js'
export default {
data() {
return {
addForm: {
roleName: '',
roleDesc: ''
},
addDialogVisible: false,
// 添加表单的验证规则对象
addFormRules: {
rolename: [{
required: true,
message: '请输入角色名称',
trigger: 'blur'
}]
}
}
},
methods: {
addDialogClosed() {
// 对话框关闭之后，重置表达式
this.$refs.addFormRef.resetFields()
// 关闭对话框
this.addDialogVisible = false
},
saveRole() {
addRoles(this.addForm).then(res => {
const data = res.data
if (data.meta.status !== 201) {
this.$message.error(res.data.meta.msg)
} else {
this.$message.success(res.data.meta.msg)
}
// 关闭对话框
this.addDialogVisible = false
// 重新请求最新的数据
this.getRoleList()
})
}
}
}
</script>

删除角色

<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeRolesByID(scope.row.id)">删除</el-button>

import {
getRoles,
addRoles,
deleteRoles
} from '../api/role.js'
async removeRolesByID(id) {
// 弹出确定取消框，是否删除角色
const confirmResult = await this.$confirm('请问是否要永久删除该角色', '删除提示', {
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
// 如果用户点击确认，则confirmResult 为'confirm'
// 如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
if (confirmResult !== 'confirm') {
return this.$message.info('已经取消删除')
}
deleteRoles(id).then(res => {
const data = res.data
if (data.meta.status !== 200) {
return this.$message.error(data.meta.msg)
} else {
this.$message.success(data.meta.msg)
}
// 显示弹出窗
this.editDialogVisible = false
// 重新请求最新的数据
this.getRoleList()
})
}

编辑角色

获取角色信息

<!-- 对话框组件 -->
<el-dialog :visible.sync="editDialogVisible" width="50%" title="修改角色" @close="editDialogClosed()">
<el-form :model="editForm" ref="editFormRef" label-width="70px">
<el-form-item label="角色名" prop="roleName">
<el-input v-model="editForm.roleName"></el-input>
</el-form-item>
<el-form-item label="角色描述" prop="roleDesc">
<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="editRoles()">确 定</el-button>
</span>
</el-dialog>

editDialogVisible: false,
editForm: {
roleName: '',
roleDesc: ''
},
// 添加表单的验证规则对象
editFormRules: {
rolename: [{
required: true,
message: '请输入角色名称',
trigger: 'blur'
}]
}

import {
getRoles,
addRoles,
deleteRoles,
getRolesById,
updateRoles
} from '../api/role.js'
// 展示编辑角色的对话框
showEditDialog(id) {
// 发送请求根据id获取角色信息
getRolesById(id).then(res => {
const data = res.data
if (data.meta.status !== 200) {
return this.$message.error('获取角色信息失败')
}
// 将获取到的数据保存到数据editForm中
this.editForm = data.data
// 显示弹出窗
this.editDialogVisible = true
})
},
editDialogClosed() {
// 对话框关闭之后，重置表达式
this.$refs.editFormRef.resetFields()
// 关闭对话框
this.editDialogVisible = false
},
editRoles() {
updateRoles(this.editForm.roleId, this.editForm).then(res => {
const data = res.data
if (data.meta.status !== 200) {
return this.$message.error(data.meta.msg)
} else {
this.$message.success(data.meta.msg)
}
// 显示弹出窗
this.editDialogVisible = false
// 重新请求最新的数据
this.getRoleList()
})

添加权限删除功能

1. 给每一个权限的el-tag添加closable属性，是的权限右侧出现“X”图标

2. 再给el-tag添加绑定close事件处理函数

   removeRightById(scope.row,item1.id)
   removeRightById(scope.row,item2.id)
   removeRightById(scope.row,item3.id)

import {
delRight
} from '../api/rights.js'
async removeRightById(role, id) {
// 弹窗提示用户是否要删除
const confirmResult = await this.$confirm('请问是否要删除该权限', '删除提示', {
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning'
}).catch(err => err)
// 如果用户点击确认，则confirmResult 为'confirm'
// 如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
if (confirmResult !== 'confirm') {
return this.$message.info('已经取消删除')
}
delRight(role.id, id).then(res => {
const data = res.data
if (data.meta.status !== 200) {
return this.$message.error(data.meta.msg)
} else {
this.$message.success(data.meta.msg)
// 无需再重新加载所有权限
// 只需要对现有的角色权限进行更新即可
role.children = data.data
}
})
}

完成权限分配功能

先给分配权限按钮添加事件
<el-button size=“mini” type=“warning” icon=“el-icon-setting” @click=“showSetRightDialog”>分配权限
在showSetRightDialog函数中请求权限树数据并显示对话框

import {
delRight,
getRightTree
} from '../api/rights.js'
showSetRightDialog() {
// 当点击分配权限按钮时，展示对应的对话框
this.setRightDialogVisible = true
// 获取所有权限的数据
getRightTree().then(res => {
// 如果返回状态为异常状态则报错并返回
if (res.meta.status !== 200) {
return this.$message.error('获取权限树失败')
}
// 如果返回状态正常，将请求的数据保存在data中
this.rightsList = res.data
})
}

添加分配权限对话框，并添加绑定数据setRightDialogVisible

<!-- 分配权限对话框 -->
<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="setRightDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="setRightDialogVisible = false">确 定</el-button>
</span>
</el-dialog>

完成树形结构弹窗

在element.js中引入Tree，注册Tree

<!-- 分配权限对话框 -->
<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%">
<!-- 树形组件
show-checkbox:显示复选框
node-key:设置选中节点对应的值
default-expand-all:是否默认展开所有节点
:default-checked-keys 设置默认选中项的数组
ref:设置引用 -->
<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="setRightDialogClose">取 消</el-button>
<el-button type="primary" @click="allotRights">确 定</el-button>
</span>
</el-dialog>

在data中增加如下数据：

// 权限树数据
rightsList: [],
// 树形控件的属性绑定对象
treeProps: {
// 通过label设置树形节点文本展示authName
label: 'authName',
// 设置通过children属性展示子节点信息
children: 'children'
},
// 设置树形控件中默认选中的内容
defKeys: [],
// 保存正在操作的角色id
roleId: ''

在methods中添加分配权限相关的方法

import {
delRight,
getRightTree,
setRight
} from '../api/rights.js'
showSetRightDialog(role) {
// 将role.id保存起来以供保存权限时使用
this.roleId = role.id
// 当点击分配权限按钮时，展示对应的对话框
this.setRightDialogVisible = true
// 获取所有权限的数据
getRightTree().then(res => {
const data = res.data
// 如果返回状态为异常状态则报错并返回
if (data.meta.status !== 200) {
return this.$message.error('获取权限树失败')
}
// 如果返回状态正常，将请求的数据保存在data中
this.rightsList = data.data
})
// 调用getLeafKeys进行递归，将三级权限添加到数组中
this.getLeafKeys(role, this.defKeys)
},
getLeafKeys(node, arr) {
// 该函数会获取到当前角色的所有三级权限id并添加到defKeys中
// 如果当前节点不包含children属性，则表示node为三级权限
if (!node.children) {
return arr.push(node.id)
}
// 递归调用
node.children.forEach(item => this.getLeafKeys(item, arr))
},
setRightDialogClose() {
// 当用户关闭树形权限对话框的时候，清除掉所有选中状态
this.defKeys = []
// 关闭对话框
this.setRightDialogVisible = false
},
allotRights() {
// 当用户在树形权限对话框中点击确定，将用户选择的
// 权限发送请求进行更新
// 获取所有选中及半选的内容
const keys = [
...this.$refs.treeRef.getCheckedKeys(),
...this.$refs.treeRef.getHalfCheckedKeys()
]
// 将数组转换为 , 拼接的字符串
const idStr = keys.join(',')
// 发送请求完成更新
setRight(this.roleId, { rids: idStr }).then(res => {
if (res.data.meta.status !== 200) {
return this.$message.error('分配权限失败')
}
this.$message.success('分配权限成功')
this.getRoleList()
// 关闭对话框
this.setRightDialogVisible = false
})
}

分配角色

打开Users.vue，完成分配角色的功能
添加分配角色对话框

<!-- 分配角色对话框 -->
<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%">
<el-form :model="rolesList" label-width="100px">
<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>
<span slot="footer" class="dialog-footer">
<el-button @click="setRoleDialogClosed">取 消</el-button>
<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
</span>
</el-dialog>

给分配角色按钮添加点击事件，点击之后弹出一个对话框进行角色分配

<!-- 修改权限 -->
<el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetRole(scope.row)"></el-button>
</el-tooltip>
<script>
import {
getRoles
} from '@/api/role.js'
data(){
......
//控制显示分配角色对话框
setRoleDialogVisible:false,
//保存正在操作的那个用户信息
userInfo:{},
//保存所有的角色信息
rolesList:[],
//保存用户选中的角色id
selectedRoleId:''
},
methods:{
......
showSetRole(userInfo) {
// 保存起来以供后续使用
this.userInfo = userInfo
// 获取所有角色信息
getRoles().then(res => {
const data = res.data
if (data.meta.status !== 200) {
return this.$message.error(data.meta.msg)
}
this.setRoleDialogVisible = true
this.rolesList = data.data
})
}
}
}
</script>

在element.js中引入Select，Option，注册Select，Option

<el-form-item label="分配新角色">
<!-- 角色选择下拉框 v-model：设置用户选中角色之后的id绑定数据-->
<el-select v-model="selectedRoleId" placeholder="请选择角色">
<!-- :label 显示文本，:value 选中值 -->
<el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
</el-option>
</el-select>
</el-form-item>

当用户点击对话框中的确定之后，完成分配角色的操作

<span slot="footer" class="dialog-footer">
<el-button @click="setRoleDialogClosed">取 消</el-button>
<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
</span>
<script>
methods:{
.......
saveRoleInfo() {
setRoleByUser(this.userInfo.id, this.selectedRoleId).then(res => {
// 当用户点击确定按钮之后
// 判断用户是否选择了需要分配的角色
if (!this.selectedRoleId) {
return this.$message.error('请选择需要分配的角色')
}
const data = res.data
if (data.meta.status !== 200) {
return this.$message.error(data.meta.msg)
} else {
this.$message.success(data.meta.msg)
// 关闭分配权限对话框
this.setRoleDialogVisible = false
// 重新获取用户列表
this.getUserList()
}
})
},
setRoleDialogClosed() {
// 关闭对话框
this.setRoleDialogVisible = false
// 清空当前所选用户信息
this.userInfo = ''
}
}
</script>

最后

以上就是友好香菇为你收集整理的Vue+ElementUI电商项目（四）实现权限列表的全部内容，希望文章能够帮你解决Vue+ElementUI电商项目（四）实现权限列表所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。