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

💄 UI: 加入loading状态展示

Browse Source
This commit is contained in:
fanxb 2019-08-02 14:44:32 +08:00
parent beb2794537
commit fba3d426af
4 changed files with 92 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,8 @@ class AddModal extends React.Component {
url: "",
nameHelp: "",
urlHelp: "",
file: null
file: null,
isLoading: false
};
}
@ -59,8 +60,10 @@ class AddModal extends React.Component {
const rule = reg[key];
if (rule.reg.test(value)) {
this.setState({ [key + "Help"]: "" });
return true;
} else {
this.setState({ [key + "Help"]: rule.text });
return false;
}
}
@ -93,12 +96,21 @@ class AddModal extends React.Component {
url: url,
type
};
httpUtil.post("/bookmark/updateOne", body).then(() => {
message.success("编辑成功");
node.name = name;
node.url = url;
this.props.closeModal();
});
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)
.then(() => {
message.success("编辑成功");
node.name = name;
node.url = url;
this.setState({ isLoading: false });
this.props.closeModal();
})
.catch(() => this.setState({ isLoading: false }));
}
/**
@ -113,6 +125,7 @@ class AddModal extends React.Component {
message.error("请先选择文件");
return;
}
this.setState({ isLoading: true });
const form = new FormData();
form.append("path", path);
form.append("file", file.originFileObj);
@ -121,8 +134,10 @@ class AddModal extends React.Component {
headers: { "Content-Type": "multipart/form-data" }
})
.then(res => {
this.setState({ isLoading: false });
window.location.reload();
});
})
.catch(res => this.setState({ isLoading: false }));
} else {
let body = {
type: this.state.addType === "bookmark" ? 0 : 1,
@ -130,20 +145,29 @@ class AddModal extends React.Component {
name,
url
};
httpUtil.put("/bookmark", body).then(res => {
// addToTree(res);
message.success("加入成功");
if (currentAddFolder === null) {
treeData.push(res);
} else {
//存在children说明该子节点的孩子数据已经加载，需要重新将新的子书签加入进去
if (currentAddFolder.children) {
currentAddFolder.children.push(res);
let isOk = this.checkValue("name", name) && (body.type === 0 ? this.checkValue("url", url) : true);
if (!isOk) {
return;
}
this.state({ isLoading: true });
httpUtil
.put("/bookmark", body)
.then(res => {
// addToTree(res);
message.success("加入成功");
if (currentAddFolder === null) {
treeData.push(res);
} else {
//存在children说明该子节点的孩子数据已经加载，需要重新将新的子书签加入进去
if (currentAddFolder.children) {
currentAddFolder.children.push(res);
}
}
}
updateTreeData(treeData);
closeModal();
});
updateTreeData(treeData);
closeModal();
this.state({ isLoading: false });
})
.catch(() => this.setState({ isLoading: false }));
}
}
@ -174,7 +198,7 @@ class AddModal extends React.Component {
render() {
const { isShowModal, currentEditNode, closeModal } = this.props;
const { addType, name, url, nameHelp, urlHelp } = this.state;
const { addType, name, url, nameHelp, urlHelp, isLoading } = this.state;
const type = currentEditNode == null ? "add" : "edit";
const formItemLayout = {
labelCol: {
@ -210,7 +234,7 @@ class AddModal extends React.Component {
) : null}
{addType === "file" ? this.renderFileUpload() : null}
<div style={{ textAlign: "center", paddingTop: "1em" }}>
<Button type="primary" onClick={this.submit}>
<Button type="primary" onClick={this.submit} loading={isLoading}>
提交
</Button>
</div>

3
front/src/pages/manage/OverView/function.js
View File

@ -193,6 +193,7 @@ export function onDrop(info) {
message.error("无法移动到书签内部");
return;
}
this.setState({ isLoading: true });
const current = info.dragNode.props.dataRef;
const body = {
bookmarkId: current.bookmarkId,
@ -243,8 +244,10 @@ export function onDrop(info) {
.then(res => {
message.success("移动完成");
updateTreeData([...treeData]);
this.setState({ isLoading: false });
})
.catch(() => {
this.setState({ isLoading: false });
message.error("后台移动失败，将于2s后刷新页面，以免前后台数据不一致");
setTimeout(window.location.reload, 2000);
});

36
front/src/pages/public/Login/index.jsx
View File

@ -26,7 +26,8 @@ class Login extends Component {
str: "",
password: "",
rememberMe: false,
errorText: ""
errorText: "",
isLoading: false
};
this.query = queryString.parse(window.location.search);
}
@ -70,22 +71,27 @@ class Login extends Component {
if (!(this.checkStr(str) && this.checkPassword(password))) {
return;
}
axios.post("/user/login", this.state).then(res => {
const token = res.token;
delete res.token;
localStorage.setItem("token", token);
window.token = token;
this.props.updateToken(token);
if (this.query.redirect) {
this.props.history.replace(decodeURIComponent(this.query.redirect));
} else {
this.props.history.replace("/");
}
});
this.setState({ isLoading: true });
axios
.post("/user/login", this.state)
.then(res => {
this.setState({ isLoading: false });
const token = res.token;
delete res.token;
localStorage.setItem("token", token);
window.token = token;
this.props.updateToken(token);
if (this.query.redirect) {
this.props.history.replace(decodeURIComponent(this.query.redirect));
} else {
this.props.history.replace("/");
}
})
.catch(() => this.setState({ isLoading: false }));
};
render() {
const { str, password, rememberMe, errorText } = this.state;
const { str, password, rememberMe, errorText, isLoading } = this.state;
return (
<LoginLayout type={LOGIN_TYPE}>
<div className={styles.main}>
@ -114,7 +120,7 @@ class Login extends Component {
</Checkbox>
<Link to="/public/resetPassword">忘记密码</Link>
</div>
<Button type="primary" onClick={this.submit} block>
<Button type="primary" onClick={this.submit} block loading={isLoading}>
登录
</Button>
</div>

33
front/src/pages/public/RegisterOrReset/index.jsx
View File

@ -38,7 +38,8 @@ export default class Register extends React.Component {
authCode: "",
authCodeText: "获取验证码",
isCountDown: false,
errorText: ""
errorText: "",
isLoading: false
};
}
@ -121,23 +122,31 @@ export default class Register extends React.Component {
if (!isOk) {
return;
}
this.setState({ isLoading: true });
if (current === REGISTER_TYPE) {
axios.put("/user", form).then(() => {
message.success("注册成功");
setTimeout(() => this.props.history.replace("/public/login"), 500);
});
axios
.put("/user", form)
.then(() => {
message.success("注册成功");
this.setState({ isLoading: false });
setTimeout(() => this.props.history.replace("/public/login"), 500);
})
.catch(() => this.setState({ isLoading: false }));
} else {
delete form.username;
axios.post("/user/resetPassword", form).then(() => {
message.success("操作成功");
console.log(this.location);
setTimeout(() => this.props.history.replace("/public/login"), 500);
});
axios
.post("/user/resetPassword", form)
.then(() => {
message.success("操作成功");
this.setState({ isLoading: false });
setTimeout(() => this.props.history.replace("/public/login"), 500);
})
.catch(() => this.setState({ isLoading: false }));
}
};
render() {
const { current, username, email, password, repassword, authCode, authCodeText, isCountDown, errorText } = this.state;
const { current, username, email, password, repassword, authCode, authCodeText, isCountDown, errorText, isLoading } = this.state;
return (
<LoginLayout type={current}>
<div className={styles.main}>
@ -194,7 +203,7 @@ export default class Register extends React.Component {
}
placeholder="验证码"
/>
<Button type="primary" className={styles.submit} onClick={this.submit} block>
<Button type="primary" className={styles.submit} onClick={this.submit} block loading={isLoading}>
{current === REGISTER_TYPE ? "注册" : "重置密码"}
</Button>
</div>