/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-18 15:12:34
|
* @LastEditTime: 2022-08-02 15:53:17
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 角色管理
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { Button, Input, Menu, Tooltip } from 'antd';
|
import { PlusOutlined, ReloadOutlined } from '@ant-design/icons';
|
import * as $$ from '../../../utils/utility';
|
import MyTree from '../../../components/MyTree';
|
import Page from '../../../components/Page';
|
import RolePower from '../../../components/basicInformation/role/RolePower';
|
|
const { Search } = Input;
|
|
// 获取角色列表
|
function getRolesApi() {
|
return $$.ax.request({ url: '/ctRole/getRoles', type: 'get', service: 'cust' });
|
}
|
|
// 删除角色
|
function delRoleApi(id) {
|
return $$.ax.request({ url: `/ctRole/removeByIds?ids=${id}`, type: 'get', service: 'cust' });
|
}
|
|
// 获取所有的权限功能列表
|
function getAllPowerApi() {
|
return $$.ax.request({ url: `ctRolefun/getRolefunTree`, type: 'get', service: 'cust' });
|
}
|
|
// 获取角色下拥有的权限功能列表数据
|
function getRolePowerApi(roleId) {
|
return $$.ax.request({ url: `ctRole/getById?id=${roleId}`, type: 'get', service: 'cust' });
|
}
|
|
// 新增 or 修改角色权限
|
function setRolePowerApi(submitData) {
|
return $$.ax.request({ url: 'ctRole/saveCtRole', type: 'post', data: submitData, service: 'cust' });
|
}
|
|
const Role = () => {
|
// 角色数据
|
const [rolesData, setRolesData] = useState({ data: [], copyData: [] });
|
|
// 当前选择的左侧角色数据
|
const [roleActive, setRoleActive] = useState({});
|
|
// 新增 or 修改角色判断
|
const [isRoleEdit, setIsRoleEdit] = useState('');
|
|
// 新增 or 修改角色数据
|
const [editRoleData, setEditRoleData] = useState({ roleTreeBOS: [] });
|
|
// 当前选择角色下的权限数据
|
const [rolePowerData, setRolePowerData] = useState([]);
|
|
// 所有页面功能权限数据
|
const [allPagePowerData, setAllPagePowerData] = useState([]);
|
|
// 搜索
|
const [roleSearch, setRoleSearch] = useState('');
|
|
//
|
function handleSearchRole() {
|
let arr = rolesData.copyData.filter((item) => {
|
return (item.name || '').indexOf(roleSearch) !== -1;
|
});
|
setRolesData({ ...rolesData, data: arr });
|
}
|
|
// 点击选择角色
|
function handleClickTreeNode(value) {
|
if (isRoleEdit) {
|
$$.modalInfo({
|
content: `您正在编辑角色，是否取消编辑？`,
|
onOk: () => setIsRoleEdit(''),
|
});
|
return false;
|
}
|
getRolePower(value.id);
|
}
|
|
// 点击新增，修改，删除
|
function handleClickAction(type, value) {
|
if (type === 'add') {
|
setIsRoleEdit('add');
|
setEditRoleData({ roleTreeBOS: [] });
|
} else if (type === 'change') {
|
if (isRoleEdit) {
|
$$.modalInfo({
|
content: `您正在编辑角色，是否取消编辑？`,
|
onOk: () => setIsRoleEdit(''),
|
});
|
} else {
|
getRolePower(value.id, 'change');
|
}
|
} else if (type === 'delete') {
|
$$.modalInfo({
|
content: `删除角色将导致拥有该角色的账号无此角色，是否继续删除？`,
|
onOk: () => delRole(value.id),
|
});
|
}
|
}
|
|
// 保存 or 重置
|
function handleSubmit(values) {
|
let submitData = {
|
...editRoleData,
|
id: isRoleEdit === 'add' ? '' : editRoleData.id,
|
name: editRoleData.name,
|
roleTreeBOS: values,
|
};
|
editRolePower(submitData);
|
}
|
|
// 获取角色列表
|
async function getRoles(reset) {
|
global.setSpinning(true);
|
const res = await getRolesApi();
|
global.setSpinning(false);
|
if (res.type) {
|
let data = res.data || [];
|
setRolesData({ data, copyData: data });
|
// 新增时选中新增的那个角色
|
if (reset === 'add') {
|
let arr = data.filter((item) => item.baseRole === '1');
|
getRolePower(arr[arr.length - 1].id);
|
return false;
|
}
|
// 重置时
|
if (data.length > 0 && reset) {
|
getRolePower(data[0].id);
|
}
|
}
|
}
|
|
// 删除角色
|
async function delRole(id) {
|
global.setSpinning(true);
|
const res = await delRoleApi(id);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '操作成功' });
|
if (id === roleActive.id) {
|
getRoles('reset');
|
} else {
|
getRoles();
|
}
|
}
|
}
|
|
// 获取角色下的页面权限
|
async function getRolePower(roleId, isChange) {
|
global.setSpinning(true);
|
const res = await getRolePowerApi(roleId);
|
global.setSpinning(false);
|
if (res.type) {
|
if (isChange) {
|
setIsRoleEdit('change');
|
setEditRoleData(res.data);
|
} else {
|
setRoleActive(res.data);
|
setRolePowerData(res.data?.roleTreeBOS || []);
|
}
|
}
|
}
|
|
// 新增 or 修改角色
|
async function editRolePower(submitData) {
|
global.setSpinning(true);
|
const res = await setRolePowerApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '操作成功' });
|
setIsRoleEdit('');
|
if (submitData.id === roleActive.id) {
|
// 修改时重新获取数据
|
getRoles();
|
getRolePower(roleActive.id);
|
} else {
|
getRoles('add');
|
}
|
}
|
}
|
|
async function getAllData() {
|
global.setSpinning(true);
|
$$.ax.ax.all([getAllPowerApi(), getRolesApi()]).then(
|
$$.ax.ax.spread(function (res1, res2) {
|
global.setSpinning(false);
|
if (res1.type) {
|
setAllPagePowerData(res1.data?.versionTrees || []);
|
}
|
if (res2.type) {
|
let data = res2.data || [];
|
setRolesData({ data, copyData: data });
|
// 第一次加载
|
if (data.length > 0) {
|
getRolePower(data[0].id);
|
}
|
}
|
})
|
);
|
}
|
|
useEffect(() => {
|
getAllData();
|
}, []);
|
|
// 角色操作
|
const dropdownOption = ({ value }) =>
|
value.id === 'none' ? null : (
|
<Menu onClick={({ key }) => handleClickAction(key, value)}>
|
<Menu.Item key="change">修改</Menu.Item>
|
<Menu.Item key="delete">删除</Menu.Item>
|
</Menu>
|
);
|
|
const baseRole = rolesData.data.filter((x) => x.baseRole === '2');
|
|
const myRole = rolesData.data.filter((x) => x.baseRole === '1');
|
|
return (
|
<Page pageHead={{ breadcrumbData: [{ title: '基础信息管理' }, { title: '角色权限' }], title: '角色权限' }}>
|
<div className="role">
|
<div className="role-bg">
|
<div className="role-side">
|
<div className="role-side-search">
|
<Search
|
placeholder="请搜索角色"
|
className="role-side-search-margin"
|
value={roleSearch}
|
onChange={(e) => setRoleSearch(e.target.value)}
|
onSearch={handleSearchRole}
|
/>
|
<Tooltip title="新增角色">
|
<Button className="role-side-search-margin" type="primary" disabled={isRoleEdit} onClick={() => handleClickAction('add')}>
|
<PlusOutlined />
|
</Button>
|
</Tooltip>
|
<Tooltip title="刷新">
|
<ReloadOutlined
|
className="public-a"
|
style={{ fontSize: 16 }}
|
onClick={() => {
|
setRoleSearch();
|
getAllData();
|
}}
|
/>
|
</Tooltip>
|
</div>
|
<div className="role-side-list">
|
<div className="role-side-list-title">系统基础角色(不可修改或删除)</div>
|
<div>
|
<MyTree
|
active={isRoleEdit === 'add' ? '' : isRoleEdit === 'change' ? editRoleData.id : roleActive.id}
|
keyStr="id"
|
nameStr="name"
|
data={baseRole}
|
dropdownOption={null}
|
isChildren={false}
|
handleClickTreeNode={handleClickTreeNode}
|
/>
|
</div>
|
<div className="role-side-list-title">自定义角色({myRole.length})</div>
|
{isRoleEdit === 'add' && <div className="role-side-list-edit">自定义角色编辑中...</div>}
|
<div>
|
<MyTree
|
active={isRoleEdit === 'add' ? '' : isRoleEdit === 'change' ? editRoleData.id : roleActive.id}
|
keyStr="id"
|
nameStr="name"
|
data={myRole}
|
dropdownOption={dropdownOption}
|
isChildren={false}
|
handleClickTreeNode={handleClickTreeNode}
|
/>
|
</div>
|
</div>
|
</div>
|
<div className="role-divider"></div>
|
<RolePower
|
isRoleEdit={isRoleEdit}
|
editRoleData={editRoleData}
|
roleName={roleActive.name}
|
rolePowerData={isRoleEdit ? editRoleData.roleTreeBOS || [] : rolePowerData}
|
allPowerData={allPagePowerData}
|
handleCancel={() => setIsRoleEdit('')}
|
handleChangeInput={(key, value) => {
|
editRoleData[key] = value;
|
setEditRoleData({ ...editRoleData });
|
}}
|
handleSubmit={handleSubmit}
|
/>
|
</div>
|
</div>
|
</Page>
|
);
|
};
|
|
export default Role;
|
