添加新角色是在弹窗页面里面填写角色的信息，其中设置角色关联的权限，用到了ElementUI组件库的穿梭框。我们选中的权限，最终是以数组的形式保存到前端页面，提交到后端Web方法也是数组格式的权限ID值。

一、编写持久层代码

在TbRoleDao.xml文件中，定义插入记录的INSERT语句。

<insert id="insert" parameterType="com.example.emos.api.db.pojo.TbRole">
    INSERT INTO tb_role
    SET role_name=#{roleName},
    permissions=#{permissions}
    <if test="desc!=null">
        ,`desc`=#{desc}
    </if>
</insert>

在TbRoleDao.java接口中，声明抽象DAO方法。

public interface TbRoleDao {
    ……
    public int insert(TbRole role);
}

二、编写业务层代码

在RoleService.java接口中，定义抽象方法。

public interface RoleService{
    ……
    public int insert(TbRole role);
}

在RoleServiceImpl.java类中，实现抽象方法。

public class RoleServiceImpl implements RoleService {
    ……
    @Override
    public int insert(TbRole role) {
        int rows = roleDao.insert(role);
        return rows;
    }
}

三、编写Web层代码

创建InsertRoleForm.java类，用于封装Ajax提交的数据。

@Data
@Schema(description = "添加角色表单")
public class InsertRoleForm {
    @NotBlank(message = "roleName不能为空")
    @Schema(description = "角色名称")
    private String roleName;

    @NotEmpty(message = "permissions不能为空")
    @Schema(description = "权限")
    private Integer[] permissions;


    @Length(max = 20,message = "desc不能超过20个字符")
    @Schema(description = "备注")
    private String desc;
}

在RoleController.java类中，定义Web方法。利用Swagger先登录系统，然后测试Web方法。

public class RoleController {
    ……
    @PostMapping("/insert")
    @Operation(summary = "添加角色")
    @SaCheckPermission(value = {"ROOT", "ROLE:INSERT"}, mode = SaMode.OR)
    public R insert(@Valid @RequestBody InsertRoleForm form) {
        TbRole role = new TbRole();
        role.setRoleName(form.getRoleName());
        role.setPermissions(JSONUtil.parseArray(form.getPermissions()).toString());
        role.setDesc(form.getDesc());
        int rows = roleService.insert(role);
        return R.ok().put("rows", rows);
    }
}