forgeplus-react/src/glcc/interimReview/studentSubmit.jsx

import React, { useEffect, useState } from "react";
import { Form, Upload, Input, Icon, Button, message } from "antd";
import { Link } from "react-router-dom";
import banner from '../img/banner-interim.png';
import img1 from '../img/img1.png';
import bg from '../img/bgPng.png';
import { httpUrl, main_site_url } from '../fetch';
import {getMediumTermExamineInfo, submitMedium} from '../api';
import './index.scss';

function StudentSubmit(props){
  const {form, checkedTaskId, checkTime1, studentRegId, history} = props;
  const {getFieldDecorator, validateFieldsAndScroll } = form;
  const [detail, setDetail] = useState(undefined);
  const [reload, setReload] = useState(undefined);
  const [fileList, setFileList] = useState(undefined);
  // 学生提交信息之后按钮置灰（确保无重复提交）
  const [disabled, setDisabled] = useState(false);
  // 学生提交材料时间
  const submitTime = new Date().getTime() < new Date('2022/10/14 24:0').getTime();
  // 学生提醒导师评分时间
  const lookTime = new Date().getTime() > new Date('2022/10/15 0:0').getTime() && new Date().getTime() < new Date('2022/10/20 24:0').getTime();

  useEffect(()=>{
    if(!checkTime1){
      history.push("/glcc");
    }
  }, [])

  useEffect(()=>{
    // 查询是否已经提交考核材料
    checkedTaskId && getMediumTermExamineInfo(checkedTaskId,{term: 2}).then(res=>{
      if(res && res.message === "success"){
        setDetail(res.data);
      }
    })
  },[checkedTaskId, reload])

  // 学生提交材料
  function submit(e){
    setDisabled(true);
    e.preventDefault();
    validateFieldsAndScroll((err, values) => {
      if(!err){
        const {pptAttachment, defenceVideoUrl, codeOrPrUrl} = values;
        const pptAttachmentId = pptAttachment.file.response.data.id;
        const params = {
          pptAttachmentId,
          codeOrPrUrl,
          defenceVideoUrl,
          taskId: checkedTaskId,
          studentRegId: studentRegId,
          term: 2
        }
        submitMedium(params).then(res=>{
          if(res && res.message === "success"){
            if(!res.data){
              setReload(Math.random());
            }else if(res.data.code === '-1'){
              message.error('不可重复提交');
            }
          }
        })
      }
    })
  }
  // 检查文件上传是否符合规定
  function changeFileList(e) {
    const {fileList} = e;
    console.log('fileList', fileList, e);
    const lastFile = fileList.splice(fileList.length-1, fileList.length);
    setFileList(lastFile);
  }
  return <div className="interimBox">
    <img src={banner} alt="" className="bannerInterim"/>
    <img src={bg} alt="" className="bg1"/>
    <img src={bg} alt="" className="bg2"/>
    <div className="mainBox">
      <div className="navBox font-16"><Link to={`/glcc`} className="linkBox">开源夏令营 / </Link>提交结项考核材料</div>
      <div className="tipBox mt30">
        <div className="font-15 spanBox">材料提交说明:</div>
        <div>1、请各位学生<a href={`${main_site_url.indexOf("gitlink") !== -1 ? '/api/attachments/392565' : httpUrl+'/busiAttachments/download/169'}`} className="blueSpan">下载PPT模板</a> ，根据课题开发进展，按照PPT模板要求填写课题学习调研方案、开发进度及开发成果等考核材料；</div>
        <div>2、欢迎各位学生录制本课题答辩视频，将视频链接填写至下方视频介绍填写栏；</div>
        <div>3、学生提交考核材料的时间为<span className="spanBox">2022年10月1日8点至2022年10月14日24点</span>，请在截止时间前提交；</div>
        <div>4、若导师已给出评分，各位学生可在此页面查看自己的结项考核成绩。对考核成绩有异议的学生请及时联系您的导师。</div>
      </div>
      <div className="titleBox mt25 font-18">
        <img src={img1} alt="" width={24} className="mr5"/>
        结项考核
      </div>
      {submitTime && !detail ? <Form className="referBox" onSubmit={submit} colon={false}>
        <Form.Item label="答辩视频" className="referItem">
          {getFieldDecorator('defenceVideoUrl', {
            rules: [{ required: true, message: '请输入视频链接!'}, {pattern: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,message: "请正确输入链接"}],
          })(<Input placeholder="请输入视频链接" maxLength={900}/>)}
        </Form.Item>
        <Form.Item label="代码/pr地址" className="referItem">
          {getFieldDecorator('codeOrPrUrl', {
            rules: [{pattern: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,message: "请正确输入链接"}],
          })(<Input placeholder="请输入代码或pr链接" maxLength={900}/>)}
        </Form.Item>
        <Form.Item label="PPT附件" className="referItem oneCont">
          {getFieldDecorator('pptAttachment', {
            rules: [{ required: true, message: '请上传PPT附件!' }],
          })(<Upload className="avatar-uploader" action={httpUrl + `/busiAttachments/upload`} onChange={changeFileList} fileList={fileList}>
              <Button className="uploadBox"><Icon type="upload" /> 上传</Button></Upload>)}
        </Form.Item>
        <Form.Item className="referItem oneCont">
          <Button style={{width: '100px', height: '36px'}} className="mt30 ml20" type="primary" htmlType="submit" disabled={disabled && !detail}>提交</Button>
        </Form.Item>
      </Form> : <div className={`reviewBox referBox resultBox ${!detail ? 'nullData' : ''}`}>
        <div className="flexBox">
          <div className="mustSpan mb20">&nbsp;&nbsp;答辩视频<span className="blueBg ml10"><a href={detail && detail.defenceVideoUrl} target="_blank">{detail && detail.defenceVideoUrl}</a></span></div>
          <div>代码/pr地址<span className="blueBg ml10"><a href={detail && detail.codeOrPrUrl} target="_blank">{detail && detail.codeOrPrUrl}</a></span></div>
          <div className="mustSpan ppt mb20">&nbsp;&nbsp;&nbsp;PPT附件{detail && <i className="iconfont icon-lianjie3 font-13 mr5 ml10"></i>}{detail ? <a className="pptAttachment mr10" href={`${httpUrl}/busiAttachments/download/${detail.pptAttachment.id}`}>{`${detail.pptAttachment.fileName}`}</a> : <Button className="uploadBox ml10" disabled><Icon type="upload" /> 上传</Button>}{detail && detail.pptAttachment && detail.pptAttachment.fileSizeString}</div>
        </div>
        {!detail && <div className="nullDateTip font-15">很遗憾，您在指定时间内未提交考核材料</div>}
        {detail && lookTime && !detail.glccTutorEvaluation && <div className="font-15 nullDateTip">您的课题导师暂未评分，请提醒导师尽快提交结项考核评分</div>}
        {detail && detail.glccTutorEvaluation && <div className="tutorRes">
          <div>您的课题导师对您的结项考核评价如下，如有异议，请及时联系导师进行更改。</div>
          <div className="mt10 mb10 smallTil">
            工作态度: <span className="blueSpan ml5">{detail.glccTutorEvaluation.workAttitudeEvaluation}</span><br/>
            开发进度: <span className="blueSpan ml5">{detail.glccTutorEvaluation.developProgressEvaluation}</span><br/>
            项目完成质量: <span className="blueSpan ml5">{detail.glccTutorEvaluation.projectQualityEvaluation}</span><br/>
            总体评分: <span className="blueSpan ml5">{detail.glccTutorEvaluation.totalityEvaluation}</span><span className={`passStatusBox ml20 font-15 ${detail.glccTutorEvaluation.totalityEvaluation === 'D' ? '' : 'pass'}`}>{detail.glccTutorEvaluation.totalityEvaluation === 'D' ? '未通过' : '通过'}</span>
          </div>
          <div className="flexBox"><div><span className="smallTil">导师评语: </span><span className="ml10 tutorRemark">{detail.glccTutorEvaluation.comment}</span></div></div>
        </div>}
      </div>}
    </div>
  </div>
}
export default Form.create()(StudentSubmit);