✨ Feat: [前台]:书签树,增删查,点击复制链接完成

2019-07-15 18:21:19 +08:00 · 2019-07-15 18:21:19 +08:00 · f1b5836cd5
commit f1b5836cd5
parent 122124d7bb
9 changed files with 285 additions and 190 deletions
--- a/front/.gitignore
+++ b/front/.gitignore
@ -21,4 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.vscode
+.vscode
+yarn.lock
--- a/front/package.json
+++ b/front/package.json
@ -7,6 +7,7 @@
    "antd": "^3.19.8",
    "axios": "^0.19.0",
    "babel-plugin-import": "^1.12.0",
+    "clipboard": "^2.0.4",
    "customize-cra": "^0.2.14",
    "less": "^3.9.0",
    "query-string": "^6.8.1",
@ -42,4 +43,4 @@
  "devDependencies": {
    "less-loader": "^5.0.0"
  }
-}
+}
--- a/front/public/index.html
+++ b/front/public/index.html
@ -19,7 +19,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>签签世界</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@ -34,5 +34,6 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
+    <script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
  </body>
 </html>
--- a/front/src/App.jsx
+++ b/front/src/App.jsx
@ -1,7 +1,9 @@
 import React, { Component } from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
+import { message } from "antd";
 import { withRouter } from "react-router-dom";
 import { Provider } from "react-redux";
+import Clipboard from "clipboard";
 import store from "./redux";
 import NotFound from "./pages/public/notFound/NotFound";

@ -17,6 +19,15 @@ class App extends Component {
    window.reactHistory = this.props.history;
  }

+  componentDidMount() {
+    //初始化clipboard
+    let clipboard = new Clipboard(".copy-to-board");
+    clipboard.on("success", function(e) {
+      message.success("复制成功");
+      e.clearSelection();
+    });
+  }
+
  render() {
    const mainStyle = {
      fontSize: "0.14rem"
--- a/front/src/pages/manage/OverView/AddModal.jsx
+++ b/front/src/pages/manage/OverView/AddModal.jsx
@ -0,0 +1,111 @@
+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 {
+  constructor(props) {
+    super(props);
+    this.state = {
+      addType: 0,
+      addName: "",
+      addValue: "",
+      file: null
+    };
+  }
+
+  addOne = () => {
+    const { currentAddFolder, addToTree, closeModal } = this.props;
+    const path = currentAddFolder == null ? "" : currentAddFolder.path + "." + currentAddFolder.bookmarkId;
+    if (this.state.addType === 2) {
+      const form = new FormData();
+      form.append("path", path);
+      form.append("file", this.state.file.originFileObj);
+      httpUtil
+        .put("/bookmark/uploadBookmarkFile", form, {
+          headers: { "Content-Type": "multipart/form-data" }
+        })
+        .then(res => {
+          window.location.reload();
+        });
+    } else {
+      let body = {
+        type: this.state.addType,
+        path,
+        name: this.state.addName,
+        url: this.state.addValue
+      };
+      httpUtil.put("/bookmark", body).then(res => {
+        addToTree(res);
+        message.success("加入成功");
+        closeModal();
+      });
+    }
+  };
+
+  close = () => {
+    const { closeModal } = this.props;
+    this.setState({ file: null, addType: 0, addValue: "", addName: "" });
+    closeModal();
+  };
+
+  render() {
+    const { isShowModal } = this.props;
+    const { addType, addName, addValue } = this.state;
+    const formItemLayout = {
+      labelCol: {
+        xs: { span: 4 },
+        sm: { span: 4 }
+      },
+      wrapperCol: {
+        xs: { span: 20 },
+        sm: { span: 20 }
+      }
+    };
+    const uploadProps = {
+      accept: ".html,.htm",
+      onChange: e => {
+        this.setState({ file: e.fileList[0] });
+      },
+      beforeUpload: file => {
+        return false;
+      },
+      fileList: []
+    };
+    return (
+      <Modal destroyOnClose title="新增" visible={isShowModal} onCancel={this.close} footer={false}>
+        <Form {...formItemLayout}>
+          <Form.Item label="类别">
+            <Radio.Group defaultValue={0} onChange={e => this.setState({ addType: e.target.value })}>
+              <Radio value={0}>书签</Radio>
+              <Radio value={1}>文件夹</Radio>
+              <Radio value={2}>上传书签html</Radio>
+            </Radio.Group>
+          </Form.Item>
+          {addType < 2 ? (
+            <Form.Item label="名称">
+              <Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} />
+            </Form.Item>
+          ) : null}
+          {addType === 0 ? (
+            <Form.Item label="URL">
+              <Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} />
+            </Form.Item>
+          ) : null}
+          {addType === 2 ? (
+            <Upload {...uploadProps}>
+              <Button type="primary">
+                <Icon type="upload" />
+                {this.state.file == null ? "选择文件" : this.state.file.name.substr(0, 20)}
+              </Button>
+            </Upload>
+          ) : null}
+          <div style={{ textAlign: "center", paddingTop: "1em" }}>
+            <Button type="primary" onClick={this.addOne}>
+              提交
+            </Button>
+          </div>
+        </Form>
+      </Modal>
+    );
+  }
+}
--- a/front/src/pages/manage/OverView/function.js
+++ b/front/src/pages/manage/OverView/function.js
@ -1,5 +1,9 @@
 import httpUtil from "../../../util/httpUtil";
-import { Modal, message } from "antd";
+import React from "react";
+import { Modal, Button, Tooltip, Tree } from "antd";
+import styles from "./index.module.less";
+import IconFont from "../../../components/IconFont";
+const { TreeNode } = Tree;

 /**
 * 选中的文件夹id列表
@ -10,11 +14,6 @@ let folderIdList = [];
 */
 let bookmarkIdList = [];

-/**
- * 新增书签的父节点node
- */
-let parentNode = null;
-
 /**
 * 展开/关闭
 * @param {*} keys
@ -39,71 +38,108 @@ export function onCheck(keys, data) {
  this.setState({ checkedKeys: keys });
  bookmarkIdList = [];
  folderIdList = [];
-  parentNode = null;
  data.checkedNodes.forEach(item => {
    const bookmark = item.props.dataRef;
-    parentNode = bookmark;
    bookmark.type === 0 ? bookmarkIdList.push(bookmark.bookmarkId) : folderIdList.push(bookmark.bookmarkId);
  });
 }

 /**
- * 弹出新增modal
+ * 渲染树节点中节点内容
+ * @param {*} item
 */
-export function showAddModel() {
-  if (this.state.checkedKeys.length > 1) {
-    message.error("选中过多");
-    return;
-  } else if (this.state.checkedKeys.length === 1) {
-    const id = this.state.checkedKeys[0];
-    if (bookmarkIdList.indexOf(parseInt(id)) > -1) {
-      message.error("只能选择文件夹节点");
-      return;
-    }
-  }
-  this.setState({ isShowModal: true });
+export function renderNodeContent(item) {
+  const { isEdit } = this.state;
+  // 节点内容后面的操作按钮
+  const btns = (
+    <div className={styles.btns}>
+      {item.type === 0 ? (
+        <Button
+          size="small"
+          className="copy-to-board"
+          data-clipboard-text={item.url}
+          type="primary"
+          name="copy"
+          icon="copy"
+          shape="circle"
+          title="点击复制url"
+        />
+      ) : null}
+      {item.type === 1 ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, item)} /> : null}
+      <Button size="small" type="danger" icon="delete" shape="circle" onClick={deleteOne.bind(this, item)} />
+    </div>
+  );
+  return (
+    <span style={{ display: "inline-block" }}>
+      <Tooltip placement="bottom" title={item.url}>
+        <span>{item.name}</span>
+      </Tooltip>
+      {isEdit ? btns : null}
+    </span>
+  );
 }

 /**
- * 新增书签
+ * 渲染树节点
+ * @param {*} items
 */
-export function addOne() {
-  console.log(1);
-  if (this.state.addType === 2) {
-    addHtmlFile();
-    return;
+export function renderTreeNodes(items) {
+  if (!(items && items.length >= 0)) {
+    return null;
  }
-  let body = {
-    type: this.state.addType,
-    path: parentNode == null ? "" : parentNode.path + "." + parentNode.bookmarkId,
-    name: this.state.addName,
-    url: this.state.addValue
-  };
-  httpUtil.put("/bookmark", body).then(res => {
-    let arr;
-    if (parentNode == null) {
-      arr = this.data[""] ? this.data[""] : [];
-    } else {
-      arr = this.data[body.path] ? this.data[body.path] : [];
+  return items.map(item => {
+    const isLeaf = item.type === 0;
+    if (!isLeaf) {
+      return (
+        <TreeNode
+          icon={<IconFont type="icon-folder" />}
+          isLeaf={isLeaf}
+          title={renderNodeContent.call(this, item)}
+          key={item.bookmarkId}
+          dataRef={item}
+        >
+          {renderTreeNodes.call(this, item.children)}
+        </TreeNode>
+      );
    }
-    arr.push(res);
-    if (this.state.treeData.length === 0) {
-      this.state.treeData.push(arr);
-    }
-    this.data[body.path] = arr;
-    this.setState({ treeData: [...this.state.treeData], addType: 0, addName: "", addValue: "", isShowModal: false });
+    return (
+      <TreeNode
+        icon={<IconFont type="icon-bookmark" />}
+        isLeaf={isLeaf}
+        title={renderNodeContent.call(this, item)}
+        key={item.bookmarkId}
+        dataRef={item}
+      />
+    );
  });
 }

-export function addHtmlFile() {
-  
+/**
+ * 删除一个
+ * @param {*} e
+ */
+export function deleteOne(item, e) {
+  e.stopPropagation();
+  if (item.type === 0) {
+    deleteBookmark.call(this, [], [item.bookmarkId]);
+  } else {
+    deleteBookmark.call(this, [item.bookmarkId], []);
+  }
 }

 /**
 * 批量删除
 */
 export function batchDelete() {
-  console.log("1");
+  deleteBookmark.call(this, folderIdList, bookmarkIdList);
+}
+
+/**
+ * 删除书签
+ * @param {*} folderIdList
+ * @param {*} bookmarkIdList
+ */
+function deleteBookmark(folderIdList, bookmarkIdList) {
  const _this = this;
  Modal.confirm({
    title: "确认删除？",
@ -115,8 +151,8 @@ export function batchDelete() {
          .then(() => {
            //遍历节点树数据，并删除
            const set = new Set();
-            folderIdList.forEach(item => set.add(item));
-            bookmarkIdList.forEach(item => set.add(item));
+            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: [] });
            resolve();
--- a/front/src/pages/manage/OverView/index.jsx
+++ b/front/src/pages/manage/OverView/index.jsx
@ -1,12 +1,10 @@
 import React from "react";
-import { Icon, Tree, Empty, Button, Tooltip, Modal, Form, Input, Radio, Upload } from "antd";
+import { Tree, Empty, Button } from "antd";
 import MainLayout from "../../../layout/MainLayout";
 import httpUtil from "../../../util/httpUtil";
-import IconFont from "../../../components/IconFont";
 import styles from "./index.module.less";
-import { batchDelete, onExpand, closeAll, onCheck, addOne, showAddModel } from "./function.js";
-
-const { TreeNode } = Tree;
+import { batchDelete, renderTreeNodes, onExpand, closeAll, onCheck } from "./function.js";
+import AddModal from "./AddModal";

 export default class OverView extends React.Component {
  constructor(props) {
@ -17,131 +15,99 @@ export default class OverView extends React.Component {
      isLoading: true,
      checkedKeys: [],
      expandKeys: [],
-      //显示新增弹窗
+      //是否显示新增书签弹窗
      isShowModal: false,
-      //新增类别
-      addType: 0,
-      addName: "",
-      addValue: "",
-      file: null
+      currentAddFolder: null
    };
  }

+  /**
+   * 初始化第一级书签
+   */
  componentDidMount() {
    httpUtil
-      .get("/bookmark/currentUser")
+      .get("/bookmark/currentUser/path?path=")
      .then(res => {
-        this.data = res;
-        if (res[""]) {
-          this.setState({ treeData: res[""] });
-        }
-        this.setState({ isLoading: false });
+        this.setState({ treeData: res, isLoading: false });
      })
      .catch(() => this.setState({ isLoading: false }));
  }

+  /**
+   * 异步加载
+   */
  loadData = e =>
    new Promise(resolve => {
      const item = e.props.dataRef;
      const newPath = item.path + "." + item.bookmarkId;
-      if (this.data[newPath]) {
-        item.children = this.data[newPath];
+      httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => {
+        item.children = res;
        this.setState({ treeData: [...this.state.treeData] });
        resolve();
-      } else {
-        resolve();
-      }
+      });
    });

+  /**
+   * 节点选择
+   * @param {*} key
+   * @param {*} e
+   */
  treeNodeSelect(key, e) {
+    if (e.nativeEvent.delegateTarget.name === "copy") {
+      return;
+    }
    const { expandKeys } = this.state;
    const item = e.node.props.dataRef;
    if (item.type === 0) {
      window.open(item.url);
    } else {
-      expandKeys.push(item.bookmarkId);
+      const id = item.bookmarkId.toString();
+      const index = expandKeys.indexOf(id);
+      index === -1 ? expandKeys.push(id) : expandKeys.splice(index, 1);
+      this.setState({ expandKeys: [...expandKeys] });
    }
  }

  /**
-   * 渲染树节点中节点内容
-   * @param {*} item
+   * 将新增的数据加入到state中
   */
-  renderNodeContent(item) {
-    // const { isEdit } = this.state;
-    // const bts = (
-    //   <div className={styles.btns}>
-    //     <Button size="small" type="primary" name="copy" icon="copy" shape="circle" />
-    //     <Button size="small" type="danger" id={item.bookmarkId} icon="delete" shape="circle" onClick={this.deleteOne} />
-    //   </div>
-    // );
-    return (
-      <React.Fragment>
-        <Tooltip placement="bottom" title={item.url}>
-          <span>{item.name}</span>
-        </Tooltip>
-        {/* {isEdit ? bts : null} */}
-      </React.Fragment>
-    );
-  }
-
-  /**
-   * 渲染树节点
-   * @param {*} items
-   */
-  renderTreeNodes(items) {
-    if (!(items && items.length >= 0)) {
-      return null;
-    }
-    return items.map(item => {
-      const isLeaf = item.type === 0;
-      if (!isLeaf) {
-        return (
-          <TreeNode icon={<IconFont type="icon-folder" />} isLeaf={isLeaf} title={item.name} key={item.bookmarkId} dataRef={item}>
-            {this.renderTreeNodes(item.children)}
-          </TreeNode>
-        );
+  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] });
      }
-      return (
-        <TreeNode
-          icon={<IconFont type="icon-bookmark" />}
-          isLeaf={isLeaf}
-          title={this.renderNodeContent(item)}
-          key={item.bookmarkId}
-          dataRef={item}
-        />
-      );
-    });
-  }
+    }
+  };
+
+  /**
+   * 关闭新增书签弹窗
+   */
+  closeAddModal = () => {
+    this.setState({ isShowModal: false });
+  };
+
+  /**
+   * 新增书签
+   */
+  addOne = (item, e) => {
+    e.stopPropagation();
+    this.setState({ currentAddFolder: item, isShowModal: true });
+  };

  render() {
-    const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, addType, addValue, addName } = this.state;
-    const formItemLayout = {
-      labelCol: {
-        xs: { span: 4 },
-        sm: { span: 4 }
-      },
-      wrapperCol: {
-        xs: { span: 20 },
-        sm: { span: 20 }
-      }
-    };
-    const uploadProps = {
-      accept: ".html,.htm",
-      onChange: e => {
-        this.setState({ file: e.fileList[0] });
-      },
-      beforeUpload: file => {
-        return false;
-      },
-      fileList: []
-    };
+    const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder } = this.state;
    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)}>
                  收起
@ -154,9 +120,6 @@ export default class OverView extends React.Component {
                  <Button size="small" type="danger" onClick={batchDelete.bind(this)}>
                    删除选中
                  </Button>
-                  <Button size="small" type="primary" onClick={showAddModel.bind(this)}>
-                    新增
-                  </Button>
                </React.Fragment>
              ) : null}
              <Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}>
@ -164,7 +127,6 @@ export default class OverView extends React.Component {
              </Button>
            </div>
          </div>
-          {/* {treeData.length ? ( */}
          <Tree
            showIcon
            checkedKeys={checkedKeys}
@ -174,49 +136,14 @@ export default class OverView extends React.Component {
            onExpand={onExpand.bind(this)}
            defaultExpandParent
            checkable={isEdit}
-            onSelect={this.treeNodeSelect}
+            onSelect={this.treeNodeSelect.bind(this)}
            onDoubleClick={this.copyUrl}
            blockNode
          >
-            {this.renderTreeNodes(treeData)}
+            {renderTreeNodes.call(this, treeData)}
          </Tree>
-          {/* ) : null} */}
          {isLoading === false && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
-
-          <Modal destroyOnClose title="新增" visible={isShowModal} onCancel={() => this.setState({ isShowModal: false })} footer={false}>
-            <Form {...formItemLayout}>
-              <Form.Item label="类别">
-                <Radio.Group defaultValue={0} onChange={e => this.setState({ addType: e.target.value })}>
-                  <Radio value={0}>书签</Radio>
-                  <Radio value={1}>文件夹</Radio>
-                  <Radio value={2}>上传书签html</Radio>
-                </Radio.Group>
-              </Form.Item>
-              {addType < 2 ? (
-                <Form.Item label="名称">
-                  <Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} />
-                </Form.Item>
-              ) : null}
-              {addType === 0 ? (
-                <Form.Item label="URL">
-                  <Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} />
-                </Form.Item>
-              ) : null}
-              {addType === 2 ? (
-                <Upload {...uploadProps}>
-                  <Button type="primary">
-                    <Icon type="upload" />
-                    {this.state.file == null ? "选择文件" : this.state.file.name.substr(0, 20)}
-                  </Button>
-                </Upload>
-              ) : null}
-              <div style={{ textAlign: "center", paddingTop: "1em" }}>
-                <Button type="primary" onClick={addOne.bind(this)}>
-                  提交
-                </Button>
-              </div>
-            </Form>
-          </Modal>
+          <AddModal isShowModal={isShowModal} currentAddFolder={currentAddFolder} closeModal={this.closeAddModal} addToTree={this.addToTree} />
        </div>
      </MainLayout>
    );
--- a/front/src/pages/manage/OverView/index.module.less
+++ b/front/src/pages/manage/OverView/index.module.less
@ -28,7 +28,10 @@

  .btns {
    display: inline-block;
-    position: relative;
-    top: -0.45em;
+    padding-left: 1em;
+  }
+
+  .btns > button {
+    margin-right: 0.4em;
  }
 }
--- a/front/src/pages/public/Login/index.jsx
+++ b/front/src/pages/public/Login/index.jsx
@ -31,7 +31,11 @@ class Login extends Component {
  }

  valueChange = e => {
-    this.setState({ [e.target.name]: e.target.value });
+    if (e.target.name === "rememberMe") {
+      this.setState({ rememberMe: e.target.checked });
+    } else {
+      this.setState({ [e.target.name]: e.target.value });
+    }
  };

  submit = () => {
@ -81,7 +85,7 @@ class Login extends Component {
            placeholder="密码"
          />
          <div className={styles.action}>
-            <Checkbox value={rememberMe} name="rememberMe" onChange={this.valueChange}>
+            <Checkbox checked={rememberMe} name="rememberMe" onChange={this.valueChange}>
              记住我
            </Checkbox>
            <Link to="/public/resetPassword">忘记密码</Link>