页面搭建
<template><div class="container"><div class="app-container"><el-button size="mini" type="primary">添加权限</el-button><el-table-column label="名称" /><el-table-column label="标识" /><el-table-column label="描述" /><el-table-column label="操作"><el-button type="primary" mini="size">添加</el-button><el-button type="primary" mini="size">删除</el-button><el-button type="primary" mini="size">编辑</el-button></el-table-column></div></div>
</template>
封装接口调用
api
import request from '@/utils/request'// 获取权限列表
export function getPermissionList() {return request({url: '/sys/permission'})
}
一进页面就调用
export default {name: 'Permission',created() {this.getPermissionList()},methods: {async getPermissionList() {const result = await getPermissionList}}
}
将获取的数据转换为树形
methods: {async getPermissionList() {// 将获取的数据转换为树形this.list = transListToTreeData(await getPermissionList, 0)}}
给表格绑定数据,添加 row-key和default-expand-all和默认展开节点属性
<el-table :data="list" roe-key="id" default-expand-all>
用插槽和v-if设置二级权限没有添加
<template v-slot="{row}"><el-button v-if="row.type === 1" type="primary" mini="size">添加</el-button><el-button type="primary" mini="size">删除</el-button><el-button type="primary" mini="size">编辑</el-button></template>
员工角色分配-弹出层
点击按钮
1.设置控制退出角色的显示的变量
showRoleDialog: false,
2.visible加.sync可以让我们点击x直接关闭弹层
<el-dialog :visible.sync="showRoleDialog" />
3.封装api
// 获取可用角色
export function getEnableRoleList() {return request({url: '/sys/role/list/enabled'})
}
4.弹出层
<el-checkbox-group v-model="roleIds"><el-checkbox v-for="item in roleList" :key="item.id">{{ item.name }}</el-checkbox></el-checkbox-group>
回显数据
1.回显数据
methods: {// 点击角色按钮弹层出现async btnRole(id) {// 通过传入的id获取当前用户所拥有的角色this.roleList = await getEnableRoleList()// 记录当前点击的id,因为之后确定取消要存取给对应的用户this.currentUserId = id// 调用接口,解构数据,获取当前用户拥有的角色const { roleIds } = await getEmployeeDetail(id)// 赋值给对应的显示的勾选this.roleIds = roleIds// 先获取接口,获取成功了在显示弹层,否则页面来不及跳转this.showRoleDialog = true},
2.确定按钮
调用接口,传入参数,提示信息
async btnRoleOk() {await assignRole({// 传入参数id: this.currentUserId,roleIds: this.roleIds})this.$message.success('分配用户角色成功')this.showRoleDialog = false}
3.取消按钮
<el-button size="mini" @click="showRoleDialog=false">取消</el-button>
给角色分配权限-弹出层
1.控制弹层显示(:visible要加.sync修饰符,还要加title)
<el-dialog :visible.sync=" showPermissionDialog" title="分配权限"><!--放置权限数据--></el-dialog>
2.步骤同上
这里用了文档里的方法,通过获取实例调用方法来实现双向绑定