yuanhe/ipad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化体检客户列表空数据展示

Browse Source
This commit is contained in:
xianyi
2025-12-18 11:41:34 +08:00
parent 32af1cc335
commit b72765695d
2 changed files with 103 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/exam/ExamSection.tsx
View File

@@ -8,7 +8,7 @@ import { cls } from '../../utils/cls';
interface ExamSectionProps { interface ExamSectionProps {
filteredClients: ExamClient[]; filteredClients: ExamClient[];
selectedExamClient: ExamClient; selectedExamClient: ExamClient | undefined;
examFilterTag: (typeof EXAM_TAGS)[number]; examFilterTag: (typeof EXAM_TAGS)[number];
onFilterChange: (tag: (typeof EXAM_TAGS)[number]) => void; onFilterChange: (tag: (typeof EXAM_TAGS)[number]) => void;
onOpenModal: (id: string, tab: ExamModalTab) => void; onOpenModal: (id: string, tab: ExamModalTab) => void;
@@ -76,97 +76,104 @@ export const ExamSection = ({
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className='grid grid-cols-3 gap-3 text-sm'> {filteredClients.length === 0 ? (
{filteredClients.map((client) => { <div className='text-center text-gray-500 py-8'>
// 检查操作记录：优先使用 localStorage 记录，如果没有则使用原有逻辑 <div className='text-sm'>暂无体检客户数据</div>
const idCardSignInDone = isExamActionDone(client.id, 'idCardSignIn'); <div className='text-xs mt-1'>请尝试调整筛选条件或搜索关键词</div>
const printSignDone = isExamActionDone(client.id, 'printSign'); </div>
) : (
<div className='grid grid-cols-3 gap-3 text-sm'>
{filteredClients.map((client) => {
// 检查操作记录：优先使用 localStorage 记录，如果没有则使用原有逻辑
const idCardSignInDone = isExamActionDone(client.id, 'idCardSignIn');
const printSignDone = isExamActionDone(client.id, 'printSign');
const signDone = idCardSignInDone || client.signStatus === '已登记' || client.checkedItems.includes('签到'); const signDone = idCardSignInDone || client.signStatus === '已登记' || client.checkedItems.includes('签到');
const addonCount = client.addonCount || 0; const addonCount = client.addonCount || 0;
const printDone = printSignDone || !!client.guidePrinted; const printDone = printSignDone || !!client.guidePrinted;
const openModal = (tab: ExamModalTab) => onOpenModal(client.id, tab); const openModal = (tab: ExamModalTab) => onOpenModal(client.id, tab);
return ( return (
<div <div
key={client.id} key={client.id}
role='button' role='button'
tabIndex={0} tabIndex={0}
onClick={() => openModal('detail')} onClick={() => openModal('detail')}
className={cls( className={cls(
'text-left p-3 rounded-2xl border bg-white hover:bg-gray-50 flex flex-col gap-1 cursor-pointer', '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', selectedExamClient?.id === client.id && 'border-gray-900 bg-gray-50',
)} )}
> >
<div className='flex items-center justify-between mb-1'> <div className='flex items-center justify-between mb-1'>
<span className='font-medium'>{client.name}</span> <span className='font-medium'>{client.name}</span>
<Badge>{client.level}</Badge> <Badge>{client.level}</Badge>
</div> </div>
<div className='text-xs text-gray-500 truncate'>套餐：{client.packageName}</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'> <div className='flex items-center justify-between text-xs text-gray-500 mt-1'>
<span>状态：{client.status}</span> <span>状态：{client.status}</span>
<span>已耗时：{client.elapsed}</span> <span>已耗时：{client.elapsed}</span>
</div> </div>
<div className='mt-2 flex flex-wrap gap-1 text-[11px]'> <div className='mt-2 flex flex-wrap gap-1 text-[11px]'>
<button <button
type='button' type='button'
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1' className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
openModal('detail'); openModal('detail');
}} }}
> >
<span>详情</span> <span>详情</span>
</button> </button>
<button <button
type='button' type='button'
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1' className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
openModal('sign'); openModal('sign');
}} }}
> >
<span>签到</span> <span>签到</span>
{signDone && <span>✅</span>} {signDone && <span>✅</span>}
</button> </button>
<button <button
type='button' type='button'
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1' className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
openModal('addon'); openModal('addon');
}} }}
> >
<span>加项</span> <span>加项</span>
{addonCount > 0 && <span className='opacity-80'>({addonCount})</span>} {addonCount > 0 && <span className='opacity-80'>({addonCount})</span>}
</button> </button>
<button <button
type='button' type='button'
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1' className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
openModal('print'); openModal('print');
}} }}
> >
<span>打印导检单</span> <span>打印导检单</span>
{printDone && <span>✅</span>} {printDone && <span>✅</span>}
</button> </button>
<button <button
type='button' type='button'
className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1' className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
openModal('delivery'); openModal('delivery');
}} }}
> >
<span>报告寄送</span> <span>报告寄送</span>
</button> </button>
</div>
</div> </div>
</div> );
); })}
})} </div>
</div> )}
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

18
src/pages/ExamPage.tsx
View File

@@ -112,17 +112,15 @@ export const ExamPage = () => {
return ( return (
<> <>
{selectedExamClient && ( <ExamSection
<ExamSection filteredClients={clients}
filteredClients={clients} selectedExamClient={selectedExamClient}
selectedExamClient={selectedExamClient} examFilterTag={examFilterTag}
examFilterTag={examFilterTag} onFilterChange={setExamFilterTag}
onFilterChange={setExamFilterTag} onOpenModal={handleOpenModal}
onOpenModal={handleOpenModal} />
/>
)}
{examModalOpen && ( {examModalOpen && selectedExamClient && (
<ExamModal <ExamModal
client={selectedExamClient} client={selectedExamClient}
tab={examPanelTab} tab={examPanelTab}