diff --git a/src/glcc/student/index.jsx b/src/glcc/student/index.jsx index 296ba0cc0..98aeeb684 100644 --- a/src/glcc/student/index.jsx +++ b/src/glcc/student/index.jsx @@ -1,14 +1,14 @@ import React, { useCallback, useEffect, useState, Fragment } from 'react'; -import { Breadcrumb, Button, Form, Input, Select, Upload, Modal, Cascader, Tooltip } from 'antd'; -import { getUploadActionUrl, appendFileSizeToUploadFileAll } from 'educoder'; +import { Breadcrumb, Button, Form, Input, Select, Upload, Cascader, Spin } from 'antd'; +import { getUploadActionUrl, getUrl, appendFileSizeToUploadFileAll } from 'educoder'; import { locData } from '../../forge/Utils/locData'; -import { getStudentApplyInfo, applyGlcc } from '../api'; -import axios from 'axios'; +import { getStudentApplyInfo, taskList, studentApply, studentApplyEdit } from '../api'; import TextArea from 'antd/lib/input/TextArea'; -import { main_site_url } from '../fetch'; +import { httpUrl } from '../fetch'; import banner from "../img/banner.png"; import studentSvg from "../img/student.png"; import './index.scss'; +import { Link } from 'react-router-dom'; const Option = Select.Option; const gradeList = [ @@ -22,23 +22,25 @@ const gradeList = [ { id: '研三', name: '研三' }]; function Apply(props) { const { form, current_user, showNotification, isGlccApplyDate, match } = props; - const { taskId } = match.params; + const taskId = Number(match.params.taskId); // 可用于开发时不同账号报名 // current_user && (current_user.user_id = 6) // current_user && (current_user.userName = "创新使者") const { getFieldDecorator, validateFields, setFieldsValue, validateFieldsAndScroll } = form; const [imageUrl, setImageUrl] = useState(undefined); const [loading, setLoading] = useState(false); + const [reload, setReload] = useState(); const [userApplyInfo, setUserApplyInfo] = useState(undefined); const [editable, setEditable] = useState(true); const [files, setFiles] = useState([]); + const [files1, setFiles1] = useState([]); const initTask = { - memo: '', taskId, - taskName: '', + memo: '', + memoAttachmentId: '' }; - const [taskList, setTaskList] = useState([]); - + const [myTaskList, setMyTaskList] = useState([]); + const [allTaskList, setAllTaskList] = useState([]); useEffect(() => { // 进入此页面置顶 @@ -53,6 +55,19 @@ function Apply(props) { } }, []) + useEffect(() => { + const params = { + curPage: 1, + pageSize: 10000 + } + taskList(params).then(response => { + if (response && response.message === "success") { + setAllTaskList(response.data.rows); + } + }) + }, []) + + useEffect(() => { // 获取当前用户报名信息 current_user && getStudentApplyInfo({ userId: current_user.user_id }).then(response => { @@ -60,32 +75,65 @@ function Apply(props) { let data = response.data; let applyInfo = { grade: data.grade, - location: data.location && data.location.split(), + location: data.location && data.location.split(','), mail: data.mail, phone: data.phone, proveAttachmentId: data.proveAttachmentId, school: data.school, studentName: data.studentName, userId: current_user.user_id, - profession:data.profession, + profession: data.profession, }; + console.log(applyInfo); if (Array.isArray(data.registrationStudentTaskList) && data.registrationStudentTaskList.length) { - setTaskList(data.registrationStudentTaskList); + let initTaskList = []; for (const [i, item] of data.registrationStudentTaskList.entries()) { applyInfo['memo' + i] = item.memo; applyInfo['taskId' + i] = item.taskId; - applyInfo['taskName' + i] = item.taskName; - applyInfo['memoAttachmentId'+i] =item.memoAttachmentId; + applyInfo['memoAttachmentId' + i] = item.memoAttachmentId; + + if (i == 0) { + setFiles([{ + name: item.memoAttachment && item.memoAttachment.fileName || '已上传文件', + id: item.memoAttachmentId, + uid: item.memoAttachmentId + }]); + } else { + setFiles1([{ + name: item.memoAttachment && item.memoAttachment.fileName || '已上传文件', + id: item.memoAttachmentId, + uid: item.memoAttachmentId, + }]); + } + + initTaskList.push({ + id: item.id, + memo: item.memo, + memoAttachmentId: item.memoAttachmentId, + taskId: item.taskId, + }); + } + setMyTaskList(initTaskList); + + // 如果只有一条报名数据，且课题id与当前id不一致，那么新增一条默认数据 + if (data.registrationStudentTaskList.length === 1 && data.registrationStudentTaskList[0].taskId != taskId) { + addTask(data.registrationStudentTaskList); } } setFieldsValue(applyInfo); setUserApplyInfo(response.data); } else { - setTaskList([initTask]); + // 先增加数据再给选择框赋默认值，否则不生效 + new Promise((resove) => { + setMyTaskList(() => { + resove(); + return [initTask] + }); + }).then(res => setFieldsValue({ 'taskId0': taskId })) } }) - }, [current_user]) + }, [current_user, reload]) // 当用户输入结束时 检验用户输入是否符合规范 function verify(dataIndex) { @@ -101,10 +149,7 @@ function Apply(props) { e.preventDefault(); validateFieldsAndScroll((err, values) => { if (!err) { - // Modal.confirm({ - // title: "报名", - // content: "确定提交报名信息，提交后您仍可修改", - // onOk: () => { + setLoading(true); const params = { grade: values.grade, location: values.location.join(), @@ -112,23 +157,30 @@ function Apply(props) { phone: values.phone, proveAttachmentId: values.proveAttachmentId.file ? values.proveAttachmentId.file.response.id : userApplyInfo.proveAttachmentId, school: values.school, - profession:data.profession, + profession: values.profession, studentName: values.studentName, userId: current_user.user_id, - registrationStudentTaskList: taskList + registrationStudentTaskList: myTaskList } - // applyGlcc(params).then(response => { - // if (response && response.message === "success") { - // showNotification("报名成功"); - // setReload(Math.random()); - // } - // }) - // } - // }) - - console.log(params); - + if (userApplyInfo) { + params.id = userApplyInfo.id; + studentApplyEdit(params).then(response => { + if (response && response.message === "success") { + showNotification("修改信息成功"); + setReload(Math.random()); + setLoading(false); + } + }); + } else { + studentApply(params).then(response => { + if (response && response.message === "success") { + showNotification("报名成功"); + setReload(Math.random()); + setLoading(false); + } + }); + } } }); }; @@ -145,10 +197,6 @@ function Apply(props) { // 检查文件上传是否符合规定 function beforeUpload(file) { - // const isSmall = file.size / 1024 / 1024 < 2; - // if (!isSmall) { - // showNotification(`文件大小必须小于${2}MB!`); - // } const isType = file.type === "image/png" || file.type === "image/jpg" || file.type === "image/jpeg"; if (!isType) { showNotification("只能上传png、jpg、jpeg格式文件"); @@ -165,7 +213,7 @@ function Apply(props) { } } - // 上传完成后 + // 图片上传完成后 function handleChange(info) { if (info && info.file && info.file.status === "done") { getBase64(info.file.originFileObj, imageUrl => @@ -175,12 +223,24 @@ function Apply(props) { } // 自荐书上传 - function bookChange(info) { + function bookChange(info, i) { if (info.file.status === 'uploading' || info.file.status === "done" || info.file.status === 'removed') { setLoading(true); + if (info.file.status === "done") { + changeTaskItem('memoAttachmentId', info.fileList[0].response && info.fileList[0].response.data.id, i) + } + if (info.file.status === 'removed') { + console.log(1111) + changeTaskItem('memoAttachmentId', '', i); + } console.log(info.fileList); - setFiles(appendFileSizeToUploadFileAll(info.fileList).slice(-1)); + if (i) { + setFiles1(appendFileSizeToUploadFileAll(info.fileList).slice(-1)); + } else { + setFiles(appendFileSizeToUploadFileAll(info.fileList).slice(-1)); + } } + if (info.file.status === "done" || info.file.status === 'removed') { setLoading(false); } @@ -188,174 +248,219 @@ function Apply(props) { // 支持文件下载 function download(file) { - const fileId = file.id || file.response.id; - window.open(`${current_main_site_url}/api/attachments/${fileId}`); + const fileId = file.id || file.response.data.id; + window.open(`${httpUrl}/busiAttachments/download/${fileId}`); } - function addTask() { - let taskListNew = [...taskList]; - taskListNew.push(initTask); - setTaskList(taskListNew); + function addTask(List) { + let taskListNew = List ? [...List] : [...myTaskList]; + if (taskId != taskListNew[0].taskId) { + taskListNew.push(initTask); + // 先增加数据再给选择框赋默认值，否则不生效 + new Promise((resove) => { + setMyTaskList(() => { + resove(); + return taskListNew + }); + }).then(res => setFieldsValue({ 'taskId0': taskId })) + } else { + taskListNew.push({ ...initTask, taskId: '' }); + setMyTaskList(taskListNew); + } } function deleteTask(i) { - let taskListNew = [...taskList]; + let taskListNew = myTaskList.slice(); + let reWriteInfo; + if (i) { + reWriteInfo = { + taskId1: '', + memo1: '', + memoAttachmentId1: '' + } + setFiles1([]); + } else { + reWriteInfo = { + taskId0: taskListNew[1].taskId, + memo0: taskListNew[1].memo, + memoAttachmentId0: taskListNew[1].memoAttachmentId, + taskId1: '', + memo1: '', + memoAttachmentId1: '' + } + setFiles(files1); + setFiles1([]); + } + taskListNew.splice(i, 1); - setTaskList(taskListNew); + setMyTaskList(taskListNew); + setFieldsValue(reWriteInfo); } function changeTaskItem(field, val, i) { - let taskListNew = [...taskList]; + let taskListNew = [...myTaskList]; taskListNew[i][field] = val; - setTaskList(taskListNew); + setMyTaskList(taskListNew); } return (
-
- - 开源夏令营 - 查看项目 - 学生报名 - + +
+ + 开源夏令营 + 查看项目 + 学生报名 + -
-

申请说明：

-
1、学生报名时间为2022年5月21日-6月19日，请在报名截止时间（北京时间2022年6月19日18点）前提交报名信息。
-
2、本次GLCC夏令营基于GitLink代码托管平台完成编程任务，若您没有平台账户，请先注册后完成课题申请
-
3、每位学员最多可申请2个课题，至多有且仅有1个课题可以入选
-
4、建议在提交课题申请，与课题导师邮件沟通，详细了解课题描述、编码任务、技能要求&编程语言、预期产出结果等信息，以便您能够选择最适合的课题
-
5、提交申请后，请耐心等待，我们会在2022年7月1日公布入围结果。如有任何问题，请添加开源夏令营微信群进行咨询
-
-
- 学生报名 -
-
申请课题
-
-

基本信息

- {helper('学生姓名', - '', - 'studentName', - [{ required: true, message: "请正确输入学生姓名" }, - { max: 32, message: '超出限制长度32位字符，请重新编辑' }], - { verify("studentName") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> - )} - {helper('所在高校', - '', - 'school', - [{ required: true, message: "请正确输入所在高校" }, - { max: 32, message: '超出限制长度32位字符，请重新编辑' }], - { verify("school") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> - )} - {helper('所学专业', - '', - 'profession', - [{ max: 32, message: '超出限制长度32位字符，请重新编辑' }], - { verify("profession") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> - )} - - {getFieldDecorator("location", { - rules: [] - })( - +
+

申请说明：

+
1、学生报名时间为2022年5月21日-6月19日，请在报名截止时间（北京时间2022年6月19日18点）前提交报名信息。
+
2、本次GLCC夏令营基于GitLink代码托管平台完成编程任务，若您没有平台账户，请先注册后完成课题申请
+
3、每位学员最多可申请2个课题，至多有且仅有1个课题可以入选
+
4、建议在提交课题申请，与课题导师邮件沟通，详细了解课题描述、编码任务、技能要求&编程语言、预期产出结果等信息，以便您能够选择最适合的课题
+
5、提交申请后，请耐心等待，我们会在2022年7月1日公布入围结果。如有任何问题，请添加开源夏令营微信群进行咨询
+
+
+ 学生报名 +
+
申请课题
+ +

基本信息

+ {helper('学生姓名', + '', + 'studentName', + [{ required: true, message: "请正确输入学生姓名" }, + { max: 32, message: '超出限制长度32位字符，请重新编辑' }], + { verify("studentName") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> + )} + {helper('所在高校', + '', + 'school', + [{ required: true, message: "请正确输入所在高校" }, + { max: 32, message: '超出限制长度32位字符，请重新编辑' }], + { verify("school") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> + )} + {helper('所学专业', + '', + 'profession', + [{ max: 32, message: '超出限制长度32位字符，请重新编辑' }], + { verify("profession") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> + )} + + {getFieldDecorator("location", { + rules: [] + })( + + )} + + {helper('所在年级', + '', + 'grade', + [], + + )} + {helper('联系电话', + '', + 'phone', + [{ required: true, message: "请正确输入联系电话" }], + { verify("phone") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> + )} + {helper('邮箱地址', + '', + 'mail', + [{ required: true, message: "请正确输入邮箱地址" }], + { verify("mail") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> )} - - {helper('所在年级', - '', - 'grade', - [], - - )} - {helper('联系电话', - '', - 'phone', - [{ required: true, message: "请正确输入联系电话" }], - { verify("phone") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> - )} - {helper('邮箱地址', - '', - 'mail', - [{ required: true, message: "请正确输入邮箱地址" }], - { verify("mail") }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> - )} -
{helper('学生证明', - '请以图片的形式上传学生证明，格式为png、jpg、jpeg', - 'proveAttachmentId', - [{ required: true, message: "请正确上传学生证明" }], - userApplyInfo && userApplyInfo.proveAttachmentId ?
- : - {imageUrl ? avatar :
- -
请上传学生证明
-
} - - )}
+
{helper('学生证明', + '请以图片的形式上传学生证明，格式为png、jpg、jpeg', + 'proveAttachmentId', + [{ required: true, message: "请正确上传学生证明" }], + userApplyInfo && userApplyInfo.proveAttachmentId ?
+ : + {imageUrl ? avatar :
+ +
请上传学生证明
+
} + + )}
- { - taskList.map((item, i) => { - return ( - -

课题信息（{i + 1}/2) {taskList.length > 1 && { deleteTask(i) }}>}

- {helper('课题名称', - '', - 'taskName' + i, - [{ required: true, message: "请正确输入课题名称" }], - { verify("taskName" + i); changeTaskItem("taskName", e.currentTarget.value, i) }} className={editable ? "" : "disabledInput"} disabled={editable ? false : true} /> - )} -
{helper('自荐书', - '', - 'memo' + i, - [{ required: true, message: "请正确输入自荐书" }, - { max: 500, message: '超出限制长度500位字符，请重新编辑' }], -