zjueva
/
2020-fronted-nx
10
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

fix tag id_student

master
cxz66666 2020-08-08 23:15:05 +08:00
parent 674f594468
commit 0ed1b5f1ef
2 changed files with 466 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

727
src/components/Sheet.js
View File

@ -1,381 +1,364 @@
import React from 'react' import React from "react";
import axios from 'axios' import axios from "axios";
import { Button, Form, Input,Icon, Radio, message } from 'antd' import { Button, Form, Input, Icon, Radio, message } from "antd";
import 'antd/dist/antd.css' import "antd/dist/antd.css";
import { confirmAlert } from 'react-confirm-alert' import { confirmAlert } from "react-confirm-alert";
import 'react-confirm-alert/src/react-confirm-alert.css'; import "react-confirm-alert/src/react-confirm-alert.css";
import qs from 'qs'; import qs from "qs";
class NewForm extends React.Component { class NewForm extends React.Component {
componentDidMount() { componentDidMount() {
this.loadLocalStorage(); this.loadLocalStorage();
} }
loadLocalStorage = () => { loadLocalStorage = () => {
const values = JSON.parse(localStorage.getItem('formCache') || '{}'); const values = JSON.parse(localStorage.getItem("formCache") || "{}");
this.props.form.setFieldsValue(values); this.props.form.setFieldsValue(values);
} };
saveLocalStorage = () => { saveLocalStorage = () => {
const values = this.props.form.getFieldsValue(); const values = this.props.form.getFieldsValue();
localStorage.setItem('formCache', JSON.stringify(values)); localStorage.setItem("formCache", JSON.stringify(values));
} };
onStuIdChange = () =>{ onStuIdChange = () => {
let ID = this.props.form.getFieldsValue(['StuId'])['StuId'] let ID = this.props.form.getFieldsValue(["id_student"])["id_student"];
this.props.setID(ID) this.props.setID(ID);
} };
handleSubmit = e => { handleSubmit = (e) => {
e.preventDefault(); e.preventDefault();
const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
confirmAlert({ confirmAlert({
title: '提交报名表', title: "提交报名表",
message: '您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。', message:
buttons: [ "您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。",
{ buttons: [
label: 'Yes', {
onClick: () => { label: "Yes",
validateFieldsAndScroll( onClick: () => {
(err, values) => { validateFieldsAndScroll((err, values) => {
if (err) { if (err) {
message.error('填写不正确，请按照提示修改'); message.error("填写不正确，请按照提示修改");
} } else {
else { console.log(values);
console.log(values); let addForm = async () => {
let addForm = async () => { let result = await axios("api/submit", {
let result = await axios( headers: {
'api/submit', "Content-Type": "application/x-www-form-urlencoded",
{
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
method: "POST",
data: qs.stringify({"dto":JSON.stringify(values)})
}
)
if (result.data.success) {
message.success("提交成功！后续的面试时间会以短信形式通知，期待你的加入！")
}
else {
message.error("提交失败！可能是网络问题。")
}
}
addForm();
}
}
)
}
},
{
label: 'No',
onClick: () => {}
}
]
});
}
render() {
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
};
const { getFieldDecorator } = this.props.form;
return (
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
<Form.Item label="姓名">
{
getFieldDecorator('name', {
rules: [
{
required: true,
message: "请在此处填入你的姓名"
}
]
})(
<Input />
)
}
</Form.Item>
<Form.Item label="学号" onChange = {this.onStuIdChange} >
{getFieldDecorator('StuId', {
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: "手机号不太对呀" } method: "POST",
], data: qs.stringify({ dto: JSON.stringify(values) }),
})(<Input />)} });
</Form.Item> if (result.data.success) {
message.success(
<Form.Item label="第一志愿（两志愿请不要重复选择）"> "提交成功！后续的面试时间会以短信形式通知，期待你的加入！"
{ );
getFieldDecorator('firstWish', {rules: [ } else {
{ message.error("提交失败！可能是网络问题。");
required: true,
message: '请选择第一志愿'
}
]})(
<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: '请选择第二志愿'
}
]})(
<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('adjustment', {
rules: [
{
required: true,
message: '请选择是否服从调剂'
}
]
} }
)( };
<Radio.Group > addForm();
<Radio value={true}>是</Radio> }
<Radio value={false}>否</Radio> });
</Radio.Group> },
) },
} {
</Form.Item> label: "No",
onClick: () => {},
},
],
});
};
<Form.Item label="简述你选择第一志愿的原因"> render() {
{ const formItemLayout = {
getFieldDecorator('firstReason', { labelCol: {
rules: [ xs: { span: 24 },
{ sm: { span: 8 },
required: true, },
message: '请填入你选择志愿的原因' wrapperCol: {
} xs: { span: 24 },
] sm: { span: 12 },
} },
)( };
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item label="简述你选择第二志愿的原因">
{
getFieldDecorator('secondReason', {
rules: [
{
required: true,
message: '请填入你选择志愿的原因'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
</Form.Item>
<Form.Item label="简单介绍一下你的特长">
{
getFieldDecorator('question1', {
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 style={{display:"none"}}>
{
getFieldDecorator('time1', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time2', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time3', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time4', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time5', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time6', {initialValue:0,rules: [{required:true}]})
}
</Form.Item>
<Form.Item style={{display:"none"}}>
{
getFieldDecorator('time7', {initialValue:0,rules: [{required:true}]})
}
</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 tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
};
const { getFieldDecorator } = this.props.form;
return (
<Form {...formItemLayout} 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("firstWish", {
rules: [
{
required: true,
message: "请选择第一志愿",
},
],
})(
<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: "请选择第二志愿",
},
],
})(
<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("adjustment", {
rules: [
{
required: true,
message: "请选择是否服从调剂",
},
],
})(
<Radio.Group>
<Radio value={true}>是</Radio>
<Radio value={false}>否</Radio>
</Radio.Group>
)}
</Form.Item>
<Form.Item label="简述你选择第一志愿的原因">
{getFieldDecorator("firstReason", {
rules: [
{
required: true,
message: "请填入你选择志愿的原因",
},
],
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
</Form.Item>
<Form.Item label="简述你选择第二志愿的原因">
{getFieldDecorator("secondReason", {
rules: [
{
required: true,
message: "请填入你选择志愿的原因",
},
],
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
</Form.Item>
<Form.Item label="简单介绍一下你的特长">
{getFieldDecorator("question1", {
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 style={{ display: "none" }}>
{getFieldDecorator("time1", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{getFieldDecorator("time2", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{getFieldDecorator("time3", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{getFieldDecorator("time4", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{getFieldDecorator("time5", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{getFieldDecorator("time6", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{getFieldDecorator("time7", {
initialValue: 0,
rules: [{ required: true }],
})}
</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); const Sheet = Form.create({})(NewForm);
export default Sheet; export default Sheet;

208
src/components/UploadToOSS.js
View File

@ -1,106 +1,120 @@
import { Upload, Icon, message , Button , Avatar} from 'antd'; import { Upload, Icon, message, Button, Avatar } from "antd";
import React from 'react'; import React from "react";
import axios from 'axios'; import axios from "axios";
function getBase64(img, callback) { function getBase64(img, callback) {
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result)); reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img); reader.readAsDataURL(img);
} }
class UploadToOSS extends React.Component { class UploadToOSS extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
headers:{ headers: {},
}, fileData: null,
fileData: null,
};
}
beforeUpload = (file)=>{
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('只能上传JPG/PNG格式的图片哦！');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('图像文件要小于2MB哦！');
}
if(!this.props.stuid){
message.error("请先填写学号！");
}
if (isJpgOrPng && isLt2M && this.props.stuid){
if(file.type === 'image/png') {
this.setState({headers:{
'Content-Type': 'application/octet-stream',
'stuid':this.props.stuid,
'pic-type':'png'}});
}else{
this.setState({headers:{
'Content-Type': 'application/octet-stream',
'stuid':this.props.stuid,
'pic-type':'jpg'}});
}
let reader = new FileReader();
reader.readAsArrayBuffer(file);
getBase64(file, imageUrl =>
this.setState({
imageUrl,
}),)
return new Promise((resolve) => {
reader.onload = (e) => {
this.setState({fileData:reader.result});
resolve()
}
})
}else{
return false;
}
}
handleChange = info => {
}; };
customRequest = async () =>{ }
if(this.state.fileData === null){
message.error("图片未能正确读取哦！请重试！")
return
}
console.log(this.state.headers)
let result = await axios(
'https://1299271970796699.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/oss_upload/upload/',
{
headers: this.state.headers,
method: "POST",
data: this.state.fileData,
}
)
if (result.data==="Success!") {
message.success("上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)")
}else{
message.error("上传失败!可能是网络问题！")
}
}
beforeUpload = (file) => {
render() { const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
const uploadButton = ( if (!isJpgOrPng) {
<Button style={{marginBlockEnd:24}}> message.error("只能上传JPG/PNG格式的图片哦！");
<Icon type="upload" /> 点击或拖拽文件到此处以上传照片
</Button>
);
const { imageUrl } = this.state;
return (
<Upload
showUploadList = {false}
beforeUpload={this.beforeUpload}
onChange={this.handleChange}
customRequest = {this.customRequest}
>
{imageUrl ?<Avatar shape="square" size={120} icon="user" src= {imageUrl} style={{marginBlockEnd:24}}/> : uploadButton}
</Upload>
);
} }
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error("图像文件要小于2MB哦！");
}
if (!this.props.stuid) {
message.error("请先填写学号！");
}
if (isJpgOrPng && isLt2M && this.props.stuid) {
if (file.type === "image/png") {
this.setState({
headers: {
"Content-Type": "application/octet-stream",
stuid: this.props.stuid,
"pic-type": "png",
},
});
} else {
this.setState({
headers: {
"Content-Type": "application/octet-stream",
stuid: this.props.stuid,
"pic-type": "jpg",
},
});
}
let reader = new FileReader();
reader.readAsArrayBuffer(file);
getBase64(file, (imageUrl) =>
this.setState({
imageUrl,
})
);
return new Promise((resolve) => {
reader.onload = (e) => {
this.setState({ fileData: reader.result });
resolve();
};
});
} else {
return false;
}
};
handleChange = (info) => {};
customRequest = async () => {
if (this.state.fileData === null) {
message.error("图片未能正确读取哦！请重试！");
return;
}
console.log(this.state.headers);
let result = await axios(
"https://1767171970454994.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/nx/nx-test/",
{
headers: this.state.headers,
method: "POST",
data: this.state.fileData,
}
);
if (result.data === "Success!") {
message.success(
"上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)"
);
} else {
message.error("上传失败!可能是网络问题！");
}
};
render() {
const uploadButton = (
<Button style={{ marginBlockEnd: 24 }}>
<Icon type="upload" /> 点击或拖拽文件到此处以上传照片
</Button>
);
const { imageUrl } = this.state;
return (
<Upload
showUploadList={false}
beforeUpload={this.beforeUpload}
onChange={this.handleChange}
customRequest={this.customRequest}
>
{imageUrl ? (
<Avatar
shape="square"
size={120}
icon="user"
src={imageUrl}
style={{ marginBlockEnd: 24 }}
/>
) : (
uploadButton
)}
</Upload>
);
}
} }
export default UploadToOSS; export default UploadToOSS;