网站建设外文版要求,网站关键字优化销售,杭州知名设计公司排名,织梦网站源文件没有style文件夹怎么修改网站背景目录 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 UserServ…目录 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})ListLong findRoleIdByUserId(Long userId);
RoleService /*** 根据用户ID查询该用户拥有的角色ID* param userId* return*/ListLong findRoleIdByUserId(Long userId);
RoleServiceImpl /*** 根据用户ID查询该用户拥有的角色ID** param userId* return*/Overridepublic ListLong findRoleIdByUserId(Long userId) {return baseMapper.findRoleIdByUserId(userId);}
UserController
/*** 获取分配角色列表* param roleQueryVo* return*/GetMapping(/getRoleListForAssign)PreAuthorize(hasAuthority(sys:user:assign))public Result getRoleListForAssign(RoleQueryVo roleQueryVo){//创建分页对象IPageRole page new PageRole(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的方法ListLong roleIds roleService.findRoleIdByUserId(userId);return Result.ok(roleIds);}
3、分配角色回显前端实现
3.1 编写前端api脚本代码 3.2 编写分配角色窗口代码 !-- 分配角色窗口 --system-dialog:titleassignDialog.title:heightassignDialog.height:widthassignDialog.width:visibleassignDialog.visibleonCloseonAssignCloseonConfirmonAssignConfirmdiv slotcontent!-- 分配角色数据列表 --el-tablerefassignRoleTable:dataassignRoleListborderstripe:heightassignHeightstylewidth: 100%; margin-bottom: 10pxselection-changehandleSelectionChangeel-table-column typeselection width55 aligncenter/el-table-columnel-table-column proproleCode label角色编码/el-table-column proproleName label角色名称/el-table-column propremark label角色备注//el-table!-- 分页工具栏 --el-paginationsize-changeassignSizeChangecurrent-changeassignCurrentChange:current-page.syncroleVo.pageNo:page-sizes[10, 20, 30, 40, 50]:page-sizeroleVo.pageSizelayouttotal, sizes, prev, pager, next, jumper:totalroleVo.totalbackground/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 ListLong roleIds;
}4.2 UserMapper /*** 保存用户角色关系* param userId* param roleIds* return*/int saveUserRole(Long userId, ListLong roleIds);4.3 UserMapper.xml insert idsaveUserRoleinsert into sys_user_role(user_id,role_id) valuesforeach collectionroleIds itemitem indexindex separator,(#{userId},#{item})/foreach/insert4.4 UserService /*** 分配角色* param userId* param roleIds* return*/boolean saveUserRole(Long userId, ListLong roleIds);
4.5 UserServiceImpl /*** 分配角色** param userId* param roleIds* return*/OverrideTransactional(rollbackFor RuntimeException.class)public boolean saveUserRole(Long userId, ListLong 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);}},
