import { useCallback, useEffect, useMemo, useState } from 'react';
|
import { Button, Drawer, Empty, Spin, Tag, Timeline } from 'antd';
|
import type { TimelineProps } from 'antd';
|
import { followMethodMeta, followRecordTypeMeta, followStatusMeta, stageMeta } from '../columns';
|
import { getCustomerFollowUps } from '../server';
|
import type { FollowStatus, FollowUpVO } from '../types';
|
import { formatDateTime } from '../utils';
|
import './FollowUpRecordsDrawer.scss';
|
|
interface FollowUpRecordsDrawerProps {
|
open: boolean;
|
/** 待查看跟进记录的客户，关闭时为 null。 */
|
customer: { id: number; name: string } | null;
|
onClose: () => void;
|
}
|
|
/** 每次加载的跟进记录条数。 */
|
const PAGE_SIZE = 100;
|
|
const statusDotColors: Record<FollowStatus, string> = {
|
DONE: 'green',
|
PENDING: 'blue',
|
OVERDUE: 'red',
|
};
|
|
const renderStageChange = (record: FollowUpVO) => {
|
if (record.recordType !== 'STAGE_CHANGE') return null;
|
|
const from = record.stageFrom ? stageMeta[record.stageFrom]?.text ?? record.stageFrom : '-';
|
const to = record.stageTo ? stageMeta[record.stageTo]?.text ?? record.stageTo : '-';
|
|
return (
|
<div className="follow-up-item__meta">
|
阶段变化：{from} → {to}
|
</div>
|
);
|
};
|
|
const renderFollowUpItem = (record: FollowUpVO) => {
|
const method = record.followMethod
|
? followMethodMeta[record.followMethod] ?? record.followMethod
|
: null;
|
const recordType = record.recordType ? followRecordTypeMeta[record.recordType] : null;
|
const status = record.followStatus ? followStatusMeta[record.followStatus] : null;
|
|
return (
|
<div className="follow-up-item">
|
<div className="follow-up-item__header">
|
<span className="follow-up-item__time">
|
{formatDateTime(record.createdAt ?? record.followAt)}
|
</span>
|
{method && <Tag bordered={false}>{method}</Tag>}
|
{recordType && (
|
<Tag color={recordType.color} bordered={false}>
|
{recordType.text}
|
</Tag>
|
)}
|
{status && (
|
<Tag color={status.color} bordered={false}>
|
{status.text}
|
</Tag>
|
)}
|
</div>
|
|
{record.content && <div className="follow-up-item__content">{record.content}</div>}
|
|
{renderStageChange(record)}
|
|
{(record.nextFollowAt || record.nextFollowPlan) && (
|
<div className="follow-up-item__meta">
|
下次跟进：{formatDateTime(record.nextFollowAt)}
|
{record.nextFollowPlan ? ` · ${record.nextFollowPlan}` : ''}
|
</div>
|
)}
|
|
{record.followerId && (
|
<div className="follow-up-item__meta">跟进人：#{record.followerId}</div>
|
)}
|
</div>
|
);
|
};
|
|
const FollowUpRecordsDrawer = ({ open, customer, onClose }: FollowUpRecordsDrawerProps) => {
|
const [records, setRecords] = useState<FollowUpVO[]>([]);
|
const [total, setTotal] = useState(0);
|
const [page, setPage] = useState(1);
|
const [loading, setLoading] = useState(false);
|
const [loadingMore, setLoadingMore] = useState(false);
|
|
useEffect(() => {
|
if (!open || !customer) {
|
setRecords([]);
|
setTotal(0);
|
setPage(1);
|
return;
|
}
|
|
let active = true;
|
setRecords([]);
|
setTotal(0);
|
setPage(1);
|
setLoading(true);
|
|
getCustomerFollowUps({ id: customer.id, page: 1, size: PAGE_SIZE })
|
.then((result) => {
|
if (!active) return;
|
setRecords(result.records ?? []);
|
setTotal(result.total ?? 0);
|
})
|
.catch(() => {
|
// 错误已由 request 统一提示
|
if (active) setRecords([]);
|
})
|
.finally(() => {
|
if (active) setLoading(false);
|
});
|
|
return () => {
|
active = false;
|
};
|
}, [customer, open]);
|
|
const handleLoadMore = useCallback(async () => {
|
if (!customer) return;
|
|
const nextPage = page + 1;
|
setLoadingMore(true);
|
try {
|
const result = await getCustomerFollowUps({
|
id: customer.id,
|
page: nextPage,
|
size: PAGE_SIZE,
|
});
|
setRecords((prev) => [...prev, ...(result.records ?? [])]);
|
setTotal(result.total ?? 0);
|
setPage(nextPage);
|
} catch {
|
// 错误已由 request 统一提示
|
} finally {
|
setLoadingMore(false);
|
}
|
}, [customer, page]);
|
|
const timelineItems = useMemo<TimelineProps['items']>(
|
() =>
|
records.map((record) => ({
|
key: record.id,
|
color: record.followStatus ? statusDotColors[record.followStatus] : 'gray',
|
children: renderFollowUpItem(record),
|
})),
|
[records],
|
);
|
|
const hasMore = records.length < total;
|
|
return (
|
<Drawer
|
title={customer ? `跟进记录 · ${customer.name}` : '跟进记录'}
|
width={560}
|
open={open}
|
onClose={onClose}
|
>
|
<Spin spinning={loading}>
|
{records.length ? (
|
<div className="follow-up-records">
|
<div className="follow-up-records__summary">共 {total} 条跟进记录</div>
|
|
<Timeline items={timelineItems} />
|
|
{hasMore && (
|
<div className="follow-up-records__footer">
|
<Button loading={loadingMore} onClick={handleLoadMore}>
|
加载更多
|
</Button>
|
</div>
|
)}
|
</div>
|
) : (
|
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无跟进记录" />
|
)}
|
</Spin>
|
</Drawer>
|
);
|
};
|
|
export default FollowUpRecordsDrawer;
|
