Vue + elementui se da cuenta de la función de asignar roles a los usuarios

Nota: Este proyecto es el proyecto de separación de front-end y el marco de back-end SpringBoot + Visualización de
efectos MybatisPlus :

código de front-end:

Primero, agregue el botón de asignación de rol en la operación de administración de usuarios

     <el-button size="mini"
                   type="text"
                   @click="handleSelectRole(scope.row.id)">分配角色
     </el-button>

Definir el marco de viñetas para asignar roles

 <!--分配角色-->
      <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>

Definir valor inicial en datos

    data() {
    
    
        return {
    
    
            //角色有关
            allocDialogVisible:false,//关闭弹框
            allocRoleIds:[],
            allRoleList:[],
            allocAdminId:null,
            adminId:null
            }
        }

Comience a definir la implementación del método:

  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;
                })
            })
        }
    }

Solicitud en 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
    });
};

Código de backend:

Tabla de roles de usuario en segundo plano Controlador frontal Clase RoleController

 //查询角色数据
    @GetMapping("all")
    public ResultObj queryRole() {
    
    
        List<Role> roleList = roleService.list();
        return ResultObj.success(roleList);
    }

Usuario back-end y tabla de relaciones de roles controlador frontal clase 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();
    }

Código de clase de implementación 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);

    }