✨ Feat: [前台]:书签管理页面,节点编辑,节点拖拽功能完成

front/src/pages/manage/OverView/AddModal.jsx

@@ -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);

front/src/pages/manage/OverView/function.js

@@ -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);
+            deleteTreeData(treeData, set);
-            _this.setState({ treeData: [..._this.state.treeData], checkedKeys: [] });
+            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") {
+  if (!info.dropToGap && target.type === 0) {
-    message.error("只能移动到文件夹中");
+    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);
+    });
+  }
+}

front/src/pages/manage/OverView/index.jsx

@@ -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 {
+import * as action from "../../../redux/action/BookmarkTreeOverview";
-  constructor(props) {
+import { connect } from "react-redux";
-    super(props);
-    this.state = {
-      treeData: [],
-      isEdit: false,
-      isLoading: true,
-      checkedKeys: [],
-      expandKeys: [],
-      //是否显示新增/编辑书签弹窗
-      isShowModal: false,
-      currentAddFolder: null,
-      currentEditNode: null
-    };
-  }
 
+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);
+      const index = expandedKeys.indexOf(id);
-      index === -1 ? expandKeys.push(id) : expandKeys.splice(index, 1);
+      index === -1 ? expandedKeys.push(id) : expandedKeys.splice(index, 1);
-      this.setState({ expandKeys: [...expandKeys] });
+      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}
+              {isEdit ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={addNode.bind(this, null)} /> : null}
-              {expandKeys.length > 0 ? (
+              {expandedKeys.length > 0 ? (
-                <Button type="primary" size="small" onClick={closeAll.bind(this)}>
+                <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)}
+            onCheck={this.props.changeCheckedKeys}
-            expandedKeys={expandKeys}
+            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}
+          {isInit && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
-          <AddModal
+          <AddModal />
-            isShowModal={isShowModal}
-            currentAddFolder={currentAddFolder}
-            currentEditNode={currentEditNode}
-            closeModal={this.closeAddModal}
-            addToTree={this.addToTree}
-          />
         </div>
       </MainLayout>
     );
   }
 }
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(OverView);