✨ Feat: [前台]:完成编辑功能。拖拽功能部分完成

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

@@ -13,7 +13,37 @@ export default class AddModal extends React.Component {
     };
   }
 
-  addOne = () => {
+  submit = () => {
+    const { currentEditNode } = this.props;
+    if (currentEditNode == null) {
+      this.addOne();
+    } else {
+      this.editOne(currentEditNode);
+    }
+  };
+
+  /**
+   * 编辑一个节点
+   * @param {*} node
+   */
+  editOne(node) {
+    const { addName, addValue } = this.state;
+    const body = {
+      name: addName,
+      url: addValue
+    };
+    httpUtil.post("/bookmark/updateOne", body).then(() => {
+      message.success("编辑成功");
+      node.name = addName;
+      node.url = addValue;
+      this.close();
+    });
+  }
+
+  /**
+   * 新增一个节点
+   */
+  addOne() {
     const { currentAddFolder, addToTree, closeModal } = this.props;
     const path = currentAddFolder == null ? "" : currentAddFolder.path + "." + currentAddFolder.bookmarkId;
     if (this.state.addType === 2) {
@@ -40,7 +70,7 @@ export default class AddModal extends React.Component {
         closeModal();
       });
     }
-  };
+  }
 
   close = () => {
     const { closeModal } = this.props;
@@ -49,8 +79,9 @@ export default class AddModal extends React.Component {
   };
 
   render() {
-    const { isShowModal } = this.props;
+    const { isShowModal, currentEditNode } = this.props;
     const { addType, addName, addValue } = this.state;
+    const type = currentEditNode == null ? "add" : "edit";
     const formItemLayout = {
       labelCol: {
         xs: { span: 4 },
@@ -72,21 +103,23 @@ export default class AddModal extends React.Component {
       fileList: []
     };
     return (
-      <Modal destroyOnClose title="新增" visible={isShowModal} onCancel={this.close} footer={false}>
+      <Modal destroyOnClose title={type === "add" ? "新增" : "编辑"} visible={isShowModal} onCancel={this.close} footer={false}>
         <Form {...formItemLayout}>
-          <Form.Item label="类别">
+          {type === "add" ? (
-            <Radio.Group defaultValue={0} onChange={e => this.setState({ addType: e.target.value })}>
+            <Form.Item label="类别">
-              <Radio value={0}>书签</Radio>
+              <Radio.Group defaultValue={0} onChange={e => this.setState({ addType: e.target.value })}>
-              <Radio value={1}>文件夹</Radio>
+                <Radio value={0}>书签</Radio>
-              <Radio value={2}>上传书签html</Radio>
+                <Radio value={1}>文件夹</Radio>
-            </Radio.Group>
+                <Radio value={2}>上传书签html</Radio>
-          </Form.Item>
+              </Radio.Group>
-          {addType < 2 ? (
+            </Form.Item>
+          ) : null}
+          {addType < 2 || type === "edit" ? (
             <Form.Item label="名称">
               <Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} />
             </Form.Item>
           ) : null}
-          {addType === 0 ? (
+          {(addType === 0 && type === "add") || (type === "edit" && currentEditNode.type === 0) ? (
             <Form.Item label="URL">
               <Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} />
             </Form.Item>
@@ -100,7 +133,7 @@ export default class AddModal extends React.Component {
             </Upload>
           ) : null}
           <div style={{ textAlign: "center", paddingTop: "1em" }}>
-            <Button type="primary" onClick={this.addOne}>
+            <Button type="primary" onClick={this.submit}>
               提交
             </Button>
           </div>

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

@@ -1,6 +1,6 @@
 import httpUtil from "../../../util/httpUtil";
 import React from "react";
-import { Modal, Button, Tooltip, Tree } from "antd";
+import { Modal, Button, Tooltip, Tree, message } from "antd";
 import styles from "./index.module.less";
 import IconFont from "../../../components/IconFont";
 const { TreeNode } = Tree;
@@ -44,6 +44,16 @@ export function onCheck(keys, data) {
   });
 }
 
+/**
+ * 编辑一个节点
+ * @param {*} node 节点对象
+ * @param {*} e
+ */
+function editNode(node, e) {
+  e.stopPropagation();
+  this.setState({ isShowModal: true, currentEditNode: node });
+}
+
 /**
  * 渲染树节点中节点内容
  * @param {*} item
@@ -66,6 +76,7 @@ export function renderNodeContent(item) {
         />
       ) : null}
       {item.type === 1 ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.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>
   );
@@ -179,3 +190,77 @@ function deleteTreeData(treeData, set) {
     }
   }
 }
+
+export function onDragEnter(info) {
+  // console.log(info);
+}
+
+/**
+ * 节点拖拽
+ * @param {*} info
+ */
+export function onDrop(info) {
+  const { treeData } = this.state;
+  const target = info.node.props.dataRef;
+  if (!info.dropToGap && target.type === "0") {
+    message.error("只能移动到文件夹中");
+    return;
+  }
+  const current = info.dragNode.props.dataRef;
+  const body = {
+    bookmarkId: current.bookmarkId,
+    sourcePath: current.path,
+    targetPath: "",
+    //-1 表示排在最后
+    sort: -1
+  };
+  const currentBelowList = current.path === "" ? treeData : getBelowList(treeData, current);
+  currentBelowList.splice(currentBelowList.indexOf(current), 1);
+  if (info.dropToGap) {
+    body.targetPath = target.path;
+    const targetBelowList = target.path === "" ? treeData : getBelowList(treeData, target);
+    const index = targetBelowList.indexOf(target);
+    if (info.dropPosition > index) {
+      body.sort = target.sort + 1;
+      insertToArray(current, index + 1, targetBelowList);
+    } else {
+      body.sort = target.sort;
+      insertToArray(current, index, targetBelowList);
+    }
+    current.sort = body.sort;
+  } else {
+    body.targetPath = target.path + "." + target.bookmarkId;
+    if (target.children) {
+      target.children.push(current);
+    }
+  }
+  this.setState({ treeData: [...treeData] });
+}
+
+/**
+ * 获取node所属list
+ * @param {*} tree 树结构
+ * @param {*} node node
+ */
+function getBelowList(treeList, node) {
+  for (let i in treeList) {
+    let item = treeList[i];
+    if (item.type === 1) {
+      if (item.path + "." + item.bookmarkId === node.path) {
+        return item.children;
+      } else if (item.children) {
+        return getBelowList(item.children, node);
+      }
+    }
+  }
+}
+
+function insertToArray(item, index, arr) {
+  const length = arr.length;
+  let i = length;
+  for (; i > index; i--) {
+    arr[i] = arr[i - 1];
+    arr[i].sort++;
+  }
+  arr[i] = item;
+}

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

@@ -3,7 +3,7 @@ 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 } from "./function.js";
+import { batchDelete, renderTreeNodes, onExpand, closeAll, onCheck, onDragEnter, onDrop } from "./function.js";
 import AddModal from "./AddModal";
 
 export default class OverView extends React.Component {
@@ -15,9 +15,10 @@ export default class OverView extends React.Component {
       isLoading: true,
       checkedKeys: [],
       expandKeys: [],
-      //是否显示新增书签弹窗
+      //是否显示新增/编辑书签弹窗
       isShowModal: false,
-      currentAddFolder: null
+      currentAddFolder: null,
+      currentEditNode: null
     };
   }
 
@@ -53,7 +54,7 @@ export default class OverView extends React.Component {
    * @param {*} e
    */
   treeNodeSelect(key, e) {
-    if (e.nativeEvent.delegateTarget.name === "copy") {
+    if (e.nativeEvent.delegateTarget && e.nativeEvent.delegateTarget.name === "copy") {
       return;
     }
     const { expandKeys } = this.state;
@@ -81,6 +82,7 @@ export default class OverView extends React.Component {
         currentAddFolder.children.push(node);
         this.setState({ treeData: [...treeData] });
       }
+      this.setState({ currentAddFolder: null });
     }
   };
 
@@ -88,7 +90,7 @@ export default class OverView extends React.Component {
    * 关闭新增书签弹窗
    */
   closeAddModal = () => {
-    this.setState({ isShowModal: false });
+    this.setState({ isShowModal: false, currentAddFolder: null, currentEditNode: null });
   };
 
   /**
@@ -100,7 +102,7 @@ export default class OverView extends React.Component {
   };
 
   render() {
-    const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder } = this.state;
+    const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder, currentEditNode } = this.state;
     return (
       <MainLayout>
         <div className={styles.main}>
@@ -134,16 +136,23 @@ export default class OverView extends React.Component {
             expandedKeys={expandKeys}
             loadData={this.loadData}
             onExpand={onExpand.bind(this)}
-            defaultExpandParent
             checkable={isEdit}
             onSelect={this.treeNodeSelect.bind(this)}
-            onDoubleClick={this.copyUrl}
+            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} closeModal={this.closeAddModal} addToTree={this.addToTree} />
+          <AddModal
+            isShowModal={isShowModal}
+            currentAddFolder={currentAddFolder}
+            currentEditNode={currentEditNode}
+            closeModal={this.closeAddModal}
+            addToTree={this.addToTree}
+          />
         </div>
       </MainLayout>
     );

front/src/pages/public/RegisterOrReset/index.jsx

@@ -35,10 +35,10 @@ export default class Register extends React.Component {
     if (this.state.isCountDown) {
       return;
     }
+    let count = 60;
+    this.setState({ authCodeText: `${count}s后重试`, isCountDown: true });
     axios.get("/user/authCode?email=" + this.state.email).then(() => {
       message.success("发送成功，请注意查收（检查垃圾箱）");
-      let count = 60;
-      this.setState({ authCodeText: `${count}s后重试`, isCountDown: true });
       this.timer = setInterval(() => {
         count--;
         if (count === 0) {