418 lines
14 KiB
JavaScript
418 lines
14 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 = [[],
|
||
["1","2"],
|
||
["3","4"],
|
||
["5","6"],
|
||
["7","8"],
|
||
["9","10"]]
|
||
|
||
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;
|