11

src/pages/Management/List/edit.tsx

@@ -9,12 +9,13 @@ import {
   ProDescriptions,
 } from '@ant-design/pro-components';
 import { Form, Button, Input, TreeSelect, Switch } from 'antd';
-import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import { PlusOutlined, MinusCircleOutlined, EnvironmentOutlined } from '@ant-design/icons';
 import React, { useEffect, useRef, useState } from 'react';
 import { DictValueEnumObj } from '@/components/DictTag';
 import { getCmsCompanyList } from '@/services/company/list';
 import { getCmsJobDetail } from '@/services/Management/list';
 import { getJobTitleTreeSelect } from '@/services/common/jobTitle';
+import ProFromMap from '@/components/ProFromMap';
 
 export type ListFormProps = {
   onCancel: (flag?: boolean, formVals?: unknown) => void;
@@ -42,6 +43,8 @@ const listEdit: React.FC<ListFormProps> = (props) => {
   const [jobDetail, setJobDetail] = useState<API.ManagementList.Manage | null>(null);
   const [loading, setLoading] = useState(false);
   const [jobCategoryTreeData, setJobCategoryTreeData] = useState<any[]>([]);
+  const [mapOpen, setMapOpen] = useState<boolean>(false);
+  const [mapViewInfo, setMapViewInfo] = useState<any>({});
   const { educationEnum, experienceEnum, areaEnum, jobTypeEnum } = props;
   const { mode = props.values ? 'edit' : 'create' } = props;
   useEffect(() => {
@@ -52,6 +55,18 @@ const listEdit: React.FC<ListFormProps> = (props) => {
         ...props.values,
         jobLocationAreaCode: String(props.values.jobLocationAreaCode || ''),
       });
+      // 初始化地图位置信息（编辑时回显）
+      if (props.values.latitude || props.values.longitude) {
+        setMapViewInfo({
+          address: props.values.jobLocation || '',
+          latitude: props.values.latitude,
+          longitude: props.values.longitude,
+        });
+      } else {
+        setMapViewInfo({});
+      }
+    } else {
+      setMapViewInfo({});
     }
     // 加载岗位标签树数据
     getJobTitleTreeSelect().then((res) => {
@@ -95,6 +110,25 @@ const listEdit: React.FC<ListFormProps> = (props) => {
     form.resetFields();
   };
 
+  const handleMapSelect = (result: any) => {
+    if (result.location) {
+      const { lat, lng } = result.location;
+      form.setFieldValue('latitude', lat);
+      form.setFieldValue('longitude', lng);
+      form.setFieldValue('jobLocation', result.address);
+      setMapViewInfo({
+        address: result.address,
+        latitude: lat,
+        longitude: lng,
+      });
+      setMapOpen(false);
+    }
+  };
+
+  const handleMapCancel = () => {
+    setMapOpen(false);
+  };
+
   const handleFinish = async (values: Record<string, any>) => {
     const payload: API.ManagementList.Manage = {
       jobTitle: values.jobTitle,
@@ -119,6 +153,8 @@ const listEdit: React.FC<ListFormProps> = (props) => {
       })),
       jobCategory: values.jobCategory,
       isUrgent: values.isUrgent ? 1 : 0,
+      latitude: values.latitude,
+      longitude: values.longitude,
     };
     if (mode === 'edit' && values.jobId) {
       payload.jobId = values.jobId;
@@ -430,6 +466,37 @@ const listEdit: React.FC<ListFormProps> = (props) => {
         />
       </ProForm.Item>
       <ProFormText width="md" name="jobLocation" label="工作地点" placeholder="请输入工作地点" />
+      <ProForm.Item label="位置选择" colProps={{ span: 12 }}>
+        <div>
+          <Button icon={<EnvironmentOutlined />} onClick={() => setMapOpen(true)}>选择位置信息</Button>
+          <div style={{ margin: '8px 0 0 0', fontSize: 12, color: '#666' }}>
+            {mapViewInfo.address ? (
+              <>
+                <span>地址：{mapViewInfo.address}</span>
+                {mapViewInfo.latitude ? (
+                  <span style={{ padding: '0 0 0 16px' }}>
+                    经纬度：{mapViewInfo.latitude},{mapViewInfo.longitude}
+                  </span>
+                ) : null}
+              </>
+            ) : (
+              <span style={{ color: '#faad14' }}>可选：点击按钮在地图上选择工作地点</span>
+            )}
+          </div>
+        </div>
+      </ProForm.Item>
+      <ProFormDigit
+        label="纬度"
+        name="latitude"
+        width="md"
+        hidden
+      />
+      <ProFormDigit
+        label="经度"
+        name="longitude"
+        width="md"
+        hidden
+      />
 
       <ProFormTextArea
         width="xl"
@@ -496,6 +563,7 @@ const listEdit: React.FC<ListFormProps> = (props) => {
         </Form.List>
       </div>
 
+      <ProFromMap open={mapOpen} onSelect={handleMapSelect} onCancel={handleMapCancel} />
     </ModalForm>
   );
 };