人人开源用户管理填加角色功能分析

通过下拉框选择添加从数据库查询出来的角色信息

前端实现

 <el-form-item prop="roleIdList" :label="$t('user.roleIdList')" class="role-list">
        <el-select v-model="dataForm.roleIdList" multiple :placeholder="$t('user.roleIdList')">
          <el-option v-for="role in roleList" 
          :key="role.id" 
          :label="role.name" 
          :value="role.id">
          </el-option>
        </el-select>
      </el-form-item>

data () {
    return {
      visible: false,
      roleList: [],//保存后端返回的下拉框数据
      roleIdListDefault: [],
      dataForm: {
        id: '',
        username: '',
        deptId: '',
        deptName: '',
        password: '',
        confirmPassword: '',
        realName: '',
        gender: 0,
        email: '',
        mobile: '',
        roleIdList: [],//选择，遍历出来的数据role.id
        status: 1
      }
    }
  },

init () {
      this.visible = true
      this.dataForm.deptId = ''
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.roleIdListDefault = []
        Promise.all([
          this.getRoleList()//从后端获取角色列表方法
        ]).then(() => {
          if (this.dataForm.id) {
            this.getInfo()
          }
        })
      })
    },
    // 获取角色列表
    getRoleList () {
      return this.$http.get('/sys/role/list').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.roleList = res.data//将后端返回的角色数据保存到列表里面
      }).catch(() => {})
    },

选择角色，提交表单后

后端执行力三条命令

controller

	@PostMapping
	@ApiOperation("保存")
	@LogOperation("保存")
	@RequiresPermissions("sys:user:save")
	public Result save(@RequestBody SysUserDTO dto){
		//效验数据
		ValidatorUtils.validateEntity(dto, AddGroup.class, DefaultGroup.class);

		sysUserService.save(dto);

		return new Result();
	}

serviceimpl

@Override
	@Transactional(rollbackFor = Exception.class)
	public void save(SysUserDTO dto) {
		SysUserEntity entity = ConvertUtils.sourceToTarget(dto, SysUserEntity.class);

		//密码加密
		String password = PasswordUtils.encode(entity.getPassword());
		entity.setPassword(password);

		//保存用户
		entity.setSuperAdmin(SuperAdminEnum.NO.value());
		insert(entity);

		//保存角色用户关系
		sysRoleUserService.saveOrUpdate(entity.getId(), dto.getRoleIdList());  //调用其它service方法
	}

@Override
    public void saveOrUpdate(Long userId, List<Long> roleIdList) {
        //先删除角色用户关系
        deleteByUserIds(new Long[]{userId});

        //用户没有一个角色权限的情况
        if(CollUtil.isEmpty(roleIdList)){
            return ;
        }

        //保存角色用户关系
        for(Long roleId : roleIdList){
            SysRoleUserEntity sysRoleUserEntity = new SysRoleUserEntity();
            sysRoleUserEntity.setUserId(userId);
            sysRoleUserEntity.setRoleId(roleId);

            //保存
            insert(sysRoleUserEntity);
        }
    }

从后台查询数据给确定下拉框调用

• controller

 @GetMapping("list")
    public Result<List<TaskClassifyDTO>> listAll(){
        List<TaskClassifyDTO> data = taskClassifyService.list(new HashMap<>(1));
        return new Result<List<TaskClassifyDTO>>().ok(data);

    }

• service

 List<TaskClassifyDTO> list(Map<String, Object> params);

• IMPL

 @Override
    public List<TaskClassifyDTO> list(Map<String, Object> params) {
        return taskClassifyDao.list(params);
    }

• dao接口

  List<TaskClassifyDTO> list(Map<String, Object> params);

• mappe.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="io.renren.modules.ground.dao.TaskClassifyDao">

    <resultMap type="io.renren.modules.ground.entity.TaskClassifyEntity" id="taskClassifyMap">
        <result property="id" column="id"/>
        <result property="classifyName" column="classify_name"/>
        <result property="sort" column="sort"/>
        <result property="creator" column="creator"/>
        <result property="createDate" column="create_date"/>
        <result property="updateDate" column="update_date"/>
    </resultMap>

    <select id="list" resultType="TaskClassifyEntity">
        select id,classify_name,sort from tb_task_classify
    </select>

</mapper>

前端调用

  <el-form-item prop="classIdList" label="任务分类">
        <el-select v-model="dataForm.classifyId" multiple :placeholder="任务分类">
          <el-option 
          v-for="role in classIdList" 
          :key="role.id" 
          :label="role.name" 
          :value="role.classifyName">
          </el-option>
        </el-select>
      </el-form-item>