import React from 'react';
|
import { Row, Col, Form, message, Modal, Empty, Spin } from 'antd';
|
import SearchTree from '../../components/common/Tree';
|
import fetch from '../../api/request';
|
import UnitDetailEdit from './UnitDetailEdit';
|
|
const confirm = Modal.confirm;
|
|
class UnitManage extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
loading: false,//右侧详情loading
|
resourceList: [],
|
treeKey: 'init',
|
expandedKeys: [],
|
tableData: [],
|
totalElements: 1,
|
pageSize: 10,
|
treeData: [],
|
edit: 'false',
|
rightShow: false,
|
dataSet: {},
|
currentNode: [],
|
id: '',
|
selectedKeys: []
|
};
|
}
|
|
componentDidMount() {
|
this.loadData()
|
}
|
|
// 加载单位树形数据
|
loadData = () => {
|
this.setState({
|
treeLoading: true
|
})
|
fetch({
|
url: `api/unit/getAllUnitsByCascade`
|
}).then(res => {
|
res = this.handleTreeData(res);
|
if (res) {
|
this.setState({
|
treeLoading: false,
|
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].children) {
|
this.handleTreeData(node.children);
|
}
|
}
|
return data;
|
};
|
|
editFun = () => {
|
this.setState({
|
edit: 'true'
|
})
|
}
|
|
saveFun = (obj) => {
|
this.setState({
|
edit: 'false',
|
dataSet: obj,
|
expandedKeys: []
|
})
|
this.loadData();
|
this.setState({ treeKey: Date.now() })
|
}
|
|
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) {
|
// Fetch.unitDetail({id: currentNode[0].id}).then(res => {
|
// _this.setState({
|
// dataSet: res,
|
// id: currentNode[0].id,
|
// loading: false
|
// })
|
// })
|
}
|
}
|
|
}
|
|
cancelData = () => {
|
let _this = this;
|
this.setState({
|
rightShow: false,
|
selectedKeys: [],
|
currentNode: []
|
});
|
}
|
|
onSelect = (selectedKeys) => {
|
let _this = this;
|
_this.setState({
|
selectedKeys
|
})
|
}
|
|
// 点击任意节点都可以查看、编辑、添加(获取单位信息详情)
|
treeSelect = (tableData, currentNode) => {
|
this.setState({
|
rightShow: true,
|
loading: true,
|
leafNodes: tableData,
|
currentNode,
|
selectedKeys: [currentNode[0].id]
|
}, () => {
|
fetch({
|
url: `api/unit/getById`,
|
params: { id: currentNode[0].id }
|
}).then(res => {
|
if (res) {
|
this.setState({
|
edit: 'false',
|
dataSet: res,
|
id: currentNode[0].id,
|
loading: false
|
})
|
}
|
})
|
})
|
};
|
|
addBtn = () => {
|
this.setState({
|
rightShow: true,
|
dataSet: {},
|
edit: 'true',
|
id: ''
|
})
|
}
|
|
//删除按钮
|
deleteBtn = (node) => {
|
if (node == "") {
|
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/unit/delete`,
|
params: {
|
ids: node.id
|
}
|
}).then(res => {
|
if (res) {
|
message.success('节点删除成功');
|
_this.loadData();
|
_this.setState({ treeKey: Date.now(), rightShow: false })
|
}
|
})
|
},
|
onCancel() { },
|
});
|
}
|
|
onExpand = (expandedKeys) => {
|
this.setState({
|
expandedKeys
|
});
|
}
|
|
clearKeys = () => {
|
let _this = this;
|
_this.setState({
|
currentNode: [],
|
rightShow: false
|
})
|
}
|
|
render() {
|
const { treeKey, rightShow, treeData, edit, treeLoading } = this.state;
|
|
const params = {
|
currentNode: this.state.currentNode,
|
id: this.state.id
|
}
|
|
return (
|
<div className="unitmanage-main margin padding bg-white h-100">
|
|
<div className="h-100 padding">
|
<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 &&
|
<UnitDetailEdit edit={edit} editFun={this.editFun} saveFun={this.saveFun} cancelFun={this.cancelFun} dataSet={this.state.dataSet} params={params} cancelData={this.cancelData} loading={this.state.loading}></UnitDetailEdit>}
|
{
|
!rightShow &&
|
<Empty description={'暂无数据，请点击左侧树形结构进行创建'} className="h-100 flex-box-column align-center justify-content" />
|
}
|
</Col>
|
</Row>
|
<Row>
|
</Row>
|
</div>
|
</div>
|
)
|
}
|
|
}
|
|
|
const UnitManageList = Form.create()(UnitManage);
|
export default UnitManageList;
|
