init

src/pages/ExamPage.tsx

@@ -0,0 +1,74 @@
+import { useMemo, useState } from 'react';
+import { useOutletContext } from 'react-router-dom';
+
+import type { ExamClient, ExamModalTab } from '../data/mockData';
+import { EXAM_CLIENTS, EXAM_TAGS } from '../data/mockData';
+import { ExamSection } from '../components/exam/ExamSection';
+import { ExamModal } from '../components/exam/ExamModal';
+import type { MainLayoutContext } from '../layouts/MainLayout';
+
+export const ExamPage = () => {
+  const { search } = useOutletContext<MainLayoutContext>();
+  const [examSelectedId, setExamSelectedId] = useState<string>('A001');
+  const [examPanelTab, setExamPanelTab] = useState<ExamModalTab>('detail');
+  const [examModalOpen, setExamModalOpen] = useState(false);
+  const [examFilterTag, setExamFilterTag] = useState<(typeof EXAM_TAGS)[number]>('全部');
+
+  const filteredClients = useMemo(() => {
+    return EXAM_CLIENTS.filter((c) => (c.name + c.packageName + c.id).toLowerCase().includes(search.trim().toLowerCase())).filter(
+      (c) => {
+        switch (examFilterTag) {
+          case '上午':
+            return c.timeSlot === '上午';
+          case '下午':
+            return c.timeSlot === '下午';
+          case '高客':
+            return c.vipType === '高客';
+          case '普客':
+            return c.vipType === '普客';
+          case '已登记':
+            return c.signStatus === '已登记';
+          case '未登记':
+            return c.signStatus !== '已登记';
+          case '散客':
+            return c.customerType === '散客';
+          case '团客':
+            return c.customerType === '团客';
+          default:
+            return true;
+        }
+      },
+    );
+  }, [search, examFilterTag]);
+
+  const selectedExamClient: ExamClient = EXAM_CLIENTS.find((c) => c.id === examSelectedId) || EXAM_CLIENTS[0];
+
+  const handleOpenModal = (id: string, tab: ExamModalTab) => {
+    setExamSelectedId(id);
+    setExamPanelTab(tab);
+    setExamModalOpen(true);
+  };
+
+  return (
+    <>
+      <ExamSection
+        filteredClients={filteredClients}
+        selectedExamClient={selectedExamClient}
+        examFilterTag={examFilterTag}
+        onFilterChange={setExamFilterTag}
+        onOpenModal={handleOpenModal}
+      />
+
+      {examModalOpen && (
+        <ExamModal
+          client={selectedExamClient}
+          tab={examPanelTab}
+          onTabChange={setExamPanelTab}
+          onClose={() => setExamModalOpen(false)}
+        />
+      )}
+    </>
+  );
+};
+
+