flat: 暂存

src/pages/Area/Business/edit.tsx

@@ -1,21 +1,14 @@
-import { PlusOutlined } from '@ant-design/icons';
-import {
-  ModalForm,
-  ProForm,
-  ProFormDateRangePicker,
-  ProFormSelect,
-  ProFormText,
-  ProFormDigit,
-} from '@ant-design/pro-components';
-import React, {useEffect} from "react";
-import { Button, Form, message, InputNumber } from 'antd';
-import {DictOptionType, DictValueEnumObj} from "@/components/DictTag";
+import { ModalForm, ProForm, ProFormDigit, ProFormText } from '@ant-design/pro-components';
+import React, { useEffect, useState } from 'react';
+import { Button, Form } from 'antd';
+import { DictOptionType, DictValueEnumObj } from '@/components/DictTag';
+import ProFromMap from '@/components/ProFromMap';
 
 export type ListFormProps = {
   onCancel: (flag?: boolean, formVals?: unknown) => void;
-  onSubmit: (values:  API.AreaBusiness.CircleEditParams) => Promise<void>;
+  onSubmit: (values: API.AreaBusiness.CircleEditParams) => Promise<void>;
   open: boolean;
-  values?: Partial< API.AreaBusiness.CircleEditParams>;
+  values?: Partial<API.AreaBusiness.CircleEditParams>;
   jobGroupOptions?: DictOptionType[];
   statusOptions?: DictValueEnumObj;
 };
@@ -30,15 +23,24 @@ const waitTime = (time: number = 100) => {
 
 const SubWayEdit: React.FC<ListFormProps> = (props) => {
   const [form] = Form.useForm();
+
+  const [open, setOpen] = useState<boolean>(false);
+  const [viewInfo, setViewInfo] = useState<any>({});
+
   useEffect(() => {
     form.resetFields();
-    if(props.values) {
-      form.setFieldsValue({
+    if (props.values) {
+      const obj = {
         commercialAreaId: props.values.commercialAreaId,
         commercialAreaName: props.values.commercialAreaName,
         latitude: props.values.latitude,
         longitude: props.values.longitude,
-      });
+        address: props.values.address,
+      };
+      form.setFieldsValue(obj);
+      setViewInfo(obj);
+    } else {
+      setViewInfo({});
     }
   }, [form, props]);
   const handleCancel = () => {
@@ -47,10 +49,29 @@ const SubWayEdit: React.FC<ListFormProps> = (props) => {
   };
 
   const handleFinish = async (values: Record<string, any>) => {
-    console.log(values)
     props.onSubmit(values as API.AreaBusiness.CircleEditParams);
   };
 
+  const select = (result) => {
+    if (result.location) {
+      const { lat, lng } = result.location;
+      form.setFieldValue('latitude', lat);
+      form.setFieldValue('longitude', lng);
+      form.setFieldValue('address', result.address);
+      const obj = {
+        latitude: lat,
+        longitude: lng,
+        address: result.address,
+      };
+      setViewInfo(obj);
+      setOpen(false);
+    }
+  };
+
+  const cancel = () => {
+    setOpen(false);
+  };
+
   return (
     <ModalForm<API.AreaBusiness.CircleParams>
       title={`${props.values ? '编辑' : '新增'}商圈`}
@@ -81,12 +102,36 @@ const SubWayEdit: React.FC<ListFormProps> = (props) => {
           rules={[
             {
               required: true,
-              message: "请输入商圈名称！" ,
+              message: '请输入商圈名称！',
             },
           ]}
         />
       </ProForm.Group>
       <ProForm.Group>
+        <div>
+          <Button onClick={() => setOpen(true)}>选择位置信息</Button>
+          <div style={{ margin: '10px 0 0 0' }}>
+            {viewInfo.address ? (
+              <span style={{ padding: '0 0 0 16px' }}>地址：{viewInfo.address}</span>
+            ) : null}
+            {viewInfo.latitude ? (
+              <span style={{ padding: '0 0 0 16px' }}>
+                经纬度：{viewInfo.latitude},{viewInfo.longitude}
+              </span>
+            ) : (
+              <span style={{ padding: '0 0 0 16px', color: 'red' }}>请选择位置!</span>
+            )}
+          </div>
+        </div>
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="address"
+          label="地理位置"
+          hidden={true}
+          placeholder="请输入地理位置"
+        />
         <ProFormDigit
           label="纬度"
           placeholder="请输入纬度"
@@ -94,11 +139,12 @@ const SubWayEdit: React.FC<ListFormProps> = (props) => {
           width="md"
           min={-90}
           max={90}
+          hidden={true}
           fieldProps={{ controls: false }}
           rules={[
             {
               required: true,
-              message: "请输入纬度！" ,
+              message: '请输入纬度！',
             },
           ]}
         />
@@ -108,18 +154,20 @@ const SubWayEdit: React.FC<ListFormProps> = (props) => {
           name="longitude"
           width="md"
           min={-180}
+          hidden={true}
           max={180}
           fieldProps={{ controls: false }}
           rules={[
             {
               required: true,
-              message: "请输入经度！" ,
+              message: '请输入经度！',
             },
           ]}
         />
       </ProForm.Group>
+      <ProFromMap open={open} onSelect={select} onCancel={cancel}></ProFromMap>
     </ModalForm>
   );
 };
 
-export default SubWayEdit
+export default SubWayEdit;