import React from 'react';
|
import { Row, Col, Icon, Form, message, Breadcrumb, Modal } from 'antd';
|
import SearchTree from '../view/tree'
|
import HeadView from '../view/HeadView'
|
import Fetch from '../fetch';
|
import UnitDetailEdit from './UnitDetailEdit';
|
// import { unitDel } from "../fetch/api";
|
|
const confirm = Modal.confirm;
|
|
class UnitManage extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
loading: true,
|
resourceList: [],
|
treeKey: 'init',
|
expandedKeys: [],
|
tableData: [],
|
totalElements: 1,
|
pageSize: 10,
|
treeData: [],
|
edit: 'false',
|
rightShow: false,
|
dataSet: {},
|
currentNode: [],
|
id: '',
|
selectedKeys: []
|
};
|
}
|
componentDidMount() {
|
this.loadData()
|
}
|
|
editFun = () => {
|
this.setState({
|
edit: 'true'
|
})
|
}
|
|
saveFun = (obj) => {
|
let _this = this;
|
this.setState({
|
edit: 'false',
|
dataSet: obj,
|
expandedKeys: []
|
})
|
_this.loadData();
|
_this.setState({ treeKey: Date.now() - 1512523199245 })
|
}
|
|
cancelFun = () => {
|
let _this = this;
|
_this.setState({
|
edit: 'false'
|
});
|
const { dataSet, currentNode } = _this.state;
|
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
|
});
|
|
}
|
|
loadData = () => {
|
let _this = this;
|
_this.setState({
|
loading: true
|
})
|
Fetch.getAllUnits().then(res => {
|
res = _this.handleTreeData(res);
|
console.log(res);
|
_this.setState({
|
treeData: res,
|
treeKey: () => Date.now() - 1512523199245,
|
loading: false
|
});
|
});
|
};
|
|
handleTreeData = data => {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i];
|
node.key = node.id;
|
node.title = node.channelName;
|
if (data[i].children) {
|
this.handleTreeData(node.children);
|
}
|
}
|
return data;
|
};
|
|
onSelect = (selectedKeys) => {
|
let _this = this;
|
_this.setState({
|
selectedKeys
|
})
|
}
|
|
treeSelect = (tableData, currentNode) => {
|
let _this = this;
|
// 点击任意节点都可以查看、编辑、添加
|
_this.setState({
|
rightShow: true,
|
loading: true,
|
leafNodes: tableData,
|
currentNode,
|
selectedKeys: [currentNode[0].id]
|
}, () => {
|
if (currentNode[0].canDelOrUp != 0) {
|
Fetch.unitDetail({ id: currentNode[0].id }).then(res => {
|
_this.setState({
|
edit: 'false',
|
dataSet: res,
|
id: currentNode[0].id,
|
loading: false
|
})
|
})
|
} else {
|
_this.setState({
|
rightShow: false
|
})
|
}
|
})
|
};
|
|
addBtn = () => {
|
let _this = this;
|
_this.setState({
|
rightShow: true,
|
loading: false,
|
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.unitDel(node.id).then(res => {
|
message.success('节点删除成功')
|
_this.setState({
|
rightShow: false
|
})
|
});
|
_this.loadData();
|
_this.setState({ treeKey: Date.now() - 1512523199245 })
|
},
|
onCancel() { },
|
});
|
}
|
|
onExpand = (expandedKeys) => {
|
this.setState({
|
expandedKeys,
|
treeKey: () => Date.now() - 1512523199245
|
});
|
this.setState({
|
treeKey: () => Date.now() - 1512523199245
|
});
|
}
|
|
clearKeys = () => {
|
let _this = this;
|
_this.setState({
|
currentNode: [],
|
rightShow: false
|
})
|
}
|
|
render() {
|
const { treeKey, rightShow, treeData, edit } = this.state;
|
|
const params = {
|
currentNode: this.state.currentNode,
|
id: this.state.id
|
}
|
|
return (
|
<div className="app-page" style={{ display: 'flex', flexDirection: 'column' }}>
|
<HeadView history={this.props.history} />
|
<Breadcrumb style={{ padding: '20px' }}>
|
<Breadcrumb.Item><a href="">后台中心</a></Breadcrumb.Item>
|
<Breadcrumb.Item>扫黑除恶</Breadcrumb.Item>
|
</Breadcrumb>
|
<div style={{ border: 20, margin: 20, padding: 32, flex: 1, background: '#fff' }} >
|
<Row style={{ height: '95%' }} >
|
<Col span={8} style={{ border: "1px solid #e8e8e8", padding: 10, height: '100%' }} className="h-100">
|
<SearchTree key={treeKey}
|
// data={resourceList}
|
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}
|
delShow={ this.state.currentNode.length > 0 ? this.state.currentNode[0].canDelOrUp == 0 ? false : true : false}
|
addShow={ this.state.currentNode.length > 0 ? this.state.currentNode[0].canDelOrUp == 0 ? true : false : false}
|
/>
|
</Col>
|
<Col span={1}></Col>
|
<Col span={15} 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 &&
|
<span className='position-middle'><Icon type="frown" theme="outlined" />暂无详情，请点击左侧树形结构</span>
|
}
|
</Col>
|
</Row>
|
<Row>
|
</Row>
|
</div>
|
</div>
|
)
|
}
|
|
|
}
|
|
|
|
const UnitManageList = Form.create()(UnitManage);
|
export default UnitManageList;
|
