✨ Feat: [前台]:完成编辑功能。拖拽功能部分完成
This commit is contained in:
parent
4699c5a509
commit
7e491ab10e
@ -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 { currentAddFolder, addToTree, closeModal } = this.props;
|
||||||
const path = currentAddFolder == null ? "" : currentAddFolder.path + "." + currentAddFolder.bookmarkId;
|
const path = currentAddFolder == null ? "" : currentAddFolder.path + "." + currentAddFolder.bookmarkId;
|
||||||
if (this.state.addType === 2) {
|
if (this.state.addType === 2) {
|
||||||
@ -40,7 +70,7 @@ export default class AddModal extends React.Component {
|
|||||||
closeModal();
|
closeModal();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
close = () => {
|
close = () => {
|
||||||
const { closeModal } = this.props;
|
const { closeModal } = this.props;
|
||||||
@ -49,8 +79,9 @@ export default class AddModal extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isShowModal } = this.props;
|
const { isShowModal, currentEditNode } = this.props;
|
||||||
const { addType, addName, addValue } = this.state;
|
const { addType, addName, addValue } = this.state;
|
||||||
|
const type = currentEditNode == null ? "add" : "edit";
|
||||||
const formItemLayout = {
|
const formItemLayout = {
|
||||||
labelCol: {
|
labelCol: {
|
||||||
xs: { span: 4 },
|
xs: { span: 4 },
|
||||||
@ -72,21 +103,23 @@ export default class AddModal extends React.Component {
|
|||||||
fileList: []
|
fileList: []
|
||||||
};
|
};
|
||||||
return (
|
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 {...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="名称">
|
<Form.Item label="名称">
|
||||||
<Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} />
|
<Input type="text" onChange={e => this.setState({ addName: e.target.value })} value={addName} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
) : null}
|
) : null}
|
||||||
{addType === 0 ? (
|
{(addType === 0 && type === "add") || (type === "edit" && currentEditNode.type === 0) ? (
|
||||||
<Form.Item label="URL">
|
<Form.Item label="URL">
|
||||||
<Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} />
|
<Input type="text" value={addValue} onChange={e => this.setState({ addValue: e.target.value })} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
@ -100,7 +133,7 @@ export default class AddModal extends React.Component {
|
|||||||
</Upload>
|
</Upload>
|
||||||
) : null}
|
) : null}
|
||||||
<div style={{ textAlign: "center", paddingTop: "1em" }}>
|
<div style={{ textAlign: "center", paddingTop: "1em" }}>
|
||||||
<Button type="primary" onClick={this.addOne}>
|
<Button type="primary" onClick={this.submit}>
|
||||||
提交
|
提交
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import httpUtil from "../../../util/httpUtil";
|
import httpUtil from "../../../util/httpUtil";
|
||||||
import React from "react";
|
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 styles from "./index.module.less";
|
||||||
import IconFont from "../../../components/IconFont";
|
import IconFont from "../../../components/IconFont";
|
||||||
const { TreeNode } = Tree;
|
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
|
* @param {*} item
|
||||||
@ -66,6 +76,7 @@ export function renderNodeContent(item) {
|
|||||||
/>
|
/>
|
||||||
) : null}
|
) : 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={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)} />
|
<Button size="small" type="danger" icon="delete" shape="circle" onClick={deleteOne.bind(this, item)} />
|
||||||
</div>
|
</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;
|
||||||
|
}
|
||||||
|
@ -1,151 +1,160 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Tree, Empty, Button } from "antd";
|
import { Tree, Empty, Button } from "antd";
|
||||||
import MainLayout from "../../../layout/MainLayout";
|
import MainLayout from "../../../layout/MainLayout";
|
||||||
import httpUtil from "../../../util/httpUtil";
|
import httpUtil from "../../../util/httpUtil";
|
||||||
import styles from "./index.module.less";
|
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";
|
import AddModal from "./AddModal";
|
||||||
|
|
||||||
export default class OverView extends React.Component {
|
export default class OverView extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
treeData: [],
|
treeData: [],
|
||||||
isEdit: false,
|
isEdit: false,
|
||||||
isLoading: true,
|
isLoading: true,
|
||||||
checkedKeys: [],
|
checkedKeys: [],
|
||||||
expandKeys: [],
|
expandKeys: [],
|
||||||
//是否显示新增书签弹窗
|
//是否显示新增/编辑书签弹窗
|
||||||
isShowModal: false,
|
isShowModal: false,
|
||||||
currentAddFolder: null
|
currentAddFolder: null,
|
||||||
};
|
currentEditNode: null
|
||||||
}
|
};
|
||||||
|
}
|
||||||
/**
|
|
||||||
* 初始化第一级书签
|
/**
|
||||||
*/
|
* 初始化第一级书签
|
||||||
componentDidMount() {
|
*/
|
||||||
httpUtil
|
componentDidMount() {
|
||||||
.get("/bookmark/currentUser/path?path=")
|
httpUtil
|
||||||
.then(res => {
|
.get("/bookmark/currentUser/path?path=")
|
||||||
this.setState({ treeData: res, isLoading: false });
|
.then(res => {
|
||||||
})
|
this.setState({ treeData: res, isLoading: false });
|
||||||
.catch(() => this.setState({ isLoading: false }));
|
})
|
||||||
}
|
.catch(() => this.setState({ isLoading: false }));
|
||||||
|
}
|
||||||
/**
|
|
||||||
* 异步加载
|
/**
|
||||||
*/
|
* 异步加载
|
||||||
loadData = e =>
|
*/
|
||||||
new Promise(resolve => {
|
loadData = e =>
|
||||||
const item = e.props.dataRef;
|
new Promise(resolve => {
|
||||||
const newPath = item.path + "." + item.bookmarkId;
|
const item = e.props.dataRef;
|
||||||
httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => {
|
const newPath = item.path + "." + item.bookmarkId;
|
||||||
item.children = res;
|
httpUtil.get("/bookmark/currentUser/path?path=" + newPath).then(res => {
|
||||||
this.setState({ treeData: [...this.state.treeData] });
|
item.children = res;
|
||||||
resolve();
|
this.setState({ treeData: [...this.state.treeData] });
|
||||||
});
|
resolve();
|
||||||
});
|
});
|
||||||
|
});
|
||||||
/**
|
|
||||||
* 节点选择
|
/**
|
||||||
* @param {*} key
|
* 节点选择
|
||||||
* @param {*} e
|
* @param {*} key
|
||||||
*/
|
* @param {*} e
|
||||||
treeNodeSelect(key, e) {
|
*/
|
||||||
if (e.nativeEvent.delegateTarget.name === "copy") {
|
treeNodeSelect(key, e) {
|
||||||
return;
|
if (e.nativeEvent.delegateTarget && e.nativeEvent.delegateTarget.name === "copy") {
|
||||||
}
|
return;
|
||||||
const { expandKeys } = this.state;
|
}
|
||||||
const item = e.node.props.dataRef;
|
const { expandKeys } = this.state;
|
||||||
if (item.type === 0) {
|
const item = e.node.props.dataRef;
|
||||||
window.open(item.url);
|
if (item.type === 0) {
|
||||||
} else {
|
window.open(item.url);
|
||||||
const id = item.bookmarkId.toString();
|
} else {
|
||||||
const index = expandKeys.indexOf(id);
|
const id = item.bookmarkId.toString();
|
||||||
index === -1 ? expandKeys.push(id) : expandKeys.splice(index, 1);
|
const index = expandKeys.indexOf(id);
|
||||||
this.setState({ expandKeys: [...expandKeys] });
|
index === -1 ? expandKeys.push(id) : expandKeys.splice(index, 1);
|
||||||
}
|
this.setState({ expandKeys: [...expandKeys] });
|
||||||
}
|
}
|
||||||
|
}
|
||||||
/**
|
|
||||||
* 将新增的数据加入到state中
|
/**
|
||||||
*/
|
* 将新增的数据加入到state中
|
||||||
addToTree = node => {
|
*/
|
||||||
const { currentAddFolder, treeData } = this.state;
|
addToTree = node => {
|
||||||
if (currentAddFolder === null) {
|
const { currentAddFolder, treeData } = this.state;
|
||||||
treeData.push(node);
|
if (currentAddFolder === null) {
|
||||||
} else {
|
treeData.push(node);
|
||||||
//存在children说明该子节点的孩子数据已经加载,需要重新将新的子书签加入进去
|
} else {
|
||||||
if (currentAddFolder.children) {
|
//存在children说明该子节点的孩子数据已经加载,需要重新将新的子书签加入进去
|
||||||
currentAddFolder.children.push(node);
|
if (currentAddFolder.children) {
|
||||||
this.setState({ treeData: [...treeData] });
|
currentAddFolder.children.push(node);
|
||||||
}
|
this.setState({ treeData: [...treeData] });
|
||||||
}
|
}
|
||||||
};
|
this.setState({ currentAddFolder: null });
|
||||||
|
}
|
||||||
/**
|
};
|
||||||
* 关闭新增书签弹窗
|
|
||||||
*/
|
/**
|
||||||
closeAddModal = () => {
|
* 关闭新增书签弹窗
|
||||||
this.setState({ isShowModal: false });
|
*/
|
||||||
};
|
closeAddModal = () => {
|
||||||
|
this.setState({ isShowModal: false, currentAddFolder: null, currentEditNode: null });
|
||||||
/**
|
};
|
||||||
* 新增书签
|
|
||||||
*/
|
/**
|
||||||
addOne = (item, e) => {
|
* 新增书签
|
||||||
e.stopPropagation();
|
*/
|
||||||
this.setState({ currentAddFolder: item, isShowModal: true });
|
addOne = (item, e) => {
|
||||||
};
|
e.stopPropagation();
|
||||||
|
this.setState({ currentAddFolder: item, isShowModal: true });
|
||||||
render() {
|
};
|
||||||
const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder } = this.state;
|
|
||||||
return (
|
render() {
|
||||||
<MainLayout>
|
const { isLoading, isEdit, treeData, expandKeys, checkedKeys, isShowModal, currentAddFolder, currentEditNode } = this.state;
|
||||||
<div className={styles.main}>
|
return (
|
||||||
<div className={styles.header}>
|
<MainLayout>
|
||||||
<div className={styles.left}>
|
<div className={styles.main}>
|
||||||
<span className={styles.myTree}>我的书签树</span>
|
<div className={styles.header}>
|
||||||
{isEdit ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, null)} /> : null}
|
<div className={styles.left}>
|
||||||
{expandKeys.length > 0 ? (
|
<span className={styles.myTree}>我的书签树</span>
|
||||||
<Button type="primary" size="small" onClick={closeAll.bind(this)}>
|
{isEdit ? <Button size="small" type="primary" icon="plus" shape="circle" onClick={this.addOne.bind(this, null)} /> : null}
|
||||||
收起
|
{expandKeys.length > 0 ? (
|
||||||
</Button>
|
<Button type="primary" size="small" onClick={closeAll.bind(this)}>
|
||||||
) : null}
|
收起
|
||||||
</div>
|
</Button>
|
||||||
<div className={styles.right}>
|
) : null}
|
||||||
{isEdit ? (
|
</div>
|
||||||
<React.Fragment>
|
<div className={styles.right}>
|
||||||
<Button size="small" type="danger" onClick={batchDelete.bind(this)}>
|
{isEdit ? (
|
||||||
删除选中
|
<React.Fragment>
|
||||||
</Button>
|
<Button size="small" type="danger" onClick={batchDelete.bind(this)}>
|
||||||
</React.Fragment>
|
删除选中
|
||||||
) : null}
|
</Button>
|
||||||
<Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}>
|
</React.Fragment>
|
||||||
{isEdit ? "完成" : "编辑"}
|
) : null}
|
||||||
</Button>
|
<Button size="small" type="primary" onClick={() => this.setState({ isEdit: !isEdit })}>
|
||||||
</div>
|
{isEdit ? "完成" : "编辑"}
|
||||||
</div>
|
</Button>
|
||||||
<Tree
|
</div>
|
||||||
showIcon
|
</div>
|
||||||
checkedKeys={checkedKeys}
|
<Tree
|
||||||
onCheck={onCheck.bind(this)}
|
showIcon
|
||||||
expandedKeys={expandKeys}
|
checkedKeys={checkedKeys}
|
||||||
loadData={this.loadData}
|
onCheck={onCheck.bind(this)}
|
||||||
onExpand={onExpand.bind(this)}
|
expandedKeys={expandKeys}
|
||||||
defaultExpandParent
|
loadData={this.loadData}
|
||||||
checkable={isEdit}
|
onExpand={onExpand.bind(this)}
|
||||||
onSelect={this.treeNodeSelect.bind(this)}
|
checkable={isEdit}
|
||||||
onDoubleClick={this.copyUrl}
|
onSelect={this.treeNodeSelect.bind(this)}
|
||||||
blockNode
|
draggable
|
||||||
>
|
onDragEnter={onDragEnter.bind(this)}
|
||||||
{renderTreeNodes.call(this, treeData)}
|
onDrop={onDrop.bind(this)}
|
||||||
</Tree>
|
blockNode
|
||||||
{isLoading === false && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
|
>
|
||||||
<AddModal isShowModal={isShowModal} currentAddFolder={currentAddFolder} closeModal={this.closeAddModal} addToTree={this.addToTree} />
|
{renderTreeNodes.call(this, treeData)}
|
||||||
</div>
|
</Tree>
|
||||||
</MainLayout>
|
{isLoading === false && treeData.length === 0 ? <Empty description="还没有数据" /> : null}
|
||||||
);
|
<AddModal
|
||||||
}
|
isShowModal={isShowModal}
|
||||||
}
|
currentAddFolder={currentAddFolder}
|
||||||
|
currentEditNode={currentEditNode}
|
||||||
|
closeModal={this.closeAddModal}
|
||||||
|
addToTree={this.addToTree}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</MainLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,153 +1,153 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import IconFont from "../../../components/IconFont";
|
import IconFont from "../../../components/IconFont";
|
||||||
import { Button, Input, message } from "antd";
|
import { Button, Input, message } from "antd";
|
||||||
import { LoginLayout, REGISTER_TYPE, RESET_PASSWORD_TYPE } from "../../../layout/LoginLayout";
|
import { LoginLayout, REGISTER_TYPE, RESET_PASSWORD_TYPE } from "../../../layout/LoginLayout";
|
||||||
import styles from "./index.module.less";
|
import styles from "./index.module.less";
|
||||||
import axios from "../../../util/httpUtil";
|
import axios from "../../../util/httpUtil";
|
||||||
|
|
||||||
export default class Register extends React.Component {
|
export default class Register extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
console.log(props);
|
console.log(props);
|
||||||
let type = props.location.pathname.split("/").reverse()[0];
|
let type = props.location.pathname.split("/").reverse()[0];
|
||||||
this.state = {
|
this.state = {
|
||||||
current: type === "register" ? REGISTER_TYPE : RESET_PASSWORD_TYPE,
|
current: type === "register" ? REGISTER_TYPE : RESET_PASSWORD_TYPE,
|
||||||
username: "",
|
username: "",
|
||||||
email: "",
|
email: "",
|
||||||
password: "",
|
password: "",
|
||||||
repassword: "",
|
repassword: "",
|
||||||
authCode: "",
|
authCode: "",
|
||||||
authCodeText: "获取验证码",
|
authCodeText: "获取验证码",
|
||||||
isCountDown: false
|
isCountDown: false
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
if (this.timer != null) {
|
if (this.timer != null) {
|
||||||
clearInterval(this.timer);
|
clearInterval(this.timer);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取验证码
|
* 获取验证码
|
||||||
*/
|
*/
|
||||||
getCode = () => {
|
getCode = () => {
|
||||||
if (this.state.isCountDown) {
|
if (this.state.isCountDown) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
axios.get("/user/authCode?email=" + this.state.email).then(() => {
|
let count = 60;
|
||||||
message.success("发送成功,请注意查收(检查垃圾箱)");
|
this.setState({ authCodeText: `${count}s后重试`, isCountDown: true });
|
||||||
let count = 60;
|
axios.get("/user/authCode?email=" + this.state.email).then(() => {
|
||||||
this.setState({ authCodeText: `${count}s后重试`, isCountDown: true });
|
message.success("发送成功,请注意查收(检查垃圾箱)");
|
||||||
this.timer = setInterval(() => {
|
this.timer = setInterval(() => {
|
||||||
count--;
|
count--;
|
||||||
if (count === 0) {
|
if (count === 0) {
|
||||||
this.setState({ isCountDown: false, authCodeText: "获取验证码" });
|
this.setState({ isCountDown: false, authCodeText: "获取验证码" });
|
||||||
clearInterval(this.timer);
|
clearInterval(this.timer);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.setState({ authCodeText: `${count}s后重试` });
|
this.setState({ authCodeText: `${count}s后重试` });
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
changeData = e => {
|
changeData = e => {
|
||||||
this.setState({ [e.target.name]: e.target.value });
|
this.setState({ [e.target.name]: e.target.value });
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 提交表单
|
* 提交表单
|
||||||
*/
|
*/
|
||||||
submit = () => {
|
submit = () => {
|
||||||
const { current, username, email, password, repassword, authCode } = this.state;
|
const { current, username, email, password, repassword, authCode } = this.state;
|
||||||
if (password !== repassword) {
|
if (password !== repassword) {
|
||||||
message.error("两次密码不一致");
|
message.error("两次密码不一致");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let form = { username, email, password, authCode };
|
let form = { username, email, password, authCode };
|
||||||
if (current === REGISTER_TYPE) {
|
if (current === REGISTER_TYPE) {
|
||||||
axios
|
axios
|
||||||
.put("/user", form)
|
.put("/user", form)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
message.success("注册成功");
|
message.success("注册成功");
|
||||||
setTimeout(() => this.props.history.replace("/public/login"), 500);
|
setTimeout(() => this.props.history.replace("/public/login"), 500);
|
||||||
})
|
})
|
||||||
.catch(error => message.error(error));
|
.catch(error => message.error(error));
|
||||||
} else {
|
} else {
|
||||||
delete form.username;
|
delete form.username;
|
||||||
axios
|
axios
|
||||||
.post("/user/resetPassword", form)
|
.post("/user/resetPassword", form)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
message.success("操作成功");
|
message.success("操作成功");
|
||||||
console.log(this.location);
|
console.log(this.location);
|
||||||
setTimeout(() => this.props.history.replace("/public/login"), 500);
|
setTimeout(() => this.props.history.replace("/public/login"), 500);
|
||||||
})
|
})
|
||||||
.catch(error => message.error(error));
|
.catch(error => message.error(error));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { current, username, email, password, repassword, authCode, authCodeText, isCountDown } = this.state;
|
const { current, username, email, password, repassword, authCode, authCodeText, isCountDown } = this.state;
|
||||||
return (
|
return (
|
||||||
<LoginLayout type={current}>
|
<LoginLayout type={current}>
|
||||||
<div className={styles.main}>
|
<div className={styles.main}>
|
||||||
{current === REGISTER_TYPE ? (
|
{current === REGISTER_TYPE ? (
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
size="large"
|
size="large"
|
||||||
name="username"
|
name="username"
|
||||||
value={username}
|
value={username}
|
||||||
onChange={this.changeData}
|
onChange={this.changeData}
|
||||||
addonBefore={<IconFont type="icon-person" style={{ fontSize: "0.3rem" }} />}
|
addonBefore={<IconFont type="icon-person" style={{ fontSize: "0.3rem" }} />}
|
||||||
placeholder="用户名"
|
placeholder="用户名"
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
<Input
|
<Input
|
||||||
type="email"
|
type="email"
|
||||||
size="large"
|
size="large"
|
||||||
name="email"
|
name="email"
|
||||||
value={email}
|
value={email}
|
||||||
onChange={this.changeData}
|
onChange={this.changeData}
|
||||||
addonBefore={<IconFont type="icon-mail" style={{ fontSize: "0.3rem" }} />}
|
addonBefore={<IconFont type="icon-mail" style={{ fontSize: "0.3rem" }} />}
|
||||||
placeholder="邮箱"
|
placeholder="邮箱"
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
type="password"
|
type="password"
|
||||||
size="large"
|
size="large"
|
||||||
name="password"
|
name="password"
|
||||||
value={password}
|
value={password}
|
||||||
onChange={this.changeData}
|
onChange={this.changeData}
|
||||||
addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />}
|
addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />}
|
||||||
placeholder="密码"
|
placeholder="密码"
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
type="password"
|
type="password"
|
||||||
size="large"
|
size="large"
|
||||||
name="repassword"
|
name="repassword"
|
||||||
value={repassword}
|
value={repassword}
|
||||||
onChange={this.changeData}
|
onChange={this.changeData}
|
||||||
addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />}
|
addonBefore={<IconFont type="icon-password" style={{ fontSize: "0.3rem" }} />}
|
||||||
placeholder="重复密码"
|
placeholder="重复密码"
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
size="large"
|
size="large"
|
||||||
name="authCode"
|
name="authCode"
|
||||||
value={authCode}
|
value={authCode}
|
||||||
onChange={this.changeData}
|
onChange={this.changeData}
|
||||||
addonBefore={<IconFont type="icon-yanzhengma54" style={{ fontSize: "0.3rem" }} />}
|
addonBefore={<IconFont type="icon-yanzhengma54" style={{ fontSize: "0.3rem" }} />}
|
||||||
addonAfter={
|
addonAfter={
|
||||||
<span style={{ cursor: isCountDown ? "" : "pointer" }} onClick={this.getCode}>
|
<span style={{ cursor: isCountDown ? "" : "pointer" }} onClick={this.getCode}>
|
||||||
{authCodeText}
|
{authCodeText}
|
||||||
</span>
|
</span>
|
||||||
}
|
}
|
||||||
placeholder="验证码"
|
placeholder="验证码"
|
||||||
/>
|
/>
|
||||||
<Button type="primary" className={styles.submit} onClick={this.submit} block>
|
<Button type="primary" className={styles.submit} onClick={this.submit} block>
|
||||||
{current === REGISTER_TYPE ? "注册" : "重置密码"}
|
{current === REGISTER_TYPE ? "注册" : "重置密码"}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</LoginLayout>
|
</LoginLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,60 +1,60 @@
|
|||||||
import { notification } from "antd";
|
import { notification } from "antd";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
//定义http实例
|
//定义http实例
|
||||||
const instance = axios.create({
|
const instance = axios.create({
|
||||||
baseURL: "/bookmark/api",
|
baseURL: "/bookmark/api",
|
||||||
timeout: 15000
|
timeout: 15000
|
||||||
});
|
});
|
||||||
|
|
||||||
//实例添加请求拦截器
|
//实例添加请求拦截器
|
||||||
instance.interceptors.request.use(
|
instance.interceptors.request.use(
|
||||||
req => {
|
req => {
|
||||||
req.headers["jwt-token"] = window.token;
|
req.headers["jwt-token"] = window.token;
|
||||||
return req;
|
return req;
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
//实例添加响应拦截器
|
//实例添加响应拦截器
|
||||||
instance.interceptors.response.use(
|
instance.interceptors.response.use(
|
||||||
function(res) {
|
function(res) {
|
||||||
const data = res.data;
|
const data = res.data;
|
||||||
if (data.code === 1) {
|
if (data.code === 1) {
|
||||||
return data.data;
|
return data.data;
|
||||||
} else if (data.code === -2) {
|
} else if (data.code === -2) {
|
||||||
return Promise.reject(data.message);
|
return Promise.reject(data.message);
|
||||||
} else {
|
} else {
|
||||||
showError(data);
|
showError(data);
|
||||||
return Promise.reject(data.message);
|
return Promise.reject(data.message);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
function(error) {
|
function(error) {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
showError(error.response);
|
showError(error.response);
|
||||||
return Promise.reject(JSON.stringify(error));
|
return Promise.reject(JSON.stringify(error));
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
function showError(response) {
|
function showError(response) {
|
||||||
let description,
|
let description,
|
||||||
message = "出问题啦";
|
message = "出问题啦";
|
||||||
if (response) {
|
if (response) {
|
||||||
description = response.message;
|
description = response.message;
|
||||||
if (response.code === -1) {
|
if (response.code === -1) {
|
||||||
let redirect = encodeURIComponent(window.location.pathname + window.location.search);
|
let redirect = encodeURIComponent(window.location.pathname + window.location.search);
|
||||||
window.reactHistory.replace("/public/login?redirect=" + redirect);
|
window.reactHistory.replace("/public/login?redirect=" + redirect);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
description = "无网络连接";
|
description = "无网络连接";
|
||||||
}
|
}
|
||||||
notification.open({
|
notification.open({
|
||||||
message,
|
message,
|
||||||
description,
|
description,
|
||||||
duration: 2
|
duration: 2
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export default instance;
|
export default instance;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user