import React, { useEffect, useState } from 'react';
|
import { Typography, Row, Col, Card, message } from 'antd';
|
import CaseSearchForm from '../components/case/CaseSearchForm';
|
import CaseList from '../components/case/CaseList';
|
import PaginationBar from '../components/common/PaginationBar';
|
import { fetchCaseList } from '../services/caseService';
|
|
const { Title } = Typography;
|
|
const CaseSearchPage = () => {
|
const [loading, setLoading] = useState(false);
|
const [queryParams, setQueryParams] = useState({
|
keyword: '',
|
page: 1,
|
pageSize: 10,
|
});
|
const [data, setData] = useState({
|
list: [],
|
pageInfo: { page: 1, pageSize: 10, total: 0 },
|
});
|
|
const loadData = async (params = queryParams) => {
|
setLoading(true);
|
try {
|
const res = await fetchCaseList(params);
|
setData(res);
|
} catch (e) {
|
console.error(e);
|
message.error('加载案例列表失败');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
useEffect(() => {
|
loadData();
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
}, []);
|
|
const handleSearch = (values) => {
|
const newParams = {
|
...queryParams,
|
...values,
|
page: 1,
|
};
|
setQueryParams(newParams);
|
loadData(newParams);
|
};
|
|
const handlePageChange = (page, pageSize) => {
|
const newParams = { ...queryParams, page, pageSize };
|
setQueryParams(newParams);
|
loadData(newParams);
|
};
|
|
return (
|
<div>
|
<Title level={3}>典型案例搜索</Title>
|
<Row gutter={16}>
|
<Col span={24}>
|
<Card style={{ marginBottom: 16 }} title="查询条件">
|
<CaseSearchForm onSearch={handleSearch} loading={loading} />
|
</Card>
|
</Col>
|
</Row>
|
|
<Row gutter={16}>
|
<Col span={24}>
|
<Card
|
title={`查询结果（共 ${data.pageInfo.total} 条）`}
|
loading={loading}
|
>
|
<CaseList list={data.list} />
|
<PaginationBar
|
page={data.pageInfo.page}
|
pageSize={data.pageInfo.pageSize}
|
total={data.pageInfo.total}
|
onChange={handlePageChange}
|
/>
|
</Card>
|
</Col>
|
</Row>
|
</div>
|
);
|
};
|
|
export default CaseSearchPage;
|
