51、调用API获取权限列表数据
data代表组件当前的私有数据，在生命周期函数created发起当前组件的数据请求，methods用来定义组件当前的事件处理函数。
data(){
return{
// 权限列表
rightLists:[]
}
},
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);
}
}
}
52、渲染权限列表UI结构
<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="权限等级" prop="level">
<template slot-scope="scope">
<el-tag v-if="scope.row.level === '0'">一级</el-tag>
<el-tag type="success" v-if="scope.row.level === '1'">二级</el-tag>
<el-tag type="warning" v-if="scope.row.level === '2'">三级</el-tag>
</template>
</el-table-column>
</el-table>
如果数据是一级权限，则不需要展示其余两个tag，这时用到v-if判断。
53、展示角色列表组件并绘制
权限管理业务分析，通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限。
首先通过路由展示角色列表组件：
<template>
<div>
<h3>角色列表组件</h3>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
</style>
在index.js里引入组件：
import Roles from '../components/power/roles.vue'
children: [
{ path: '/rights', component: Rights},
{ path: '/roles', component: Roles}
]
接下来绘制绘制面包屑导航和卡片视图区：
<!-- 面包屑导航区域 -->
<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-card>
然后获取所有的角色列表数据：
data(){
return{
// 所有角色列表数据
rolesList:[]
}
},
created(){
// 获取所有的角色
this.getRolesList();
},
methods:{
// 获取所有角色列表
async getRolesList(){
const { data:res } = await this.$http.get('roles');
// console.log(res);
if(res.meta.status !== 200){
return this.$message.error('获取角色列表失败！');
}
// 如果失败，将获取到的列表数据保存到rolesList
this.rolesList = res.data;
console.log(this.rolesList);
}
}
}
54、实现添加角色、编辑角色功能
渲染角色列表UI结构：
<!-- 角色列表区域 -->
<el-table :data="roleList" border stripe>
<!-- 展开列 -->
<el-table-column type="expand"></el-table-column>
<!-- 索引列 -->
<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="操作" width="300px">
<template slot-scope="scope">
<!-- 编辑按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
<!-- 删除按钮 -->
<el-button type="danger" icon="el-icon-delete" size="mini" >删除</el-button>
<!-- 分配权限按钮 -->
<el-button type="warning" icon="el-icon-setting" size="mini">分配权限</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
渲染添加角色的对话框：
<el-button type="primary" @click="addRoleVisible = true">添加角色</el-button>
<!-- 添加角色的对话框 -->
<el-dialog title="添加角色" :visible.sync="addRoleVisible" width="50%">
<!-- 内容主体区 -->
<span>这是一段信息</span>
<!-- 底部按钮区 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addRoleVisible = false">取 消</el-button>
<el-button type="primary" @click="addRoleVisible = false">确 定</el-button>
</span>
</el-dialog>
data(){
return{
// 控制添加角色对话框的显示与隐藏
addRoleVisible:false
}
}
渲染“添加角色”的表单：
<el-dialog title="添加角色" :visible.sync="addRoleVisible" width="50%">
<!-- 内容主体区 -->
<el-form :model="addRole" :rules="addRoleRules" ref="addRoleRef" label-width="70px">
<el-form-item label="名称" prop="roleName">
<el-input v-model="addRole.roleName"></el-input>
</el-form-item>
<el-form-item label="描述" prop="roleDesc">
<el-input v-model="addRole.roleDesc"></el-input>
</el-form-item>
</el-form>
</el-dialog>
return{
// 添加角色的表单数据
addRole:{
roleName:'',
roleDesc:''
},
// 添加角色的验证规则对象
addRoleRules:{
roleName:[
{required:true,
message:'请输入角色名称', trigger:'blur'},
{min:2,
max:10,
message:'角色名称的长度在2～10个字符之间',
trigger:'blur'}
],
roleDesc:[
{required:true,
message:'请输入角色描述', trigger:'blur'},
{min:2,
max:10,
message:'角色描述的长度在2～10个字符之间',
trigger:'blur'}
]
}
}
实现“添加角色”的重置操作：
在关闭弹框后需要清空填写的数据，这里需要用到关闭事件。
1、绑定 @close=“addRoleClosed" 进行处理
2、在methods里添加方法
<!-- 添加角色的对话框 -->
<el-dialog title="添加角色" :visible.sync="addRoleVisible" width="50%" @close="addRoleClosed">
methods:{
// 监听修改角色对话框的关闭事件
addRoleClosed(){
this.$refs.addRoleRef.resetFields();
}
}
实现添加角色前的表单预校验：
点击确定按钮时不是直接关闭对话框，而是在点击按钮时，调用函数对填入的信息进行校验。
给确定按钮绑定事件处理函数：
<!-- 底部按钮区 -->
<el-button type="primary" @click="addRole">确 定</el-button>
addRole(){
this.$ref.addFormRef.validate(valid =>{
console.log(valid);
})
}
调用API接口完成添加用户操作
addRole() {
this.$refs.addFormRef.validate(async valid => {
// console.log(valid);
if(!valid) return;
// 发起添加角色的网络请求
const {data:res} = await this.$http.post('roles', this.addForm);
if(res.meta.status !== 201) {
this.$message.error('添加角色失败！');
}
this.$message.success('添加角色成功～');
// 隐藏添加角色的对话框
this.addRoleVisible = false;
// 重新获取用户
this.getRolesList();
})
}
展示编辑角色的对话框：
实现点击“编辑”按钮后弹出框：
1、给编辑按钮绑定click单击事件，指定一个处理函数，只要调用这个函数就会弹出框。@click="showEditDialog()
2、在methods里定义这个函数：
// 展示编辑角色的对话框
showEditDialog(){ }
3、添加对应的对话框组件：
<!-- 编辑角色的对话框 -->
<el-dialog title="编辑角色" :visible.sync="editRoleDialogVisible" width="50%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="editRoleDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editRoleDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
4、在return里定义布尔值：
// 控制编辑角色对话框的显示与隐藏
editRoleDialogVisible:false
5、给处理函数showEditDialog()重新赋值就能弹出框
// 展示编辑角色的对话框
showEditDialog(){
this.editRoleDialogVisible = true;
}
根据id查询对应角色的信息：
怎样根据ID查询用户的信息：通过形参的形式在处理函数里获取用户的ID，通过修改按钮的单机事件传进去。
修改按钮的外面通过作用域插槽接收到了scope数据对象，通过scope.row可以获取这一行对应的数据信息，所以scope.row就是用户信息，从而能获取到用户的ID。
获取到ID后，调用对应的接口获取用户信息。把查询到的信息保存到editForm表单数据对象上。
<!-- 编辑按钮 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>
// 展示编辑角色的对话框
async showEditDialog(id){
console.log(id);
const {data:res} = await this.$http.get('roles/' + id);
if(res.meta.status !== 200) {
return this.$message.error('查询角色id失败！');
}
this.addForm = res.data;
this.editRoleDialogVisible = true; }
渲染编辑角色的对话框，并实现重置，完成编辑功能：
<!-- 编辑角色的对话框 -->
<el-dialog title="编辑角色" :visible.sync="editRoleDialogVisible" width="50%" @close="addRoleClosed">
<el-form :model="addForm" :rules="editRoleFormRules" ref="addFormRef" label-width="70px">
<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="editRoleDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editRoleInfo">确 定</el-button>
</span>
</el-dialog>
// 修改表单的验证规则对象
return(){
editRoleFormRules:{
roleName: [
{ required: true, message: '请输入角色名称', trigger: 'blur' }],
roleDesc: [
{ required: true, message: '请输入角色描述', trigger: 'blur' }]
}
}
methods:{
// 监听修改角色对话框的关闭事件
addRoleClosed() {
this.$refs.addFormRef.resetFields();
},
// 编辑用户信息并提交
editRoleInfo(){
this.$refs.addFormRef.validate(async valid =>{
// console.log(valid);
if(!valid) return;
const{data:res} = await this.$http.put('roles/' + this.addForm.roleId,
{roleName:this.addForm.roleName,
roleDesc:this.addForm.roleDesc});
if(res.meta.status !== 200){
return this.$message.error('更新用户失败！');
}
// 关闭对话框
this.editRoleDialogVisible = false;
// 刷新数据列表
this.getRolesList();
// 提示修改成功
this.$message.success('编辑用户成功～～');
})
}
到这里，添加用户button，和编辑button这两个功能就已经完成了。
2060
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
