import React, { useEffect, useRef, useState } from 'react';
|
import MyDrawer from '@/components/MyDrawer';
|
import { caselogo } from '@/assets/images';
|
import * as $$ from '@/utils/utility';
|
import { Scrollbars } from 'react-custom-scrollbars';
|
// import { Col, Button, Input, Form } from 'antd';
|
import { Input, Select, Button } from '@arco-design/web-react';
|
import { aiSubmit, Aimge } from '@/assets/images';
|
|
//手动输入的级联数据
|
function createAiChatMessageApi(data) {
|
return $$.ax.request({ url: `syRegion/getRegionTree`, type: 'get', service: 'sys', data });
|
}
|
|
const SelectAddr = ({ addAdressClick }) => {
|
const [cascaderList, setCascaderList] = useState([]);
|
const [oneList, setOneList] = useState([]);
|
const [twoList, setTwoList] = useState([]);
|
const [threeList, setThreeList] = useState([]);
|
const [formData, setFormData] = useState({});
|
|
async function createAiChatMessage() {
|
global.setSpinning(true);
|
const res = await createAiChatMessageApi();
|
global.setSpinning(false);
|
if (res.type) {
|
console.log('res', res.data);
|
let list = res?.data[0]?.children || [];
|
let nowList = flattenArray(list) || [];
|
// 转换为一维数组
|
setCascaderList(nowList);
|
setOneList(nowList?.filter((i) => i.level === '2'));
|
}
|
}
|
|
// 多维数组转一维数组
|
function flattenArray(arr) {
|
let result = [];
|
function recursiveFlatten(items) {
|
items.forEach((item) => {
|
// 将当前对象推入结果数组
|
result.push(item);
|
|
// 如果该对象有 children 属性且是数组，则递归处理
|
if (Array.isArray(item.children)) {
|
recursiveFlatten(item.children);
|
}
|
});
|
}
|
|
recursiveFlatten(arr);
|
return result;
|
}
|
|
// 区级下拉事件
|
function handleOneChange(e) {
|
console.log('e', e);
|
|
if (e) {
|
setFormData({ ...formData, queArea: e, queRoad: '', village: '' });
|
setTwoList(cascaderList?.filter((i) => i.parentId === e));
|
}
|
}
|
|
function handleTwoChange(e) {
|
if (e) {
|
setFormData({ ...formData, queRoad: e, village: '' });
|
setThreeList(cascaderList?.filter((i) => i.parentId === e));
|
}
|
}
|
|
function handleThreeChange(e) {
|
setFormData({ ...formData, village: e });
|
}
|
|
function submit() {
|
if (!formData.queArea) {
|
return $$.info({ type: 'warning', content: '请选择区、街镇、村社' });
|
}
|
let queAreaName = cascaderList?.find((i) => i.value === formData.queArea)?.label;
|
let queRoadName = cascaderList?.find((i) => i.value === formData.queRoad)?.label;
|
let villageName = cascaderList?.find((i) => i.value === formData.village)?.label;
|
let address = `${queAreaName}${queRoadName || ''}${villageName || ''}${formData.addr || ''}`;
|
addAdressClick &&
|
addAdressClick({
|
addr: address,
|
addrNameList: [queAreaName, queRoadName],
|
addrList: formData.queRoad ? [formData.queArea, formData.queRoad] : [formData.queArea],
|
});
|
}
|
|
useEffect(() => {
|
createAiChatMessage();
|
}, []);
|
|
return (
|
<div style={{ height: '356px' }}>
|
<div style={{ display: 'flex', gap: '16px' }}>
|
<div style={{ width: '200px' }}>
|
<Select
|
placeholder="请选择区域"
|
allowClear
|
onChange={handleOneChange}
|
onClear={() => {
|
setFormData({ ...formData, queArea: '', queRoad: '', village: '' });
|
setTwoList([]);
|
setThreeList([]);
|
}}
|
value={formData.queArea || undefined}
|
style={{ width: 200 }}
|
>
|
{oneList.map((i, idx) => (
|
<Select.Option key={i.value} value={i.value}>
|
{i.label}
|
</Select.Option>
|
))}
|
</Select>
|
</div>
|
<div style={{ width: '200px' }}>
|
<Select
|
allowClear
|
placeholder="请选择街镇"
|
onChange={handleTwoChange}
|
onClear={() => {
|
setFormData({ ...formData, queRoad: '', village: '' });
|
setThreeList([]);
|
}}
|
value={formData.queRoad || undefined}
|
style={{ width: 200 }}
|
>
|
{twoList.map((i, idx) => (
|
<Select.Option key={i.value} value={i.value}>
|
{i.label}
|
</Select.Option>
|
))}
|
</Select>
|
</div>
|
<div style={{ width: '200px' }}>
|
<Select
|
allowClear
|
onClear={() => {
|
setFormData({ ...formData, village: '' });
|
}}
|
placeholder="请选择村社"
|
onChange={handleThreeChange}
|
value={formData.village || undefined}
|
style={{ width: 200 }}
|
>
|
{threeList.map((i, idx) => (
|
<Select.Option key={i.value} value={i.value}>
|
{i.label}
|
</Select.Option>
|
))}
|
</Select>
|
</div>
|
<div style={{ width: '100%' }}>
|
<Input
|
placeholder="请填写具体地点信息"
|
style={{ width: '100%' }}
|
onChange={(e) => {
|
setFormData({ ...formData, addr: e });
|
}}
|
/>
|
</div>
|
</div>
|
<Button style={{ marginTop: '16px' }} type="primary" onClick={() => submit()}>
|
提交
|
</Button>
|
</div>
|
);
|
};
|
|
export default SelectAddr;
|
