forked from Gitlink/forgeplus-react
91 lines
3.4 KiB
JavaScript
91 lines
3.4 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Input, Popover, Spin } from 'antd';
|
||
import { main_site_url } from '../../fetch';
|
||
import './index.scss';
|
||
import { freeProjectList, projectList } from '../../api';
|
||
import ProjectDetail from '../component/projectDetail';
|
||
import bgPng from "../../img/bgPng.png";
|
||
import logo from "../../img/logo.png";
|
||
import star from "../../img/star.png";
|
||
import Nodata from '../../../forge/Nodata';
|
||
const { Search } = Input;
|
||
|
||
// 项目列表
|
||
function ProjectList() {
|
||
const [data, setData] = useState([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [listLen, setListLen] = useState(null);
|
||
|
||
useEffect(() => {
|
||
setLoading(true);
|
||
const params = {
|
||
curPage: 1,
|
||
pageSize: 10000,
|
||
round: 2
|
||
}
|
||
freeProjectList(params).then(response => {
|
||
if (response && response.message === "success") {
|
||
setData(response.data.rows);
|
||
}
|
||
setLoading(false);
|
||
})
|
||
}, [])
|
||
|
||
// 修改taskList盒子的高度，防止弹框过高影响整体页面
|
||
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';
|
||
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';
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div id="taskList" className="taskList listBox">
|
||
<Spin spinning={loading}>
|
||
<div className='projectListBox'>
|
||
{data && data.map((item, index) => {
|
||
return <Popover
|
||
onVisibleChange={(visible) => { changeVisible(visible, item, index) }}
|
||
key={index}
|
||
placement={(index + 1) % 3 === 0 ? 'bottomRight' : (index + 1) % 3 % 2 === 0 ? 'bottom' : 'bottomLeft'}
|
||
content={<ProjectDetail detail={item} listLen = {listLen} />}
|
||
trigger='click'
|
||
overlayClassName='projectItemPopover'
|
||
autoAdjustOverflow={false}
|
||
>
|
||
<div className={`projectItem ${(index + 1) % 3 === 0 || (index + 1) % 3 % 2 === 0 ? '' : 'firstBox'} ${item.projectName.replace(/ /g, '')} ${item.gitlinkLastUrl}`}>
|
||
<div className="border"></div>
|
||
<div className="projectLogo">
|
||
<img className="projectLogoImg" src={item.projectLogoId ? `${main_site_url}/api/attachments/${item.projectLogoId}` : logo} alt='' />
|
||
</div>
|
||
<div className="title">{item.projectName}</div>
|
||
<div className="intro">{item.projectIntro}</div>
|
||
</div>
|
||
</Popover>
|
||
})}
|
||
</div>
|
||
{data && !data.length && <div style={{paddingBottom: '50px'}}><Nodata _html="暂无数据"/></div>}
|
||
</Spin>
|
||
<img src={bgPng} alt='' className='bgPng3' />
|
||
<img src={bgPng} alt='' className='bgPng4' />
|
||
</div>
|
||
)
|
||
}
|
||
export default ProjectList; |