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

359
src/components/Sheet.js
View File

@ -1,73 +1,71 @@
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 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";
class NewForm extends React.Component {
componentDidMount() {
this.loadLocalStorage();
}
loadLocalStorage = () => {
const values = JSON.parse(localStorage.getItem('formCache') || '{}');
const values = JSON.parse(localStorage.getItem("formCache") || "{}");
this.props.form.setFieldsValue(values);
}
};
saveLocalStorage = () => {
const values = this.props.form.getFieldsValue();
localStorage.setItem('formCache', JSON.stringify(values));
}
localStorage.setItem("formCache", JSON.stringify(values));
};
onStuIdChange = () => {
let ID = this.props.form.getFieldsValue(['StuId'])['StuId']
this.props.setID(ID)
}
handleSubmit = e => {
let ID = this.props.form.getFieldsValue(["id_student"])["id_student"];
this.props.setID(ID);
};
handleSubmit = (e) => {
e.preventDefault();
const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll
const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
confirmAlert({
title: '提交报名表',
message: '您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。',
title: "提交报名表",
message:
"您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。",
buttons: [
{
label: 'Yes',
label: "Yes",
onClick: () => {
validateFieldsAndScroll(
(err, values) => {
validateFieldsAndScroll((err, values) => {
if (err) {
message.error('填写不正确，请按照提示修改');
}
else {
message.error("填写不正确，请按照提示修改");
} else {
console.log(values);
let addForm = async () => {
let result = await axios(
'api/submit',
{
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
let result = await axios("api/submit", {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "POST",
data: qs.stringify({"dto":JSON.stringify(values)})
}
)
data: qs.stringify({ dto: JSON.stringify(values) }),
});
if (result.data.success) {
message.success("提交成功！后续的面试时间会以短信形式通知，期待你的加入！")
}
else {
message.error("提交失败！可能是网络问题。")
}
message.success(
"提交成功！后续的面试时间会以短信形式通知，期待你的加入！"
);
} else {
message.error("提交失败！可能是网络问题。");
}
};
addForm();
}
}
)
}
});
},
},
{
label: 'No',
onClick: () => {}
}
]
label: "No",
onClick: () => {},
},
],
});
}
};
render() {
const formItemLayout = {
@ -99,124 +97,114 @@ class NewForm extends React.Component {
return (
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
<Form.Item label="姓名">
{
getFieldDecorator('name', {
{getFieldDecorator("name", {
rules: [
{
required: true,
message: "请在此处填入你的姓名"
}
]
})(
<Input />
)
}
message: "请在此处填入你的姓名",
},
],
})(<Input />)}
</Form.Item>
<Form.Item label="学号" onChange={this.onStuIdChange}>
{getFieldDecorator('StuId', {
{getFieldDecorator("id_student", {
rules: [
{
required: true,
message: '请在此处填入你的学号',
message: "请在此处填入你的学号",
},
{ pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" }
{ pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" },
],
})(<Input />)}
</Form.Item>
<Form.Item label="性别">
{
getFieldDecorator('sex', {
{getFieldDecorator("sex", {
rules: [
{
required: true,
message: '请选择你的性别'
}
]
}
)
(
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.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', {
{getFieldDecorator("grade", {
rules: [
{
required: true,
message: '请选择你的年级'
}
]
}
)
(
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', {
{getFieldDecorator("major", {
rules: [
{
required: true,
message: '请在这里填入你的专业'
}
]
}
)(
<Input placeholder="例如：工科试验班(电气)" />
)
}
message: "请在这里填入你的专业",
},
],
})(<Input placeholder="例如：工科试验班(电气)" />)}
</Form.Item>
<Form.Item label="E-mail">
{getFieldDecorator('email', {
{getFieldDecorator("email", {
rules: [
{
required: true,
message: '请在此处填入你的E-mail'
}, { type: 'email', message: "邮箱格式不正确" }
message: "请在此处填入你的E-mail",
},
{ type: "email", message: "邮箱格式不正确" },
],
})(<Input />)}
</Form.Item>
<Form.Item label="联系电话">
{getFieldDecorator('phone', {
{getFieldDecorator("phone", {
rules: [
{
required: true,
message: '请在此处填入你的电话号码',
message: "请在此处填入你的电话号码",
},
{ pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" }
{ pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" },
],
})(<Input />)}
</Form.Item>
<Form.Item label="第一志愿（两志愿请不要重复选择）">
{
getFieldDecorator('firstWish', {rules: [
{getFieldDecorator("firstWish", {
rules: [
{
required: true,
message: '请选择第一志愿'
}
]})(
message: "请选择第一志愿",
},
],
})(
<Radio.Group name="firstWish" size="medium">
<Radio.Button value={1}>电脑部</Radio.Button>
<Radio.Button value={2}>电器部</Radio.Button>
@ -224,18 +212,18 @@ class NewForm extends React.Component {
<Radio.Button value={4}>人资部</Radio.Button>
<Radio.Button value={5}>财外部</Radio.Button>
</Radio.Group>
)
}
)}
</Form.Item>
<Form.Item label="第二志愿（两志愿请不要重复选择）">
{
getFieldDecorator('secondWish', {rules: [
{getFieldDecorator("secondWish", {
rules: [
{
required: true,
message: '请选择第二志愿'
}
]})(
message: "请选择第二志愿",
},
],
})(
<Radio.Group name="secondWish" size="medium">
<Radio.Button value={1}>电脑部</Radio.Button>
<Radio.Button value={2}>电器部</Radio.Button>
@ -243,138 +231,133 @@ class NewForm extends React.Component {
<Radio.Button value={4}>人资部</Radio.Button>
<Radio.Button value={5}>财外部</Radio.Button>
</Radio.Group>
)
}
)}
</Form.Item>
<Form.Item label="是否服从调剂">
{
getFieldDecorator('adjustment', {
{getFieldDecorator("adjustment", {
rules: [
{
required: true,
message: '请选择是否服从调剂'
}
]
}
)(
message: "请选择是否服从调剂",
},
],
})(
<Radio.Group>
<Radio value={true}>是</Radio>
<Radio value={false}>否</Radio>
</Radio.Group>
)
}
)}
</Form.Item>
<Form.Item label="简述你选择第一志愿的原因">
{
getFieldDecorator('firstReason', {
{getFieldDecorator("firstReason", {
rules: [
{
required: true,
message: '请填入你选择志愿的原因'
}
]
}
)(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
message: "请填入你选择志愿的原因",
},
],
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
</Form.Item>
<Form.Item label="简述你选择第二志愿的原因">
{
getFieldDecorator('secondReason', {
{getFieldDecorator("secondReason", {
rules: [
{
required: true,
message: '请填入你选择志愿的原因'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
message: "请填入你选择志愿的原因",
},
],
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
</Form.Item>
<Form.Item label="简单介绍一下你的特长">
{
getFieldDecorator('question1', {
{getFieldDecorator("question1", {
rules: [
{
required: true,
message: '请简单介绍一下你的特长'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
message: "请简单介绍一下你的特长",
},
],
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
</Form.Item>
<Form.Item label="你希望未来能在E志者协会得到什么？又能为E志付出什么？">
{
getFieldDecorator('question2', {
{getFieldDecorator("question2", {
rules: [
{
required: true,
message: '请填入问题的回答'
}
]
}
)
(
<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />
)
}
message: "请填入问题的回答",
},
],
})(<Input.TextArea autosize={{ minRows: 2, maxRows: 8 }} />)}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{
getFieldDecorator('time1', {initialValue:0,rules: [{required:true}]})
}
{getFieldDecorator("time1", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{
getFieldDecorator('time2', {initialValue:0,rules: [{required:true}]})
}
{getFieldDecorator("time2", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{
getFieldDecorator('time3', {initialValue:0,rules: [{required:true}]})
}
{getFieldDecorator("time3", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{
getFieldDecorator('time4', {initialValue:0,rules: [{required:true}]})
}
{getFieldDecorator("time4", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{
getFieldDecorator('time5', {initialValue:0,rules: [{required:true}]})
}
{getFieldDecorator("time5", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{
getFieldDecorator('time6', {initialValue:0,rules: [{required:true}]})
}
{getFieldDecorator("time6", {
initialValue: 0,
rules: [{ required: true }],
})}
</Form.Item>
<Form.Item style={{ display: "none" }}>
{
getFieldDecorator('time7', {initialValue:0,rules: [{required:true}]})
}
{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>
<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);

88
src/components/UploadToOSS.js
View File

@ -1,10 +1,10 @@
import { Upload, Icon, message , Button , Avatar} from 'antd';
import React from 'react';
import axios from 'axios';
import { Upload, Icon, message, Button, Avatar } from "antd";
import React from "react";
import axios from "axios";
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img);
}
@ -12,77 +12,81 @@ class UploadToOSS extends React.Component {
constructor(props) {
super(props);
this.state = {
headers:{
},
headers: {},
fileData: null,
};
}
beforeUpload = (file) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
if (!isJpgOrPng) {
message.error('只能上传JPG/PNG格式的图片哦！');
message.error("只能上传JPG/PNG格式的图片哦！");
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('图像文件要小于2MB哦！');
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'}});
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'}});
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 =>
getBase64(file, (imageUrl) =>
this.setState({
imageUrl,
}),)
})
);
return new Promise((resolve) => {
reader.onload = (e) => {
this.setState({ fileData: reader.result });
resolve()
}
})
resolve();
};
});
} else {
return false;
}
}
handleChange = info => {
};
handleChange = (info) => {};
customRequest = async () => {
if (this.state.fileData === null) {
message.error("图片未能正确读取哦！请重试！")
return
message.error("图片未能正确读取哦！请重试！");
return;
}
console.log(this.state.headers)
console.log(this.state.headers);
let result = await axios(
'https://1299271970796699.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/oss_upload/upload/',
"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("上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)")
message.success(
"上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)"
);
} else {
message.error("上传失败!可能是网络问题！")
message.error("上传失败!可能是网络问题！");
}
}
};
render() {
const uploadButton = (
@ -98,7 +102,17 @@ class UploadToOSS extends React.Component {
onChange={this.handleChange}
customRequest={this.customRequest}
>
{imageUrl ?<Avatar shape="square" size={120} icon="user" src= {imageUrl} style={{marginBlockEnd:24}}/> : uploadButton}
{imageUrl ? (
<Avatar
shape="square"
size={120}
icon="user"
src={imageUrl}
style={{ marginBlockEnd: 24 }}
/>
) : (
uploadButton
)}
</Upload>
);
}