60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
import { Button, Col, Form, Input, Row } from "antd";
|
|
import { useState } from "react";
|
|
import MapSelector from "./MapSelector";
|
|
|
|
const Map = (props) => {
|
|
const {
|
|
longitudeProps = "longitude",
|
|
latitudeProps = "latitude",
|
|
onConfirm,
|
|
required = true,
|
|
} = props;
|
|
|
|
const form = Form.useFormInstance();
|
|
const [mapVisible, setMapVisible] = useState(false);
|
|
const [currentLongitude, setCurrentLongitude] = useState(form.getFieldValue(longitudeProps) || "");
|
|
const [currentLatitude, setCurrentLatitude] = useState(form.getFieldValue(latitudeProps) || "");
|
|
|
|
const handleMapConfirm = (longitudeValue, latitudeValue) => {
|
|
setCurrentLongitude(longitudeValue);
|
|
setCurrentLatitude(latitudeValue);
|
|
form.setFieldsValue({
|
|
[longitudeProps]: longitudeValue,
|
|
[latitudeProps]: latitudeValue,
|
|
});
|
|
onConfirm?.(longitudeValue, latitudeValue);
|
|
setMapVisible(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Row gutter={24}>
|
|
<Col span={12}>
|
|
<Form.Item label="经度" name={longitudeProps} style={{ flex: 1 }} rules={[{ required, message: "请选择经度" }]}>
|
|
<Input disabled />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item label="纬度" name={latitudeProps} style={{ flex: 1 }} rules={[{ required, message: "请选择纬度" }]}>
|
|
<div style={{ display: "flex", gap: 10 }}>
|
|
<Input disabled />
|
|
<Button type="primary" onClick={() => setMapVisible(true)}>
|
|
点击定位
|
|
</Button>
|
|
</div>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<MapSelector
|
|
visible={mapVisible}
|
|
onClose={() => setMapVisible(false)}
|
|
longitude={currentLongitude}
|
|
latitude={currentLatitude}
|
|
onConfirm={handleMapConfirm}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Map;
|