1、角色管理界面

2、数据加载

如下图，当点击左侧菜单-角色管理的按钮，前端调用api接口

http://localhost:1024/dev-api/system/role/list?pageNum=1&pageSize=10

接口返回json数据，数据格式如下：

3、前端界面展示对应的代码

1、顶部搜索栏，使用el-form表单使用 elementui的表单标签，下面是搜索的按钮，搜索按钮绑定点击事件，事件处理的函数是handleQuery

<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

handleQuery() {
  this.queryParams.pageNum = 1;
  this.getList();
},

2、table列表

列表展示使用el-table标签进行数据加载

<el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center" />
  <el-table-column label="角色编号" prop="roleId" width="120" />
</el-table>

其中table加载的数据是:data="roleList" roleList 的赋值操作是，在页面创建的时候调用，如下图代码

created() {
  this.getList();
},

getList() {
  this.loading = true;
  listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
      this.roleList = response.rows;
      this.total = response.total;
      this.loading = false;
    }
  );
},

// 查询角色列表
export function listRole(query) {
  return request({
    url: '/system/role/list',
    method: 'get',
    params: query
  })
}

上述完整后台请求url是

GET http://localhost:1024/dev-api/system/role/list?pageNum=1&pageSize=10

其中query的参数是pageNum=1&pageSize=10

4、后端java代码

api类路径如下：

@PreAuthorize("@ss.hasPermi('system:role:list')")
@GetMapping("/list")
public TableDataInfo list(SysRole role)
{
    startPage();
    List<SysRole> list = roleService.selectRoleList(role);
    return getDataTable(list);
}

roleService是一个服务类封装，调用mybatis的roleMapper接口

/**
 * 根据条件分页查询角色数据
 * 
 * @param role 角色信息
 * @return 角色数据集合信息
 */
@Override
@DataScope(deptAlias = "d")
public List<SysRole> selectRoleList(SysRole role)
{
    return roleMapper.selectRoleList(role);
}

roleMapper是跟SysRoleMapper.xml的id=selectRoleList绑定

所以上述的调用roleMapper.selectRoleList(role);函数，实际则执行上述的sql，查询角色的列表信息。

5、状态停用启动拆解

1、界面实现的控件

<el-table-column label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

如上述代码，状态使用el-switch开关插件，开值对应代码是active-value="0"，关闭对应代码是inactive-value="1"

点击修改状态，事件绑定函数是@change="handleStatusChange(scope.row)"，参数传值是被选中的记录。

// 角色状态修改
handleStatusChange(row) {
  let text = row.status === "0" ? "启用" : "停用";
  this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
    return changeRoleStatus(row.roleId, row.status);
  }).then(() => {
    this.$modal.msgSuccess(text + "成功");
  }).catch(function() {
    row.status = row.status === "0" ? "1" : "0";
  });
},

this.$modal.confirm弹出提示窗界面，确认就调用changeRoleStatus函数，实现修改角色状态

// 角色状态修改
export function changeRoleStatus(roleId, status) {
  const data = {
    roleId,
    status
  }
  return request({
    url: '/system/role/changeStatus',
    method: 'put',
    data: data
  })
}

如上述是修改状态的api接口请求封装

5、状态停用启动后台代码

/**
 * 状态修改
 */
@PreAuthorize("@ss.hasPermi('system:role:edit')")
@Log(title = "角色管理", businessType = BusinessType.UPDATE)
@PutMapping("/changeStatus")
public AjaxResult changeStatus(@RequestBody SysRole role)
{
    roleService.checkRoleAllowed(role);
    roleService.checkRoleDataScope(role.getRoleId());
    role.setUpdateBy(getUsername());
    return toAjax(roleService.updateRoleStatus(role));
}

如上述是状态修改的接口，其中从RequestBody获取SysRole的参数。

<update id="updateRole" parameterType="SysRole">
 		update sys_role
 		<set>
 			<if test="roleName != null and roleName != ''">role_name = #{roleName},</if>
 			<if test="roleKey != null and roleKey != ''">role_key = #{roleKey},</if>
 			<if test="roleSort != null">role_sort = #{roleSort},</if>
 			<if test="dataScope != null and dataScope != ''">data_scope = #{dataScope},</if>
 			<if test="menuCheckStrictly != null">menu_check_strictly = #{menuCheckStrictly},</if>
 			<if test="deptCheckStrictly != null">dept_check_strictly = #{deptCheckStrictly},</if>
 			<if test="status != null and status != ''">status = #{status},</if>
 			<if test="remark != null">remark = #{remark},</if>
 			<if test="updateBy != null and updateBy != ''">update_by = #{updateBy},</if>
 			update_time = sysdate()
 		</set>
 		where role_id = #{roleId}
	</update>

如上述是更新角色状态的sql，其中通过<if test="roleName != null and roleName != ''">条件判断，如果roleName不为null或者不为空，则执行更新，否则忽略。

6、未来计划

1、ruoyi非分离版本拆解

2、ruoyi-vue-pro：讲解工作流

3、ruoyi-vue-pro：支付模块，电商模块

4、基于ruoyi-vue-pro项目开发

5、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。