fix:修改详情修改中问题属地功能

liuwh

3 days ago fa5361c6776f01975737fb5630594a9c60924fc5

 src/views/register/closeCaseEdit/component/selectAddr.jsx

@@ -1,174 +1,173 @@

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) {
  return $$.ax.request({ url: `syRegion/getRegionTree`, type: 'get', service: 'sys', 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({})
   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'))
    }
  }
   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);

  // 多维数组转一维数组
  function flattenArray(arr) {
    let result = [];
    function recursiveFlatten(items) {
      items.forEach(item => {
        // 将当前对象推入结果数组
        result.push(item);
            // 如果该对象有 children 属性且是数组，则递归处理
            if (Array.isArray(item.children)) {
               recursiveFlatten(item.children);
            }
         });
      }

        // 如果该对象有 children 属性且是数组，则递归处理
        if (Array.isArray(item.children)) {
          recursiveFlatten(item.children);
        }
      });
    }
      recursiveFlatten(arr);
      return result;
   }

    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 handleOneChange(e) {
    console.log('e', e);
   function handleTwoChange(e) {
      if (e) {
         setFormData({ ...formData, queRoad: e, village: '' });
         setThreeList(cascaderList?.filter((i) => i.parentId === e));
      }
   }

    if (e) {
      setFormData({ ...formData, queArea: e, queRoad: '', village: '' })
      setTwoList(cascaderList?.filter(i => i.parentId === e))
    }
  }
   function handleThreeChange(e) {
      setFormData({ ...formData, village: e });
   }

  function handleTwoChange(e) {
    if (e) {
      setFormData({ ...formData, queRoad: e, village: '' })
      setThreeList(cascaderList?.filter(i => i.parentId === 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],
         });
   }

  function handleThreeChange(e) {
    setFormData({ ...formData, village: e })
  }
   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>
   );
};

  function submit() {
    if (!formData.queArea || !formData.queRoad || !formData.village) {
      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({
      addr: address,
      queArea: formData.queArea,
      queAreaName,
      queRoadName,
      queRoad: formData.queRoad,
    }, [formData.queArea, formData.queRoad])
  }

  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;
export default SelectAddr;