注:本项目为前后端分离项目后端框架SpringBoot+MybatisPlus
效果展示:
前端代码:
首先在用户管理操作中加入分配角色按钮
<el-button size="mini"
type="text"
@click="handleSelectRole(scope.row.id)">分配角色
</el-button>
定义好分配角色的弹框
<!--分配角色-->
<el-dialog
title="分配角色"
:visible.sync="allocDialogVisible"
width="30%">
<el-select v-model="allocRoleIds" multiple placeholder="请选择" size="small" style="width: 80%">
<el-option
v-for="item in allRoleList"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<span slot="footer" class="dialog-footer">
<el-button @click="allocDialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleAllocDialogConfirm()" size="small">确 定</el-button>
</span>
</el-dialog>
在data定义初始值
data() {
return {
//角色有关
allocDialogVisible:false,//关闭弹框
allocRoleIds:[],
allRoleList:[],
allocAdminId:null,
adminId:null
}
}
开始定义方法实现:
methods: {
//给用户分配角色
handleSelectRole(adminId){
this.allocDialogVisible=true;
this.allocAdminId=adminId;
this.allocRoleIds=[];
//查询所有角色信息
queryRole().then(result=>{
this.allRoleList=result.data.data;
}),
//获取当前用户的角色Id,放到allocRoleIds中,进行回显
queryRoleByAdminId(adminId).then(result=>{
let adminRole = result.data.data;
adminRole.forEach(role=>{
this.allocRoleIds.push(role.roleId);
})
})
},
//新增或修改角色
handleAllocDialogConfirm(){
this.$confirm('是否要确认?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = new URLSearchParams();
params.append("adminId", this.allocAdminId);
params.append("roleIds", this.allocRoleIds);
allocRole(params).then(response => {
this.$message({
message: '分配成功!',
type: 'success'
});
this.allocDialogVisible = false;
})
})
}
}
api中发请求:
//页面注入
import {queryRole} from "../../../api/ums/role/role";
import {queryRoleByAdminId,allocRole} from "../../../api/ums/adminRoleRelation/adminRoleRelation";
//查询角色数据不带分页
export const queryRole = () => {
return request({
url: 'http://localhost:8080/role/all',
method: 'get',
});
};
//回显角色数据
export const queryRoleByAdminId = adminId => {
return request({
url: 'http://localhost:8080/adminRoleRelation/'+adminId,
method: 'get'
});
};
//修改角色
export const allocRole = params => {
return request({
url: 'http://localhost:8080/adminRoleRelation',
method: 'post',
data:params
});
};
后端代码:
后台用户角色表 前端控制器 RoleController类
//查询角色数据
@GetMapping("all")
public ResultObj queryRole() {
List<Role> roleList = roleService.list();
return ResultObj.success(roleList);
}
后台用户和角色关系表 前端控制器 dminRoleRelationControlle类
//查询
@GetMapping("{adminId}")
public ResultObj queryRoleByAdminId(@PathVariable Long adminId){
QueryWrapper<AdminRoleRelation> queryWrapper =new QueryWrapper<>();
//只查这个id数据
queryWrapper.eq("admin_id",adminId);
//根据用户id查询用户角色关联的角色id的数据
List<AdminRoleRelation> adminRoleRelations = adminRoleRelationService.list(queryWrapper);
return ResultObj.success(adminRoleRelations);
}
@PostMapping
public ResultObj allocRole(@RequestParam("adminId") Long adminId,@RequestParam("roleIds")List<Long>roleIds){
adminRoleRelationService.allocRole(adminId,roleIds);
return ResultObj.success();
}
AdminRoleRelationServiceImpl实现类代码
@Override
public void allocRole(Long adminId, List<Long> roleIds) {
//删除原有的数据
super.remove(new QueryWrapper<AdminRoleRelation>().eq("admin_id",adminId));
//新增修改后的数据
List<AdminRoleRelation>list=new ArrayList<>();
if(!CollectionUtils.isEmpty(roleIds)){
roleIds.forEach(roleId->{
AdminRoleRelation adminRoleRelation=new AdminRoleRelation();
adminRoleRelation.setRoleId(roleId);
adminRoleRelation.setAdminId(adminId);
list.add(adminRoleRelation);
});
}
super.saveBatch(list);
}