《若依ruoyi》第三十五章：Ruoyi-角色管理拆解

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或者不為空，則執行更新，否則忽略。