perf(web): ConsultationList/FollowUpTaskList 移除 N+1 nameCache
后端已内联 patient_name/doctor_name,前端移除逐条查询。 Session/FollowUpTask 接口添加 name 可选字段。 FollowUpTaskList 保留 assignee 的 getUser 查询(users 表未内联)。
This commit is contained in:
@@ -6,6 +6,8 @@ export interface Session {
|
||||
id: string;
|
||||
patient_id: string;
|
||||
doctor_id?: string;
|
||||
patient_name?: string;
|
||||
doctor_name?: string;
|
||||
consultation_type: string;
|
||||
status: string;
|
||||
last_message_at?: string;
|
||||
|
||||
@@ -6,6 +6,7 @@ export interface FollowUpTask {
|
||||
id: string;
|
||||
patient_id: string;
|
||||
assigned_to?: string;
|
||||
patient_name?: string;
|
||||
follow_up_type: string;
|
||||
planned_date: string;
|
||||
status: string;
|
||||
|
||||
@@ -13,8 +13,6 @@ import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { consultationApi, type Session, type CreateSessionReq } from '../../api/health/consultations';
|
||||
import { patientApi } from '../../api/health/patients';
|
||||
import { doctorApi } from '../../api/health/doctors';
|
||||
import { StatusTag } from './components/StatusTag';
|
||||
import { PatientSelect } from './components/PatientSelect';
|
||||
import { DoctorSelect } from './components/DoctorSelect';
|
||||
@@ -69,10 +67,6 @@ export default function ConsultationList() {
|
||||
// Close session
|
||||
const [closingId, setClosingId] = useState<string | null>(null);
|
||||
|
||||
// Label caches
|
||||
const [patientLabels, setPatientLabels] = useState<Record<string, string>>({});
|
||||
const [doctorLabels, setDoctorLabels] = useState<Record<string, string>>({});
|
||||
|
||||
const isDark = useThemeMode();
|
||||
|
||||
// --- Data fetching ---
|
||||
@@ -82,48 +76,12 @@ export default function ConsultationList() {
|
||||
const result = await consultationApi.listSessions(params);
|
||||
setSessions(result.data);
|
||||
setTotal(result.total);
|
||||
|
||||
// 批量解析患者名称
|
||||
const patientIds = [...new Set(result.data.map((s) => s.patient_id))];
|
||||
const missingPatientIds = patientIds.filter((id) => !patientLabels[id]);
|
||||
if (missingPatientIds.length > 0) {
|
||||
const newLabels: Record<string, string> = {};
|
||||
await Promise.all(
|
||||
missingPatientIds.map(async (id) => {
|
||||
try {
|
||||
const detail = await patientApi.get(id);
|
||||
newLabels[id] = detail.name;
|
||||
} catch {
|
||||
newLabels[id] = id.slice(0, 8);
|
||||
}
|
||||
}),
|
||||
);
|
||||
setPatientLabels((prev) => ({ ...prev, ...newLabels }));
|
||||
}
|
||||
|
||||
// 批量解析医生名称
|
||||
const doctorIds = [...new Set(result.data.map((s) => s.doctor_id).filter(Boolean))] as string[];
|
||||
const missingDoctorIds = doctorIds.filter((id) => !doctorLabels[id]);
|
||||
if (missingDoctorIds.length > 0) {
|
||||
const newLabels: Record<string, string> = {};
|
||||
await Promise.all(
|
||||
missingDoctorIds.map(async (id) => {
|
||||
try {
|
||||
const detail = await doctorApi.get(id);
|
||||
newLabels[id] = detail.name;
|
||||
} catch {
|
||||
newLabels[id] = id.slice(0, 8);
|
||||
}
|
||||
}),
|
||||
);
|
||||
setDoctorLabels((prev) => ({ ...prev, ...newLabels }));
|
||||
}
|
||||
} catch {
|
||||
message.error('加载咨询列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [patientLabels, doctorLabels]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchSessions(query);
|
||||
@@ -142,14 +100,6 @@ export default function ConsultationList() {
|
||||
}));
|
||||
};
|
||||
|
||||
const handlePatientLabel = (id: string, label: string) => {
|
||||
setPatientLabels((prev) => ({ ...prev, [id]: label }));
|
||||
};
|
||||
|
||||
const handleDoctorLabel = (id: string, label: string) => {
|
||||
setDoctorLabels((prev) => ({ ...prev, [id]: label }));
|
||||
};
|
||||
|
||||
// Create session
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
@@ -195,18 +145,19 @@ export default function ConsultationList() {
|
||||
const columns: ColumnsType<Session> = [
|
||||
{
|
||||
title: '患者',
|
||||
dataIndex: 'patient_id',
|
||||
key: 'patient_id',
|
||||
dataIndex: 'patient_name',
|
||||
key: 'patient_name',
|
||||
width: 140,
|
||||
render: (id: string) => patientLabels[id] || id.slice(0, 8),
|
||||
render: (_: unknown, record: Session) =>
|
||||
record.patient_name ?? record.patient_id.slice(0, 8),
|
||||
},
|
||||
{
|
||||
title: '医护',
|
||||
dataIndex: 'doctor_id',
|
||||
key: 'doctor_id',
|
||||
dataIndex: 'doctor_name',
|
||||
key: 'doctor_name',
|
||||
width: 140,
|
||||
render: (id: string | undefined) =>
|
||||
id ? doctorLabels[id] || id.slice(0, 8) : '-',
|
||||
render: (_: unknown, record: Session) =>
|
||||
record.doctor_name ?? record.doctor_id?.slice(0, 8) ?? '-',
|
||||
},
|
||||
{
|
||||
title: '咨询类型',
|
||||
@@ -383,14 +334,10 @@ export default function ConsultationList() {
|
||||
label="患者"
|
||||
rules={[{ required: true, message: '请选择患者' }]}
|
||||
>
|
||||
<PatientSelect
|
||||
onChange={(_val, label) => handlePatientLabel(_val, label)}
|
||||
/>
|
||||
<PatientSelect />
|
||||
</Form.Item>
|
||||
<Form.Item name="doctor_id" label="医护">
|
||||
<DoctorSelect
|
||||
onChange={(_val, label) => handleDoctorLabel(_val, label)}
|
||||
/>
|
||||
<DoctorSelect />
|
||||
</Form.Item>
|
||||
<Form.Item name="consultation_type" label="咨询类型">
|
||||
<Select
|
||||
|
||||
@@ -15,7 +15,6 @@ import { PlusOutlined, EditOutlined, SwapOutlined, DeleteOutlined } from '@ant-d
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import dayjs from 'dayjs';
|
||||
import { followUpApi, type FollowUpTask, type CreateFollowUpTaskReq, type UpdateFollowUpTaskReq } from '../../api/health/followUp';
|
||||
import { patientApi } from '../../api/health/patients';
|
||||
import { getUser } from '../../api/users';
|
||||
import { StatusTag } from './components/StatusTag';
|
||||
import { PatientSelect } from './components/PatientSelect';
|
||||
@@ -93,8 +92,7 @@ export default function FollowUpTaskList() {
|
||||
const [assignForm] = Form.useForm<AssignFormValues>();
|
||||
const [assignTask, setAssignTask] = useState<FollowUpTask | null>(null);
|
||||
|
||||
// Patient/doctor label cache for display
|
||||
const [patientLabels, setPatientLabels] = useState<Record<string, string>>({});
|
||||
// Doctor label cache (for assignee display from users table)
|
||||
const [doctorLabels, setDoctorLabels] = useState<Record<string, string>>({});
|
||||
|
||||
const isDark = useThemeMode();
|
||||
@@ -107,41 +105,29 @@ export default function FollowUpTaskList() {
|
||||
setTasks(result.data);
|
||||
setTotal(result.total);
|
||||
|
||||
// Batch resolve patient names
|
||||
const patientIds = [...new Set(result.data.map((t: FollowUpTask) => t.patient_id).filter(Boolean))];
|
||||
const newLabels: Record<string, string> = {};
|
||||
await Promise.allSettled(
|
||||
patientIds.map(async (id: string) => {
|
||||
try {
|
||||
const p = await patientApi.get(id);
|
||||
newLabels[id] = p.name;
|
||||
} catch { /* skip */ }
|
||||
}),
|
||||
);
|
||||
if (Object.keys(newLabels).length > 0) {
|
||||
setPatientLabels((prev) => ({ ...prev, ...newLabels }));
|
||||
}
|
||||
|
||||
// Batch resolve assignee names
|
||||
// Batch resolve assignee names (from users table, not inlined by backend)
|
||||
const assigneeIds = [...new Set(result.data.map((t: FollowUpTask) => t.assigned_to).filter((x): x is string => !!x))];
|
||||
const newDoctorLabels: Record<string, string> = {};
|
||||
await Promise.allSettled(
|
||||
assigneeIds.map(async (id) => {
|
||||
try {
|
||||
const u = await getUser(id);
|
||||
newDoctorLabels[id] = u.display_name || u.username;
|
||||
} catch { /* skip */ }
|
||||
}),
|
||||
);
|
||||
if (Object.keys(newDoctorLabels).length > 0) {
|
||||
setDoctorLabels((prev) => ({ ...prev, ...newDoctorLabels }));
|
||||
const missingIds = assigneeIds.filter((id) => !doctorLabels[id]);
|
||||
if (missingIds.length > 0) {
|
||||
const newDoctorLabels: Record<string, string> = {};
|
||||
await Promise.allSettled(
|
||||
missingIds.map(async (id) => {
|
||||
try {
|
||||
const u = await getUser(id);
|
||||
newDoctorLabels[id] = u.display_name || u.username;
|
||||
} catch { /* skip */ }
|
||||
}),
|
||||
);
|
||||
if (Object.keys(newDoctorLabels).length > 0) {
|
||||
setDoctorLabels((prev) => ({ ...prev, ...newDoctorLabels }));
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
message.error('加载随访任务失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [doctorLabels]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks(query);
|
||||
@@ -260,10 +246,6 @@ export default function FollowUpTaskList() {
|
||||
};
|
||||
|
||||
// Store labels from selects
|
||||
const handlePatientLabel = (id: string, label: string) => {
|
||||
setPatientLabels((prev) => ({ ...prev, [id]: label }));
|
||||
};
|
||||
|
||||
const handleDoctorLabel = (id: string, label: string) => {
|
||||
setDoctorLabels((prev) => ({ ...prev, [id]: label }));
|
||||
};
|
||||
@@ -272,10 +254,11 @@ export default function FollowUpTaskList() {
|
||||
const columns: ColumnsType<FollowUpTask> = [
|
||||
{
|
||||
title: '患者',
|
||||
dataIndex: 'patient_id',
|
||||
key: 'patient_id',
|
||||
dataIndex: 'patient_name',
|
||||
key: 'patient_name',
|
||||
width: 140,
|
||||
render: (id: string) => patientLabels[id] || id.slice(0, 8),
|
||||
render: (_: unknown, record: FollowUpTask) =>
|
||||
record.patient_name ?? record.patient_id.slice(0, 8),
|
||||
},
|
||||
{
|
||||
title: '随访类型',
|
||||
@@ -445,9 +428,7 @@ export default function FollowUpTaskList() {
|
||||
label="患者"
|
||||
rules={[{ required: true, message: '请选择患者' }]}
|
||||
>
|
||||
<PatientSelect
|
||||
onChange={(_val, label) => handlePatientLabel(_val, label)}
|
||||
/>
|
||||
<PatientSelect />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="follow_up_type"
|
||||
|
||||
Reference in New Issue
Block a user