59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { PageHeader } from '@/components/layout/PageHeader';
|
|
import { Card } from '@/components/common/Card';
|
|
import { Empty } from '@/components/common/Empty';
|
|
import * as followupService from '@/services/followup.service';
|
|
import type { FollowUp } from '@/types';
|
|
import { formatDate } from '@/utils/format';
|
|
import styles from './FollowUpListPage.module.css';
|
|
|
|
export function FollowUpListPage() {
|
|
const navigate = useNavigate();
|
|
const [followups, setFollowups] = useState<FollowUp[]>([]);
|
|
const [tab, setTab] = useState<'upcoming' | 'completed'>('upcoming');
|
|
|
|
useEffect(() => {
|
|
followupService.getFollowUps().then(setFollowups);
|
|
}, []);
|
|
|
|
const filtered = followups.filter((f) => tab === 'upcoming' ? f.status === 'upcoming' : f.status === 'completed');
|
|
|
|
const statusColor = (s: FollowUp['status']) => {
|
|
if (s === 'upcoming') return '#3B82F6';
|
|
if (s === 'completed') return '#10B981';
|
|
return '#EF4444';
|
|
};
|
|
|
|
return (
|
|
<div className="page--no-tab">
|
|
<PageHeader title="复查管理" />
|
|
<div className={styles.tabs}>
|
|
<button className={`${styles.tab} ${tab === 'upcoming' ? styles.tabActive : ''}`} onClick={() => setTab('upcoming')}>即将到来</button>
|
|
<button className={`${styles.tab} ${tab === 'completed' ? styles.tabActive : ''}`} onClick={() => setTab('completed')}>已完成</button>
|
|
</div>
|
|
{filtered.length === 0 ? (
|
|
<Empty icon="🏥" message="暂无复查计划" />
|
|
) : (
|
|
filtered.map((f) => (
|
|
<Card key={f.id} className={styles.card}>
|
|
<div className={styles.cardHeader}>
|
|
<span className={styles.title}>{f.title}</span>
|
|
<span className={styles.status} style={{ color: statusColor(f.status) }}>
|
|
{f.status === 'upcoming' ? '待复查' : '已完成'}
|
|
</span>
|
|
</div>
|
|
<div className={styles.meta}>
|
|
<span>{f.doctorName || '未分配'} · {f.patientName || ''}</span>
|
|
</div>
|
|
<div className={styles.meta}>
|
|
<span>{formatDate(f.scheduledAt, 'YYYY-MM-DD HH:mm')}</span>
|
|
</div>
|
|
</Card>
|
|
))
|
|
)}
|
|
<button className={styles.fab} onClick={() => navigate('/services/follow-ups/add')}>+ 新增复查</button>
|
|
</div>
|
|
);
|
|
}
|