|
@@ -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;
|