import { useEffect, useMemo, useState } from 'react';
|
import { Button, Descriptions, Drawer, Empty, Spin, Tag } from 'antd';
|
import type { DescriptionsProps } from 'antd';
|
import { customerTypeMeta, levelMeta, renderTags, sourceMeta, stageMeta } from '../columns';
|
import { getCustomerDetail } from '../server';
|
import type { CustomerVO } from '../types';
|
import { formatDateTime } from '../utils';
|
|
interface CustomerDetailDrawerProps {
|
open: boolean;
|
/** 待展示的客户 ID，关闭时为 null。 */
|
customerId: number | null;
|
onClose: () => void;
|
}
|
|
const renderTag = (meta?: { text: string; color: string }) =>
|
meta ? (
|
<Tag color={meta.color} bordered={false}>
|
{meta.text}
|
</Tag>
|
) : (
|
'-'
|
);
|
|
const CustomerDetailDrawer = ({ open, customerId, onClose }: CustomerDetailDrawerProps) => {
|
const [customer, setCustomer] = useState<CustomerVO | null>(null);
|
const [loading, setLoading] = useState(false);
|
|
useEffect(() => {
|
if (!open || !customerId) return;
|
|
let active = true;
|
setCustomer(null);
|
setLoading(true);
|
|
getCustomerDetail({ id: customerId })
|
.then((data) => {
|
if (active) setCustomer(data);
|
})
|
.catch(() => {
|
// 错误已由 request 统一提示
|
if (active) setCustomer(null);
|
})
|
.finally(() => {
|
if (active) setLoading(false);
|
});
|
|
return () => {
|
active = false;
|
};
|
}, [customerId, open]);
|
|
const items = useMemo<DescriptionsProps['items']>(() => {
|
if (!customer) return [];
|
|
return [
|
{ key: 'name', label: '客户名称', children: customer.name || '-' },
|
{
|
key: 'customerType',
|
label: '客户类型',
|
children: renderTag(customer.customerType ? customerTypeMeta[customer.customerType] : undefined),
|
},
|
{
|
key: 'level',
|
label: '客户等级',
|
children: renderTag(customer.level ? levelMeta[customer.level] : undefined),
|
},
|
{
|
key: 'stage',
|
label: '客户阶段',
|
children: renderTag(customer.stage ? stageMeta[customer.stage] : undefined),
|
},
|
{ key: 'industry', label: '所属行业', children: customer.industry || '-' },
|
{ key: 'region', label: '所在地区', children: customer.region || '-' },
|
{
|
key: 'source',
|
label: '客户来源',
|
children: customer.source ? sourceMeta[customer.source] ?? customer.source : '-',
|
},
|
{ key: 'contactName', label: '联系人', children: customer.contactName || '-' },
|
{ key: 'contactPhone', label: '联系电话', children: customer.contactPhone || '-' },
|
{ key: 'contactPosition', label: '职位', children: customer.contactPosition || '-' },
|
{ key: 'contactTel', label: '备用电话', children: customer.contactTel || '-' },
|
{ key: 'email', label: '邮箱', children: customer.email || '-' },
|
{ key: 'address', label: '地址', children: customer.address || '-' },
|
{ key: 'demand', label: '需求描述', children: customer.demand || '-' },
|
{ key: 'tags', label: '标签', children: renderTags(customer.tags) },
|
{ key: 'owner', label: '归属销售员', children: customer.ownerName || '-' },
|
{ key: 'lastFollowAt', label: '最近跟进', children: formatDateTime(customer.lastFollowAt) },
|
{ key: 'nextFollowAt', label: '下次跟进', children: formatDateTime(customer.nextFollowAt) },
|
{ key: 'dealAt', label: '成交时间', children: formatDateTime(customer.dealAt) },
|
{ key: 'lostAt', label: '流失时间', children: formatDateTime(customer.lostAt) },
|
{ key: 'lostReason', label: '流失原因', children: customer.lostReason || '-' },
|
];
|
}, [customer]);
|
|
return (
|
<Drawer
|
title="客户详情"
|
width={520}
|
open={open}
|
onClose={onClose}
|
footer={
|
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
<Button onClick={onClose}>关闭</Button>
|
</div>
|
}
|
>
|
<Spin spinning={loading}>
|
{customer ? (
|
<Descriptions column={1} bordered size="small" items={items} />
|
) : (
|
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无客户信息" />
|
)}
|
</Spin>
|
</Drawer>
|
);
|
};
|
|
export default CustomerDetailDrawer;
|
