import React from 'react';
|
import { Row, Col, Form, message, Modal, Popconfirm, Empty, Spin } from 'antd';
|
import moment from 'moment';
|
import SearchTree from '../../components/common/Tree';
|
import fetch from '../../api/request';
|
import ModuleDetailEdit from './ModuleDetailEdit';
|
|
const confirm = Modal.confirm;
|
|
class ModulesManage extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
treeKey: Date.now(),
|
expandedKeys: [],
|
tableData: [],
|
totalElements: 1,
|
pageSize: 10,
|
treeData: [],
|
edit: 'false',
|
rightShow: false,
|
dataSet: {},
|
currentNode: [],
|
moduleId: '',
|
saveParams: {
|
id: '',
|
parentId: '',
|
appId: ''
|
},
|
selectedKeys: [],
|
treeLoading: false,//左侧树形数据loading
|
loading: false,//右侧详情loading
|
|
};
|
}
|
|
componentDidMount() {
|
this.loadData()
|
}
|
|
//加载左侧树形数据
|
loadData = () => {
|
this.setState({ treeLoading: true });
|
fetch({
|
url: `api/module/getAllModulesByTree`
|
}).then(res => {
|
this.setState({ treeLoading: false })
|
if (res) {
|
res = this.handleTreeData(res);
|
this.setState({
|
treeData: res,
|
treeKey: Date.now()
|
})
|
}
|
})
|
};
|
|
//处理树形数据
|
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);
|
}
|
// else{
|
// this.handleTreeData([node])
|
// }
|
}
|
return data;
|
};
|
|
editFun = () => {
|
this.setState({
|
edit: 'true'
|
})
|
}
|
|
//点击保存按钮
|
saveFun = (data) => {
|
let { saveParams } = this.state;
|
console.log('data', this.state.saveParams)
|
this.setState({
|
edit: 'false',
|
// dataSet: data,
|
loading: true
|
});
|
fetch({
|
url: `api/module/save`,
|
method: 'POST',
|
data: { ...data, ...saveParams }
|
}).then(res => {
|
this.setState({ loading: false });
|
if (res) {
|
message.success("保存成功");
|
this.setState({ dataSet: data });
|
this.loadData();
|
// 处于新增节点的场景，保存成功之后，隐藏详情，清空表单数据（执行清空操作）
|
if (!saveParams.id) {
|
this.clearKeys();
|
}
|
}
|
})
|
}
|
|
//取消（保存界面下）
|
cancelFun = () => {
|
const { dataSet, currentNode } = this.state;
|
if (currentNode.length == 0) {
|
this.setState({
|
rightShow: false
|
})
|
} else {
|
this.setState({
|
edit: 'false'
|
});
|
if (Object.keys(dataSet).length == 0) {
|
// getModuleDetail(currentNode[0].id).then(res => {
|
// this.setState({
|
// dataSet: res.data,
|
// loading: false
|
// })
|
// })
|
}
|
}
|
}
|
|
//取消（查看界面下）
|
cancelData = () => {
|
this.setState({
|
rightShow: false,
|
dataSet: {},//清空表单数据
|
selectedKeys: [],
|
currentNode: []
|
})
|
}
|
|
onSelect = (selectedKeys) => {
|
let _this = this;
|
_this.setState({
|
selectedKeys
|
})
|
}
|
|
// 点击树形节点触发函数
|
treeSelect = (tableData, currentNode) => {
|
// 此处做判断，如果是根节点(顶级)，点击时不出现右边编辑
|
if (currentNode[0].root) {
|
this.setState({
|
rightShow: false,
|
currentNode,
|
saveParams: {
|
...this.state.saveParams,
|
appId: currentNode[0].id
|
},
|
selectedKeys: [currentNode[0].id]
|
})
|
// message.error('请选择子节点模块');
|
return
|
}
|
this.setState({
|
rightShow: true
|
})
|
// 此处为对应(模块、菜单)的详情
|
this.setState({
|
dataSet: {},//先清空之前的表单数据
|
leafNodes: tableData,
|
currentNode,
|
saveParams: {
|
...this.state.saveParams,
|
appId: currentNode[0].appId || currentNode[0].id,
|
id: currentNode[0].id,
|
}
|
}, () => {
|
this.setState({ loading: true });
|
fetch({
|
url: `api/module/getById`,
|
params: { id: currentNode[0].id }
|
}).then(res => {
|
this.setState({ loading: false })
|
if (res) {
|
this.setState({ edit: 'false', dataSet: res })
|
}
|
})
|
|
})
|
};
|
|
//清除选中
|
clearKeys = () => {
|
this.setState({
|
dataSet: {},
|
currentNode: [],
|
rightShow: false,
|
selectedKeys: []
|
})
|
}
|
|
//点击左侧添加按钮，添加模块
|
addBtn = () => {
|
const { currentNode } = this.state;
|
if (currentNode.length == 0 || currentNode[0].length == 0) {
|
message.error("请选择节点之后添加");
|
return;
|
}
|
this.setState({
|
rightShow: true,
|
dataSet: {},
|
edit: 'true',
|
saveParams: {
|
...this.state.saveParams,
|
id: '',
|
parentId: ''
|
}
|
})
|
}
|
|
//点击删除按钮
|
deleteBtn = (node) => {
|
const { currentNode } = this.state;
|
if (node == "") {
|
message.error("没有选择资源，无法删除")
|
} else {
|
if (currentNode[0].root) {
|
message.error("请选择子模块进行删除")
|
}
|
else {
|
this.ConfirmTip(node)
|
}
|
}
|
}
|
|
ConfirmTip = (node) => {
|
let _this = this;
|
confirm({
|
title: <span style={{ fontSize: 19 }}>确定要删除该资源吗？</span>,
|
content: <span style={{ fontSize: 18 }}>删除该资源的同时，会删除与该资源的所有关系，也会删除所有的子资源。</span>,
|
onOk() {
|
fetch({
|
url: `api/module/delete`,
|
params: { ids: node.id }
|
}).then(res => {
|
if (res) {
|
message.success('模块删除成功');
|
_this.setState({ rightShow: false});
|
_this.loadData();
|
}
|
})
|
},
|
onCancel() { },
|
});
|
}
|
|
onExpand = (expandedKeys) => {
|
this.setState({
|
expandedKeys,
|
});
|
}
|
|
render() {
|
const { treeKey, rightShow, treeData, edit, treeLoading, loading } = this.state;
|
const saveParams = {
|
...this.state.saveParams,
|
currentNode: this.state.currentNode,
|
}
|
|
return (
|
<div className="modulesmanage-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={treeLoading}>
|
<SearchTree key={treeKey}
|
data={treeData}
|
onExpand={this.onExpand}
|
expandedKeys={this.state.expandedKeys}
|
treeSelect={this.treeSelect}
|
add={this.addBtn}
|
delete={this.deleteBtn}
|
clearKeys={this.clearKeys}
|
onSelect={this.onSelect}
|
selectedKeys={this.state.selectedKeys}
|
/>
|
</Spin>
|
</Col>
|
<Col span={1}></Col>
|
<Col span={15} style={{ border: "1px solid #e8e8e8" }} className="h-100">
|
{
|
rightShow &&
|
<ModuleDetailEdit loading={loading} edit={edit} editFun={this.editFun} saveFun={this.saveFun} cancelFun={this.cancelFun} dataSet={this.state.dataSet} params={saveParams} cancelData={this.cancelData}></ModuleDetailEdit>
|
}
|
{
|
!rightShow &&
|
<Empty description={'暂无数据，请点击左侧树形结构'} className="h-100 flex-box-column align-center justify-content" />
|
}
|
</Col>
|
</Row>
|
<Row>
|
</Row>
|
</div>
|
</div>
|
)
|
}
|
}
|
|
|
|
const ModulesManageList = Form.create()(ModulesManage);
|
export default ModulesManageList;
|
