230 lines
8.3 KiB
TypeScript
230 lines
8.3 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { MessageSquareQuote, PhoneCall } from "lucide-react";
|
|||
|
|
import { useCallback, useEffect, useState } from "react";
|
|||
|
|
import { adminApi, errMessage, type Customer, type TalkTemplate, type Visit } from "@/lib/admin-api";
|
|||
|
|
import {
|
|||
|
|
Badge,
|
|||
|
|
Button,
|
|||
|
|
Card,
|
|||
|
|
EmptyState,
|
|||
|
|
ErrorState,
|
|||
|
|
LoadingBlock,
|
|||
|
|
Pagination,
|
|||
|
|
Select,
|
|||
|
|
TextInput,
|
|||
|
|
formatTime,
|
|||
|
|
useToast,
|
|||
|
|
} from "@/components/admin/ui";
|
|||
|
|
|
|||
|
|
const VISIT_TYPES = ["电话回访", "线上沟通", "线下拜访"];
|
|||
|
|
|
|||
|
|
export function VisitsSection() {
|
|||
|
|
const toast = useToast();
|
|||
|
|
const [customers, setCustomers] = useState<Customer[]>([]);
|
|||
|
|
const [items, setItems] = useState<Visit[]>([]);
|
|||
|
|
const [total, setTotal] = useState(0);
|
|||
|
|
const [totalPages, setTotalPages] = useState(0);
|
|||
|
|
const [page, setPage] = useState(1);
|
|||
|
|
const [templates, setTemplates] = useState<TalkTemplate[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [error, setError] = useState("");
|
|||
|
|
|
|||
|
|
const [customerId, setCustomerId] = useState("");
|
|||
|
|
const [visitType, setVisitType] = useState(VISIT_TYPES[0]);
|
|||
|
|
const [visitTime, setVisitTime] = useState("");
|
|||
|
|
const [summary, setSummary] = useState("");
|
|||
|
|
const [editingId, setEditingId] = useState<number | null>(null);
|
|||
|
|
const [busy, setBusy] = useState(false);
|
|||
|
|
|
|||
|
|
const load = useCallback(async () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
setError("");
|
|||
|
|
try {
|
|||
|
|
const result = await adminApi.visits({ page, page_size: 10 });
|
|||
|
|
setItems(result.items ?? []);
|
|||
|
|
setTotal(result.total ?? 0);
|
|||
|
|
setTotalPages(result.total_pages ?? 0);
|
|||
|
|
} catch (e) {
|
|||
|
|
setError(errMessage(e, "回访记录加载失败"));
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
}, [page]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
void (async () => {
|
|||
|
|
try {
|
|||
|
|
const [customerPage, templateList] = await Promise.all([
|
|||
|
|
adminApi.customers({ page: 1, page_size: 100 }),
|
|||
|
|
adminApi.talkTemplates().catch(() => []),
|
|||
|
|
]);
|
|||
|
|
setCustomers(customerPage.items ?? []);
|
|||
|
|
setTemplates(templateList ?? []);
|
|||
|
|
if (!customerId && customerPage.items?.length) {
|
|||
|
|
setCustomerId(String(customerPage.items[0].customer_id));
|
|||
|
|
}
|
|||
|
|
} catch {
|
|||
|
|
/* 客户列表失败时用户仍可手动选择 */
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
void load();
|
|||
|
|
}, [load]);
|
|||
|
|
|
|||
|
|
function resetForm() {
|
|||
|
|
setEditingId(null);
|
|||
|
|
setVisitType(VISIT_TYPES[0]);
|
|||
|
|
setVisitTime("");
|
|||
|
|
setSummary("");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function submit() {
|
|||
|
|
if (!customerId) {
|
|||
|
|
toast("请先选择客户", "error");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!visitTime) {
|
|||
|
|
toast("请选择回访时间", "error");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setBusy(true);
|
|||
|
|
try {
|
|||
|
|
const body = {
|
|||
|
|
customer_id: Number(customerId),
|
|||
|
|
visit_type: visitType,
|
|||
|
|
visit_time: new Date(visitTime).toISOString(),
|
|||
|
|
summary: summary || undefined,
|
|||
|
|
};
|
|||
|
|
if (editingId) await adminApi.updateVisit(editingId, body);
|
|||
|
|
else await adminApi.createVisit(body);
|
|||
|
|
toast(editingId ? "回访已更新" : "回访已新增");
|
|||
|
|
resetForm();
|
|||
|
|
await load();
|
|||
|
|
} catch (e) {
|
|||
|
|
toast(errMessage(e, "保存失败"), "error");
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="grid gap-4 lg:grid-cols-2">
|
|||
|
|
<Card title={editingId ? "编辑回访" : "新增回访"} description="人工回访仅留痕，不触发客户记忆更新">
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="mb-1 block text-xs text-slate-500">客户</label>
|
|||
|
|
<Select value={customerId} onChange={(event) => setCustomerId(event.target.value)} className="w-full">
|
|||
|
|
<option value="">请选择客户</option>
|
|||
|
|
{customers.map((customer) => (
|
|||
|
|
<option key={customer.customer_id} value={customer.customer_id}>
|
|||
|
|
{customer.real_name ?? "匿名客户"}（#{customer.customer_id}）
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="mb-1 block text-xs text-slate-500">回访类型</label>
|
|||
|
|
<Select value={visitType} onChange={(event) => setVisitType(event.target.value)} className="w-full">
|
|||
|
|
{VISIT_TYPES.map((type) => (
|
|||
|
|
<option key={type} value={type}>
|
|||
|
|
{type}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="mb-1 block text-xs text-slate-500">回访时间</label>
|
|||
|
|
<TextInput type="datetime-local" value={visitTime} onChange={(event) => setVisitTime(event.target.value)} />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="mb-1 block text-xs text-slate-500">回访摘要</label>
|
|||
|
|
<textarea
|
|||
|
|
value={summary}
|
|||
|
|
onChange={(event) => setSummary(event.target.value)}
|
|||
|
|
className="min-h-32 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm leading-6 text-slate-700 transition-colors focus:border-indigo-400 focus:outline-none"
|
|||
|
|
placeholder="记录沟通要点"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-3">
|
|||
|
|
<Button variant="primary" loading={busy} onClick={() => void submit()}>
|
|||
|
|
{editingId ? "保存修改" : "保存回访"}
|
|||
|
|
</Button>
|
|||
|
|
{editingId && (
|
|||
|
|
<Button onClick={resetForm} disabled={busy}>
|
|||
|
|
取消编辑
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<Card title="历史回访" description={`共 ${total} 条记录`} bodyClassName="p-0">
|
|||
|
|
{loading ? (
|
|||
|
|
<LoadingBlock />
|
|||
|
|
) : error ? (
|
|||
|
|
<ErrorState message={error} onRetry={() => void load()} />
|
|||
|
|
) : items.length === 0 ? (
|
|||
|
|
<EmptyState text="暂无回访记录" />
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<ul className="max-h-[420px] divide-y divide-slate-100 overflow-y-auto">
|
|||
|
|
{items.map((visit) => (
|
|||
|
|
<li key={visit.id} className="px-5 py-4">
|
|||
|
|
<div className="flex items-start justify-between gap-3">
|
|||
|
|
<div className="min-w-0">
|
|||
|
|
<p className="flex items-center gap-2 text-sm font-medium text-slate-900">
|
|||
|
|
<PhoneCall className="h-3.5 w-3.5 text-indigo-500" />
|
|||
|
|
{visit.visit_type}
|
|||
|
|
<Badge tone="neutral">客户 #{visit.customer_id}</Badge>
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-1 text-xs text-slate-400">{formatTime(visit.visit_time)}</p>
|
|||
|
|
<p className="mt-2 text-sm leading-6 text-slate-600">{visit.summary ?? "暂无摘要"}</p>
|
|||
|
|
</div>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => {
|
|||
|
|
setEditingId(visit.id);
|
|||
|
|
setCustomerId(String(visit.customer_id));
|
|||
|
|
setVisitType(visit.visit_type ?? VISIT_TYPES[0]);
|
|||
|
|
setVisitTime(visit.visit_time?.slice(0, 16) ?? "");
|
|||
|
|
setSummary(visit.summary ?? "");
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
编辑
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
<Pagination page={page} totalPages={totalPages} total={total} onChange={setPage} />
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card title="合规话术库" description="仅作参考，正式发送走草稿流程">
|
|||
|
|
{templates.length === 0 ? (
|
|||
|
|
<EmptyState text="暂无话术模板" />
|
|||
|
|
) : (
|
|||
|
|
<ul className="space-y-3">
|
|||
|
|
{templates.map((template) => (
|
|||
|
|
<li key={template.scene} className="rounded-lg bg-slate-50 p-3">
|
|||
|
|
<p className="flex items-center gap-2 text-sm font-medium text-slate-900">
|
|||
|
|
<MessageSquareQuote className="h-3.5 w-3.5 text-indigo-500" />
|
|||
|
|
{template.scene}
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-1 text-xs leading-6 text-slate-600">{template.content}</p>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
)}
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|