From fa5361c6776f01975737fb5630594a9c60924fc5 Mon Sep 17 00:00:00 2001
From: liuwh <964324856@qq.com>
Date: Mon, 23 Jun 2025 16:44:56 +0800
Subject: [PATCH] fix:修改详情修改中问题属地功能
---
src/views/register/closeCaseEdit/component/selectAddr.jsx | 297 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 148 insertions(+), 149 deletions(-)
diff --git a/src/views/register/closeCaseEdit/component/selectAddr.jsx b/src/views/register/closeCaseEdit/component/selectAddr.jsx
index ce64dda..6e011be 100644
--- a/src/views/register/closeCaseEdit/component/selectAddr.jsx
+++ b/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;
\ No newline at end of file
+export default SelectAddr;
--
Gitblit v1.8.0