import React from "react";
|
import { Link } from "react-router-dom";
|
import { Card, Row, Col, Icon, Form, message, Tree, Modal, Layout, Popconfirm, Divider, Spin, Button, Empty } 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 FunctionDetail from './FunctionDetail';//功能详情
|
import fetch from '../../api/request';
|
|
const FormItem = Form.Item;
|
const confirm = Modal.confirm;
|
const TreeNode = Tree.TreeNode;
|
|
class FunctionManage extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
resourceList: [],
|
treeKey: Date.now(),
|
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/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;
|
};
|
|
//点击树形节点触发函数
|
treeSelect = (tableData, currentNode) => {
|
console.log(tableData, currentNode);
|
if (currentNode[0].children && currentNode[0].children.length > 0) {
|
message.error("请选择下级的节点");
|
this.setState({
|
rightShow: false
|
});
|
return;
|
} else {
|
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 = () => {
|
const { currentNode, formData } = this.state;
|
if (currentNode[0].length < 0) {
|
message.error("请选择左边节点后进行查询操作");
|
return;
|
}
|
this.setState({
|
rightShow: true,
|
formData: {
|
...formData,
|
__key: Date.now(),
|
moduleId: currentNode[0].id
|
}
|
})
|
};
|
|
//功能（新增 | 编辑）,详情接口
|
modifyFun = id => {
|
this.setState({
|
modify: true,
|
id,
|
dataSet: {}
|
});
|
if (id) {
|
this.setState({ loading: true });
|
fetch({
|
url: `api/function/getById`,
|
params: { id }
|
}).then(res => {
|
this.setState({ loading: false });
|
if (res) {
|
this.setState({ dataSet: res })
|
}
|
})
|
}
|
};
|
|
clearKeys = () => {
|
let _this = this;
|
_this.setState({
|
currentNode: [],
|
rightShow: false
|
});
|
};
|
|
cancelFun = () => {
|
this.setState({
|
modify: false
|
});
|
};
|
|
//保存表单（确定按钮）
|
saveFun = data => {
|
this.setState({ loading: true });
|
fetch({
|
url: `api/function/save`,
|
method: 'POST',
|
data
|
}).then(res => {
|
this.setState({ loading: false });
|
if (res) {
|
message.success("保存功能成功");
|
this.setState({ modify: false });
|
this.loadTableData();//重新加载表格table数据
|
}
|
})
|
};
|
|
onExpand = expandedKeys => {
|
this.setState({
|
expandedKeys
|
});
|
};
|
|
onSelect = selectedKeys => {
|
this.setState({
|
selectedKeys
|
});
|
};
|
|
//删除功能
|
delete = id => {
|
let _this = this;
|
confirm({
|
title: <span style={{ fontSize: 19 }}>确定要删除该功能吗？</span>,
|
onOk() {
|
fetch({
|
url: `api/function/delete`,
|
params: { ids: id }
|
}).then(res => {
|
if (res) {
|
message.success("删除成功");
|
_this.loadTableData();
|
}
|
})
|
},
|
onCancel() { }
|
});
|
};
|
|
setFormData = data => {
|
console.log('form', data);
|
this.setState({
|
formData: data,
|
});
|
}
|
|
renderColumns = () => {
|
return [
|
{ title: "功能名称", dataIndex: "name" },
|
{ title: "标识符", dataIndex: "symbol", ellipsis: true },
|
{ title: "功能描述", dataIndex: "description", ellipsis: true },
|
{ title: "创建时间", dataIndex: "updateTime", render: (text, record) => (text && moment(text).format("YYYY-MM-DD HH:mm")) },
|
{
|
title: "操作", key: "operation", render: (text, record) => {
|
return (
|
<div>
|
<a onClick={() => this.modifyFun(record.id)}>修改</a>
|
<Divider type="vertical" />
|
<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/function/query`,
|
formData,
|
key: formData.__key,
|
columns: this.renderColumns(),
|
extraFromData: {
|
moduleId: currentNode.length ? currentNode[0].id : ''
|
},
|
setFormData: this.setFormData
|
}
|
|
return (
|
<div className="functionmanage-main h-100 padding margin bg-white">
|
{!this.state.modify && (
|
<React.Fragment>
|
<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}
|
clearKeys={this.clearKeys}
|
onSelect={this.onSelect}
|
selectedKeys={this.state.selectedKeys}
|
/>
|
</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} width={'50%'}/>
|
<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 && (
|
<FunctionDetail
|
cancelFun={this.cancelFun}
|
params={params}
|
dataSet={this.state.dataSet}
|
saveFun={this.saveFun}
|
loading={this.state.loading}
|
/>
|
)}
|
</div>
|
);
|
}
|
|
|
}
|
|
const FunctionManageList = Form.create()(FunctionManage);
|
export default FunctionManageList;
|
