部分学习内容参考网址：
大致实现效果：
1.用户管理
2.角色管理
一、用户管理
1.初始化查询用户管理模块的数据并渲染到页面上，并切换分页【查】
// 初始化，获取表格数据
async getUserList() {
let params = {
page: this.pages,
rows: this.rows
}
// get传参
await this.queryUserByPage(params).then(res => {
console.log(res)
this.userListArray = res.rows // 存放所有数据
this.total = res.total // 存放数据条数
})
},
// 分页切换
onChangePage(page, pageSize) {
this.pages = page
this.rows = pageSize
this.getUserList()
},效果：
2.修改用户信息【改】
在渲染数据的过程中涉及到要查询用户权限，此地方在点击“修改”按钮时联调了接口，查询所有的用户权限，并把当前用户对应的用户权限渲染出来
同时用户点击修改按钮后需要把当前点击的用户信息回显到对应的文本框中，注意这里要用v-model双向绑定进行页面渲染，然后要给下拉框一个选中值的事件，否则下拉框的值无法进行切换（下拉框的值是根据 value值 变化的）
// 点击修改按钮，出现弹窗（与input双向绑定值进行渲染）
editShow(record) {
debugger
this.visible = true;
this.id = record.id
this.username = record.username
this.password = record.password
this.realName = record.realName
this.telephone = record.telephone
this.email = record.email
this.roleId = record.roleIdAndName.id
this.roleName = record.roleIdAndName.roleName
// 查询角色信息下拉列表
this.queryRoleList().then(res => {
console.log(res)
this.userArray = res
})
},
// 判断下拉框所选中的值
onSelectChange(value) {
this.roleId = value // 1系统 2单位 3普通
this.roleName = value
}获取用户权限的数据进行渲染：
<div class="userRole">
<label htmlFor="">用户权限： </label>
<a-select :value="this.roleName" style="width: 200px" @change="onSelectChange">
<a-select-option v-for="(item,index) in userArray" :value="item.id">{{item.roleName}}
</a-select-option>
</a-select>
</div>修改完毕后点击“确认”按钮，修改的接口所传的参数结构必须要与postman的一致，否则会导致传参失败修改用户信息不成功。
// 确认修改
handleOk(e) {
this.visible = false;
let params1 = {
id: this.id,
username: this.username,
password: this.password,
realName: this.realName,
telephone: this.telephone,
email: this.email,
roleIdAndName: {
roleId: this.roleId,
roleName: this.roleName
}
}
this.updateUser(params1).then((res) => {
console.log(res)
this.getUserList() // 重新查询数据，渲染页面
})
},3.删除用户【删】
根据id值删除当前点击的该用户记录
deleteShow(id) {
this.id = id
this.deleteUser(this).then((res) => {
console.log(res)
this.getUserList() // 重新查询数据，渲染页面
})
},二、角色管理
1.初始化查询角色管理模块的数据并渲染到页面上，并切换分页【查】
效果：
2.修改用户信息【改】
在渲染数据的过程中涉及到要查询角色权限，此地方在点击“修改”按钮时联调了接口，查询当前该角色所拥有的权限，并把当前角色所对应的角色权限渲染出来，如单位管理员默认有三个用户权限
同时用户点击修改按钮后需要把当前点击的角色信息回显到对应的文本框中，注意这里要用v-model双向绑定进行页面渲染，然后要给下拉框一个选中值的事件，否则下拉框的值无法进行切换（下拉框的值是根据 value值 变化的）
//点击修改按钮，出现弹窗
async editShow(record) {
this.visible = true;
this.id = record.id
this.roleName = record.roleName
this.menuId = record.list // menuId权限id
this.username = record.username
// 1.查询权限信息下拉列表(获取所有的权限名，动态生成下拉列表的值存入menuArray)
await this.queryMenuInfo().then(res => {
console.log(res) // 等同于下一行
// console.log(this.queryMenuInfoList)
this.menuArray = this.queryMenuInfoList
})
// 2.获取当前用户角色的权限list-->menuName（当前点击的用户的权限名称）
this.roleInputList = []
if (record) {
let roleMenu = record.list // 该用户拥有的权限
let roleMenuName = roleMenu.map((item, index) => { //该用户拥有的权限的名称
return item.id
})
this.roleInputList = roleMenuName
}
},
// 判断下拉菜单选中的值
roleHandleChange(value, key, column) {
this.roleInputList = value // 点击用户权限下拉菜单的 value值
},获取用户权限的数据进行渲染：
<div class="userPermis">
<label htmlFor="">用户权限 : </label>
<!-- {{currentRoleId}} -->
<!-- 如果a-select的绑定的数据的值和a-select-option的value一样，就会显示该a-select-option的label值 -->
<a-select v-model="roleInputList" mode="multiple" style="width: 50%" placeholder="请选择用户权限"
@change="roleHandleChange">
<a-select-option :label="item.menuName" :value="item.id" v-for="(item,index) in menuArray"
:key="index">
{{ item.menuName }}
</a-select-option>
</a-select>
</div>修改完毕后点击“确认”按钮。
// 确认修改
handleOk(e) {
this.visible = false;
let params1 = {
id: this.id,
menuId: this.roleInputList
}
this.updateRoleWithMenu(params1).then((res) => {
this.getRoleList() // 重新查询数据，渲染页面
})
},备注：
1.获取权限列表并在页面上渲染展示
postman数据结构：
业务需求：用户在点击“修改”按钮时获取到所有权限列表的值。
// 修改按钮的点击事件
<template slot="operation" slot-scope="text, record">
<a @click="editShow(record)">修改</a>
</template> //点击修改按钮，出现弹窗
async editShow(record) {
debugger
this.visible = true;
this.id = record.id
this.roleName = record.roleName
this.menuId = record.list
this.username = record.username
// 查询权限信息下拉列表
await this.queryMenuInfo().then(res => {
console.log(res)
this.menuArray = this.queryMenuInfoList
})
},将获取到的数据存入menuArray里，在data中初始化定义menuArray为空数组，并将数据渲染在页面上
<div class="userPermis">
<label htmlFor="">用户权限 : </label>
<a-select mode="multiple" :default-value="[]" style="width: 50%"
placeholder="请选择用户权限" @change="roleHandleChange">
<a-select-option v-for="(item,index) in menuArray":key="index">
{{ item.menuName }}
</a-select-option>
</a-select>
</div>效果实现：
2.权限管理业务分析
通过权限管理模块控制不同的用户进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限
3.获取所有角色的列表
具体代码见之前的文章，有详细说明：
// 初始化，获取表格数据
async getRoleList() {
let params = {
page: this.pages,
rows: this.rows
}
await this.queryUserWithRole(params).then(res => {
console.log(res)
this.roleListArray = res.rows
this.total = res.total
})
},
// 分页切换
onChangePage(page, pageSize) {
this.pages = page
this.rows = pageSize
this.getRoleList()
},4.分配当前用户权限
- 点击“修改”按钮，弹出模态框
<template slot="operation" slot-scope="text, record">
<a @click="editShow(record)">修改</a>
</template>
//点击修改按钮，出现弹窗
async editShow(record) {
debugger
this.visible = true;
this.id = record.id
this.roleName = record.roleName
this.menuId = record.list
this.username = record.username
// 查询权限信息下拉列表
await this.queryMenuInfo().then(res => {
console.log(res)
this.menuArray = this.queryMenuInfoList
})
},- 模态框中有下拉框
<!-- 模态框 -->
<div>
<a-modal v-model="visible" title="修改权限" @ok="handleOk" cancelText="取消" okText="确认">
<div class="editModel">
<div class="userRole">
<label htmlFor="">用户角色 : </label>
<a-input placeholder="" disabled style="width: 200px;" v-model="username" />
</div>
<div class="userPermis">
<label htmlFor="">用户权限 : </label>
<a-select mode="multiple" :default-value="[]" style="width: 50%"
placeholder="请选择用户权限" @change="roleHandleChange">
<a-select-option v-for="(item,index) in menuArray" :key="index">
{{ item.menuName }}
</a-select-option>
</a-select>
</div>
</div>
</a-modal>
</div>- 修改当前用户角色的用户权限
- 每个角色的权限是不同的
- 用户权限名称来源于后台提供的请求
记录：
用户管理
1.点击修改，用户权限名称回显
初始化定义rolename
// 点击修改按钮，出现弹窗（与input双向绑定值进行渲染）
editShow(record) {
debugger
this.visible = true;
this.id = record.id
this.username = record.username
this.password = record.password
this.realName = record.realName
this.telephone = record.telephone
this.email = record.email
this.rolename = record.roleIdAndName.roleName
// 查询角色信息下拉列表
this.queryRoleList().then(res => {
console.log(res)
this.userArray = res
})
},a-select绑定value值，绑定后该用户所对应的用户权限就回显了，但是下拉菜单中的值用户没法点击切换了
解决办法是：添加一个下拉框的选择事件@change
<a-select :value="this.rolename" style="width: 200px" @change="onSelectChange">
<a-select-option v-for="(item,index) in userArray" :value="item.id">{{item.roleName}}
</a-select-option>
</a-select>写onSelectChange事件
// 判断下拉框所选中的值
onSelectChange(value){
this.roleId = value, // 1系统 2单位 3普通
this.rolename = value
}
2244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
