1. 所有权限列表
请求路径:rights/:type
请求方法:get
响应数据 type=list
说明:如果type是list类型,那么不管是一级权限二级或者三级都会显示出来,它们都是平级的,单纯的在页面上展示所有权限
{
"data": [
{
"id": 101,
"authName": "商品管理",
"level": "0",
"pid": 0,
"path": null
},
{
"id": 102,
"authName": "订单管理",
"level": "0",
"pid": 0,
"path": null
}
],
"meta": {
"msg": "获取权限列表成功",
"status": 200
}
}
type=tree
如果类型是tree,会以树状展示,一级下面有二级,二级包含三级
{
data: [
{
id: 101,
authName: '商品管理',
path: null,
pid: 0,
children: [
{
id: 104,
authName: '商品列表',
path: null,
pid: 101,
children: [
{
id: 105,
authName: '添加商品',
path: null,
pid: '104,101'
}
]
}
]
}
],
meta: {
msg: '获取权限列表成功',
status: 200
}
}
创建组件
components下新建文件夹power,power下新建rights组件
index 配置路径
home路径下
{
path: '/rights',
component: () =>import ('../components/power/Rights.vue')},
elementui 里面有个Tag标签组件可以实现该功能
<!-- 卡片视图-->
<el-card>
<el-table :data="rightsList" border stripe>
<el-table-column type="index" label="索引"> </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="权限等级" >
<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="waring" v-else>三级</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
获取角色列表数据
components/power 新建Role.vue
index.js 配置路由 home下
{
path: '/roles',
component: () =>
import ('../components/power/Roles.vue')},
<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="primary">添加角色</el-button>
</el-col>
</el-row>
<!--角色列表-->
<el-table :data="rolesList" border stripe>
<el-table-column type="index" label="序号"> </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="操作" >
<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>
export default {
data(){
return{
rolesList:[]
}
},
created(){
this.getRolesList()
},
methods:{
async getRolesList(){
const {data:res} = await this.$http.get('roles')
if(res.meta.status !== 200){
return this.$message.error('获取角色列表失败')
}
this.rolesList = res.data
}
}
}
</script>
添加角色对话框
<!-- 添加按钮-->
<el-row>
<el-col>
<el-button type="primary" @click="addDialogVisible=true">添加角色</el-button>
</el-col>
</el-row>
<!-- 添加角色对话框-->
<el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%">
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
<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="primary" @click="addRole">确 定</el-button>
</span>
</el-dialog>
data() {
return {
rolesList: [],
// 控制角色对话框显示和隐藏
addDialogVisible:false,
addForm:{
roleName:'',
roleDesc:''
},
addFormRef:{
roleName: [
{ required: true, message: '请输入角色名称', trigger: 'blur' },
],
roleName: [
{ required: true, message: '请输入角色描述', trigger: 'blur' },
],
}
}
},
<script>
export default {
data() {
return {
rolesList: [],
// 控制角色对话框显示和隐藏
addDialogVisible:false,
addForm:{
roleName:'',
roleDesc:''
},
addFormRules:{
roleName: [
{ required: true, message: '请输入角色名称', trigger: 'blur' },
],
roleDesc: [
{ required: true, message: '请输入角色描述', trigger: 'blur' },
],
}
}
},
created() {
this.getRolesList()
},
methods: {
// 获取角色列表
async getRolesList() {
const { data: res } = await this.$http.get('roles')
if (res.meta.status !== 200) {
return this.$message.error('获取角色列表失败')
}
this.rolesList = res.data
},
//添加角色
addRole(){
this.$refs.addFormRef.validate(async valid=>{
if(!valid){
return
}
const {data:res} = await this.$http.post('roles',this.addForm)
if(res.meta.status !== 201){
return this.$message.error('添加角色失败')
}
this.addDialogVisible = false
// 刷新角色列表
this.getRolesList()
this.$message.success('添加角色成功')
})
}
},
}
</script>
当我们在添加角色的时候添加信息后没有确定,关闭弹窗再打开,刚输入的信息还会在上面显示,所以需要表单重置
<!-- 添加角色对话框-->
<el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%" @close="addRoleClosed">
// 对话框的表单重置
addRoleClosed(){
this.$refs.addFormRef.resetFields()
}
实现编辑角色功能
<!--角色列表-->
<el-table :data="rolesList" border stripe>
<el-table-column type="index" label="序号"> </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="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">编辑</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>
<!-- 编辑角色对话框-->
<el-dialog title="编辑角色" :visible.sync="editDialogVisible" width="50%" @close="editRoleClosed">
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
<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="primary" @click="editRole">确 定</el-button>
</span>
</el-dialog>
</div>
//控制编辑对话框
editDialogVisible:false,
editForm:{},
editFormRules:{
roleName: [
{ required: true, message: '请输入角色名称', trigger: 'blur' },
],
roleDesc: [
{ required: true, message: '请输入角色描述', trigger: 'blur' },
],
},
//显示编辑角色的对话框
async showEditDialog(id){
const {data:res} = await this.$http.get(`roles/${id}`)
if(res.meta.status !== 200){
return this.$message.error('查询角色信息失败')
}
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/${this.editForm.roleId}`,{
roleName:this.editForm.roleName,
roleDesc:this.editForm.roleDesc
})
if(res.meta.status !== 200){
return this.$message.error('修改角色失败')
}
this.editDialogVisible=false
this.getRolesList()
this.$message.success('修改角色成功!')
})
},
// 监听编辑角色对话框的关闭时间
editRoleClosed(){
this.$refs.editFormRef.resetFields()
}
实现删除角色功能
elementui MessageBox弹框
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeRoleById(scope.row.id)">删除</el-button>
// 删除角色
removeRoleById(id){
this.$confirm('确定要删除该角色吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const {data:res} = await this.$http.delete(`roles/${id}`)
if(res.meta.status !== 200){
return this.$message.error('删除角色失败')
}
this.getRolesList()
this.$message.success('删除角色成功!')
}).catch(() => {
this.$message.info('已取消删除!')
});
}
全部代码
<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="primary" @click="addDialogVisible=true">添加角色</el-button>
</el-col>
</el-row>
<!--角色列表-->
<el-table :data="rolesList" border stripe>
<el-table-column type="index" label="序号"> </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="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">编辑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeRoleById(scope.row.id)">删除</el-button>
<el-button size="mini" type="warning" icon="el-icon-setting">分配权限</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 添加角色对话框-->
<el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%" @close="addRoleClosed">
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
<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="primary" @click="addRole">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑角色对话框-->
<el-dialog title="编辑角色" :visible.sync="editDialogVisible" width="50%" @close="editRoleClosed">
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="80px">
<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="primary" @click="editRole">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
rolesList: [],
// 控制角色对话框显示和隐藏
addDialogVisible:false,
addForm:{
roleName:'',
roleDesc:''
},
addFormRules:{
roleName: [
{ required: true, message: '请输入角色名称', trigger: 'blur' },
],
roleDesc: [
{ required: true, message: '请输入角色描述', trigger: 'blur' },
],
},
//控制编辑对话框
editDialogVisible:false,
editForm:{},
editFormRules:{
roleName: [
{ required: true, message: '请输入角色名称', trigger: 'blur' },
],
roleDesc: [
{ required: true, message: '请输入角色描述', trigger: 'blur' },
],
},
}
},
created() {
this.getRolesList()
},
methods: {
// 获取角色列表
async getRolesList() {
const { data: res } = await this.$http.get('roles')
if (res.meta.status !== 200) {
return this.$message.error('获取角色列表失败')
}
this.rolesList = res.data
},
//添加角色
addRole(){
this.$refs.addFormRef.validate(async valid=>{
if(!valid){
return
}
const {data:res} = await this.$http.post('roles',this.addForm)
if(res.meta.status !== 201){
return this.$message.error('添加角色失败')
}
this.addDialogVisible = false
// 刷新角色列表
this.getRolesList()
this.$message.success('添加角色成功')
})
},
// 对话框的表单重置
addRoleClosed(){
this.$refs.addFormRef.resetFields()
},
//显示编辑角色的对话框
async showEditDialog(id){
const {data:res} = await this.$http.get(`roles/${id}`)
if(res.meta.status !== 200){
return this.$message.error('查询角色信息失败')
}
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/${this.editForm.roleId}`,{
roleName:this.editForm.roleName,
roleDesc:this.editForm.roleDesc
})
if(res.meta.status !== 200){
return this.$message.error('修改角色失败')
}
this.editDialogVisible=false
this.getRolesList()
this.$message.success('修改角色成功!')
})
},
// 监听编辑角色对话框的关闭时间
editRoleClosed(){
this.$refs.editFormRef.resetFields()
},
// 删除角色
removeRoleById(id){
this.$confirm('确定要删除该角色吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const {data:res} = await this.$http.delete(`roles/${id}`)
if(res.meta.status !== 200){
return this.$message.error('删除角色失败')
}
this.getRolesList()
this.$message.success('删除角色成功!')
}).catch(() => {
this.$message.info('已取消删除!')
});
}
},
}
</script>