实现的功能
功能 | 详述 |
---|---|
权限列表 | 面包屑导航;卡片视图;权限等级 数值渲染为标签 |
角色列表 | 面包屑导航;卡片视图;获取和渲染角色数据列表;获取角色权限;渲染多级权限列表 |
角色权限 | 分配角色对话框显示和隐藏;渲染多选树形权限列表;分配角色权限;重置权限列表;弹框询问 删除角色权限 |
分配角色 | 分配角色对话框显示和隐藏;获取和渲染被分配角色的用户信息;分配角色;重置分配角色表单 |
使用到的Element-ui组件
组件名称_EN | 注册 | 备注 |
---|---|---|
Tag | Vue.use(Tag) | 标签 |
Tree | Vue.use(Tree) | 树形控件 |
Select | Vue.use(Select) | 选择器 |
Option | Vue.use(Option) |
一、权限
1.渲染组件和子路由
2.布局
①面包屑导航
②卡片视图
3.获取渲染权限数据列表
①获取权限数据列表
②渲染权限数据列表
1️⃣权限等级 数值渲染为标签
v-if;v-else-if;v-else
<!-- [Rights.vue] -->
<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>
二、角色
1.渲染组件和子路由
2.布局
①面包屑导航
②卡片视图
3.获取渲染角色数据列表
①获取角色数据列表
②渲染角色数据列表
1️⃣展开列
type="expand":展开列
<!-- [Roles.vue] -->
<!-- 展开列 -->
<el-table-column type="expand">
<template slot-scope="scope">
<!-- ...... -->
</template>
</el-table-column>
2️⃣多级权限渲染
- 通过scope.row获取角色数据
- 三层for循环
<!-- [Roles.vue] -->
<el-row>
<!-- 一级权限 -->
<el-col :span="5"></el-col>
<!-- 二级+三级权限 -->
<el-col :span="19"></el-col>
</el-row>
- 第一层for循环渲染一级权限
<el-row :class="['bdbottom',index1 === 0 ? 'bdtop':'','vcenter']"
v-for="(item1,index1) 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-row>
/* [Roles.vue] */
/* 边框样式 */
.bdtop {
border-top: 1px solid #eeeeee;
}
.bdbottom {
border-bottom: 1px solid #eeeeee;
}
- 第二层for循环渲染二级权限
<!-- ...... -->
<!-- 二级+三级权限 -->
<el-col :span="19">
<el-row :class="[index2 === 0 ?'' : 'bdtop','vcenter']"
v-for="(item2,index2) 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-row>
</el-col>
- 第三层for循环渲染三级权限
<el-col :span="18">
<el-tag type="warning"
v-for="(item3) in item2.children" :key="item3.id">{{item3.authName}}</el-tag>
</el-col>
3️⃣美化权限列表
/* [assets/css/global.css] */
html,body,#app{
/* ...... */
min- 1366px;
}
/* [Roles.vue] */
/* tags纵向居中对齐 */
.vcenter {
display: flex;
align-items: center;
}
3、删除角色权限
弹框询问是否删除角色权限
<!-- [Roles.vue] -->
<el-tag
closable
@close="removeRightById(scope.row,item3.id)"
type="warning"
v-for="(item3) in item2.children"
:key="item3.id"
>{{item3.authName}}</el-tag>
// [Roles.vue -> methods]
// 根据id删除对应权限
async removeRightById(role, rightId) {
// 弹框提示
const confirmResult = await this.$confirm(
'此操作将永久删除该用户权限, 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).catch((err) => err)
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('删除权限失败')
}
// 删除后不关闭多级权限列表 api返回最新角色权限数据
role.children = res.data
}
4、分配角色权限
①展示分配权限对话框
②获取所有权限列表
③渲染所有权限列表
树形控件
:data:数据源
:props:数据绑定字段
label:文本
children:父子节点通过哪一个属性嵌套
show-checkbox:复选框
node-key:选中后选中的值
default-expand-all:默认展开所有节点
:default-checked-keys:默认勾选的数组
<!-- [Roles.vue] -->
<!-- 树形控件 -->
<el-tree
:data="rightslist"
:props="treeProps"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="defkeys"
ref="treeRef"
></el-tree>
// [Roles.vue -> data]
// 树形控件的属性绑定对象
treeProps: {
label: 'authName',
children: 'children',
},
// 默认选中的节点id数组
defkeys: [],
// [Roles.vue -> methods]
// 展示分配权限对话框
async showSetRightDialog(role) {
// ......
// 递归获取三级节点id
this.getLeafKeys(role, this.defkeys)
// ......
},
// 通过递归的形式,获取角色下所有三级权限的id,并保存到defkeys
getLeafKeys(node, arr) {
// 如果当前node属性不包含children属性,则为三级节点
if (!node.children) {
return arr.push(node.id)
}
node.children.forEach((item) => this.getLeafKeys(item, arr))
}
④重置权限列表
<!-- [Roles.vue] -->
<!-- 分配权限对话框 -->
<el-dialog title="分配权限" :visible.sync="SetRightDialogVisible"
width="50%"
@close="setRightDialogClosed"
></el-dialog>
// [Roles.vue -> methods]
// 监听分配权限对话框的关闭事件
setRightDialogClosed() {
this.defkeys = []
}
⑤分配角色权限
树形组件Tree
getCheckedKeys:获取所有选中的节点数组
getHalfCheckedKeys:获取所有半选中的节点数组
// [Roles.vue -> data]
// 即将分配权限的id
roleId: ''
// [Roles.vue -> methods]
// 展示分配权限对话框
async showSetRightDialog(role) {
this.roleId = role.id
// ......
},
// 点击确定为角色分配权限
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.$message.success('分配权限成功')
this.getRoleList()
this.SetRightDialogVisible = false
}
5、分配角色
①展示分配角色对话框
②获取被分配角色的用户信息
scope.row传递userInfo,保存到userInfo
// [Users.vue -> data]
// 需要被分配角色的用户信息
userInfo: {},
// 所有角色的数据列表
roleslist: []
// [Users.vue -> methods]
// 展示分配角色对话框
async setRole(userInfo) {
this.userInfo = userInfo
// 在展示对话框之前,获取所有角色列表
const { data: res } = await this.$http.get('roles')
if (res.meta.status !== 200)
return this.$message.error('获取角色列表失败')
this.roleslist = res.data
this.setRoleDialogVisible = true
}
③渲染被分配角色的用户信息
select
v-model:选中的值
placeholder:显示的文本
option
:label:显示的文本
:value:真正选中的值
<!-- [Users.vue] -->
<div>
<p>当前的用户:{{userInfo.username}}</p>
<p>当前的角色:{{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>
// [Users.vue -> data]
// 已选中的角色id
selectedRoleId:''
④分配角色
// [Users.vue -> methods]
// 点击确定按钮分配新角色
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('更新用户角色失败')
this.$message.success('更新用户角色成功')
this.getUserList()
this.setRoleDialogVisible = false
},
⑤重置表单
// [Users.vue -> methods]
// 监听分配角色对话框的关闭
setRoleDialogClosed(){
this.selectedRoleId = ''
this.userInfo={}
}