Browse Source

添加输出管理页面,可以通过导航菜单项打开

dengdx 2 months ago
parent
commit
d34196e00e

+ 3 - 1
src/layouts/BasicLayout.tsx

@@ -15,6 +15,7 @@ import WorklistPage from '@/pages/patient/worklist';
 import HistorylistPage from '@/pages/patient/HistoryList';
 import ArchivelistPage from '@/pages/patient/ArchiveList';
 import BinPage from '@/pages/patient/Bin';
+import OutputlistPage from '@/pages/patient/OutputList';
 
 // import { Link } from 'react-router-dom';
 // import { MenuOutlined } from '@ant-design/icons';
@@ -51,7 +52,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({ children }) => {
         'worklist':<WorklistPage />,
         'historylist':<HistorylistPage />,
         'archivelist':<ArchivelistPage />,
-        'bin':<BinPage />
+        'bin':<BinPage />,
+        'outputlist':<OutputlistPage />,
     };
     //感知菜单项点击
     const handleMenuClick=(key:string)=>{

+ 52 - 0
src/pages/patient/OutputList.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Row, Col, Button, Drawer, Grid, Pagination } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import WorklistTable from './components/WorklistTable';
+import OutputOperationPanel from './components/OutputOperationPanel';
+
+const { useBreakpoint } = Grid;
+
+const OutputlistPage: 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}
+          >
+            <OutputOperationPanel />
+          </Drawer>
+        </>
+      ) : (
+        <Row gutter={16}>
+          <Col span={screens.lg ? 18 : screens.md ? 20 : 24}>
+            <WorklistTable />
+            <div className="flex justify-center mt-4">
+                <Pagination defaultCurrent={1} total={50} />
+            </div>
+          </Col>
+          <Col span={screens.lg ? 6 : screens.md ? 4 : 0}>
+            <OutputOperationPanel />
+          </Col>
+        </Row>
+      )}
+    </div>
+  );
+};
+
+export default OutputlistPage;

+ 24 - 0
src/pages/patient/components/OutputActionPanel.tsx

@@ -0,0 +1,24 @@
+import { Tooltip, Button, Space } from 'antd';
+import { ReloadOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const OutputActionPanel: React.FC = () => (
+    <Space>
+        <Tooltip title="重试">
+            <Button
+                type="text"
+                icon={<ReloadOutlined />}
+                aria-label="重试"
+            />
+        </Tooltip>
+        <Tooltip title="删除">
+            <Button
+                type="text"
+                icon={<DeleteOutlined />}
+                aria-label="删除"
+                danger
+            />
+        </Tooltip>
+    </Space>
+);
+
+export default OutputActionPanel;

+ 16 - 0
src/pages/patient/components/OutputOperationPanel.tsx

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

+ 64 - 0
src/pages/patient/components/OutputTable.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Table } from 'antd';
+
+interface PatientData {
+    key: string;
+    name: string;
+    id: string;
+    priority: string;
+    status: string;
+    retryCount: number;
+    target: string;
+}
+
+const columns = [
+    {
+        title: '病人姓名',
+        dataIndex: 'name',
+        key: 'name',
+    },
+    {
+        title: '病人ID',
+        dataIndex: 'id',
+        key: 'id',
+    },
+    {
+        title: '优先级',
+        dataIndex: 'priority',
+        key: 'priority',
+    },
+    {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+    },
+    {
+        title: '重试次数',
+        dataIndex: 'retryCount',
+        key: 'retryCount',
+    },
+    {
+        title: '目标',
+        dataIndex: 'target',
+        key: 'target',
+    },
+];
+
+const data: PatientData[] = [
+    // 示例数据,可根据实际情况替换
+    // {
+    //   key: '1',
+    //   name: '张三',
+    //   id: 'P001',
+    //   priority: '高',
+    //   status: '处理中',
+    //   retryCount: 2,
+    //   target: '目标A',
+    // },
+];
+
+const OutputTable: React.FC = () => (
+    <Table columns={columns} dataSource={data} />
+);
+
+export default OutputTable;