1.0 权限列表 (全部)
- 添加权限列表路由
- 添加面包屑导航
- 显示数据
<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 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="level">
<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 {
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
console.log(this.rightsList)
}
}
}
</script>
<style lang="less" scoped>
</style>
2. 角色列表
- 添加角色列表路由
- 添加面包屑导航
- 显示数据
- 生成权限列表
使用三重嵌套for循环生成权限下拉列表
<!-- 展开列 -->
<el-table-column type="expand">
<template slot-scope="scope">
<!-- 渲染一级权限 -->
<el-row v-for="(item1,index1) in scope.row.children" :key="item1.id" :class="['bdbottom',index1 == 0 ? 'bdtop' : '' , 'vcenter']">
<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">
<el-row v-for="(item2,index2) in item1.children" :key="item2.id" :class="[index2 == 0 ? '' : 'bdtop','vcenter']">
<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,index3) 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>
- 美化样式
通过设置global.css中的#app样式min-width:1366px 解决三级权限换行的问题
,通过给一级权限el-row添加display:flex,align-items:center的方式解决一级权限垂直居中的问题,二级权限也类似添加,因为需要给多个内容添加,可以将这个样式设置为一个.vcenter{display:flex;align-items:center} - 去除右侧边滚动条
在global.css全局组件里面添加
.el-main::-webkit-scrollbar {
display: none;
}
- 添加权限删除功能
给每一个权限的el-tag添加closable属性,是的权限右侧出现“X”图标
再给el-tag添加绑定close事件处理函数
removeRightById(scope.row,item1.id)
removeRightById(scope.row,item2.id)
removeRightById(scope.row,item3.id)
2.1 角色列表(第一种方法删除标签的方法)
async removeRightById(role,rightId){
//弹窗提示用户是否要删除
const confirmResult = await this.$confirm('请问是否要删除该权限','删除提示',{
confirmButtonText:'确认删除',
cancelButtonText:'取消',
type:'warning'
}).catch(err=>err)
//如果用户点击确认,则confirmResult 为'confirm'
//如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel'
if(confirmResult != "confirm"){
return this.$message.info("已经取消删除")
}
//用户点击了确定表示真的要删除
//当发送delete请求之后,返回的数据就是最新的角色权限信息
const {
data:res} = await this.$http.delete(`roles/${
role.id}/rights/${
rightId}`)
if (res.meta.status !== 200)
return this.$message.error('删除角色权限失败')
//无需再重新加载所有权限
//只需要对现有的角色权限进行更新即可
role.children = res.data
// this.getRoleList();
}
2.2 角色列表(完成树形结构弹窗)
在element.js中引入Tree,注册Tree
<!-- 分配权限对话框 -->
<el-dialog title="分配权限" :visible.sync="setRightDialogVisible" width="50%" @close="setRightDialogClose">
<!-- 树形组件
show-checkbox:显示复选框
node-key:设置选中节点对应的值
default-expand-all:是否默认展开所有节点
: