From c3aab407a71bf8557e7bc82e2c16f3e68b211f11 Mon Sep 17 00:00:00 2001 From: fanxb <fanxb.tl@gmail.com> Date: Sun, 17 May 2020 23:03:10 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E8=8A=82=E7=82=B9=E5=90=8E=E6=8F=90=E7=A4=BA=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E7=BC=93=E5=AD=98=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/pages/manage/OverView/AddModal.jsx | 139 +++++++------------ 1 file changed, 53 insertions(+), 86 deletions(-) diff --git a/front/src/pages/manage/OverView/AddModal.jsx b/front/src/pages/manage/OverView/AddModal.jsx index 42b941d..da9a189 100644 --- a/front/src/pages/manage/OverView/AddModal.jsx +++ b/front/src/pages/manage/OverView/AddModal.jsx @@ -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>