广州市综治平台前端
liuwh
3 days ago fa5361c6776f01975737fb5630594a9c60924fc5
src/views/register/closeCaseEdit/component/selectAddr.jsx
@@ -1,13 +1,11 @@
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 { 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) {
@@ -19,7 +17,7 @@
  const [oneList, setOneList] = useState([]);
  const [twoList, setTwoList] = useState([]);
  const [threeList, setThreeList] = useState([]);
  const [formData, setFormData] = useState({})
   const [formData, setFormData] = useState({});
  async function createAiChatMessage() {
    global.setSpinning(true);
@@ -30,17 +28,16 @@
      let list = res?.data[0]?.children || [];
      let nowList = flattenArray(list) || [];
      // 转换为一维数组
      setCascaderList(nowList)
      setOneList(nowList?.filter(i => i.level === '2'))
         setCascaderList(nowList);
         setOneList(nowList?.filter((i) => i.level === '2'));
    }
  }
  // 多维数组转一维数组
  function flattenArray(arr) {
    let result = [];
    function recursiveFlatten(items) {
      items.forEach(item => {
         items.forEach((item) => {
        // 将当前对象推入结果数组
        result.push(item);
@@ -55,52 +52,46 @@
    return result;
  }
  // 区级下拉事件
  function handleOneChange(e) {
    console.log('e', e);
    if (e) {
      setFormData({ ...formData, queArea: e, queRoad: '', village: '' })
      setTwoList(cascaderList?.filter(i => i.parentId === 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))
         setFormData({ ...formData, queRoad: e, village: '' });
         setThreeList(cascaderList?.filter((i) => i.parentId === e));
    }
  }
  function handleThreeChange(e) {
    setFormData({ ...formData, village: e })
      setFormData({ ...formData, village: e });
  }
  function submit() {
    if (!formData.queArea || !formData.queRoad || !formData.village) {
      if (!formData.queArea) {
      return $$.info({ type: 'warning', content: '请选择区、街镇、村社' });
    }
    if (!formData.addr) {
      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({
      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,
      queArea: formData.queArea,
      queAreaName,
      queRoadName,
      queRoad: formData.queRoad,
    }, [formData.queArea, formData.queRoad])
            addrNameList: [queAreaName, queRoadName],
            addrList: formData.queRoad ? [formData.queArea, formData.queRoad] : [formData.queArea],
         });
  }
  useEffect(() => {
    createAiChatMessage();
  }, [])
   }, []);
  return (
    <div style={{ height: '356px' }}>
@@ -110,7 +101,11 @@
            placeholder="请选择区域"
            allowClear
            onChange={handleOneChange}
            onClear={() => { setFormData({ ...formData, queArea: '', queRoad: '', village: '' }); setTwoList([]); setThreeList([]) }}
                  onClear={() => {
                     setFormData({ ...formData, queArea: '', queRoad: '', village: '' });
                     setTwoList([]);
                     setThreeList([]);
                  }}
            value={formData.queArea || undefined}
            style={{ width: 200 }}
          >
@@ -126,7 +121,10 @@
            allowClear
            placeholder="请选择街镇"
            onChange={handleTwoChange}
            onClear={() => { setFormData({ ...formData, queRoad: '', village: '', }); setThreeList([]) }}
                  onClear={() => {
                     setFormData({ ...formData, queRoad: '', village: '' });
                     setThreeList([]);
                  }}
            value={formData.queRoad || undefined}
            style={{ width: 200 }}
          >
@@ -140,7 +138,9 @@
        <div style={{ width: '200px' }}>
          <Select
            allowClear
            onClear={() => { setFormData({ ...formData, village: '' }) }}
                  onClear={() => {
                     setFormData({ ...formData, village: '' });
                  }}
            placeholder="请选择村社"
            onChange={handleThreeChange}
            value={formData.village || undefined}
@@ -155,20 +155,19 @@
        </div>
        <div style={{ width: '100%' }}>
          <Input
            placeholder='请填写具体地点信息'
                  placeholder="请填写具体地点信息"
            style={{ width: '100%' }}
            onChange={(e) => {
              setFormData({ ...formData, addr: e })
                     setFormData({ ...formData, addr: e });
            }}
          />
        </div>
      </div>
      <Button style={{ marginTop: '16px' }} type="primary" onClick={() => submit()}>提交</Button>
         <Button style={{ marginTop: '16px' }} type="primary" onClick={() => submit()}>
            提交
         </Button>
    </div>
  )
}
   );
};
export default SelectAddr;