367 lines
9.5 KiB
JavaScript
367 lines
9.5 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Input, Tree, Menu, message, Modal } from "antd";
|
|
import { WeaInputSearch } from "ecCom";
|
|
import { i18n } from "../../../public/i18n";
|
|
import NewAndEditDialog from "../../NewAndEditDialog";
|
|
import { inject, observer } from "mobx-react";
|
|
import { toJS } from "mobx";
|
|
import _ from "lodash";
|
|
import "../index.less";
|
|
|
|
const confirm = Modal.confirm;
|
|
const TreeNode = Tree.TreeNode;
|
|
const treeData = [
|
|
{
|
|
title: "0-0",
|
|
key: "0-0",
|
|
children: [
|
|
{
|
|
title: "0-0-0",
|
|
key: "0-0-0",
|
|
children: [
|
|
{ title: "0-0-0-0-88", key: "0-0-0-0" },
|
|
{ title: "0-0-0-1", key: "0-0-0-1" },
|
|
{ title: "0-0-0-2", key: "0-0-0-2" },
|
|
],
|
|
},
|
|
{
|
|
title: "0-0-1",
|
|
key: "0-0-1",
|
|
children: [
|
|
{ title: "0-0-1-0", key: "0-0-1-0" },
|
|
{ title: "0-0-1-1", key: "0-0-1-1" },
|
|
{ title: "0-0-1-2", key: "0-0-1-2" },
|
|
],
|
|
},
|
|
{
|
|
title: "0-0-2",
|
|
key: "0-0-2",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "99",
|
|
key: "0-1",
|
|
children: [
|
|
{ title: "0-1-0-0", key: "0-1-0-0" },
|
|
{ title: "9988", key: "0-1-0-1" },
|
|
{ title: "0-1-0-2-99988", key: "0-1-0-2" },
|
|
],
|
|
},
|
|
{
|
|
title: "0-2",
|
|
key: "0-2",
|
|
},
|
|
];
|
|
|
|
@inject("officeManageStore")
|
|
@observer
|
|
class LeftTree extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
loading: false,
|
|
expandedKeys: [],
|
|
treeData: [],
|
|
copyTree: [],
|
|
copyExpandedKeys: [],
|
|
searchValue: "",
|
|
rightClickNodeTreeItem: null,
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
this.getTreeData();
|
|
document.addEventListener("click", this.handleClick);
|
|
}
|
|
componentWillUnmount() {
|
|
document.removeEventListener("click", this.handleClick);
|
|
}
|
|
|
|
getTreeData = () => {
|
|
const { officeManageStore } = this.props;
|
|
officeManageStore.getTreeData().then((res) => {
|
|
const { code, data, msg } = res;
|
|
if (code === 200) {
|
|
let cp = JSON.stringify([data]);
|
|
this.setState({
|
|
treeData: [data],
|
|
expandedKeys: this.expandedKeysFun([data]),
|
|
copyTree: cp,
|
|
copyExpandedKeys: [],
|
|
});
|
|
} else {
|
|
message.error(res.msg);
|
|
}
|
|
});
|
|
};
|
|
|
|
handleClick = () => {
|
|
this.setState({ rightClickNodeTreeItem: null });
|
|
};
|
|
onSelect = (node) => {
|
|
const [postId] = node;
|
|
const { officeManageStore } = this.props;
|
|
officeManageStore.getPostInfoTable(postId);
|
|
this.setState({
|
|
rightClickNodeTreeItem: null,
|
|
});
|
|
};
|
|
|
|
treeNodeonRightClick = (e) => {
|
|
this.setState({
|
|
rightClickNodeTreeItem: {
|
|
pageX: e.event.pageX,
|
|
pageY: e.event.pageY,
|
|
id: e.node.props["eventKey"],
|
|
categoryName: e.node.props["data-title"],
|
|
},
|
|
});
|
|
};
|
|
|
|
arrayTreeFilter = (data, predicate, filterText) => {
|
|
const nodes = data;
|
|
if (!(nodes && nodes.length)) {
|
|
return;
|
|
}
|
|
const newChildren = [];
|
|
for (const node of nodes) {
|
|
if (predicate(node, filterText)) {
|
|
newChildren.push(node);
|
|
node.children = this.arrayTreeFilter(
|
|
node.children,
|
|
predicate,
|
|
filterText
|
|
);
|
|
} else {
|
|
const subs = this.arrayTreeFilter(node.children, predicate, filterText);
|
|
if ((subs && subs.length) || predicate(node, filterText)) {
|
|
node.children = subs;
|
|
newChildren.push(node);
|
|
}
|
|
}
|
|
}
|
|
return newChildren;
|
|
};
|
|
|
|
filterFn = (data, filterText) => {
|
|
if (!filterText) {
|
|
return true;
|
|
}
|
|
return new RegExp(filterText, "i").test(data.title);
|
|
};
|
|
flatTreeFun = (treeData) => {
|
|
let arr = [];
|
|
const flatTree = (treeData) => {
|
|
treeData.map((item, index) => {
|
|
arr.push(item);
|
|
if (item.children && item.children.length > 0) {
|
|
flatTree(item.children);
|
|
item.children = [];
|
|
}
|
|
});
|
|
};
|
|
flatTree(treeData);
|
|
return arr;
|
|
};
|
|
expandedKeysFun = (treeData) => {
|
|
if (treeData && treeData.length == 0) {
|
|
return [];
|
|
}
|
|
let arr = [];
|
|
const expandedKeysFn = (treeData) => {
|
|
treeData.map((item, index) => {
|
|
arr.push(item.key);
|
|
if (item.children && item.children.length > 0) {
|
|
expandedKeysFn(item.children);
|
|
}
|
|
});
|
|
};
|
|
expandedKeysFn(treeData);
|
|
return arr;
|
|
};
|
|
onChange = (value) => {
|
|
if (value == "") {
|
|
let { copyTree, copyExpandedKeys } = this.state;
|
|
this.setState({
|
|
treeData: JSON.parse(copyTree),
|
|
expandedKeys: copyExpandedKeys,
|
|
searchValue: value,
|
|
});
|
|
} else {
|
|
let { copyTree, copyExpandedKeys } = this.state;
|
|
let res = this.arrayTreeFilter(
|
|
JSON.parse(copyTree),
|
|
this.filterFn,
|
|
value
|
|
);
|
|
let expkey = this.expandedKeysFun(res);
|
|
this.setState({
|
|
treeData: res,
|
|
expandedKeys: expkey,
|
|
searchValue: value,
|
|
});
|
|
}
|
|
};
|
|
|
|
getNodeTreeRightClickMenu = () => {
|
|
const { pageX, pageY } = { ...this.state.rightClickNodeTreeItem };
|
|
const tmpStyle = {
|
|
position: "absolute",
|
|
left: `${pageX}px`,
|
|
top: `${pageY}px`,
|
|
};
|
|
const menu = (
|
|
<Menu
|
|
onClick={this.handleMenuClick}
|
|
style={tmpStyle}
|
|
className="rightmenu">
|
|
<Menu.Item key="ADD">新增</Menu.Item>
|
|
<Menu.Item key="DELETE">删除</Menu.Item>
|
|
</Menu>
|
|
);
|
|
return this.state.rightClickNodeTreeItem == null ? "" : menu;
|
|
};
|
|
|
|
handleMenuClick = (menu) => {
|
|
const { officeManageStore } = this.props;
|
|
const { id } = this.state.rightClickNodeTreeItem;
|
|
const { key } = menu;
|
|
switch (key) {
|
|
case "ADD":
|
|
officeManageStore.getPostForm();
|
|
officeManageStore.setOfficeVisible(true);
|
|
break;
|
|
case "DELETE":
|
|
confirm({
|
|
title: i18n.confirm.defaultTitle(),
|
|
content: i18n.confirm.delete(),
|
|
okText: i18n.button.ok(),
|
|
cancelText: i18n.button.cancel(),
|
|
onOk: () => this.handleDelete(id),
|
|
onCancel() {
|
|
return false;
|
|
},
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
renderTreeNode = (data) => {
|
|
//生成树结构函数
|
|
if (data.length == 0) {
|
|
return;
|
|
}
|
|
let { expandedKeys, searchValue } = this.state;
|
|
return data.map((item) => {
|
|
const index = item.title.indexOf(searchValue);
|
|
const beforeStr = item.title.substr(0, index);
|
|
const afterStr = item.title.substr(index + searchValue.length);
|
|
const title =
|
|
index > -1 ? (
|
|
<span>
|
|
{beforeStr}
|
|
<span style={{ color: "red" }}>{searchValue}</span>
|
|
{afterStr}
|
|
</span>
|
|
) : (
|
|
<span>{item.title}</span>
|
|
);
|
|
if (item.children && item.children.length > 0) {
|
|
return (
|
|
<TreeNode key={item.key} title={title} className="tree-node">
|
|
{this.renderTreeNode(item.children)}
|
|
</TreeNode>
|
|
);
|
|
}
|
|
return (
|
|
<TreeNode key={item.key} title={title} className="tree-node"></TreeNode>
|
|
);
|
|
});
|
|
};
|
|
|
|
onExpand = (expandedKeys) => {
|
|
this.setState({
|
|
expandedKeys,
|
|
});
|
|
};
|
|
|
|
handleSave = () => {
|
|
const { form1, savePost } = this.props.officeManageStore;
|
|
form1.validateForm().then((f) => {
|
|
if (f.isValid) {
|
|
// 验证通过, balabala业务代码
|
|
const payload = { ...form1.getFormParams() };
|
|
this.setState({ loading: true });
|
|
savePost(payload).then(({ code, msg }) => {
|
|
this.setState({ loading: false });
|
|
if (code === 200) {
|
|
message.success("新增成功");
|
|
this.getTreeData();
|
|
this.props.officeManageStore.setOfficeVisible(false);
|
|
} else {
|
|
message.error(msg || "新增失败");
|
|
}
|
|
});
|
|
} else {
|
|
f.showErrors();
|
|
this.setState({ date: new Date() }); // 改变一个state的变量,强制页面刷新
|
|
}
|
|
});
|
|
};
|
|
handleDelete = (ids) => {
|
|
const { deleteByIds } = this.props.officeManageStore;
|
|
deleteByIds({ ids }).then(({ code, msg }) => {
|
|
if (code === 200) {
|
|
message.success("删除成功");
|
|
this.getTreeData();
|
|
} else {
|
|
message.error(msg || "删除失败");
|
|
}
|
|
});
|
|
};
|
|
|
|
render() {
|
|
let { expandedKeys, treeData, searchValue, loading } = this.state;
|
|
const { officeManageStore } = this.props;
|
|
const { officeCondition, form1, officeVisible } = officeManageStore;
|
|
return (
|
|
<div>
|
|
<div style={{ padding: 10 }}>
|
|
<WeaInputSearch
|
|
value={searchValue}
|
|
style={{ width: "100%" }}
|
|
onChange={this.onChange}
|
|
/>
|
|
</div>
|
|
<Tree
|
|
onExpand={this.onExpand}
|
|
expandedKeys={expandedKeys}
|
|
onRightClick={this.treeNodeonRightClick}
|
|
onSelect={this.onSelect}>
|
|
{this.renderTreeNode(treeData)}
|
|
</Tree>
|
|
{this.getNodeTreeRightClickMenu()}
|
|
<NewAndEditDialog
|
|
ecId={`${
|
|
(this && this.props && this.props.ecId) || ""
|
|
}_NewAndEditDialog@q4rrwm`}
|
|
title={i18n.label.newOfficeName()}
|
|
visible={officeVisible}
|
|
condition={toJS(officeCondition)}
|
|
form={form1}
|
|
isFormInit={form1.isFormInit}
|
|
loading={loading}
|
|
isEdit={true}
|
|
height={250}
|
|
conditionLen={3}
|
|
save={() => this.handleSave()}
|
|
onCancel={() => officeManageStore.setOfficeVisible(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
export default LeftTree;
|