Map组件新增所属区域选择

components/Map/MapSelector.d.ts

@@ -1,5 +1,14 @@
 import type { FC } from "react";
 
+export interface OnConfirmParams {
+  /** 经度值 */
+  longitude: number | string;
+  /** 纬度值 */
+  latitude: number | string;
+  /** 额外参数 */
+  extra?: { area: string };
+}
+
 export interface MapSelectorProps {
   /** 是否显示弹窗 */
   visible: boolean;
@@ -9,10 +18,17 @@ export interface MapSelectorProps {
   longitude?: number | string;
   /** 纬度值 */
   latitude?: number | string;
+  /** 所属区域 */
+  area?: string;
+  /** 是否显示所属区域 */
+  showArea?: boolean;
   /** 确认选择回调 */
-  onConfirm?: (longitude: number | string, latitude: number | string) => void;
+  onConfirm?: (longitude: number | string, latitude: number | string, extra: { area: string }) => void;
 }
 
+/**
+ * 定位组件弹窗
+ */
 declare const MapSelector: FC<MapSelectorProps>;
 
 export default MapSelector;

components/Map/MapSelector.js

@@ -1,4 +1,4 @@
-import { Button, Col, Form, Input, Modal, Row, Spin } from "antd";
+import { Button, Col, Form, Input, Modal, Row, Select, Spin } from "antd";
 import { useEffect, useRef, useState } from "react";
 
 /**
@@ -11,6 +11,8 @@ const MapSelector = (props) => {
     longitude,
     latitude,
     onConfirm,
+    area = "",
+    showArea = false,
   } = props;
 
   const mapContainerRef = useRef(null);
@@ -19,12 +21,14 @@ const MapSelector = (props) => {
   const [currentLongitude, setCurrentLongitude] = useState(longitude || "");
   const [currentLatitude, setCurrentLatitude] = useState(latitude || "");
   const [localSearch, setLocalSearch] = useState("");
+  const [currentArea, setCurrentArea] = useState("");
 
   // 当外部经纬度变化时，更新内部状态
   useEffect(() => {
     setCurrentLongitude(longitude || "");
     setCurrentLatitude(latitude || "");
-  }, [longitude, latitude]);
+    setCurrentArea(area || "");
+  }, [longitude, latitude, area]);
 
   // 初始化地图
   const initMap = async () => {
@@ -96,7 +100,7 @@ const MapSelector = (props) => {
   // 确认选择
   const handleConfirm = () => {
     if (onConfirm) {
-      onConfirm(currentLongitude, currentLatitude);
+      onConfirm(currentLongitude, currentLatitude, { area: currentArea });
     }
     handleClose();
   };
@@ -146,19 +150,29 @@ const MapSelector = (props) => {
       title="坐标"
       onCancel={handleClose}
       onOk={handleConfirm}
-      width={800}
+      width={1000}
       destroyOnHidden={false}
       afterClose={handleAfterClose}
     >
       <Form labelAlign="right" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+        {
+          showArea && (
+            <Row gutter={24}>
+              <Col span={12}>
+                <Form.Item label="所属区域">
+                  <Select value={currentArea} onChange={e => setCurrentArea(e)} allowClear>
+                    <Select.Option value="1">东港区</Select.Option>
+                    <Select.Option value="2">西港区</Select.Option>
+                  </Select>
+                </Form.Item>
+              </Col>
+            </Row>
+          )
+        }
         <Row gutter={24}>
           <Col span={12}>
             <Form.Item label="关键字搜索">
-              <Input
+              <Input value={localSearch} onChange={e => setLocalSearch(e.target.value)} allowClear />
-                value={localSearch}
-                onChange={e => setLocalSearch(e.target.value)}
-                allowClear
-              />
             </Form.Item>
           </Col>
           <Col span={12}>

components/Map/index.d.ts

@@ -5,12 +5,19 @@ export interface MapProps {
   longitudeProps?: string;
   /** 纬度属性名，默认 latitude */
   latitudeProps?: string;
-  /** 经纬度变化回调 */
-  onConfirm?: (longitude: number | string, latitude: number | string) => void;
   /** 经纬度是否必填，默认 true */
   required?: boolean;
+  /** 所属区域 */
+  area?: string;
+  /** 是否显示所属区域 */
+  showArea?: boolean;
+  /** 确认选择回调 */
+  onConfirm?: (longitude: number | string, latitude: number | string, extra: { area: string }) => void;
 }
 
+/**
+ * 定位组件
+ */
 declare const Map: FC<MapProps>;
 
 export default Map;

components/Map/index.js

@@ -11,6 +11,8 @@ const Map = (props) => {
     latitudeProps = "latitude",
     onConfirm,
     required = true,
+    area = "",
+    showArea = false,
   } = props;
 
   const form = Form.useFormInstance();
@@ -18,14 +20,14 @@ const Map = (props) => {
   const [currentLongitude, setCurrentLongitude] = useState(form.getFieldValue(longitudeProps) || "");
   const [currentLatitude, setCurrentLatitude] = useState(form.getFieldValue(latitudeProps) || "");
 
-  const handleMapConfirm = (longitudeValue, latitudeValue) => {
+  const handleMapConfirm = (longitudeValue, latitudeValue, extra) => {
     setCurrentLongitude(longitudeValue);
     setCurrentLatitude(latitudeValue);
     form.setFieldsValue({
       [longitudeProps]: longitudeValue,
       [latitudeProps]: latitudeValue,
     });
-    onConfirm?.(longitudeValue, latitudeValue);
+    onConfirm?.(longitudeValue, latitudeValue, extra);
     setMapVisible(false);
   };
 
@@ -44,7 +46,7 @@ const Map = (props) => {
                 <Input disabled />
               </Form.Item>
               <Button type="primary" onClick={() => setMapVisible(true)}>
-                点击定位
+                地图定位
               </Button>
             </div>
           </Form.Item>
@@ -55,6 +57,8 @@ const Map = (props) => {
         onClose={() => setMapVisible(false)}
         longitude={currentLongitude}
         latitude={currentLatitude}
+        area={area}
+        showArea={showArea}
         onConfirm={handleMapConfirm}
       />
     </>