forked from Gitlink/forgeplus-react
'update-glcc'
This commit is contained in:
namezlx
parent
f00b9830bf
commit
6995a898d9
|
|
@ -0,0 +1,8 @@
|
|||
.lastLineScroll {
|
||||
max-height: 220px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.lastTwoScroll {
|
||||
max-height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
|
@ -3,8 +3,9 @@ import { Button, message, Tooltip } from 'antd';
|
|||
import Nodata from '../../../forge/Nodata';
|
||||
import { useEffect } from 'react';
|
||||
import { getProjectById } from '../../api';
|
||||
import './index.scss';
|
||||
|
||||
export default ({ detail, projectId, applyTaskId, period, showTask=true, applyTask, id, round }) => {
|
||||
export default ({ detail, projectId, applyTaskId, period, showTask=true, applyTask, id, round, listLen }) => {
|
||||
const [info, setInfo] = useState(detail);
|
||||
|
||||
useEffect(()=>{
|
||||
|
|
@ -27,33 +28,41 @@ export default ({ detail, projectId, applyTaskId, period, showTask=true, applyTa
|
|||
<div>项目简介: {info.projectIntro}</div>
|
||||
</div>
|
||||
{/* 从项目、课题列表展开的显示课题列表，结果公示页展开的不显示课题列表 */}
|
||||
{showTask && (info.registrationTaskList && info.registrationTaskList.length > 0 ? info.registrationTaskList.map((item, index)=>{
|
||||
return <div className='taskItem mt20' key={index}>
|
||||
<div className="left">
|
||||
<div className="taskTitle" onClick={()=>{window.location.href=`/glcc/${id}/subjects/detail/${item.id}`}}><Tooltip title={item.taskName}>{item.taskName}</Tooltip></div>
|
||||
<div className='mt20 oneLine leftWidth'>导师姓名: {item.tutorName}</div>
|
||||
{item.tutorMail && <div className='mb20 email oneLine leftWidth'>邮箱地址: <span><Tooltip title={item.tutorMail}>{item.tutorMail}</Tooltip></span></div>}
|
||||
</div>
|
||||
<div className="center">
|
||||
<div className="taskDesc">{item.taskDesc}</div>
|
||||
{item.taskUrl && <div className="taskUrl oneLine">课题链接: <a href={item.taskUrl} target={"_blank"}>{item.taskUrl}</a></div>}
|
||||
<div>
|
||||
{/* 报名详情按钮 */}
|
||||
{round === 2 && applyTaskId && Object.keys(applyTaskId).includes(item.id.toString()) && <Button onClick={()=>{window.location.href=`/glcc/student/apply/${item.id}`}} className='lookDetail mr10'>报名详情</Button>}
|
||||
|
||||
{/* 课题申请时间范围内： 申请课题 */}
|
||||
{/* 第一次报名 */}
|
||||
{round === 2 && period === "stuApply" && !(applyTaskId && Object.keys(applyTaskId).includes(item.id.toString())) && <Button type='primary' className='applyBut mr10' onClick={()=>{applyTask(item.id)}}>申请课题</Button>}
|
||||
{/* 第二次报名 锁定状态 */}
|
||||
{round === 2 && period === "stuApply1" && !(applyTaskId && Object.keys(applyTaskId).includes(item.id.toString())) && (item.locked ? <Tooltip title={"该课题已有学生入选"}><Button type='primary' className='mr10' disabled>申请课题</Button></Tooltip> : <Button type='primary' className='applyBut mr10' onClick={()=>{applyTask(item.id)}}>申请课题</Button>)}
|
||||
|
||||
{/* 查看课题详情按钮 */}
|
||||
<Button onClick={()=>{window.open(`/glcc/${id}/subjects/detail/${item.id}`)}} className='lookDetail'>课题详情</Button>
|
||||
<div className={
|
||||
showTask && info.registrationTaskList &&
|
||||
info.registrationTaskList.length &&
|
||||
listLen == 2 &&
|
||||
info.registrationTaskList.length >= 2
|
||||
? 'lastLineScroll' : listLen == 3 &&
|
||||
showTask && info.registrationTaskList.length >= 3 ? 'lastTwoScroll' : '' }>
|
||||
{showTask && (info.registrationTaskList && info.registrationTaskList.length > 0 ? info.registrationTaskList.map((item, index)=>{
|
||||
return <div className='taskItem mt20' key={index}>
|
||||
<div className="left">
|
||||
<div className="taskTitle" onClick={()=>{window.location.href=`/glcc/${id}/subjects/detail/${item.id}`}}><Tooltip title={item.taskName}>{item.taskName}</Tooltip></div>
|
||||
<div className='mt20 oneLine leftWidth'>导师姓名: {item.tutorName}</div>
|
||||
{item.tutorMail && <div className='mb20 email oneLine leftWidth'>邮箱地址: <span><Tooltip title={item.tutorMail}>{item.tutorMail}</Tooltip></span></div>}
|
||||
</div>
|
||||
<div className="center">
|
||||
<div className="taskDesc">{item.taskDesc}</div>
|
||||
{item.taskUrl && <div className="taskUrl oneLine">课题链接: <a href={item.taskUrl} target={"_blank"}>{item.taskUrl}</a></div>}
|
||||
<div>
|
||||
{/* 报名详情按钮 */}
|
||||
{round === 2 && applyTaskId && Object.keys(applyTaskId).includes(item.id.toString()) && <Button onClick={()=>{window.location.href=`/glcc/student/apply/${item.id}`}} className='lookDetail mr10'>报名详情</Button>}
|
||||
|
||||
{/* 课题申请时间范围内： 申请课题 */}
|
||||
{/* 第一次报名 */}
|
||||
{round === 2 && period === "stuApply" && !(applyTaskId && Object.keys(applyTaskId).includes(item.id.toString())) && <Button type='primary' className='applyBut mr10' onClick={()=>{applyTask(item.id)}}>申请课题</Button>}
|
||||
{/* 第二次报名 锁定状态 */}
|
||||
{round === 2 && period === "stuApply1" && !(applyTaskId && Object.keys(applyTaskId).includes(item.id.toString())) && (item.locked ? <Tooltip title={"该课题已有学生入选"}><Button type='primary' className='mr10' disabled>申请课题</Button></Tooltip> : <Button type='primary' className='applyBut mr10' onClick={()=>{applyTask(item.id)}}>申请课题</Button>)}
|
||||
|
||||
{/* 查看课题详情按钮 */}
|
||||
<Button onClick={()=>{window.open(`/glcc/${id}/subjects/detail/${item.id}`)}} className='lookDetail'>课题详情</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right oneLine taskUrl"><span className='taskReward'>￥{item.taskReward}</span></div>
|
||||
</div>
|
||||
<div className="right oneLine taskUrl"><span className='taskReward'>￥{item.taskReward}</span></div>
|
||||
</div>
|
||||
}) : <Nodata _html="课题暂无数据" small={true}/>)}
|
||||
}) : <Nodata _html="课题暂无数据" small={true}/>)}
|
||||
</div>
|
||||
</div>: <div className="projectDetailBox nodata"><Nodata _html="暂无数据" small={true}/></div>
|
||||
)
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ function ProjectList({ applyTaskId, location, match, applyTask, round, period, m
|
|||
const [keyword, setKeyword] = useState(openmmlab ? 'openmmlab' : undefined);
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [listLen, setListLen] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
|
|
@ -67,11 +68,26 @@ function ProjectList({ applyTaskId, location, match, applyTask, round, period, m
|
|||
})
|
||||
}, [keyword, round])
|
||||
|
||||
function changeVisible(visible, item) {
|
||||
function changeVisible(visible, item, index) {
|
||||
if (visible) {
|
||||
let height = document.documentElement.clientWidth / 1920 * 500 + 70 + document.querySelector(`.${item.gitlinkLastUrl}`).offsetTop + item.registrationTaskList.length * 320;
|
||||
document.querySelector('#taskList').style.height = height + 'px';
|
||||
// let height = document.documentElement.clientWidth / 1920 * 500 + 70 + document.querySelector(`.${item.gitlinkLastUrl}`).offsetTop + item.registrationTaskList.length * 320;
|
||||
// document.querySelector('#taskList').style.height = height + 'px';
|
||||
document.querySelector('#taskList').style.height = 'auto';
|
||||
// 判断当前行数是否为最后两行，并添加滚动条样式
|
||||
if(data && data.length && data.length > 0){
|
||||
const len = data.length;
|
||||
const num = len%3 == 0 ? 3 : len%3;
|
||||
// 最后一行
|
||||
if(len - index <= num){
|
||||
setListLen(2)
|
||||
}
|
||||
// 最后两行
|
||||
if(len - index <= num + 3 && len - index > num){
|
||||
setListLen(3)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setListLen(null)
|
||||
document.querySelector('#taskList').style.height = 'auto';
|
||||
}
|
||||
}
|
||||
|
|
@ -84,10 +100,10 @@ function ProjectList({ applyTaskId, location, match, applyTask, round, period, m
|
|||
<div className='projectListBox'>
|
||||
{data && data.map((item, index) => {
|
||||
return <Popover
|
||||
onVisibleChange={(visible) => { changeVisible(visible, item) }}
|
||||
onVisibleChange={(visible) => { changeVisible(visible, item, index) }}
|
||||
key={index}
|
||||
placement={(index + 1) % 3 === 0 ? 'bottomRight' : (index + 1) % 3 % 2 === 0 ? 'bottom' : 'bottomLeft'}
|
||||
content={<ProjectDetail id={id} detail={item} applyTaskId={applyTaskId} applyTask={applyTask} period={period} round={round}/>}
|
||||
content={<ProjectDetail id={id} detail={item} applyTaskId={applyTaskId} applyTask={applyTask} period={period} round={round} listLen={listLen} />}
|
||||
trigger='click'
|
||||
overlayClassName='projectItemPopover'
|
||||
autoAdjustOverflow={false}
|
||||
|
|
|
|||
Loading…
Reference in New Issue