目录

1、分配角色思路

2、分配角色回显接口实现

3、分配角色回显前端实现

3.1 编写前端api脚本代码

3.2 编写分配角色窗口代码 

 3.3 编写分配角色回显脚本代码

4、分配角色后端接口

4.1 UserRoleDTO

4.2 UserMapper

4.3 UserMapper.xml

4.4 UserService

4.5 UserServiceImpl

4.6 UserController

5、分配角色前端实现

5.1 前端API脚本

5.2 分配角色窗口确认事件

---

1、分配角色思路

2、分配角色回显接口实现

RoleMapper

    /*** 根据用户ID查询该用户拥有的角色ID* @param userId* @return*/@Select("select role_id from `sys_user_role` where user_id = #{userId}")List<Long> findRoleIdByUserId(Long userId);

RoleService

    /*** 根据用户ID查询该用户拥有的角色ID* @param userId* @return*/List<Long> findRoleIdByUserId(Long userId);

RoleServiceImpl

    /*** 根据用户ID查询该用户拥有的角色ID** @param userId* @return*/@Overridepublic List<Long> findRoleIdByUserId(Long userId) {return baseMapper.findRoleIdByUserId(userId);}

UserController

/*** 获取分配角色列表* @param roleQueryVo* @return*/@GetMapping("/getRoleListForAssign")@PreAuthorize("hasAuthority('sys:user:assign')")public Result getRoleListForAssign(RoleQueryVo roleQueryVo){//创建分页对象IPage<Role> page = new Page<Role>(roleQueryVo.getPageNo(), roleQueryVo.getPageSize());//调用查询方法roleService.findRoleListByUserId(page,roleQueryVo);//返回数据return Result.ok(page);}/*** 根据用户ID查询该用户拥有的角色列表* @param userId* @return*/@GetMapping("/getRoleByUserId/{userId}")@PreAuthorize("hasAuthority('sys:user:assign')")public Result getRoleByUserId(@PathVariable Long userId){//调用根据用户ID查询该用户拥有的角色ID的方法List<Long> roleIds = roleService.findRoleIdByUserId(userId);return Result.ok(roleIds);}

3、分配角色回显前端实现

3.1 编写前端api脚本代码

3.2 编写分配角色窗口代码 

 <!-- 分配角色窗口 --><system-dialog:title="assignDialog.title":height="assignDialog.height":width="assignDialog.width":visible="assignDialog.visible"@onClose="onAssignClose"@onConfirm="onAssignConfirm"><div slot="content"><!-- 分配角色数据列表 --><el-tableref="assignRoleTable":data="assignRoleList"borderstripe:height="assignHeight"style="width: 100%; margin-bottom: 10px"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column prop="roleCode" label="角色编码"/><el-table-column prop="roleName" label="角色名称"/><el-table-column prop="remark" label="角色备注"/></el-table><!-- 分页工具栏 --><el-pagination@size-change="assignSizeChange"@current-change="assignCurrentChange":current-page.sync="roleVo.pageNo":page-sizes="[10, 20, 30, 40, 50]":page-size="roleVo.pageSize"layout="total, sizes, prev, pager, next, jumper":total="roleVo.total"background></el-pagination></div></system-dialog>

 3.3 编写分配角色回显脚本代码

 /*** 打开分配角色*/async assignRole(row){//防止回显出现问题this.selectedIds = [];this.selectedUserId = "";//被分配用户的idthis.selectedUserId = row.id;//显示窗口this.assignDialog.visible = true;//设置标题this.assignDialog.title = `给【${row.realName}】分配角色`;//查询当前登录用户的所有角色信息await this.getAssignRoleList();//获取当前被分配用户的IDlet params = {userId: row.id,};//发送根据用户ID查询角色列表的请求let res = await userApi.getRoleIdByUserId(params);//如果存在数据if (res.success && res.data){//将查询到的角色ID列表交给选中角色数组this.selectedIds = res.data;//循环遍历this.selectedIds.forEach((key) => {this.assignRoleList.forEach((item) => {if (item.id === key) {this.$refs.assignRoleTable.toggleRowSelection(item, true);}});});}},/*** 查询当前登录用户的所有角色信息*/async getAssignRoleList(pageNo = 1, pageSize = 10) {//给用户ID赋值this.roleVo.userId = this.$store.getters.userId;this.roleVo.pageNo = pageNo;this.roleVo.pageSize = pageSize;//发送查询请求let res = await userApi.getAssignRoleList(this.roleVo);//判断是否成功if (res.success) {//角色列表赋值this.assignRoleList = res.data.records;//角色总数量赋值this.roleVo.total = res.data.total;}},/*** 分配角色取消事件*/onAssignClose(){//隐藏窗口this.assignDialog.visible = false;},/*** 分配角色确认事件*/async onAssignConfirm(){//判断用户是否有选中角色if (this.selectedIds.length === 0) {this.$message.warning("请选择要分配的角色！");return;}let params = {userId: this.selectedUserId,roleIds: this.selectedIds,};//发送请求let res = await userApi.assignRoleSave(params);//判断是否成功if (res.success) {this.$message.success(res.message);//关闭窗口this.assignDialog.visible = false;} else {this.$message.error(res.message);}},/*** 当每页数量发生变化时触发该事件*/assignSizeChange(size){this.roleVo.pageSize = size; //将每页显示的数量交给成员变量this.getAssignRoleList(this.roleVo.pageNo, size);},/*** 当页码发生变化时触发该事件*/assignCurrentChange(page){this.roleVo.pageNo = page;//调用查询方法this.getAssignRoleList(page, this.roleVo.pageSize);},/*** 当点击多选框时触发该事件*/handleSelectionChange(rows){// let roleIds = [];// //循环遍历选中的角色ID// for (let i = 0; i < rows.length; i++) {//   //将当前选中的角色ID放到数组中//   roleIds.push(rows[i].id);// }// //将选中的角色ID交给成员变量// this.selectedIds = roleIds;this.selectedIds = rows.map(item => item.id);//等同于上述代码}

4、分配角色后端接口

4.1 UserRoleDTO

package com.cizhu.dto;import lombok.Data;import java.util.List;/*** @author bingo* @description 用于给用户分配角色时保存选中的角色数据* @date 2022-11-09*/
@Data
public class UserRoleDTO {private Long userId;private List<Long> roleIds;
}

4.2 UserMapper

    /*** 保存用户角色关系* @param userId* @param roleIds* @return*/int saveUserRole(Long userId, List<Long> roleIds);

4.3 UserMapper.xml

    <insert id="saveUserRole">insert into sys_user_role(user_id,role_id) values<foreach collection="roleIds" item="item" index="index" separator=",">(#{userId},#{item})</foreach></insert>

4.4 UserService

   /*** 分配角色* @param userId* @param roleIds* @return*/boolean saveUserRole(Long userId, List<Long> roleIds);

4.5 UserServiceImpl

    /*** 分配角色** @param userId* @param roleIds* @return*/@Override@Transactional(rollbackFor = RuntimeException.class)public boolean saveUserRole(Long userId, List<Long> roleIds) {//删除该用户对应的角色信息baseMapper.deleteUserRole(userId);//保存用户角色信息return baseMapper.saveUserRole(userId,roleIds)>0;}

4.6 UserController

/*** 分配角色* @param userRoleDTO* @return*/@PostMapping("/saveUserRole")@PreAuthorize("hasAuthority('sys:user:assign')")public Result saveUserRole(@RequestBody UserRoleDTO userRoleDTO){if (userService.saveUserRole(userRoleDTO.getUserId(),userRoleDTO.getRoleIds())) {return Result.ok().message("角色分配成功");}return Result.error().message("角色分配失败");}

5、分配角色前端实现

5.1 前端API脚本

5.2 分配角色窗口确认事件

/*** 当点击多选框时触发该事件*/handleSelectionChange(rows){// let roleIds = [];// //循环遍历选中的角色ID// for (let i = 0; i < rows.length; i++) {//   //将当前选中的角色ID放到数组中//   roleIds.push(rows[i].id);// }// //将选中的角色ID交给成员变量// this.selectedIds = roleIds;this.selectedIds = rows.map(item => item.id);//等同于上述代码}
/*** 分配角色确认事件*/async onAssignConfirm(){//判断用户是否有选中角色if (this.selectedIds.length === 0) {this.$message.warning("请选择要分配的角色！");return;}let params = {userId: this.selectedUserId,roleIds: this.selectedIds,};//发送请求let res = await userApi.assignRoleSave(params);//判断是否成功if (res.success) {this.$message.success(res.message);//关闭窗口this.assignDialog.visible = false;} else {this.$message.error(res.message);}},