/* eslint-disable */
|
import React from "react";
|
import { Row, Col, Form, Button, message, Modal, Popconfirm, Empty, Spin } from "antd";
|
import moment from "moment";
|
import SearchTree from '../../components/common/Tree';
|
import SearchFormView from '../../components/common/SearchFormView';
|
import TableView from '../../components/common/TableView';
|
import fetch from '../../api/request';
|
import DeptDetail from './DeptDetail';//部门详情
|
|
const FormItem = Form.Item;
|
const confirm = Modal.confirm;
|
|
export default class DepartmentManage extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
treeKey: "init",
|
expandedKeys: [],
|
tableData: [],
|
totalElements: 1,
|
pageSize: 10,
|
page: 1,
|
|
treeData: [],
|
leafNodes: [],
|
currentNode: [],
|
rightShow: false,
|
modify: false,
|
parentId: '',
|
id: '',
|
dataSet: {},
|
selectedKeys: [],
|
treeLoading: false,//左侧树结构loading
|
loading: false,//部门详情的loading
|
formData: {
|
__key: Date.now(),
|
page: 1,
|
size: 10,
|
}
|
|
};
|
}
|
componentDidMount() {
|
this.loadData();
|
}
|
|
//加载左侧树形数据
|
loadData = () => {
|
this.setState({
|
treeLoading: true
|
})
|
fetch({
|
url: `api/unit/getAllUnitsByCascade`
|
}).then(res => {
|
this.setState({ treeLoading: false })
|
res = this.handleTreeData(res);
|
if (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].children) {
|
this.handleTreeData(node.children);
|
}
|
}
|
return data;
|
};
|
|
//点击树形结构节点
|
treeSelect = (tableData, currentNode) => {
|
// if (currentNode[0].children && currentNode[0].children.length > 0) {
|
// _this.setState({
|
// rightShow: false
|
// })
|
// message.error("请选择下级的节点");
|
// return;
|
// } else {
|
// message.success("已选择" + currentNode[0].name)
|
// }
|
message.success("已选择：" + currentNode[0].name)
|
this.setState({
|
leafNodes: tableData,
|
currentNode,
|
unitLocation: currentNode[0].name,
|
parentId: currentNode[0].parentId,
|
selectedKeys: [currentNode[0].id]
|
}, () => {
|
this.loadTableData()
|
})
|
};
|
|
//加载右侧table表格数据
|
loadTableData = () => {
|
let { formData, currentNode } = this.state;
|
this.setState({
|
rightShow: true,
|
formData: {
|
...formData,
|
__key: Date.now(),
|
unitId: currentNode[0].id
|
}
|
})
|
}
|
|
//点击table修改|新增按钮
|
modifyFun = (id) => {
|
this.setState({
|
modify: true,
|
id,
|
dataSet: {}
|
})
|
if (id !== '') {
|
this.setState({ loading: true });
|
fetch({
|
url: `api/dept/getById`,
|
params: { id }
|
}).then(res => {
|
this.setState({ loading: false });
|
if (res) {
|
this.setState({ dataSet: res })
|
}
|
})
|
}
|
}
|
|
// 部门 新增|编辑 函数
|
saveFun = (obj) => {
|
let { formData } = this.state;
|
this.setState({ loading: true });
|
fetch({
|
url: `api/dept/save`,
|
method: 'POST',
|
data: obj
|
}).then(res => {
|
this.setState({ loading: false });
|
if (res) {
|
message.success('保存部门成功');
|
this.setState({
|
modify: false,
|
formData: {
|
...formData,
|
__key: Date.now()
|
}
|
});
|
}
|
})
|
}
|
|
//删除单位
|
delete = (id) => {
|
let _this = this;
|
let { formData } = _this.state;
|
confirm({
|
title: <span style={{ fontSize: 19 }}>确定要删除该部门吗？</span>,
|
onOk() {
|
fetch({
|
url: `api/dept/delete`,
|
params: { ids: id }
|
}).then(res => {
|
if (res) {
|
message.success("删除成功");
|
_this.setState({
|
formData: {
|
...formData,
|
__key: Date.now()
|
}
|
});
|
}
|
})
|
},
|
onCancel() { },
|
});
|
}
|
|
clearKeys = () => {
|
this.setState({
|
currentNode: [],
|
rightShow: false,
|
})
|
}
|
|
cancelFun = () => {
|
this.setState({
|
modify: false
|
})
|
}
|
|
onExpand = expandedKeys => {
|
this.setState({
|
expandedKeys
|
});
|
this.setState({
|
treeKey: Date.now()
|
});
|
};
|
|
onSelect = (selectedKeys) => {
|
this.setState({
|
selectedKeys
|
})
|
}
|
|
setFormData = data => {
|
this.setState({
|
formData: data,
|
});
|
}
|
|
renderColumns = () => {
|
return [
|
{ title: "部门名称", dataIndex: "name" },
|
{ title: "描述", dataIndex: "description", ellipsis: true },
|
{ title: '创建时间', dataIndex: 'updateTime', key: 'updateTime', render: (text, record) => text !== "" && text != null ? moment(text).format("YYYY-MM-DD HH:mm") : "" },
|
{
|
title: "操作",
|
key: "operation",
|
render: (text, record) => {
|
return (
|
<div>
|
<a onClick={() => this.modifyFun(record.id)}>修改</a>
|
<span> | </span>
|
<a onClick={() => this.delete(record.id)}>删除</a>
|
</div>
|
);
|
}
|
}
|
];
|
};
|
|
render() {
|
const { treeKey, treeData, rightShow, treeLoading, formData, currentNode } = this.state;
|
|
const params = {
|
id: this.state.id,
|
currentNode
|
}
|
|
let tableParams = {
|
url: `api/dept/query`,
|
formData,
|
key: formData.__key,
|
columns: this.renderColumns(),
|
extraFromData: {
|
unitId: currentNode.length ? currentNode[0].id : ''
|
},
|
setFormData: this.setFormData
|
}
|
|
return (
|
<div className="departmentmanage-main margin padding bg-white h-100">
|
{
|
!this.state.modify &&
|
<React.Fragment>
|
<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}
|
clearKeys={this.clearKeys}
|
selectedKeys={this.state.selectedKeys}
|
onSelect={this.onSelect}
|
/>
|
</Spin>
|
</Col>
|
<Col span={1} />
|
<Col span={15} style={{ border: "1px solid #e8e8e8", padding: 10 }} className="h-100">
|
{rightShow &&
|
<div>
|
<SearchFormView data={[{ type: 'input', name: '部门名称', label: '部门名称', key: 'name' }]} width={'50%'} formData={formData} setFormData={this.setFormData} />
|
<Row className="margin-bottom">
|
<Col>
|
<Button onClick={() => this.modifyFun('')} type="primary" className="button-do">
|
新增
|
</Button>
|
</Col>
|
</Row>
|
<TableView {...tableParams} />
|
</div>
|
}
|
{
|
!rightShow &&
|
<Empty description={'暂无数据，请点击左侧树形结构'} className="h-100 flex-box-column align-center justify-content" />
|
}
|
</Col>
|
|
</Row>
|
</div>
|
</React.Fragment>
|
}
|
|
{this.state.modify &&
|
<DeptDetail cancelFun={this.cancelFun} params={params} dataSet={this.state.dataSet} saveFun={this.saveFun} loading={this.state.loading}></DeptDetail>
|
}
|
</div>
|
);
|
}
|
|
}
|
