实战13 分配角色

    /**
     * 根据用户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
     */
    @Override
    public 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-table
            ref="assignRoleTable"
            :data="assignRoleList"
            border
            stripe
            :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 = "";
      //被分配用户的id
      this.selectedUserId = row.id;
      //显示窗口
      this.assignDialog.visible = true;
      //设置标题
      this.assignDialog.title = `给【${row.realName}】分配角色`;
      //查询当前登录用户的所有角色信息
      await this.getAssignRoleList();
      //获取当前被分配用户的ID
      let 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);
      }
    },

文章来源:https://blog.csdn.net/shieryue_2016/article/details/135248178
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！