Browse Source

在注册页面添加检查与注册按钮

dengdx 2 months ago
parent
commit
bc56eada91
1 changed files with 102 additions and 105 deletions
  1. 102 105
      src/pages/patient/register.tsx

+ 102 - 105
src/pages/patient/register.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Col, Collapse, Grid, Divider } from 'antd';
+import { Row, Col, Collapse, Grid, Divider, Button, Space } from 'antd';
 import { FormattedMessage } from 'react-intl';
 import BasicInfoForm from './components/register.form';
 // import ProtocolList from './components/register.protocol.list';
@@ -12,112 +12,109 @@ const { Panel } = Collapse;
 const RegisterPage: React.FC = () => {
   const screens = useBreakpoint();
 
-  // xs: <480, sm: ≥576, md: ≥768, lg: ≥992, xl: ≥1200, xxl: ≥1600
-  // 优先级:xs/sm(小屏)→ md/lg(中屏)→ xl/xxl(大屏)
-  console.log(screens);
-
-  if (screens.xl || screens.xxl) {
-    // 大屏幕:三栏布局
-    return (
-      <Row className="flex-1 h-full">
-        <Col
-          xs={24}
-          sm={24}
-          md={8}
-          lg={8}
-          xl={8}
-          xxl={8}
-          style={{
-            // border: '4px solid green',
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-          className="h-full"
-        >
-          <BasicInfoForm style={{ overflow: 'auto' }} />
-        </Col>
-        <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} className="h-full">
-          <RegisterAvailableList />
-        </Col>
-        <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}>
-          <SelectedProtocolList />
-        </Col>
-      </Row>
-    );
-  }
-
-  if (screens.md || screens.lg) {
-    // 中屏幕:左右两栏,右侧上下分
-    return (
-      <Row className="h-full flex-1 ">
-        <Col
-          xs={24}
-          sm={24}
-          md={12}
-          lg={12}
-          className="h-full flex flex-column"
+  return (
+    <>
+      {screens.xl || screens.xxl ? (
+        <Row className="flex-1 h-full">
+          <Col
+            xs={24}
+            sm={24}
+            md={8}
+            lg={8}
+            xl={8}
+            xxl={8}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+            className="h-full"
+          >
+            <BasicInfoForm style={{ overflow: 'auto' }} />
+          </Col>
+          <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} className="h-full">
+            <RegisterAvailableList />
+          </Col>
+          <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8}>
+            <SelectedProtocolList />
+          </Col>
+        </Row>
+      ) : screens.md || screens.lg ? (
+        <Row className="h-full flex-1 ">
+          <Col
+            xs={24}
+            sm={24}
+            md={12}
+            lg={12}
+            className="h-full flex flex-column"
+          >
+            <BasicInfoForm style={{ overflow: 'auto', width: '100%' }} />
+          </Col>
+          <Col xs={24} sm={24} md={12} lg={12}>
+            <Row gutter={[0, 16]}>
+              <Col span={24}>
+                <RegisterAvailableList />
+              </Col>
+              <Divider />
+              <Col span={24}>
+                <SelectedProtocolList className="" />
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+      ) : (
+        <Collapse
+          accordion
+          defaultActiveKey={['1']}
+          style={{ overflow: 'auto', height: '100%' }}
         >
-          <BasicInfoForm style={{ overflow: 'auto', width: '100%' }} />
-        </Col>
-        <Col xs={24} sm={24} md={12} lg={12}>
-          <Row gutter={[0, 16]}>
-            <Col span={24}>
-              <RegisterAvailableList />
-            </Col>
-            <Divider />
-            <Col span={24}>
-              <SelectedProtocolList className="" />
-            </Col>
-          </Row>
-        </Col>
-      </Row>
-    );
-  }
-
-  if (screens.xs || screens.sm) {
-    // 小屏幕:手风琴式布局
-    return (
-      <Collapse
-        accordion
-        defaultActiveKey={['1']}
-        style={{ overflow: 'auto', height: '100%' }}
+          <Panel
+            header={
+              <FormattedMessage
+                id="register.basicInfoPanel"
+                defaultMessage="register.basicInfoPanel"
+              />
+            }
+            key="1"
+          >
+            <BasicInfoForm />
+          </Panel>
+          <Panel
+            header={
+              <FormattedMessage
+                id="register.protocolListPanel"
+                defaultMessage="register.protocolListPanel"
+              />
+            }
+            key="2"
+          >
+            <RegisterAvailableList />
+          </Panel>
+          <Panel
+            header={
+              <FormattedMessage
+                id="register.selectedProtocolListPanel"
+                defaultMessage="register.selectedProtocolListPanel"
+              />
+            }
+            key="3"
+          >
+            <SelectedProtocolList />
+          </Panel>
+        </Collapse>
+      )}
+      <Space
+        style={{
+          position: 'fixed',
+          bottom: '20px',
+          right: '20px',
+          zIndex: 1000,
+        }}
       >
-        <Panel
-          header={
-            <FormattedMessage
-              id="register.basicInfoPanel"
-              defaultMessage="register.basicInfoPanel"
-            />
-          }
-          key="1"
-        >
-          <BasicInfoForm />
-        </Panel>
-        <Panel
-          header={
-            <FormattedMessage
-              id="register.protocolListPanel"
-              defaultMessage="register.protocolListPanel"
-            />
-          }
-          key="2"
-        >
-          <RegisterAvailableList />
-        </Panel>
-        <Panel
-          header={
-            <FormattedMessage
-              id="register.selectedProtocolListPanel"
-              defaultMessage="register.selectedProtocolListPanel"
-            />
-          }
-          key="3"
-        >
-          <SelectedProtocolList />
-        </Panel>
-      </Collapse>
-    );
-  }
+        <Button type="primary">注册</Button>
+        <Button type="default">检查</Button>
+      </Space>
+    </>
+  );
 };
 
 export default RegisterPage;