98 lines
3.6 KiB
TypeScript
98 lines
3.6 KiB
TypeScript
import { useLocation } from 'react-router-dom';
|
|
import './searchList.css'
|
|
import { Pagination, Spin, Image, message } from 'antd';
|
|
import { get } from "../../util/AjaxUtils.ts";
|
|
import { IListPage } from "../../interfaces/listpage/IListPage.ts";
|
|
import { useRef, MutableRefObject, useState, useEffect, useContext } from "react";
|
|
import { IProj } from "../../interfaces/proj/IProj.ts";
|
|
import NoData from "../../assets/no-data.png";
|
|
import CardProj from '../../components/card/CardProj.tsx';
|
|
import { IndexListContext } from "../../context/IndexListContext.ts";
|
|
export default function SearchList() {
|
|
const indexListContext = useContext(IndexListContext);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const listRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
|
|
const domHeight = window.innerHeight - 280;
|
|
const [projs, setProjs] = useState<IProj[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [total, setTotal] = useState(0);
|
|
// const [keywords, setKeywords] = useState('');
|
|
const [messageApi, contextHolder] = message.useMessage();
|
|
const { state } = useLocation()
|
|
// console.log(state);
|
|
|
|
const reqData = (currentPage: number) => {
|
|
get<IListPage<IProj>>({
|
|
messageApi: messageApi,
|
|
url: '/api/proj/listpage/self',
|
|
config: {
|
|
params: {
|
|
page: currentPage,
|
|
rows: 20,
|
|
keywords: state.keywords,
|
|
projCategoryId: indexListContext.category,
|
|
status: indexListContext.status ? indexListContext.status : ''
|
|
}
|
|
},
|
|
onBefore() {
|
|
setIsLoading(true);
|
|
},
|
|
onSuccess({ data }) {
|
|
setPage(data.page);
|
|
setTotal(data.total);
|
|
setProjs(data.rows);
|
|
},
|
|
onFinally() {
|
|
setIsLoading(false);
|
|
}
|
|
})
|
|
}
|
|
|
|
const renderCategory = () => {
|
|
}
|
|
const renderList = () => {
|
|
if (projs.length == 0) {
|
|
return (
|
|
<div className="no-data" style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
backgroundColor: 'var(--color-light)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}}>
|
|
<Image src={NoData} preview={false} />
|
|
<span>暂无数据</span>
|
|
</div>
|
|
)
|
|
}
|
|
return projs.map((item) => {
|
|
return <CardProj item={item} key={new Date().getTime() + ':' + item.projId} />;
|
|
});
|
|
}
|
|
useEffect(() => {
|
|
if (indexListContext.categorys) {
|
|
reqData(page);
|
|
renderCategory();
|
|
}
|
|
}, [indexListContext.status, indexListContext.categoryChangeCount, indexListContext.category, state.keywords, page])
|
|
return (
|
|
<div className='searchIndex'>
|
|
{contextHolder}
|
|
<Spin tip="加载中..." spinning={isLoading}>
|
|
<div className="searchlist" ref={listRef} style={{ height: `${domHeight}px` }}>
|
|
{renderList()}
|
|
</div>
|
|
<div className="SearchListPage">
|
|
<Pagination
|
|
showSizeChanger={false}
|
|
defaultCurrent={page} total={total} onChange={(page) => {
|
|
setPage(page);
|
|
}} />
|
|
</div>
|
|
</Spin>
|
|
</div>
|
|
)
|
|
}
|