添加任务清单页面

src/layouts/BasicLayout.tsx

@@ -11,6 +11,7 @@ import StatusBar, { StatusBarProps,DiskStatusType } from './StateBar';
 import AboutPage from '@/pages/demo/AboutPage';
 import HomePage from '@/pages/demo/HomePage';
 import RegisterPage from '@/pages/patient/register';
+import WorklistPage from '@/pages/patient/worklist';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -43,7 +44,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({ children }) => {
     const contentMap = {
         'sub2': <AboutPage />,
         'process': <HomePage />,
-        'register':<RegisterPage />
+        'register':<RegisterPage />,
+        'worklist':<WorklistPage />
     };
     //感知菜单项点击
     const handleMenuClick=(key:string)=>{

src/layouts/NavMenu.tsx

@@ -17,7 +17,7 @@ const items: MenuItem[] = [
                 label: <FormattedMessage id='register' defaultMessage={'语言包中没有定义patient的翻译文本'} />,
             },
             {
-                key: 'tasklist',
+                key: 'worklist',
                 label: <FormattedMessage id='tasklist' defaultMessage={'语言包中没有定义patient的翻译文本'} />
             },
             {

src/pages/patient/components/ActionPanel.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button, Tooltip } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+
+interface ActionButtonProps {
+  icon: React.ReactNode;
+  tooltip: string;
+}
+
+const ActionButton: React.FC<ActionButtonProps> = ({ icon, tooltip }) => (
+  <Tooltip title={tooltip}>
+    <Button icon={icon} />
+  </Tooltip>
+);
+
+const ActionPanel: React.FC = () => {
+  return (
+    <div className="flex flex-wrap gap-2 w-full">
+      <ActionButton icon={<DeleteOutlined />} tooltip="删除检查任务" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="编辑患者信息" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="锁定任务" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="RIS同步" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="再登记" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="保存本地" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="从XLS导入" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="列表排序" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="云分享" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="图像交换" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="二维码打印" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="发送" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="刻录" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="导出" />
+      <ActionButton icon={<DeleteOutlined />} tooltip="导入" />
+    </div>
+  );
+};
+
+export default ActionPanel;

src/pages/patient/components/OperationPanel.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import SearchPanel from './SearchPanel';
+import ActionPanel from './ActionPanel';
+
+const OperationPanel: React.FC = () => {
+  return (
+    <div className="w-full">
+      <SearchPanel />
+      <div className="mt-4">
+        <ActionPanel />
+      </div>
+    </div>
+  );
+};
+
+export default OperationPanel;

src/pages/patient/components/SearchPanel.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Input, Button, DatePicker } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+
+const { RangePicker } = DatePicker;
+
+const SearchPanel: React.FC = () => {
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Input 
+        placeholder="按姓名查询" 
+        prefix={<SearchOutlined />} 
+        size="small"
+      />
+      <Input 
+        placeholder="按患者编号查询" 
+        prefix={<SearchOutlined />} 
+        size="small"
+      />
+      <Input 
+        placeholder="按登记号查询" 
+        prefix={<SearchOutlined />} 
+        size="small"
+      />
+      <RangePicker 
+        className="w-full" 
+        placeholder={['开始日期', '结束日期']}
+        size="small"
+      />
+      <Button type="primary" icon={<SearchOutlined />}>
+        查询
+      </Button>
+    </div>
+  );
+};
+
+export default SearchPanel;

src/pages/patient/components/WorklistTable.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Table } from 'antd';
+
+const columns = [
+  { title: '患者编号', dataIndex: 'patientId' },
+  { title: '患者姓名', dataIndex: 'name' },
+  { title: '曾用名', dataIndex: 'alias' },
+  { title: '英文名', dataIndex: 'englishName' },
+  { title: '登记号', dataIndex: 'registrationId' },
+  { title: '出生日期', dataIndex: 'birthDate' },
+  { title: '年龄', dataIndex: 'age' },
+  { title: '性别', dataIndex: 'gender' },
+  { title: '病人体型', dataIndex: 'bodyType' },
+  { title: '体重', dataIndex: 'weight' },
+  { title: '身高', dataIndex: 'height' },
+  { title: '怀孕状态', dataIndex: 'pregnancyStatus' },
+  { title: '转诊医师', dataIndex: 'referringDoctor' },
+];
+
+const WorklistTable: React.FC = () => {
+  return <Table columns={columns} dataSource={[]} rowKey="patientId" />;
+};
+
+export default WorklistTable;

src/pages/patient/worklist.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Row, Col, Button, Drawer, Grid } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import WorklistTable from './components/WorklistTable';
+import OperationPanel from './components/OperationPanel';
+
+const { useBreakpoint } = Grid;
+
+const WorklistPage: React.FC = () => {
+  const screens = useBreakpoint();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+  return (
+    <div className="p-4">
+      {screens.xs ? (
+        <>
+          <WorklistTable />
+          <Button
+            type="primary"
+            shape="circle"
+            icon={<SettingOutlined />}
+            className="fixed bottom-6 right-6 z-50"
+            onClick={() => setDrawerVisible(true)}
+          />
+          <Drawer
+            title="操作面板"
+            placement="left"
+            onClose={() => setDrawerVisible(false)}
+            open={drawerVisible}
+            width={300}
+          >
+            <OperationPanel />
+          </Drawer>
+        </>
+      ) : (
+        <Row gutter={16}>
+          <Col span={screens.lg ? 18 : screens.md ? 20 : 24}>
+            <WorklistTable />
+          </Col>
+          <Col span={screens.lg ? 6 : screens.md ? 4 : 0}>
+            <OperationPanel />
+          </Col>
+        </Row>
+      )}
+    </div>
+  );
+};
+
+export default WorklistPage;