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

381
src/components/Sheet.js
View File

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

114
src/components/UploadToOSS.js
View File

@ -1,10 +1,10 @@
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);
} }
@ -12,93 +12,107 @@ 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) => {
beforeUpload = (file)=>{ const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) { if (!isJpgOrPng) {
message.error('只能上传JPG/PNG格式的图片哦！'); message.error("只能上传JPG/PNG格式的图片哦！");
} }
const isLt2M = file.size / 1024 / 1024 < 2; const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) { if (!isLt2M) {
message.error('图像文件要小于2MB哦！'); message.error("图像文件要小于2MB哦！");
} }
if(!this.props.stuid){ if (!this.props.stuid) {
message.error("请先填写学号！"); message.error("请先填写学号！");
} }
if (isJpgOrPng && isLt2M && this.props.stuid){ if (isJpgOrPng && isLt2M && this.props.stuid) {
if(file.type === 'image/png') { if (file.type === "image/png") {
this.setState({headers:{ this.setState({
'Content-Type': 'application/octet-stream', headers: {
'stuid':this.props.stuid, "Content-Type": "application/octet-stream",
'pic-type':'png'}}); stuid: this.props.stuid,
}else{ "pic-type": "png",
this.setState({headers:{ },
'Content-Type': 'application/octet-stream', });
'stuid':this.props.stuid, } else {
'pic-type':'jpg'}}); this.setState({
headers: {
"Content-Type": "application/octet-stream",
stuid: this.props.stuid,
"pic-type": "jpg",
},
});
} }
let reader = new FileReader(); let reader = new FileReader();
reader.readAsArrayBuffer(file); reader.readAsArrayBuffer(file);
getBase64(file, imageUrl => getBase64(file, (imageUrl) =>
this.setState({ this.setState({
imageUrl, imageUrl,
}),) })
);
return new Promise((resolve) => { return new Promise((resolve) => {
reader.onload = (e) => { reader.onload = (e) => {
this.setState({fileData:reader.result}); this.setState({ fileData: reader.result });
resolve() resolve();
} };
}) });
}else{ } else {
return false; return false;
} }
}
handleChange = info => {
}; };
customRequest = async () =>{ handleChange = (info) => {};
if(this.state.fileData === null){ customRequest = async () => {
message.error("图片未能正确读取哦！请重试！") if (this.state.fileData === null) {
return message.error("图片未能正确读取哦！请重试！");
return;
} }
console.log(this.state.headers) console.log(this.state.headers);
let result = await axios( 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, headers: this.state.headers,
method: "POST", method: "POST",
data: this.state.fileData, data: this.state.fileData,
} }
) );
if (result.data==="Success!") { if (result.data === "Success!") {
message.success("上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)") message.success(
}else{ "上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)"
message.error("上传失败!可能是网络问题！") );
} else {
message.error("上传失败!可能是网络问题！");
} }
} };
render() { render() {
const uploadButton = ( const uploadButton = (
<Button style={{marginBlockEnd:24}}> <Button style={{ marginBlockEnd: 24 }}>
<Icon type="upload" /> 点击或拖拽文件到此处以上传照片 <Icon type="upload" /> 点击或拖拽文件到此处以上传照片
</Button> </Button>
); );
const { imageUrl } = this.state; const { imageUrl } = this.state;
return ( return (
<Upload <Upload
showUploadList = {false} showUploadList={false}
beforeUpload={this.beforeUpload} beforeUpload={this.beforeUpload}
onChange={this.handleChange} onChange={this.handleChange}
customRequest = {this.customRequest} 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> </Upload>
); );
} }