feat: new page

src/pages/prod/list/components/service-rule/index.tsx

@@ -1,67 +1,85 @@
 import { ProForm, ProFormText } from '@ant-design/pro-components';
+import { Anchor, Col, Form, Row } from 'antd';
+import ProdReservationConfig from './prodReservationConfig';
+import ProdServiceAreasInfo from './prodServiceAreasInfo';
+import ProdWeightConfig from './prodWeightConfig';
 
 const ServiceRule: React.FC = () => {
   return (
-    <ProForm<{
-      name: string;
-      company: string;
-    }>
-      grid
-      onFinish={async (values) => {
-        // await waitTime(2000);
-        console.log(values);
-        // message.success('提交成功');
-      }}
-      initialValues={{
-        name: '蚂蚁设计有限公司',
-        useMode: 'chapter',
-      }}
+    <ProForm
+      onFinish={async (value) => console.log(value)}
+      layout="horizontal"
+      style={{ width: '100%' }}
+      labelCol={{ span: '100px' }}
     >
-      <ProForm.Group>
-        <ProFormText
-          width="md"
-          name="name"
-          label="签约客户名称"
-          tooltip="最长为 24 位"
-          placeholder="请输入名称"
-        />
-        <ProFormText
-          width="md"
-          name="company"
-          label="我方公司名称"
-          placeholder="请输入名称"
-        />
-      </ProForm.Group>
-      <ProFormText width="sm" name="id" label="主合同编号" />
-      <ProForm.Item
-        label="数组数据"
-        name="dataSource"
-        // initialValue={defaultData}
-        trigger="onValuesChange"
-      >
-        {/* <EditableProTable<DataSourceType>
-          rowKey="id"
-          toolBarRender={false}
-          columns={columns}
-          recordCreatorProps={{
-            newRecordType: 'dataSource',
-            position: 'top',
-            record: () => ({
-              id: Date.now(),
-              addonBefore: 'ccccccc',
-              decs: 'testdesc',
-            }),
-          }}
-          editable={{
-            type: 'multiple',
-            editableKeys,
-            onChange: setEditableRowKeys,
-            actionRender: (row, _, dom) => {
-              return [dom.delete];
-            },
-          }} */}
-        {/* /> */}
-      </ProForm.Item>
+      <Row gutter={24}>
+        <Col span={18}>
+          <div id="prodServiceAreasInfo">
+            <ProdServiceAreasInfo />
+          </div>
+          <div id="prodReservationConfig">
+            <ProForm.Group>
+              <ProdReservationConfig />
+            </ProForm.Group>
+          </div>
+          <div id="prodEmergencyInfoVO">
+            <ProForm.Group></ProForm.Group>
+          </div>
+          <div id="productOrderLimitVO">
+            <ProForm.Group title="周期接单上限"></ProForm.Group>
+          </div>
+          <div id="prodAdditionalFeeDatesList">
+            <ProForm.Group title="特殊时段规则"></ProForm.Group>
+          </div>
+          <div id="prodAdditionalFeePeriodsList">
+            <ProForm.Group title="特殊日期规则"></ProForm.Group>
+          </div>
+          <div id="prodWeightConfig">
+            <ProdWeightConfig />
+          </div>
+        </Col>
+        <Col span="400px">
+          <Anchor
+            items={[
+              {
+                key: 'prodServiceAreasInfo',
+                href: '#prodServiceAreasInfo',
+                title: '可服务区域',
+              },
+              {
+                key: 'prodReservationConfig',
+                href: '#prodReservationConfig',
+                title: '可预约时段',
+              },
+              {
+                key: 'prodEmergencyInfoVO',
+                href: '#prodEmergencyInfoVO',
+                title: '紧急响应服务',
+              },
+              {
+                key: 'productOrderLimitVO',
+                href: '#productOrderLimitVO',
+                title: '周期接单上限',
+              },
+              {
+                key: 'prodAdditionalFeeDatesList',
+                href: '#prodAdditionalFeeDatesList',
+                title: '特殊时段规则',
+              },
+              {
+                key: 'prodAdditionalFeePeriodsList',
+                href: '#prodAdditionalFeePeriodsList',
+                title: '特殊日期规则',
+              },
+              {
+                key: 'prodWeightConfig',
+                href: '#prodWeightConfig',
+                title: '体重/体型选项',
+              },
+            ]}
+          />
+        </Col>
+      </Row>
     </ProForm>
   );
 };