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

import React, { useEffect, useState } from 'react';
import { Input, Table, Tooltip, Checkbox } from 'antd';
import { getMediumTermExamineInfoList } from '../api';
import ProjectDetail from '../project/component/projectDetail';
import resultBanner from "../img/resultBanner3.png";
import bgPng from "../img/bgPng.png";
import './index.scss';
import '../checkResult/index.scss';
import '../project/taskList/index.scss';
import '../project/index.scss';
const { Search } = Input;

// 课题列表
function CheckResult({current_user, history, checkTime3}) {
  // 输入搜索框
  const [keyword, setKeyword] = useState(undefined);
  const [data, setData] = useState([]);
  // table
  const [current, setCurrent] = useState(1);
  const [total, setTotal] = useState(0);
  const [pageSize, setPageSize] = useState(20);
  const [loading, setLoading] = useState(false);
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);

  useEffect(()=>{
    // 未到时间
    if(!checkTime3){
      history.push('/glcc');
    }
  },[])

  useEffect(() => {
    setLoading(true);
    setExpandedRowKeys([]);
    const params = {
      curPage: current,
      keyword,
      pageSize
    }
    getMediumTermExamineInfoList(params).then(response => {
      if (response && response.message === "success") {
        response.data.rows.map((item, index)=>{
          item.id = (current-1)*pageSize+index + 1;
        })
        setData(response.data.rows);
        setTotal(response.data.total);
      }
      setLoading(false);
    })
  }, [keyword, current, pageSize])

  const columns = [
    { title: '序号', dataIndex: 'index', align: 'center', className:"columnsResult", width: '6%', render: (text, item, index) => <span>{(current-1)*pageSize+index + 1}</span> },
    { title: '入选学生', dataIndex: 'studentName', className:"columnsResult taskName", width: '10%', ellipsis: true},
    { title: '课题导师', dataIndex: 'tutorName', className:"columnsResult", width: '10%', ellipsis: true},
    { title: '课题名称', dataIndex: 'taskName', className:"columnsResult", width: '20%', ellipsis: true, render: (text, item) => <Tooltip title={text} placement="topLeft"><span className='toolTipSpan link' onClick={()=>{window.open(`/glcc/subjects/detail/${item.taskId}`)}}>{text}</span></Tooltip> },
    { title: '项目名称', dataIndex: 'projectName', className:"columnsResult", ellipsis: true, width: '14%', render: (text) => <Tooltip title={text} placement="topLeft"><span className='toolTipSpan'>{text}</span></Tooltip> },
    { title: '项目简介', dataIndex: 'introduce', className:"columnsResult", width: '13%', ellipsis: true},
    { title: '答辩视频', dataIndex: 'defenceVideoUrl', className:"columnsResult", width: '15%', ellipsis: true, render: (text, item) => <Tooltip title={text} placement="topLeft"><span className='toolTipSpan link' onClick={()=>{window.open(text)}}>{text}</span></Tooltip>},
    { title: '考核结果', dataIndex: 'totalityEvaluation', align: 'center', className:"columnsResult actionBox", render: (text, item, index) => <span>{text === 'D' || !text ? '未通过' : '通过'}</span>},
  ]

  const customExpandIcon = (props) => {
    if (props.expanded) {
      return <a className='toolTipSpan link' style={{marginRight: 8 }} onClick={e => {
        props.onExpand(props.record, e);
      }}><i className='iconfont icon-ketixiangqingicon mr5'></i>项目简介<i className="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu- font-12 ml5 down mr10"></i></a>
    } else {
      return <a className='toolTipSpan link' style={{marginRight: 8 }} onClick={e => {
        props.onExpand(props.record, e);
      }}><i className='iconfont icon-ketixiangqingicon mr5'></i>项目简介<i className="iconfont icon-jiantou9 font-12 ml5 down mr10"></i></a>
    }
  }

  const expandRow = (record) => {
    return <ProjectDetail detail={null} projectId={record.projectIntro} showTask={false}/>
  }

  // 展开收起行回调
  function onExpand(expanded, record){
    const keys = new Set(expandedRowKeys);
    if(expanded){
      keys.add(record.id);
    }else{
      keys.delete(record.id);
    }
    setExpandedRowKeys(Array.from(keys));
  }

  // 改变pagesize
  function onShowSizeChange(current, pageSize){
    window.scrollTo(0, 0);
    setCurrent(1);
    setPageSize(pageSize);
  }

  // 切换页数
  function changePage(page, pageSize){
    window.scrollTo(0, 0);
    setCurrent(page);
  }

  return (
    <div className="interimBox taskList resultListBox">
      <img className="bannerInterim" src={resultBanner} alt=""></img>
      <div className='bgBox'>
        <div className="resultList">
          <div className='goBackBox'><a href='/glcc'>开源夏令营 / </a>中期课题考核结果公示</div>
          <div className='searchBox'>
            <Search className='search' placeholder='请输入学生姓名或课题名称进行搜索' allowClear enterButton onSearch={(value) => { setCurrent(1); setKeyword(value) }} />
            <div style={{width: 100}}></div>
          </div>
          <Table
            loading={loading}
            columns={columns}
            dataSource={data}
            expandedRowRender={expandRow}
            expandIconColumnIndex={5}
            expandIconAsCell={false}
            expandIcon={customExpandIcon}
            rowKey={'id'}
            expandedRowKeys={expandedRowKeys}
            onExpand={onExpand}
            pagination={{current: current, pageSize: pageSize, total: total, showSizeChanger: true, onShowSizeChange:onShowSizeChange, showQuickJumper: true, onChange: changePage}}
            className='resultListTable pb30'
          />
        </div>
        <img src={bgPng} alt='' className='bgPng3'/>
        <img src={bgPng} alt='' className='bgPng4'/>
      </div>
    </div>
  )
}
export default CheckResult;