import { useCallback, useMemo, useState } from 'react';
|
import { ProTable } from '@ant-design/pro-components';
|
import { createCustomerColumns } from './columns';
|
import CustomerDetailDrawer from './components/CustomerDetailDrawer';
|
import FollowUpRecordsDrawer from './components/FollowUpRecordsDrawer';
|
import { getCustomerList } from './service';
|
import type { CustomerListQuery, CustomerVO } from './types';
|
|
const CustomerList = () => {
|
const [detailId, setDetailId] = useState<number | null>(null);
|
const [followUpCustomer, setFollowUpCustomer] = useState<{ id: number; name: string } | null>(
|
null,
|
);
|
|
const openDetail = useCallback((record: CustomerVO) => {
|
setDetailId(record.id);
|
}, []);
|
|
const openFollowUps = useCallback((record: CustomerVO) => {
|
setFollowUpCustomer({ id: record.id, name: record.name });
|
}, []);
|
|
const closeDetail = useCallback(() => {
|
setDetailId(null);
|
}, []);
|
|
const closeFollowUps = useCallback(() => {
|
setFollowUpCustomer(null);
|
}, []);
|
|
const columns = useMemo(
|
() => createCustomerColumns({ onDetail: openDetail, onFollowUp: openFollowUps }),
|
[openDetail, openFollowUps],
|
);
|
|
return (
|
<div className="customer-list-page">
|
<ProTable<CustomerVO, CustomerListQuery>
|
rowKey="id"
|
columns={columns}
|
cardProps={{ bodyStyle: { padding: 20 } }}
|
search={{ labelWidth: 'auto', defaultCollapsed: false }}
|
scroll={{ x: 1660 }}
|
options={false}
|
pagination={{
|
defaultPageSize: 10,
|
showSizeChanger: true,
|
hideOnSinglePage: false,
|
showTotal: (total) => `共 ${total} 条`,
|
}}
|
request={async (params) => {
|
const result = await getCustomerList({
|
page: params.current,
|
size: params.pageSize,
|
ownerId: params.ownerId,
|
});
|
|
return {
|
data: result.records ?? [],
|
total: result.total ?? 0,
|
success: true,
|
};
|
}}
|
/>
|
|
<CustomerDetailDrawer open={detailId !== null} customerId={detailId} onClose={closeDetail} />
|
|
<FollowUpRecordsDrawer
|
open={followUpCustomer !== null}
|
customer={followUpCustomer}
|
onClose={closeFollowUps}
|
/>
|
</div>
|
);
|
};
|
|
export default CustomerList;
|
