466 lines
15 KiB
JavaScript
466 lines
15 KiB
JavaScript
import React from "react";
|
||
import axios from "axios";
|
||
import { Button, Form, Input, Icon, Radio, message } from "antd";
|
||
import "antd/dist/antd.css";
|
||
import { confirmAlert } from "react-confirm-alert";
|
||
import "react-confirm-alert/src/react-confirm-alert.css";
|
||
import qs from "qs";
|
||
import successInform from "./Message";
|
||
|
||
class NewForm extends React.Component {
|
||
constructor() {
|
||
super();
|
||
this.state = {
|
||
WishValid: false,
|
||
firstWish: undefined,
|
||
secondWish: undefined,
|
||
};
|
||
}
|
||
componentDidMount() {
|
||
this.loadLocalStorage();
|
||
this.props.form.validateFields(["firstWish"], { force: true });
|
||
}
|
||
loadLocalStorage = () => {
|
||
const values = JSON.parse(localStorage.getItem("formCache") || "{}");
|
||
this.props.setID(values.id_student);
|
||
this.props.form.setFieldsValue(values);
|
||
};
|
||
saveLocalStorage = () => {
|
||
const values = this.props.form.getFieldsValue();
|
||
localStorage.setItem("formCache", JSON.stringify(values));
|
||
};
|
||
onStuIdChange = () => {
|
||
let ID = this.props.form.getFieldsValue(["id_student"])["id_student"];
|
||
this.props.setID(ID);
|
||
};
|
||
handleSubmit = (e) => {
|
||
e.preventDefault();
|
||
const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
|
||
confirmAlert({
|
||
title: "提交报名表",
|
||
message:
|
||
"您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。",
|
||
buttons: [
|
||
{
|
||
label: "Yes",
|
||
onClick: () => {
|
||
validateFieldsAndScroll((err, values) => {
|
||
if (err) {
|
||
message.error("填写不正确，请按照提示修改");
|
||
} else {
|
||
// console.log(values);
|
||
let addForm = async () => {
|
||
let result = await axios("api/submit", {
|
||
headers: {
|
||
"Content-Type": "application/x-www-form-urlencoded",
|
||
},
|
||
method: "POST",
|
||
data: qs.stringify({ dto: JSON.stringify(values) }),
|
||
});
|
||
this.saveLocalStorage();
|
||
if (result.data.status === "success") {
|
||
message.success(
|
||
"提交成功！后续的面试时间会以短信形式通知，期待你的加入！"
|
||
);
|
||
successInform(
|
||
values.phone,
|
||
values.name,
|
||
values.id_student,
|
||
values.firstWish,
|
||
values.secondWish
|
||
);
|
||
} else {
|
||
if (result.data.errorMsg === "TICKET_NOT_LEGEAL") {
|
||
message.error("提交失败！请检查报名表填写是否正确。");
|
||
} else if (
|
||
result.data.errorMsg === "TICKET_INFO_INCOMPLETE"
|
||
) {
|
||
message.error("提交失败！请检查报名表填写是否完整。");
|
||
} else if (result.data.errorMsg === "TICKET_ALREADY_OK") {
|
||
message.error(
|
||
"我们已为您分配了面试场次，请注意短信通知，请勿重复提交!"
|
||
);
|
||
} else {
|
||
message.error("提交失败！可能是网络问题。");
|
||
}
|
||
}
|
||
};
|
||
addForm();
|
||
}
|
||
});
|
||
},
|
||
},
|
||
{
|
||
label: "No",
|
||
onClick: () => {},
|
||
},
|
||
],
|
||
});
|
||
};
|
||
|
||
validator = (rule, value, callback) => {
|
||
this.setState({ WishValid: true });
|
||
const form = this.props.form;
|
||
var firstWish = value;
|
||
var secondWish = form.getFieldValue("secondWish");
|
||
var thirdWish = form.getFieldValue("thirdWish");
|
||
this.setState({ firstWish: firstWish, secondWish: secondWish });
|
||
try {
|
||
if (
|
||
firstWish === undefined ||
|
||
secondWish === undefined ||
|
||
thirdWish === undefined
|
||
) {
|
||
throw "请完整填写三个志愿";
|
||
}
|
||
if (
|
||
firstWish === secondWish ||
|
||
firstWish === thirdWish ||
|
||
secondWish === thirdWish
|
||
) {
|
||
throw "三个志愿不能重复";
|
||
}
|
||
} catch (err) {
|
||
this.setState({ WishValid: false });
|
||
callback(err);
|
||
}
|
||
callback();
|
||
};
|
||
render() {
|
||
const questions = [
|
||
[],
|
||
[
|
||
"电脑部：说说你跟电脑有关的印象深刻的事情(或者你对电脑最感兴趣的地方，可以是某个组成部分)",
|
||
"电脑部：来电脑部之后想学些什么?有什么想学的也可以说呀",
|
||
],
|
||
[
|
||
"电器部：你有没有自己拆装简单电器的经历，有的话请简述",
|
||
"电器部：你希望自己在电器部成为一个怎样的人？定位在劳动者，领导者还是创新者？请简述",
|
||
],
|
||
[
|
||
"文宣部：描述一下你构想的以xx为主题的海报or摄影作品，xx可以是你想到的任何事物",
|
||
"文宣部：你觉得我们是干什么的(正经脸)",
|
||
],
|
||
[
|
||
"人资部：请举一个你想出的创新点子(实现过或现实中有一定的可操作性)，最好是关于组织某次活动(活动包括但不限于宣传活动，内建活动，特殊的生日祝福等等)",
|
||
"人资部：你觉得你身上最符合人资部的特点是什么？",
|
||
],
|
||
[
|
||
"财外部：在社团全员大会/部门内建/部门事务这三种情况打破了你原来的学习安排的情况下，你如何去平衡社团与学习生活？",
|
||
"财外部：说说令你印象最深刻的理财经历，可以是任何和理财有关的哦",
|
||
],
|
||
];
|
||
|
||
const tailFormItemLayout = {
|
||
wrapperCol: {
|
||
xs: {
|
||
span: 24,
|
||
offset: 0,
|
||
},
|
||
sm: {
|
||
span: 16,
|
||
offset: 8,
|
||
},
|
||
},
|
||
};
|
||
|
||
const { getFieldDecorator } = this.props.form;
|
||
|
||
return (
|
||
<Form layout="vertical" onSubmit={this.handleSubmit}>
|
||
<Form.Item label="姓名">
|
||
{getFieldDecorator("name", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请在此处填入你的姓名",
|
||
},
|
||
],
|
||
})(<Input />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="学号(请先填写此项再上传照片)"
|
||
onChange={this.onStuIdChange}
|
||
>
|
||
{getFieldDecorator("id_student", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请在此处填入你的学号",
|
||
},
|
||
{ pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" },
|
||
],
|
||
})(<Input />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="性别">
|
||
{getFieldDecorator("sex", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请选择你的性别",
|
||
},
|
||
],
|
||
})(
|
||
<Radio.Group>
|
||
<Radio.Button value={0}>
|
||
<div>
|
||
<Icon type="man" />男
|
||
</div>
|
||
</Radio.Button>
|
||
<Radio.Button value={1}>
|
||
<div>
|
||
<Icon type="woman" />女
|
||
</div>
|
||
</Radio.Button>
|
||
</Radio.Group>
|
||
)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="年级">
|
||
{getFieldDecorator("grade", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请选择你的年级",
|
||
},
|
||
],
|
||
})(
|
||
<Radio.Group>
|
||
<Radio.Button value={1}>大一</Radio.Button>
|
||
<Radio.Button value={2}>大二</Radio.Button>
|
||
<Radio.Button value={3}>大三</Radio.Button>
|
||
<Radio.Button value={4}>大四</Radio.Button>
|
||
</Radio.Group>
|
||
)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="专业/大类">
|
||
{getFieldDecorator("major", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请在这里填入你的专业",
|
||
},
|
||
],
|
||
})(<Input placeholder="例如：工科试验班(电气)" />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="E-mail">
|
||
{getFieldDecorator("email", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请在此处填入你的E-mail",
|
||
},
|
||
{ type: "email", message: "邮箱格式不正确" },
|
||
],
|
||
})(<Input />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="联系电话">
|
||
{getFieldDecorator("phone", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请在此处填入你的电话号码",
|
||
},
|
||
{ pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" },
|
||
],
|
||
})(<Input />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="自我介绍(可以说说你的兴趣,特长等)">
|
||
{getFieldDecorator("question1", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "做一个简单的自我介绍呗",
|
||
},
|
||
],
|
||
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="第一志愿（三个志愿请不要重复选择）">
|
||
{getFieldDecorator("firstWish", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请选择第一志愿",
|
||
},
|
||
{
|
||
validator: this.validator,
|
||
},
|
||
],
|
||
})(
|
||
<Radio.Group name="firstWish" size="medium">
|
||
<Radio.Button value={1}>电脑部</Radio.Button>
|
||
<Radio.Button value={2}>电器部</Radio.Button>
|
||
<Radio.Button value={3}>文宣部</Radio.Button>
|
||
<Radio.Button value={4}>人资部</Radio.Button>
|
||
<Radio.Button value={5}>财外部</Radio.Button>
|
||
</Radio.Group>
|
||
)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="第二志愿（三个志愿请不要重复选择）">
|
||
{getFieldDecorator("secondWish", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请选择第二志愿",
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
this.props.form.validateFields(["firstWish"], {
|
||
force: true,
|
||
});
|
||
callback();
|
||
},
|
||
},
|
||
],
|
||
})(
|
||
<Radio.Group name="secondWish" size="medium">
|
||
<Radio.Button value={1}>电脑部</Radio.Button>
|
||
<Radio.Button value={2}>电器部</Radio.Button>
|
||
<Radio.Button value={3}>文宣部</Radio.Button>
|
||
<Radio.Button value={4}>人资部</Radio.Button>
|
||
<Radio.Button value={5}>财外部</Radio.Button>
|
||
</Radio.Group>
|
||
)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="第三志愿（三个志愿请不要重复选择）">
|
||
{getFieldDecorator("thirdWish", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请选择第三志愿",
|
||
},
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
this.props.form.validateFields(["firstWish"], {
|
||
force: true,
|
||
});
|
||
callback();
|
||
},
|
||
},
|
||
],
|
||
})(
|
||
<Radio.Group name="thirdWish" size="medium">
|
||
<Radio.Button value={1}>电脑部</Radio.Button>
|
||
<Radio.Button value={2}>电器部</Radio.Button>
|
||
<Radio.Button value={3}>文宣部</Radio.Button>
|
||
<Radio.Button value={4}>人资部</Radio.Button>
|
||
<Radio.Button value={5}>财外部</Radio.Button>
|
||
</Radio.Group>
|
||
)}
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label="是否服从调剂"
|
||
onChange={() => {
|
||
if (this.props.form.getFieldValue("adjustment") === true)
|
||
message.warning(
|
||
"往届两技术部报名人数较多，选择调剂表示存在您被分配到第二、三志愿的可能，请审慎选择。"
|
||
);
|
||
}}
|
||
>
|
||
{getFieldDecorator("adjustment", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请选择是否服从调剂",
|
||
},
|
||
],
|
||
})(
|
||
<Radio.Group>
|
||
<Radio value={true}>是</Radio>
|
||
<Radio value={false}>否</Radio>
|
||
</Radio.Group>
|
||
)}
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={this.state.firstWish ? questions[this.state.firstWish][0] : ""}
|
||
style={this.state.WishValid ? {} : { display: "none" }}
|
||
>
|
||
{getFieldDecorator("firstReason", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请回答问题",
|
||
},
|
||
],
|
||
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={this.state.firstWish ? questions[this.state.firstWish][1] : ""}
|
||
style={this.state.WishValid ? {} : { display: "none" }}
|
||
>
|
||
{getFieldDecorator("secondReason", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请回答问题",
|
||
},
|
||
],
|
||
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item
|
||
label={
|
||
this.state.secondWish ? questions[this.state.secondWish][0] : ""
|
||
}
|
||
style={this.state.WishValid ? {} : { display: "none" }}
|
||
>
|
||
{getFieldDecorator("thirdReason", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请回答问题",
|
||
},
|
||
],
|
||
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
|
||
</Form.Item>
|
||
|
||
<Form.Item label="你希望未来能在E志者协会得到什么？又能为E志付出什么？">
|
||
{getFieldDecorator("question2", {
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: "请填入问题的回答",
|
||
},
|
||
],
|
||
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
|
||
</Form.Item>
|
||
<Form.Item {...tailFormItemLayout}>
|
||
<Button
|
||
icon="copy"
|
||
style={{ textAlign: "center" }}
|
||
type="primary"
|
||
htmlType="submit"
|
||
>
|
||
提交
|
||
</Button>
|
||
<Button
|
||
icon="save"
|
||
style={{ margin: "20px", textAlign: "center" }}
|
||
onClick={() => {
|
||
this.saveLocalStorage();
|
||
message.success("草稿已保存");
|
||
}}
|
||
>
|
||
保存草稿
|
||
</Button>
|
||
</Form.Item>
|
||
</Form>
|
||
);
|
||
}
|
||
}
|
||
|
||
const Sheet = Form.create({})(NewForm);
|
||
export default Sheet;
|