133 lines
4.3 KiB
JavaScript
133 lines
4.3 KiB
JavaScript
import React from "react";
|
|
import { Tree, Empty, Button } from "antd";
|
|
import MainLayout from "../../../layout/MainLayout";
|
|
import httpUtil from "../../../util/httpUtil";
|
|
import styles from "./index.module.less";
|
|
import { batchDelete, renderTreeNodes, onDrop } from "./function.js";
|
|
import AddModal from "./AddModal";
|
|
|
|
import * as action from "../../../redux/action/BookmarkTreeOverview";
|
|
import { connect } from "react-redux";
|
|
|
|
function mapStateToProps(state) {
|
|
return state[action.DATA_NAME];
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
return {
|
|
updateTreeData: treeData => dispatch(action.updateTreeData(treeData)),
|
|
setIsEdit: isEdit => dispatch(action.setIsEdit(isEdit)),
|
|
addNode: (item, e) => dispatch(action.addNode(item, e)),
|
|
editNode: (item, e) => dispatch(action.editNode(item, e)),
|
|
changeIsInit: value => dispatch(action.changeIsInit(value)),
|
|
changeCheckedKeys: (keys, nodes) => dispatch(action.changeCheckedKeys(keys, nodes)),
|
|
changeExpandedKeys: keys => dispatch(action.changeExpandedKeys(keys))
|
|
};
|
|
}
|
|
|
|
class OverView extends React.Component {
|
|
/**
|
|
* 初始化第一级书签
|
|
*/
|
|
componentDidMount() {
|
|
httpUtil
|
|
.get("/bookmark/currentUser/path?path=")
|
|
.then(res => {
|
|
this.props.updateTreeData(res);
|
|
this.props.changeIsInit(true);
|
|
})
|
|
.catch(() => this.props.changeIsInit(true));
|
|
}
|
|
|
|
/**
|
|
* 异步加载
|
|
*/
|
|
loadData = e =>
|
|
new Promise(resolve => {
|
|
const item = e.props.dataRef;
|
|
const newPath = item.path + "." + item.bookmarkId;
|
|
httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => {
|
|
item.children = res;
|
|
this.props.updateTreeData([...this.props.treeData]);
|
|
resolve();
|
|
});
|
|
});
|
|
|
|
/**
|
|
* 节点选择
|
|
* @param {*} key
|
|
* @param {*} e
|
|
*/
|
|
treeNodeSelect(key, e) {
|
|
if (e.nativeEvent.delegateTarget && e.nativeEvent.delegateTarget.name === "copy") {
|
|
return;
|
|
}
|
|
const { expandedKeys, changeExpandedKeys } = this.props;
|
|
const item = e.node.props.dataRef;
|
|
if (item.type === 0) {
|
|
window.open(item.url);
|
|
} else {
|
|
const id = item.bookmarkId.toString();
|
|
const index = expandedKeys.indexOf(id);
|
|
index === -1 ? expandedKeys.push(id) : expandedKeys.splice(index, 1);
|
|
changeExpandedKeys([...expandedKeys]);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { isEdit, setIsEdit, treeData, addNode, isInit, expandedKeys, checkedKeys } = this.props;
|
|
const { changeExpandedKeys } = this.props;
|
|
return (
|
|
<MainLayout>
|
|
<div className={styles.main}>
|
|
<div className={styles.header}>
|
|
<div className={styles.left}>
|
|
<span className={styles.myTree}>我的书签树</span>
|
|
{isEdit ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={addNode.bind(this, null)} /> : null}
|
|
{expandedKeys.length > 0 ? (
|
|
<Button type="primary" size="small" onClick={changeExpandedKeys.bind(this, [])}>
|
|
收起
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
<div className={styles.right}>
|
|
{isEdit ? (
|
|
<React.Fragment>
|
|
<Button size="small" type="danger" onClick={batchDelete.bind(this)}>
|
|
删除选中
|
|
</Button>
|
|
</React.Fragment>
|
|
) : null}
|
|
<Button size="small" type="primary" onClick={setIsEdit.bind(this, !isEdit)}>
|
|
{isEdit ? "完成" : "编辑"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<Tree
|
|
showIcon
|
|
checkedKeys={checkedKeys}
|
|
onCheck={this.props.changeCheckedKeys}
|
|
expandedKeys={expandedKeys}
|
|
loadData={this.loadData}
|
|
onExpand={this.props.changeExpandedKeys}
|
|
checkable={isEdit}
|
|
onSelect={this.treeNodeSelect.bind(this)}
|
|
draggable
|
|
onDrop={onDrop.bind(this)}
|
|
blockNode
|
|
>
|
|
{renderTreeNodes.call(this, treeData)}
|
|
</Tree>
|
|
{isInit && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
|
|
<AddModal />
|
|
</div>
|
|
</MainLayout>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(OverView);
|