✨ Feat: [前台]:书签管理页面,节点编辑,节点拖拽功能完成
This commit is contained in:
fanxb
parent
d05fd50816
commit
d426f93080
@ -2,7 +2,24 @@ import React from "react";
|
||||
import { Modal, Form, Upload, Button, Radio, Input, Icon, message } from "antd";
|
||||
import httpUtil from "../../../util/httpUtil";
|
||||
|
||||
export default class AddModal extends React.Component {
|
||||
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)),
|
||||
closeModal: () => dispatch(action.closeModal())
|
||||
};
|
||||
}
|
||||
|
||||
class AddModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
@ -13,6 +30,17 @@ export default class AddModal extends React.Component {
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
const { currentEditNode } = nextProps;
|
||||
if (currentEditNode != null) {
|
||||
this.type = "edit";
|
||||
this.setState({ addType: currentEditNode.type, addName: currentEditNode.name, addValue: currentEditNode.url });
|
||||
} else {
|
||||
this.type = "add";
|
||||
this.setState({ addType: 0, addName: "", addValue: "", file: null });
|
||||
}
|
||||
}
|
||||
|
||||
submit = () => {
|
||||
const { currentEditNode } = this.props;
|
||||
if (currentEditNode == null) {
|
||||
@ -36,7 +64,7 @@ export default class AddModal extends React.Component {
|
||||
message.success("编辑成功");
|
||||
node.name = addName;
|
||||
node.url = addValue;
|
||||
this.close();
|
||||
this.props.closeModal();
|
||||
});
|
||||
}
|
||||
|
||||
@ -44,7 +72,7 @@ export default class AddModal extends React.Component {
|
||||
* 新增一个节点
|
||||
*/
|
||||
addOne() {
|
||||
const { currentAddFolder, addToTree, closeModal } = this.props;
|
||||
const { currentAddFolder, updateTreeData, closeModal, treeData } = this.props;
|
||||
const path = currentAddFolder == null ? "" : currentAddFolder.path + "." + currentAddFolder.bookmarkId;
|
||||
if (this.state.addType === 2) {
|
||||
const form = new FormData();
|
||||
@ -65,21 +93,24 @@ export default class AddModal extends React.Component {
|
||||
url: this.state.addValue
|
||||
};
|
||||
httpUtil.put("/bookmark", body).then(res => {
|
||||
addToTree(res);
|
||||
// addToTree(res);
|
||||
message.success("加入成功");
|
||||
if (currentAddFolder === null) {
|
||||
treeData.push(res);
|
||||
} else {
|
||||
//存在children说明该子节点的孩子数据已经加载，需要重新将新的子书签加入进去
|
||||
if (currentAddFolder.children) {
|
||||
currentAddFolder.children.push(res);
|
||||
}
|
||||
}
|
||||
updateTreeData(treeData);
|
||||
closeModal();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
close = () => {
|
||||
const { closeModal } = this.props;
|
||||
this.setState({ file: null, addType: 0, addValue: "", addName: "" });
|
||||
closeModal();
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isShowModal, currentEditNode } = this.props;
|
||||
const { isShowModal, currentEditNode, closeModal } = this.props;
|
||||
const { addType, addName, addValue } = this.state;
|
||||
const type = currentEditNode == null ? "add" : "edit";
|
||||
const formItemLayout = {
|
||||
@ -103,7 +134,7 @@ export default class AddModal extends React.Component {
|
||||
fileList: []
|
||||
};
|
||||
return (
|
||||
<Modal destroyOnClose title={type === "add" ? "新增" : "编辑"} visible={isShowModal} onCancel={this.close} footer={false}>
|
||||
<Modal destroyOnClose title={type === "add" ? "新增" : "编辑"} visible={isShowModal} onCancel={closeModal} footer={false}>
|
||||
<Form {...formItemLayout}>
|
||||
{type === "add" ? (
|
||||
<Form.Item label="类别">
|
||||
@ -114,12 +145,12 @@ export default class AddModal extends React.Component {
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
) : null}
|
||||
{addType < 2 || type === "edit" ? (
|
||||
{addType < 2 ? (
|
||||
<Form.Item label="名称">
|
||||
<Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} />
|
||||
</Form.Item>
|
||||
) : null}
|
||||
{(addType === 0 && type === "add") || (type === "edit" && currentEditNode.type === 0) ? (
|
||||
{addType === 0 ? (
|
||||
<Form.Item label="URL">
|
||||
<Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} />
|
||||
</Form.Item>
|
||||
@ -142,3 +173,8 @@ export default class AddModal extends React.Component {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(AddModal);
|
||||
|
||||
@ -5,61 +5,12 @@ import styles from "./index.module.less";
|
||||
import IconFont from "../../../components/IconFont";
|
||||
const { TreeNode } = Tree;
|
||||
|
||||
/**
|
||||
* 选中的文件夹id列表
|
||||
*/
|
||||
let folderIdList = [];
|
||||
/**
|
||||
* 选中的书签id列表
|
||||
*/
|
||||
let bookmarkIdList = [];
|
||||
|
||||
/**
|
||||
* 展开/关闭
|
||||
* @param {*} keys
|
||||
*/
|
||||
export function onExpand(keys) {
|
||||
this.setState({ expandKeys: keys });
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭全部节点
|
||||
*/
|
||||
export function closeAll() {
|
||||
this.setState({ expandKeys: [] });
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中节点
|
||||
* @param {*} keys
|
||||
* @param {*} data
|
||||
*/
|
||||
export function onCheck(keys, data) {
|
||||
this.setState({ checkedKeys: keys });
|
||||
bookmarkIdList = [];
|
||||
folderIdList = [];
|
||||
data.checkedNodes.forEach(item => {
|
||||
const bookmark = item.props.dataRef;
|
||||
bookmark.type === 0 ? bookmarkIdList.push(bookmark.bookmarkId) : folderIdList.push(bookmark.bookmarkId);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑一个节点
|
||||
* @param {*} node 节点对象
|
||||
* @param {*} e
|
||||
*/
|
||||
function editNode(node, e) {
|
||||
e.stopPropagation();
|
||||
this.setState({ isShowModal: true, currentEditNode: node });
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染树节点中节点内容
|
||||
* @param {*} item
|
||||
*/
|
||||
export function renderNodeContent(item) {
|
||||
const { isEdit } = this.state;
|
||||
const { isEdit, addNode, editNode } = this.props;
|
||||
// 节点内容后面的操作按钮
|
||||
const btns = (
|
||||
<div className={styles.btns}>
|
||||
@ -75,7 +26,7 @@ export function renderNodeContent(item) {
|
||||
title="点击复制url"
|
||||
/>
|
||||
) : null}
|
||||
{item.type === 1 ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, item)} /> : null}
|
||||
{item.type === 1 ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={addNode.bind(this, item)} /> : null}
|
||||
<Button size="small" type="primary" icon="edit" shape="circle" onClick={editNode.bind(this, item)} />
|
||||
<Button size="small" type="danger" icon="delete" shape="circle" onClick={deleteOne.bind(this, item)} />
|
||||
</div>
|
||||
@ -142,6 +93,13 @@ export function deleteOne(item, e) {
|
||||
* 批量删除
|
||||
*/
|
||||
export function batchDelete() {
|
||||
const { checkedNodes } = this.props;
|
||||
const folderIdList = [],
|
||||
bookmarkIdList = [];
|
||||
checkedNodes.forEach(item => {
|
||||
const data = item.props.dataRef;
|
||||
data.type === 0 ? bookmarkIdList.push(data.bookmarkId) : folderIdList.push(data.bookmarkId);
|
||||
});
|
||||
deleteBookmark.call(this, folderIdList, bookmarkIdList);
|
||||
}
|
||||
|
||||
@ -151,7 +109,7 @@ export function batchDelete() {
|
||||
* @param {*} bookmarkIdList
|
||||
*/
|
||||
function deleteBookmark(folderIdList, bookmarkIdList) {
|
||||
const _this = this;
|
||||
const { updateTreeData, treeData, changeCheckedKeys } = this.props;
|
||||
Modal.confirm({
|
||||
title: "确认删除？",
|
||||
content: "删除后，无法找回",
|
||||
@ -164,8 +122,9 @@ function deleteBookmark(folderIdList, bookmarkIdList) {
|
||||
const set = new Set();
|
||||
folderIdList.forEach(item => set.add(parseInt(item)));
|
||||
bookmarkIdList.forEach(item => set.add(parseInt(item)));
|
||||
deleteTreeData(_this.state.treeData, set);
|
||||
_this.setState({ treeData: [..._this.state.treeData], checkedKeys: [] });
|
||||
deleteTreeData(treeData, set);
|
||||
changeCheckedKeys([], null);
|
||||
updateTreeData([...treeData]);
|
||||
resolve();
|
||||
})
|
||||
.catch(() => reject());
|
||||
@ -191,19 +150,15 @@ function deleteTreeData(treeData, set) {
|
||||
}
|
||||
}
|
||||
|
||||
export function onDragEnter(info) {
|
||||
// console.log(info);
|
||||
}
|
||||
|
||||
/**
|
||||
* 节点拖拽
|
||||
* @param {*} info
|
||||
*/
|
||||
export function onDrop(info) {
|
||||
const { treeData } = this.state;
|
||||
const { treeData, updateTreeData } = this.props;
|
||||
const target = info.node.props.dataRef;
|
||||
if (!info.dropToGap && target.type === "0") {
|
||||
message.error("只能移动到文件夹中");
|
||||
if (!info.dropToGap && target.type === 0) {
|
||||
message.error("无法移动到书签内部");
|
||||
return;
|
||||
}
|
||||
const current = info.dragNode.props.dataRef;
|
||||
@ -227,14 +182,29 @@ export function onDrop(info) {
|
||||
body.sort = target.sort;
|
||||
insertToArray(current, index, targetBelowList);
|
||||
}
|
||||
current.sort = body.sort;
|
||||
} else {
|
||||
//移动该一个文件夹内，该文件夹可能还未加载
|
||||
body.targetPath = target.path + "." + target.bookmarkId;
|
||||
//存在children说明已经加载
|
||||
if (target.children) {
|
||||
const length = target.children.length;
|
||||
body.sort = length > 0 ? target.children[length - 1].sort + 1 : 1;
|
||||
target.children.push(current);
|
||||
}
|
||||
}
|
||||
this.setState({ treeData: [...treeData] });
|
||||
if (body.sort !== -1) {
|
||||
//说明目标位置已经加载，需要更新当前节点信息
|
||||
current.path = body.targetPath;
|
||||
current.sort = body.sort;
|
||||
}
|
||||
//如果移动的目标和当前位置不在同一个层级需要更新子节点path信息
|
||||
if (body.sourcePath !== body.targetPath) {
|
||||
updateChildrenPath(current.children, body.sourcePath + "." + body.bookmarkId, body.targetPath + "." + body.bookmarkId);
|
||||
}
|
||||
httpUtil.post("/bookmark/moveNode", body).then(res => {
|
||||
message.success("移动完成");
|
||||
});
|
||||
updateTreeData({ treeData: [...treeData] });
|
||||
}
|
||||
|
||||
/**
|
||||
@ -255,6 +225,12 @@ function getBelowList(treeList, node) {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 往数组中插入一个节点，并让后面节点的sort+1
|
||||
* @param {*} item 节点
|
||||
* @param {*} index 插入位置
|
||||
* @param {*} arr 目标数组
|
||||
*/
|
||||
function insertToArray(item, index, arr) {
|
||||
const length = arr.length;
|
||||
let i = length;
|
||||
@ -264,3 +240,18 @@ function insertToArray(item, index, arr) {
|
||||
}
|
||||
arr[i] = item;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新节点的path信息
|
||||
* @param {*} children 孩子数组
|
||||
* @param {*} oldPath 旧path
|
||||
* @param {*} newPath 新path
|
||||
*/
|
||||
function updateChildrenPath(children, oldPath, newPath) {
|
||||
if (children && children.length > 0) {
|
||||
children.forEach(item => {
|
||||
item.path = item.path.replace(oldPath, newPath);
|
||||
updateChildrenPath(item.children, oldPath, newPath);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,25 +3,29 @@ 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, onExpand, closeAll, onCheck, onDragEnter, onDrop } from "./function.js";
|
||||
import { batchDelete, renderTreeNodes, onDrop } from "./function.js";
|
||||
import AddModal from "./AddModal";
|
||||
|
||||
export default class OverView extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
treeData: [],
|
||||
isEdit: false,
|
||||
isLoading: true,
|
||||
checkedKeys: [],
|
||||
expandKeys: [],
|
||||
//是否显示新增/编辑书签弹窗
|
||||
isShowModal: false,
|
||||
currentAddFolder: null,
|
||||
currentEditNode: null
|
||||
};
|
||||
}
|
||||
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 {
|
||||
/**
|
||||
* 初始化第一级书签
|
||||
*/
|
||||
@ -29,9 +33,10 @@ export default class OverView extends React.Component {
|
||||
httpUtil
|
||||
.get("/bookmark/currentUser/path?path=")
|
||||
.then(res => {
|
||||
this.setState({ treeData: res, isLoading: false });
|
||||
this.props.updateTreeData(res);
|
||||
this.props.changeIsInit(true);
|
||||
})
|
||||
.catch(() => this.setState({ isLoading: false }));
|
||||
.catch(() => this.props.changeIsInit(true));
|
||||
}
|
||||
|
||||
/**
|
||||
@ -43,7 +48,7 @@ export default class OverView extends React.Component {
|
||||
const newPath = item.path + "." + item.bookmarkId;
|
||||
httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => {
|
||||
item.children = res;
|
||||
this.setState({ treeData: [...this.state.treeData] });
|
||||
this.props.updateTreeData([...this.props.treeData]);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
@ -57,61 +62,30 @@ export default class OverView extends React.Component {
|
||||
if (e.nativeEvent.delegateTarget && e.nativeEvent.delegateTarget.name === "copy") {
|
||||
return;
|
||||
}
|
||||
const { expandKeys } = this.state;
|
||||
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 = expandKeys.indexOf(id);
|
||||
index === -1 ? expandKeys.push(id) : expandKeys.splice(index, 1);
|
||||
this.setState({ expandKeys: [...expandKeys] });
|
||||
const index = expandedKeys.indexOf(id);
|
||||
index === -1 ? expandedKeys.push(id) : expandedKeys.splice(index, 1);
|
||||
changeExpandedKeys([...expandedKeys]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将新增的数据加入到state中
|
||||
*/
|
||||
addToTree = node => {
|
||||
const { currentAddFolder, treeData } = this.state;
|
||||
if (currentAddFolder === null) {
|
||||
treeData.push(node);
|
||||
} else {
|
||||
//存在children说明该子节点的孩子数据已经加载，需要重新将新的子书签加入进去
|
||||
if (currentAddFolder.children) {
|
||||
currentAddFolder.children.push(node);
|
||||
this.setState({ treeData: [...treeData] });
|
||||
}
|
||||
this.setState({ currentAddFolder: null });
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭新增书签弹窗
|
||||
*/
|
||||
closeAddModal = () => {
|
||||
this.setState({ isShowModal: false, currentAddFolder: null, currentEditNode: null });
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增书签
|
||||
*/
|
||||
addOne = (item, e) => {
|
||||
e.stopPropagation();
|
||||
this.setState({ currentAddFolder: item, isShowModal: true });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder, currentEditNode } = this.state;
|
||||
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={this.addOne.bind(this, null)} /> : null}
|
||||
{expandKeys.length > 0 ? (
|
||||
<Button type="primary" size="small" onClick={closeAll.bind(this)}>
|
||||
{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}
|
||||
@ -124,7 +98,7 @@ export default class OverView extends React.Component {
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
) : null}
|
||||
<Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}>
|
||||
<Button size="small" type="primary" onClick={setIsEdit.bind(this, !isEdit)}>
|
||||
{isEdit ? "完成" : "编辑"}
|
||||
</Button>
|
||||
</div>
|
||||
@ -132,29 +106,27 @@ export default class OverView extends React.Component {
|
||||
<Tree
|
||||
showIcon
|
||||
checkedKeys={checkedKeys}
|
||||
onCheck={onCheck.bind(this)}
|
||||
expandedKeys={expandKeys}
|
||||
onCheck={this.props.changeCheckedKeys}
|
||||
expandedKeys={expandedKeys}
|
||||
loadData={this.loadData}
|
||||
onExpand={onExpand.bind(this)}
|
||||
onExpand={this.props.changeExpandedKeys}
|
||||
checkable={isEdit}
|
||||
onSelect={this.treeNodeSelect.bind(this)}
|
||||
draggable
|
||||
onDragEnter={onDragEnter.bind(this)}
|
||||
onDrop={onDrop.bind(this)}
|
||||
blockNode
|
||||
>
|
||||
{renderTreeNodes.call(this, treeData)}
|
||||
</Tree>
|
||||
{isLoading === false && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
|
||||
<AddModal
|
||||
isShowModal={isShowModal}
|
||||
currentAddFolder={currentAddFolder}
|
||||
currentEditNode={currentEditNode}
|
||||
closeModal={this.closeAddModal}
|
||||
addToTree={this.addToTree}
|
||||
/>
|
||||
{isInit && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
|
||||
<AddModal />
|
||||
</div>
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(OverView);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user