worklist.tsx 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. import React, { useState } from 'react';
  2. import { Row, Col, Button, Drawer, Grid } from 'antd';
  3. import { SettingOutlined } from '@ant-design/icons';
  4. import WorklistTable from './components/WorklistTable';
  5. import OperationPanel from './components/OperationPanel';
  6. const { useBreakpoint } = Grid;
  7. const WorklistPage: React.FC = () => {
  8. const screens = useBreakpoint();
  9. const [drawerVisible, setDrawerVisible] = useState(false);
  10. return (
  11. <div className="p-4">
  12. {screens.xs ? (
  13. <>
  14. <WorklistTable />
  15. <Button
  16. type="primary"
  17. shape="circle"
  18. icon={<SettingOutlined />}
  19. className="fixed bottom-6 right-6 z-50"
  20. onClick={() => setDrawerVisible(true)}
  21. />
  22. <Drawer
  23. title="操作面板"
  24. placement="left"
  25. onClose={() => setDrawerVisible(false)}
  26. open={drawerVisible}
  27. width={300}
  28. >
  29. <OperationPanel />
  30. </Drawer>
  31. </>
  32. ) : (
  33. <Row gutter={16}>
  34. <Col span={screens.lg ? 18 : screens.md ? 20 : 24}>
  35. <WorklistTable />
  36. </Col>
  37. <Col span={screens.lg ? 6 : screens.md ? 4 : 0}>
  38. <OperationPanel />
  39. </Col>
  40. </Row>
  41. )}
  42. </div>
  43. );
  44. };
  45. export default WorklistPage;