添加接口：今日体检进度信息
This commit is contained in:
xianyi
@@ -1,5 +1,7 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { ExamClient, ExamModalTab } from '../../data/mockData';
|
||||
import { EXAM_STATS, EXAM_TAGS } from '../../data/mockData';
|
||||
import { EXAM_TAGS } from '../../data/mockData';
|
||||
import { getTodayExamProgress } from '../../api';
|
||||
import { Badge, Card, CardContent, CardHeader, InfoCard } from '../ui';
|
||||
import { cls } from '../../utils/cls';
|
||||
|
||||
@@ -17,126 +19,153 @@ export const ExamSection = ({
|
||||
examFilterTag,
|
||||
onFilterChange,
|
||||
onOpenModal,
|
||||
}: ExamSectionProps) => (
|
||||
<div className='space-y-4'>
|
||||
<Card>
|
||||
<CardHeader>今日体检进度</CardHeader>
|
||||
<CardContent>
|
||||
<div className='grid grid-cols-4 gap-3'>
|
||||
{EXAM_STATS.map(([label, value]) => (
|
||||
<InfoCard key={label} label={label} value={value} />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
}: ExamSectionProps) => {
|
||||
const [progressStats, setProgressStats] = useState([
|
||||
{ label: '预约人数', value: 0 },
|
||||
{ label: '已签到', value: 0 },
|
||||
{ label: '体检中', value: 0 },
|
||||
{ label: '用餐', value: 0 },
|
||||
]);
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<span>体检客户列表</span>
|
||||
<div className='flex items-center gap-2 text-xs'>
|
||||
{EXAM_TAGS.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => onFilterChange(tag)}
|
||||
className={cls(
|
||||
'px-3 py-1 rounded-2xl border',
|
||||
examFilterTag === tag ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-700',
|
||||
)}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='grid grid-cols-3 gap-3 text-sm'>
|
||||
{filteredClients.map((client) => {
|
||||
const signDone = client.signStatus === '已登记' || client.checkedItems.includes('签到');
|
||||
const addonCount = client.addonCount || 0;
|
||||
const printDone = !!client.guidePrinted;
|
||||
const openModal = (tab: ExamModalTab) => onOpenModal(client.id, tab);
|
||||
useEffect(() => {
|
||||
getTodayExamProgress({})
|
||||
.then((res) => {
|
||||
const d = res.Data;
|
||||
setProgressStats([
|
||||
{ label: '预约人数', value: Number(d?.today_appointment_count ?? 0) },
|
||||
{ label: '已签到', value: Number(d?.today_signin_count ?? 0) },
|
||||
{ label: '体检中', value: Number(d?.today_in_exam_count ?? 0) },
|
||||
{ label: '用餐', value: Number(d?.today_meal_count ?? 0) },
|
||||
]);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('获取今日体检进度失败', err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
return (
|
||||
<div className='space-y-4'>
|
||||
<Card>
|
||||
<CardHeader>今日体检进度</CardHeader>
|
||||
<CardContent>
|
||||
<div className='grid grid-cols-4 gap-3'>
|
||||
{progressStats.map(({ label, value }) => (
|
||||
<InfoCard key={label} label={label} value={value} />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<span>体检客户列表</span>
|
||||
<div className='flex items-center gap-2 text-xs'>
|
||||
{EXAM_TAGS.map((tag) => (
|
||||
<button
|
||||
key={client.id}
|
||||
onClick={() => openModal('detail')}
|
||||
key={tag}
|
||||
onClick={() => onFilterChange(tag)}
|
||||
className={cls(
|
||||
'text-left p-3 rounded-2xl border bg-white hover:bg-gray-50 flex flex-col gap-1',
|
||||
selectedExamClient.id === client.id && 'border-gray-900 bg-gray-50',
|
||||
'px-3 py-1 rounded-2xl border',
|
||||
examFilterTag === tag ? 'bg-gray-900 text-white border-gray-900' : 'bg-white text-gray-700',
|
||||
)}
|
||||
>
|
||||
<div className='flex items-center justify-between mb-1'>
|
||||
<span className='font-medium'>{client.name}</span>
|
||||
<Badge>{client.level}</Badge>
|
||||
</div>
|
||||
<div className='text-xs text-gray-500 truncate'>套餐：{client.packageName}</div>
|
||||
<div className='flex items-center justify-between text-xs text-gray-500 mt-1'>
|
||||
<span>状态：{client.status}</span>
|
||||
<span>已耗时：{client.elapsed}</span>
|
||||
</div>
|
||||
<div className='mt-2 flex flex-wrap gap-1 text-[11px]'>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('detail');
|
||||
}}
|
||||
>
|
||||
<span>详情</span>
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('sign');
|
||||
}}
|
||||
>
|
||||
<span>签到</span>
|
||||
{signDone && <span>✅</span>}
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('addon');
|
||||
}}
|
||||
>
|
||||
<span>加项</span>
|
||||
{addonCount > 0 && <span className='opacity-80'>({addonCount})</span>}
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('print');
|
||||
}}
|
||||
>
|
||||
<span>打印导检单</span>
|
||||
{printDone && <span>✅</span>}
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('delivery');
|
||||
}}
|
||||
>
|
||||
<span>报告寄送</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
{tag}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
))}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className='grid grid-cols-3 gap-3 text-sm'>
|
||||
{filteredClients.map((client) => {
|
||||
const signDone = client.signStatus === '已登记' || client.checkedItems.includes('签到');
|
||||
const addonCount = client.addonCount || 0;
|
||||
const printDone = !!client.guidePrinted;
|
||||
const openModal = (tab: ExamModalTab) => onOpenModal(client.id, tab);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={client.id}
|
||||
role='button'
|
||||
tabIndex={0}
|
||||
onClick={() => openModal('detail')}
|
||||
className={cls(
|
||||
'text-left p-3 rounded-2xl border bg-white hover:bg-gray-50 flex flex-col gap-1 cursor-pointer',
|
||||
selectedExamClient.id === client.id && 'border-gray-900 bg-gray-50',
|
||||
)}
|
||||
>
|
||||
<div className='flex items-center justify-between mb-1'>
|
||||
<span className='font-medium'>{client.name}</span>
|
||||
<Badge>{client.level}</Badge>
|
||||
</div>
|
||||
<div className='text-xs text-gray-500 truncate'>套餐：{client.packageName}</div>
|
||||
<div className='flex items-center justify-between text-xs text-gray-500 mt-1'>
|
||||
<span>状态：{client.status}</span>
|
||||
<span>已耗时：{client.elapsed}</span>
|
||||
</div>
|
||||
<div className='mt-2 flex flex-wrap gap-1 text-[11px]'>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('detail');
|
||||
}}
|
||||
>
|
||||
<span>详情</span>
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('sign');
|
||||
}}
|
||||
>
|
||||
<span>签到</span>
|
||||
{signDone && <span>✅</span>}
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('addon');
|
||||
}}
|
||||
>
|
||||
<span>加项</span>
|
||||
{addonCount > 0 && <span className='opacity-80'>({addonCount})</span>}
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('print');
|
||||
}}
|
||||
>
|
||||
<span>打印导检单</span>
|
||||
{printDone && <span>✅</span>}
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
openModal('delivery');
|
||||
}}
|
||||
>
|
||||
<span>报告寄送</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user