vue + element-ui 实现角色信息功能

上周已更新完用户信息列表以及登录功能，今天抽空将角色信息列表以及角色分配做完了。和小伙伴们分享一下劳动成果，后续会继续更新商品管理的信息~

先展示一下效果图

这是一个角色列表信息，功能包括新增角色、编辑角色、分配角色

点击最左侧展开按钮可以看到角色下面的权限，可以对权限进行删除以及分配权限功能

这里是分配权限的页面，通过element-ui 里面的tree进行数据绑定显示

好啦，功能已完成，较后献上的代码片段~

<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-row><el-col><el-button type="pri**ry" @click="addDialogVisible = true">添加角色</el-button></el-col></el-row><!-- 角色列表区域 --><el-table :data="roleList" border stripe><!-- 展开列 --><el-table-column type="expand"><template slot-scope="scope"><el-rowv-for="(item1, i1) in scope.row.children":key="item1.id":class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']"><!-- 渲染一级权限 --><el-col :span="5"><el-tag closable @close="removeRoleById(scope.row, item1.id)">{{item1.authName}}</el-tag><i class="el-icon-caret-right"></i></el-col><!-- 渲染二级和三级权限 --><el-col :span="19"><!-- 通过for循环嵌套渲染二级权限 --><el-row:class="[i2 === 0 ? '' : 'bdtop', 'vcenter']"v-for="(item2, i2) in item1.children":key="item2.id"><el-col :span="6"><el-tagtype="success"closable@close="removeRoleById(scope.row, item2.id)">{{ item2.authName }}</el-tag><i class="el-icon-caret-right"></i></el-col><!-- 渲染三级权限 --><el-col :span="18"><el-tagclosable@close="removeRoleById(scope.row, item3.id)"type="warning"v-for="(item3, i3) in item2.children":key="item3.id">{{ item3.authName }}</el-tag></el-col></el-row></el-col></el-row></template></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 slot-scope="scope"><el-buttonsize="mini"type="pri**ry"icon="el-icon-edit"@click="editRoleForm(scope.row.id)">编辑</el-button><el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button><el-buttonsize="mini"type="warning"icon="el-icon-setting"@click="showSetRightDialog(scope.row)">分配权限</el-button></template></el-table-column></el-table></el-card><!--添加用户的对话框--><el-dialogtitle="添加用户":visible.sync="addDialogVisible"width="50%"@close="addDialogClosed"><!--主体区域--><el-form:model="addForm":rules="addFormRules"ref="addFormRef"label-width="80px"><el-form-item label="角色id" prop="roleId"><el-input v-model="addForm.roleId"></el-input></el-form-item><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="pri**ry" @click="addRole">确 定</el-button></span></el-dialog><!-- 编辑用户对话框 --><el-dialogtitle="编辑用户":visible.sync="editDialogVisible"width="50%"@close="editDialogClosed"><!-- 主题区域 --><el-form:model="editForm":rules="editFormRules"ref="editFormRef"label-width="80px"><el-form-item label="角色id" prop="roleId"><el-input v-model="editForm.roleId"></el-input></el-form-item><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="editDialogVisible = false">取 消</el-button><el-button type="pri**ry" @click="editRole">确 定</el-button></span></el-dialog><!-- 分配权限对话框 --><el-dialogtitle="分配权限":visible.sync="setRightDialogVisible"width="50%"@close="setRightDialogClosed"><!-- 树形控件 --><el-tree:data="rightsList":props="treeProps"show-checkboxnode-key="id":default-expand-all="true":default-checked-keys="defKeys"ref="treeRef"></el-tree><span slot="footer" class="dialog-footer"><el-button @click="setRightDialogVisible = false">取 消</el-button><el-buttontype="pri**ry"@click="allotRights">确 定</el-button></span></el-dialog></div> 

</template><script> 
export default {data() {return {// 所有角色的列表数据roleList: [],// 添加角色数据区域addForm: {roleId: '',roleName: '',roleDesc: ''},addDialogVisible: false,addFormRules: {roleId: [{ required: true, message: '请输入角色id', trigger: 'blur' }],roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]},// 修改角色数据区域editForm: {},editDialogVisible: false,editFormRules: {roleId: [{ required: true, message: '请输入角色id', trigger: 'blur' }],roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]},// 控制分配权限对话框的显示和隐藏setRightDialogVisible: false,// 所有权限数据rightsList: [],// 树形控件的属性绑定对象treeProps: {label: 'authName',children: 'children'},// 默认选中数组的ID值defKeys: [],// 当前即将分配权限的角色idroleId:''}},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.datathis.$message.success('获取角色列表成功')},// 监听添加角色关闭事件addDialogClosed() {// 重置表单this.$refs.addFormRef.resetFields()},// 添加角色addRole() {this.$refs.addFormRef.validate(async valid => {if (!valid) returnconst { data: res } = await this.$http.post('roles', this.addForm)if (res.meta.status !== 201) return this.$message.error('添加权限失败')// 添加成功this.$message.success(res.meta.msg)// 隐藏弹出框this.addDialogVisible = false// 刷新用户列表this.getRolesList()})},// 监听修改角色关闭事件editDialogClosed() {// 重置表单this.$refs.editFormRef.resetFields()},// 根据ID获取编辑内容async editRoleForm(id) {const { data: res } = await this.$http.get('roles/' + id)if (res.meta.status !== 200) {return this.$message.error('获取角色信息失败')}console.log(res.data)// 获取成功this.$message.success('获取角色信息成功')// 获取的信息在页面显示this.editForm = res.data// 显示弹框this.editDialogVisible = true},// 修改角色提交editRole() {this.$refs.editFormRef.validate(async valid => {if (!valid) return// 校验成功，提交表单const { data: res } = await this.$http.put('roles/' + parseInt(this.editForm.id),{roleId: parseInt(this.editForm.roleId),roleName: this.editForm.roleName,roleDesc: this.editForm.roleDesc})if (res.meta.status !== 200) return this.$message.error(res.meta.msg)this.$message.success('修改成功')// 关闭弹框this.editDialogVisible = false// 刷新列表this.getRolesList()})},// 根据ID删除对应的权限async removeRoleById(role, rightId) {// 弹框提示用户是否删除const confirmResult = await this.$confirm('此操作将长久删除该文件, 是否继续?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(error => error)if (confirmResult !== 'confirm') {return this.$message.info('取消了删除')}// 发起删除请求const { data: res } = await this.$http.delete(`roles/${role.id}/rights/${rightId}`)if (res.meta.status !== 200) {this.$message.error(res.meta.msg)}// 删除成功，刷新列表// this.getRolesList()// 重新赋值权限即可，无需整个列表刷新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) {this.$message.error(res.meta.msg)}// 获取成功this.rightsList = res.data// 递归获取三级节点的idthis.getLeafKeys(role, this.defKeys)this.setRightDialogVisible = true},// 通过递归的形式，获取角色下所有的三级权限的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 allotRights() {const keys = [// 获取展开的id...this.$refs.treeRef.getCheckedKeys(),// 获取半展开的id...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.getRolesList()// 隐藏dialogthis.setRightDialogVisible = false}} 
} 
</script><style lang="less" scoped> 
.el-tag {**rgin: 7px; 
} 
.bdtop {border-top: 1px solid #eee; 
} 
.bdbottom {border-bottom: 1px solid #eee; 
} 
.vcenter {display: flex;align-items: center; 
} 
</style>