forked from Gitlink/forgeplus-react
204 lines
9.1 KiB
JavaScript
204 lines
9.1 KiB
JavaScript
import React, { Fragment, useEffect, useState } from 'react';
|
||
import { Checkbox, Input, message, Modal, Table, Tooltip } from 'antd';
|
||
import './index.scss';
|
||
import { cancelTaskApply, taskList } from '../../api';
|
||
import ProjectDetail from '../component/projectDetail';
|
||
import bgPng from "../../img/bgPng.png";
|
||
const { Search } = Input;
|
||
|
||
// 课题列表
|
||
function TaskList({applyTaskId, setStudentInfoReset, current_user, showLoginDialog,cancelCount,showNotification, applyTask, round, match:{params:{id}}, period, currentRound, lockedTaskName }) {
|
||
const [visible, setVisible] = useState(false);
|
||
const [deleteTaskId, setDeleteTaskId] = useState(undefined);
|
||
// 输入搜索框
|
||
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([]);
|
||
// 已报名
|
||
const [apply, setApply] = useState(false);
|
||
// 可申请课题
|
||
const [isAvailable, setIsAvailable] = useState(false);
|
||
|
||
const columns = [
|
||
{ title: '序号', dataIndex: 'index', align: 'center', className:"taskTableColumns", width: '6%', render: (text, item, index) => <span>{(current-1)*pageSize+index + 1}</span> },
|
||
{ title: '课题名称', dataIndex: 'taskName', className:"taskTableColumns taskName", width: '24%', ellipsis: true, render: (text, item) => <Tooltip title={text} placement="topLeft"><span onClick={()=>{window.open(`/glcc/${id}/subjects/detail/${item.id}`)}}>{text}</span></Tooltip> },
|
||
{ title: '课题类型', dataIndex: 'projectType', className:"taskTableColumns", width: '12%', ellipsis: true, },
|
||
{ title: '项目名称', dataIndex: 'projectName', className:"taskTableColumns", width: '24%', ellipsis: true, render: (text) => <Tooltip title={text} placement="topLeft">{text}</Tooltip> },
|
||
{ title: '课题奖金', dataIndex: 'taskReward', className:"taskTableColumns", ellipsis: true, width: '10%', render: (text) => <Tooltip title={text} placement="topLeft"><span>{text}</span></Tooltip> },
|
||
{
|
||
title: '操作', dataIndex: 'action', align: 'center', className:"actionColumns taskTableColumns", render: ((text, item, index) => {
|
||
return (
|
||
<div className='actionBox'>
|
||
{/* 报名详情按钮 */}
|
||
{round === currentRound && applyTaskId && Object.keys(applyTaskId).includes(item.id.toString()) && <span onClick={()=>{window.location.href=`/glcc/student/apply/${item.id}`}}><i className='iconfont icon-baomingxiangqingicon mr5'></i>报名详情</span>}
|
||
|
||
{/* 取消按钮 */}
|
||
{round === currentRound && (period === "stuApply" || period === "stuApply1") && applyTaskId && Object.keys(applyTaskId).includes(item.id.toString()) && !lockedTaskName && <Tooltip title={"取消申请"}><i className='iconfont icon-shanchuicon3 ml20 cancelApply' onClick={()=>{deleteItem(item.id)}}></i></Tooltip>}
|
||
|
||
{/* 课题申请时间范围内： 申请课题 */}
|
||
{/* 第一次报名 */}
|
||
{round === currentRound && period === "stuApply" && !(applyTaskId && Object.keys(applyTaskId).includes(item.id.toString())) && <span onClick={()=>{applyTask(item.id)}}><i className='iconfont icon-shenqingketiicon applyTask mr5'></i><span className='applyTask'>申请课题</span></span>}
|
||
{/* 补录阶段 锁定状态 */}
|
||
{round === currentRound && period === "stuApply1" && !(applyTaskId && Object.keys(applyTaskId).includes(item.id.toString())) && (item.locked ? <Tooltip title={"该课题已有学生入选"}><span className='disabled'><i className='iconfont icon-shenqingketiicon mr5 disabled'></i><span className='disabled'>申请课题</span></span></Tooltip> : <span onClick={()=>{applyTask(item.id, item.locked)}}><i className='iconfont icon-shenqingketiicon applyTask mr5'></i><span className='applyTask'>申请课题</span></span>)}
|
||
</div>
|
||
)
|
||
})
|
||
},
|
||
]
|
||
|
||
function deleteItem(id){
|
||
if(cancelCount==2){
|
||
showNotification("您的取消报名次数已用光，请联系导师处理相关报名审核信息");
|
||
}else{
|
||
setDeleteTaskId(id);
|
||
setVisible(true);
|
||
}
|
||
}
|
||
|
||
const customExpandIcon = (props) => {
|
||
if (props.expanded) {
|
||
return <a className='actionBox' 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='actionBox' 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 id={id} detail={null} projectId={record.regId} applyTaskId={applyTaskId} current_user={current_user} showLoginDialog={showLoginDialog} period={period} showNotification={showNotification} applyTask={applyTask} round={round}/>
|
||
}
|
||
|
||
// 展开收起行回调
|
||
function onExpand(expanded, record){
|
||
const keys = new Set(expandedRowKeys);
|
||
if(expanded){
|
||
keys.add(record.id);
|
||
}else{
|
||
keys.delete(record.id);
|
||
}
|
||
setExpandedRowKeys(Array.from(keys));
|
||
}
|
||
|
||
// 取消课题按钮点击函数
|
||
function cancelApply(){
|
||
const id = [];
|
||
id.push(applyTaskId[deleteTaskId]);
|
||
const params = {
|
||
ids: id,
|
||
round
|
||
}
|
||
cancelTaskApply(params).then(response=>{
|
||
if(response && response.message === "success"){
|
||
setVisible(false);
|
||
setStudentInfoReset(Math.random());
|
||
message.success('取消成功');
|
||
}
|
||
})
|
||
}
|
||
|
||
// 改变pagesize
|
||
function onShowSizeChange(current, pageSize){
|
||
window.scrollTo(0, 0);
|
||
setCurrent(1);
|
||
setPageSize(pageSize);
|
||
}
|
||
|
||
// 切换页数
|
||
function changePage(page, pageSize){
|
||
window.scrollTo(0, 0);
|
||
setCurrent(page);
|
||
}
|
||
|
||
// 数组元素置顶方法
|
||
function toFirst(data, index){
|
||
if(index != 0){
|
||
data.unshift(data.splice(index,1)[0]);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
setExpandedRowKeys([]);
|
||
setLoading(true);
|
||
const params = {
|
||
curPage: current,
|
||
keyword,
|
||
pageSize,
|
||
userId: apply ? current_user.user_id : '',
|
||
round,
|
||
locked: isAvailable ? false : undefined
|
||
}
|
||
console.log('params', params);
|
||
taskList(params).then(response => {
|
||
if (response && response.message === "success") {
|
||
const data = response.data.rows;
|
||
if(period === "stuApply1"){
|
||
// 将可再报名的课题置顶
|
||
const applyIds = data.filter(item=>!item.locked).map(item=>item.id);
|
||
data.map((item, index)=>{
|
||
applyIds.includes(item.id) && toFirst(data, index);
|
||
})
|
||
}
|
||
// 将已报名task任务置顶
|
||
const ids = Object.keys(applyTaskId);
|
||
data.map((item, index)=>{
|
||
ids.includes(item.id.toString()) && toFirst(data, index);
|
||
})
|
||
setData(data);
|
||
setTotal(response.data.total);
|
||
}
|
||
setLoading(false);
|
||
})
|
||
}, [keyword, current, pageSize, applyTaskId, apply, round, isAvailable])
|
||
|
||
return (
|
||
<div className="taskList listBox">
|
||
<div className="list">
|
||
<div className='search task'>
|
||
<div>
|
||
{round === 2 && current_user && current_user.login ? <Checkbox onChange={(e)=>{setCurrent(1);setApply(e.target.checked)}}>已报名</Checkbox> : <div></div>}
|
||
{round === 2 && period === "stuApply1" && <Checkbox onChange={(e)=>{setCurrent(1);setIsAvailable(e.target.checked)}}>可申请课题</Checkbox>}
|
||
</div>
|
||
<Search className='taskSearch' placeholder='请输入课题/项目名称进行搜索' allowClear enterButton onSearch={(value) => { setCurrent(1); setKeyword(value) }} />
|
||
<div></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}}
|
||
/>
|
||
</div>
|
||
<img src={bgPng} alt='' className='bgPng3'/>
|
||
<img src={bgPng} alt='' className='bgPng4'/>
|
||
<Modal
|
||
okText="确认"
|
||
cancelText="再想想"
|
||
okType='default'
|
||
title="取消申请"
|
||
visible={visible}
|
||
onCancel={()=>{setVisible(false)}}
|
||
onOk={cancelApply}
|
||
wrapClassName='cancelApplyTask'
|
||
>
|
||
<div className='tilTask mt20'><span className='carefulIcon'>!</span>确定取消申请此课题？</div>
|
||
<p className='tipTask'>取消申请后将删除此条申请记录。你仅有<span className="tipTaskTime"> {2-cancelCount} </span>次取消申请的机会</p>
|
||
</Modal>
|
||
</div>
|
||
)
|
||
}
|
||
export default TaskList; |