fanxb/bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix:修复编辑节点后提示更新缓存数据

Browse Source
This commit is contained in:
fanxb 2020-05-17 23:03:10 +08:00
parent 3090fd35f3
commit c3aab407a7
1 changed files with 53 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
front/src/pages/manage/OverView/AddModal.jsx
View File

@ -1,10 +1,10 @@
import React from "react"; import React from 'react';
import { Modal, Form, Upload, Button, Radio, Input, Icon, message } from "antd"; import { Modal, Form, Upload, Button, Radio, Input, Icon, message } from 'antd';
import httpUtil from "../../../util/httpUtil"; import httpUtil from '../../../util/httpUtil';
import * as action from "../../../redux/action/BookmarkTreeOverview"; import * as action from '../../../redux/action/BookmarkTreeOverview';
import { connect } from "react-redux"; import { connect } from 'react-redux';
import { addNode, getBookmarkList, clearCache } from "../../../util/cacheUtil"; import { addNode, getBookmarkList, clearCache, updateCurrentChangeTime } from '../../../util/cacheUtil';
function mapStateToProps(state) { function mapStateToProps(state) {
return state[action.DATA_NAME]; return state[action.DATA_NAME];
@ -23,11 +23,11 @@ function mapDispatchToProps(dispatch) {
const reg = { const reg = {
name: { name: {
reg: /^.{1,200}$/, reg: /^.{1,200}$/,
text: "名称字符数为1-200" text: '名称字符数为1-200'
}, },
url: { url: {
reg: /^.{1,5000}$/, reg: /^.{1,5000}$/,
text: "链接字符数为1-5000" text: '链接字符数为1-5000'
} }
}; };
@ -35,11 +35,11 @@ class AddModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
addType: "bookmark", addType: 'bookmark',
name: "", name: '',
url: "", url: '',
nameHelp: "", nameHelp: '',
urlHelp: "", urlHelp: '',
file: null, file: null,
isLoading: false isLoading: false
}; };
@ -48,26 +48,26 @@ class AddModal extends React.Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
const { currentEditNode } = nextProps; const { currentEditNode } = nextProps;
if (currentEditNode != null) { if (currentEditNode != null) {
this.type = "edit"; this.type = 'edit';
this.setState({ this.setState({
addType: currentEditNode.type === 0 ? "bookmark" : "folder", addType: currentEditNode.type === 0 ? 'bookmark' : 'folder',
name: currentEditNode.name, name: currentEditNode.name,
url: currentEditNode.url url: currentEditNode.url
}); });
} else { } else {
this.type = "add"; this.type = 'add';
this.setState({ addType: "bookmark", name: "", url: "", file: null }); this.setState({ addType: 'bookmark', name: '', url: '', file: null });
} }
this.setState({ nameHelp: "", urlHelp: "" }); this.setState({ nameHelp: '', urlHelp: '' });
} }
checkValue(key, value) { checkValue(key, value) {
const rule = reg[key]; const rule = reg[key];
if (rule.reg.test(value)) { if (rule.reg.test(value)) {
this.setState({ [key + "Help"]: "" }); this.setState({ [key + 'Help']: '' });
return true; return true;
} else { } else {
this.setState({ [key + "Help"]: rule.text }); this.setState({ [key + 'Help']: rule.text });
return false; return false;
} }
} }
@ -92,7 +92,7 @@ class AddModal extends React.Component {
* 编辑一个节点 * 编辑一个节点
* @param {*} node * @param {*} node
*/ */
editOne(node) { async editOne(node) {
const { name, url } = this.state; const { name, url } = this.state;
const { bookmarkId, type } = this.props.currentEditNode; const { bookmarkId, type } = this.props.currentEditNode;
const body = { const body = {
@ -101,21 +101,20 @@ class AddModal extends React.Component {
url: url, url: url,
type type
}; };
let isOk = let isOk = this.checkValue('name', name) && (type === 0 ? this.checkValue('url', url) : true);
this.checkValue("name", name) &&
(type === 0 ? this.checkValue("url", url) : true);
if (!isOk) { if (!isOk) {
return; return;
} }
this.setState({ isLoading: true }); this.setState({ isLoading: true });
httpUtil httpUtil
.post("/bookmark/updateOne", body) .post('/bookmark/updateOne', body)
.then(() => { .then(() => {
message.success("编辑成功"); message.success('编辑成功');
node.name = name; node.name = name;
node.url = url; node.url = url;
this.setState({ isLoading: false }); this.setState({ isLoading: false });
this.props.closeModal(); this.props.closeModal();
updateCurrentChangeTime();
}) })
.catch(() => this.setState({ isLoading: false })); .catch(() => this.setState({ isLoading: false }));
} }
@ -125,23 +124,20 @@ class AddModal extends React.Component {
*/ */
async addOne() { async addOne() {
const { currentAddFolder, updateTreeData, closeModal } = this.props; const { currentAddFolder, updateTreeData, closeModal } = this.props;
const path = const path = currentAddFolder == null ? '' : currentAddFolder.path + '.' + currentAddFolder.bookmarkId;
currentAddFolder == null
? ""
: currentAddFolder.path + "." + currentAddFolder.bookmarkId;
const { name, url, file, addType } = this.state; const { name, url, file, addType } = this.state;
if (addType === "file") { if (addType === 'file') {
if (file == null) { if (file == null) {
message.error("请先选择文件"); message.error('请先选择文件');
return; return;
} }
this.setState({ isLoading: true }); this.setState({ isLoading: true });
const form = new FormData(); const form = new FormData();
form.append("path", path); form.append('path', path);
form.append("file", file.originFileObj); form.append('file', file.originFileObj);
httpUtil httpUtil
.put("/bookmark/uploadBookmarkFile", form, { .put('/bookmark/uploadBookmarkFile', form, {
headers: { "Content-Type": "multipart/form-data" } headers: { 'Content-Type': 'multipart/form-data' }
}) })
.then(async res => { .then(async res => {
this.setState({ isLoading: false }); this.setState({ isLoading: false });
@ -151,22 +147,20 @@ class AddModal extends React.Component {
.catch(res => this.setState({ isLoading: false })); .catch(res => this.setState({ isLoading: false }));
} else { } else {
let body = { let body = {
type: this.state.addType === "bookmark" ? 0 : 1, type: this.state.addType === 'bookmark' ? 0 : 1,
path, path,
name, name,
url url
}; };
let isOk = let isOk = this.checkValue('name', name) && (body.type === 0 ? this.checkValue('url', url) : true);
this.checkValue("name", name) &&
(body.type === 0 ? this.checkValue("url", url) : true);
if (!isOk) { if (!isOk) {
return; return;
} }
this.setState({ isLoading: true }); this.setState({ isLoading: true });
let res = await httpUtil.put("/bookmark", body); let res = await httpUtil.put('/bookmark', body);
message.success("加入成功"); message.success('加入成功');
await addNode(currentAddFolder, res); await addNode(currentAddFolder, res);
updateTreeData([...getBookmarkList("")]); updateTreeData([...getBookmarkList('')]);
closeModal(); closeModal();
this.setState({ isLoading: false }); this.setState({ isLoading: false });
} }
@ -174,7 +168,7 @@ class AddModal extends React.Component {
renderFileUpload() { renderFileUpload() {
const uploadProps = { const uploadProps = {
accept: ".html,.htm", accept: '.html,.htm',
onChange: e => { onChange: e => {
this.setState({ file: e.fileList[0] }); this.setState({ file: e.fileList[0] });
}, },
@ -185,13 +179,13 @@ class AddModal extends React.Component {
}; };
const { file } = this.state; const { file } = this.state;
return ( return (
<div style={{ textAlign: "center" }}> <div style={{ textAlign: 'center' }}>
<Upload {...uploadProps} style={{ width: "100%" }}> <Upload {...uploadProps} style={{ width: '100%' }}>
<Button type="primary"> <Button type="primary">
<Icon type="upload" /> <Icon type="upload" />
选择书签文件(支持chrome,firefox) 选择书签文件(支持chrome,firefox)
</Button> </Button>
<div>{file ? file.name : ""}</div> <div>{file ? file.name : ''}</div>
</Upload> </Upload>
</div> </div>
); );
@ -200,7 +194,7 @@ class AddModal extends React.Component {
render() { render() {
const { isShowModal, currentEditNode, closeModal } = this.props; const { isShowModal, currentEditNode, closeModal } = this.props;
const { addType, name, url, nameHelp, urlHelp, isLoading } = this.state; const { addType, name, url, nameHelp, urlHelp, isLoading } = this.state;
const type = currentEditNode == null ? "add" : "edit"; const type = currentEditNode == null ? 'add' : 'edit';
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: { span: 4 }, xs: { span: 4 },
@ -212,56 +206,29 @@ class AddModal extends React.Component {
} }
}; };
return ( return (
<Modal <Modal destroyOnClose title={type === 'add' ? '新增' : '编辑'} visible={isShowModal} onCancel={closeModal} footer={false}>
destroyOnClose
title={type === "add" ? "新增" : "编辑"}
visible={isShowModal}
onCancel={closeModal}
footer={false}
>
<Form {...formItemLayout}> <Form {...formItemLayout}>
{type === "add" ? ( {type === 'add' ? (
<Form.Item label="类别"> <Form.Item label="类别">
<Radio.Group <Radio.Group defaultValue="bookmark" onChange={e => this.setState({ addType: e.target.value })}>
defaultValue="bookmark"
onChange={e => this.setState({ addType: e.target.value })}
>
<Radio value="bookmark">书签</Radio> <Radio value="bookmark">书签</Radio>
<Radio value="folder">文件夹</Radio> <Radio value="folder">文件夹</Radio>
<Radio value="file">上传书签html</Radio> <Radio value="file">上传书签html</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
) : null} ) : null}
{addType === "bookmark" || addType === "folder" ? ( {addType === 'bookmark' || addType === 'folder' ? (
<Form.Item <Form.Item label="名称" validateStatus={nameHelp === '' ? 'success' : 'error'} help={nameHelp}>
label="名称" <Input type="text" name="name" onChange={this.changeValue.bind(this)} value={name} />
validateStatus={nameHelp === "" ? "success" : "error"}
help={nameHelp}
>
<Input
type="text"
name="name"
onChange={this.changeValue.bind(this)}
value={name}
/>
</Form.Item> </Form.Item>
) : null} ) : null}
{addType === "bookmark" ? ( {addType === 'bookmark' ? (
<Form.Item <Form.Item label="URL" validateStatus={urlHelp === '' ? 'success' : 'error'} help={urlHelp}>
label="URL" <Input type="text" name="url" value={url} onChange={this.changeValue.bind(this)} />
validateStatus={urlHelp === "" ? "success" : "error"}
help={urlHelp}
>
<Input
type="text"
name="url"
value={url}
onChange={this.changeValue.bind(this)}
/>
</Form.Item> </Form.Item>
) : null} ) : null}
{addType === "file" ? this.renderFileUpload() : null} {addType === 'file' ? this.renderFileUpload() : null}
<div style={{ textAlign: "center", paddingTop: "1em" }}> <div style={{ textAlign: 'center', paddingTop: '1em' }}>
<Button type="primary" onClick={this.submit} loading={isLoading}> <Button type="primary" onClick={this.submit} loading={isLoading}>
提交 提交
</Button> </Button>