import React from 'react';
|
import { Card, Row, Col, Icon, Form, Input, Button, Table, DatePicker, message, Breadcrumb, Tree, Modal, Layout, Popconfirm, List, Spin, Empty } from 'antd';
|
import SearchTree from '../../components/common/Tree';
|
import fetch from '../../api/request';
|
|
const Search = Input.Search;
|
const confirm = Modal.confirm;
|
|
class ResourceManage extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
spinning: false,
|
resourceList: [],
|
treeKey: 'init',
|
expandedKeys: [],
|
treeData: [],
|
edit: 'false',
|
rightShow: false,
|
dataSet: {},
|
currentNode: [],
|
|
roleList: [], //角色列表
|
resourceIds: [], //资源集合
|
treeCheckArr: [],
|
roleId: '',
|
checkedKeys: [],
|
|
leftRoleLoading: false,//左侧角色列表loading
|
rightTreeRightLoading: false,//右侧角色对应菜单权限loading
|
|
};
|
}
|
|
componentDidMount() {
|
this.findRoles();
|
this.getAllFunctionsByTree();
|
}
|
|
//取消按钮
|
cancelFun = () => {
|
this.setState({
|
edit: 'false',
|
rightShow: false,
|
roleId: ''
|
})
|
}
|
|
//所有角色列表
|
findRoles = () => {
|
this.setState({ leftRoleLoading: true });
|
fetch({
|
url: `api/role/finds`
|
}).then(res => {
|
this.setState({ leftRoleLoading: false });
|
if (res) {
|
this.setState({ roleList: res });
|
}
|
})
|
}
|
|
//加载所有应用菜单树形结构
|
getAllFunctionsByTree = () => {
|
this.setState({ rightTreeRightLoading: true });
|
fetch({
|
url: `api/function/getAllFunctionsByTree`,
|
}).then(res => {
|
this.setState({ rightTreeRightLoading: false });
|
if (res) {
|
for (let i = 0; i < res.length; i++) {
|
res[i].resourceType = 1;
|
}
|
res = this.handleTreeData(res);
|
this.setState({ treeData: res })
|
}
|
})
|
}
|
|
//通过角色id查询对应角色的菜单权限
|
getResourcesByRoleId = (id) => {
|
this.setState({ rightTreeRightLoading: true });
|
fetch({
|
url: `api/role/getResourcesByRoleId`,
|
params: { roleId: id }
|
}).then(res => {
|
this.setState({ rightTreeRightLoading: false });
|
console.log('res', res);
|
if (res) {
|
this.setState({
|
checkedKeys: res.map(({ id }) => id),
|
treeCheckArr: res
|
})
|
}
|
})
|
}
|
|
//处理树形数据结构
|
handleTreeData = data => {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i];
|
node.key = node.id;
|
node.title = node.name;
|
if (data[i].modules) {
|
data[i].children = data[i].modules;
|
this.handleTreeData(node.children);
|
}
|
if (data[i].children) {
|
this.handleTreeData(node.children);
|
}
|
if (data[i].functions) {
|
data[i].children = data[i].functions;
|
this.handleTreeData(node.children);
|
}
|
}
|
return data;
|
};
|
|
|
treeSelect = (tableData, currentNode) => {
|
console.log(tableData, currentNode);
|
// 点击任意节点都可以查看、编辑、添加
|
this.setState({
|
rightShow: true
|
})
|
this.setState({
|
leafNodes: tableData,
|
currentNode
|
})
|
};
|
|
currentTreeCheck = (treeCheckArr) => {
|
this.setState({
|
treeCheckArr
|
})
|
}
|
|
onExpand = (expandedKeys) => {
|
this.setState({
|
expandedKeys,
|
});
|
}
|
|
//选中角色
|
selectRole = (e) => {
|
let roleId = e.target.getAttribute("data-roleid");
|
console.log(roleId)
|
this.setState({
|
rightShow: true,
|
roleId,
|
spinning: true
|
}, () => {
|
this.getResourcesByRoleId(this.state.roleId);//查询角色权限
|
})
|
}
|
|
onCheck = (checkedKeys, checkedNodes) => {
|
console.log('checkedNodes', checkedNodes);
|
this.setState({
|
checkedKeys
|
})
|
}
|
|
saveFun = () => {
|
const { treeCheckArr, roleId, funs } = this.state;
|
let resourceIds = [];
|
|
console.log(resourceIds, treeCheckArr);
|
this.setState({ rightTreeRightLoading: true });
|
fetch({
|
url: `api/role/auth`,
|
method: 'POST',
|
data: {
|
roleId,
|
resourceIds: treeCheckArr.map(({ id, resourceType }) => ({ resourceId: id, resourceType }))
|
}
|
}).then(res => {
|
this.setState({ rightTreeRightLoading: false });
|
if (res) {
|
message.success('配置保存成功');
|
}
|
})
|
}
|
|
render() {
|
const { rightShow, treeData, roleList, roleId, leftRoleLoading, rightTreeRightLoading } = this.state;
|
|
return (
|
<div className="authormanage-main h-100 margin padding bg-white">
|
|
<div className="padding h-100" >
|
<Row style={{ height: '100%' }} >
|
<Col span={8} style={{ border: "1px solid #e8e8e8", padding: 10 }} className="h-100">
|
<Spin spinning={leftRoleLoading}>
|
<Row style={{ marginTop: 10 }} >
|
|
{
|
roleList.map((item, idx) => {
|
return (
|
roleId == item.id ?
|
<div key={item.id} data-roleid={item.id} onClick={this.selectRole} style={{ border: "1px solid #e8e8e8", padding: 8, textAlign: 'center', cursor: 'pointer' }} className="ant-btn-primary ant-menu-submenu-selected">
|
{item.name}
|
</div> :
|
<div key={item.id} data-roleid={item.id} onClick={this.selectRole} style={{ border: "1px solid #e8e8e8", padding: 8, textAlign: 'center', cursor: 'pointer' }}>
|
{item.name}
|
</div>
|
)
|
})
|
}
|
</Row>
|
</Spin>
|
</Col>
|
<Col span={1}></Col>
|
<Col span={15} style={{ border: "1px solid #e8e8e8" }} className="h-100">
|
{rightShow &&
|
<div className="h-100">
|
<Spin spinning={rightTreeRightLoading} height={'100%'}>
|
<div>
|
<Form>
|
<Card title={'模块权限配置'} bordered={false} extra={
|
<Row type="flex" gutter={20}>
|
<Col>
|
<Button onClick={this.cancelFun}>取消</Button>
|
</Col>
|
<Col>
|
<Button className="button-do" htmlType="submit" onClick={this.saveFun} type="primary">保存</Button>
|
</Col>
|
</Row>
|
}>
|
{/* 此处的key用于控制滚动条的位置 */}
|
<div style={{ height: '65vh', overflow: 'auto' }} key={roleId}>
|
<SearchTree
|
data={treeData}
|
onExpand={this.onExpand}
|
expandedKeys={this.state.expandedKeys}
|
treeSelect={this.treeSelect}
|
showSearch={false}
|
checkable={true}
|
defaultExpandAll={true}
|
currentTreeCheck={this.currentTreeCheck}
|
checkedKeys={this.state.checkedKeys}
|
onCheck={this.onCheck}
|
/>
|
</div>
|
</Card>
|
</Form>
|
</div>
|
</Spin>
|
</div>
|
}
|
{
|
!rightShow &&
|
<Empty description={'暂无数据，请点击左侧树形结构'} className="h-100 flex-box-column align-center justify-content" />
|
}
|
</Col>
|
</Row>
|
<Row>
|
</Row>
|
</div>
|
</div>
|
)
|
}
|
}
|
|
|
|
const ResourceManageList = Form.create()(ResourceManage);
|
export default ResourceManageList;
|
