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