feat: new page

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

@@ -0,0 +1,115 @@
+import {
+  ProFormCheckbox,
+  ProFormDigit,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Divider, Space, Typography } from 'antd';
+import React from 'react';
+import type { ProdServiceAreasInfoVO } from '@/services/prod/prod-manager/rule';
+
+const { Text, Title } = Typography;
+
+type ValueConfig = {
+  regionSwitch?: number;
+  prodServiceAreasInfo?: ProdServiceAreasInfoVO;
+};
+interface ProdServiceAreasInfoProps {
+  value?: ValueConfig;
+  onChange?: (value?: ValueConfig) => void;
+}
+const ProdServiceAreasInfo: React.FC<ProdServiceAreasInfoProps> = (props) => {
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: 12,
+        }}
+      >
+        <div>
+          <Title level={4}>服务区域配置</Title>
+          <Text type="secondary">
+            默认服务区域为全城，开启此配置，可自定义可服务区域以及超区时的限制规则
+          </Text>
+        </div>
+        <ProFormSwitch
+          name="regionSwitch"
+          label="应用配置"
+          labelCol={{ span: 13 }}
+          fieldProps={{
+            onChange: (checked) => {
+              props.onChange?.({
+                regionSwitch: checked ? 1 : 0,
+              });
+            },
+            checkedChildren: '开启',
+            unCheckedChildren: '关闭',
+          }}
+        />
+      </div>
+
+      <Divider />
+
+      <ProFormSelect
+        name="areaNameList"
+        label="服务区域"
+        options={[
+          '鼓楼区',
+          '台江区',
+          '晋安区',
+          '马尾区',
+          '闽侯县',
+          '福清市（县级市）',
+          '长乐区',
+          '罗源县',
+          '永泰县',
+          '平潭县',
+        ]}
+        fieldProps={{
+          mode: 'multiple',
+        }}
+        placeholder="请选择服务区域"
+        rules={[
+          {
+            required: true,
+            message: '请选择服务区域',
+            type: 'array',
+          },
+        ]}
+      />
+      <ProFormRadio.Group
+        name="ruleType"
+        label="超区规则"
+        options={[
+          { label: '拒单', value: 0 },
+          { label: '接单-收超区费', value: 2 },
+          { label: '接单-收超区费-收超区费', value: 3 },
+        ]}
+        rules={[
+          {
+            required: true,
+            message: '请选择服务区域',
+          },
+        ]}
+      />
+      <ProFormDigit
+        rules={[
+          {
+            required: true,
+            message: '请设置费用',
+          },
+        ]}
+        label="设置费用"
+        name="fee"
+      />
+    </>
+  );
+};
+
+export default React.memo(ProdServiceAreasInfo);