import React, { useState, useEffect } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Button } from 'dingtalk-design-mobile';
|
import { WriteEditOutlined } from 'dd-icons';
|
import NavBarPage from '../../../../components/NavBarPage';
|
import CustomFormView from '../../../../components/CustomFormView';
|
import * as $$ from '../../../../utils/utility';
|
import './index.less';
|
|
//选择纠纷发生地的字典值
|
function getRegionTreeApi(data) {
|
return $$.ax.request({ url: `syRegion/getRegionTree`, type: 'get', service: 'sys', data });
|
}
|
|
const LocationPicker = () => {
|
const history = useHistory();
|
const [isManualInput, setIsManualInput] = useState(false);
|
const [selectedArea, setSelectedArea] = useState('');
|
const [detailLocation, setDetailLocation] = useState('');
|
const [regionTree, setRegionTree] = useState([]);
|
const [formData, setFormData] = useState({});
|
|
// 加载缓存数据
|
useEffect(() => {
|
getRegionTree();
|
// 尝试从sessionStorage读取之前的数据
|
const cachedLocation = JSON.parse($$.getSessionStorage('selectedLocationData'));
|
if (cachedLocation) {
|
setSelectedArea(cachedLocation.area || '');
|
setDetailLocation(cachedLocation.detailLocation || '');
|
setFormData({
|
...cachedLocation,
|
area: cachedLocation.area || '',
|
detailLocation: cachedLocation.detailLocation || '',
|
});
|
$$.clearSessionStorage('selectedLocationData');
|
}
|
}, []);
|
|
const getRegionTree = async () => {
|
global.setSpinning(true);
|
const res = await getRegionTreeApi();
|
global.setSpinning(false);
|
if (res.type) {
|
setRegionTree(res?.data[0]?.children || []);
|
}
|
};
|
|
// 切换到手动填写
|
const handleManualInput = () => {
|
setIsManualInput(true);
|
};
|
|
// 处理表单数据变化
|
const handleFormChange = (values, name) => {
|
console.log('表单值变化:', values, name);
|
setFormData({ ...formData, ...values });
|
};
|
|
// 保存并返回
|
const handleSave = () => {
|
// 验证表单
|
if (!formData.area) {
|
$$.showToast({ type: 'fail', content: '请选择区域' });
|
return;
|
}
|
if (!formData.detailLocation) {
|
$$.showToast({ type: 'fail', content: '请输入具体地点' });
|
return;
|
}
|
// 构造区域的中文名称
|
let areaLabels = [];
|
if (Array.isArray(formData.area)) {
|
// 递归查找多级区域的名称
|
let currentList = regionTree;
|
formData.area.forEach((areaCode) => {
|
const found = currentList.find((item) => item.value === areaCode);
|
if (found) {
|
areaLabels.push(found.label);
|
currentList = found.children || [];
|
}
|
});
|
}
|
// 构造完整的地点信息
|
const locationData = {
|
...formData,
|
area: formData.area,
|
detailLocation: formData.detailLocation,
|
que: [formData.area[0], formData.area[1]],
|
queArea: formData.area[0],
|
queAreaName: areaLabels[0],
|
queRoad: formData.area[1],
|
queRoadName: areaLabels[1],
|
addr: `${areaLabels.join('')}${formData.detailLocation}`, // 完整地址
|
};
|
// 保存到sessionStorage以便传递回表单页面
|
sessionStorage.setItem('selectedLocation', JSON.stringify(locationData));
|
// 返回上一页
|
history.goBack();
|
};
|
|
// CustomFormView的配置
|
const formConfig = [
|
{
|
list: [
|
{
|
type: 'cascader',
|
name: 'area',
|
label: '选择区域',
|
placeholder: '请选择',
|
cols: 3,
|
require: true,
|
list: regionTree,
|
value: selectedArea,
|
},
|
{
|
type: 'text',
|
name: 'detailLocation',
|
label: '纠纷发生具体地点',
|
placeholder: '请填写具体地点',
|
require: true,
|
value: detailLocation,
|
},
|
],
|
},
|
];
|
|
return (
|
<>
|
<NavBarPage
|
title="纠纷发生地点"
|
leftContentFunc={() => history.goBack()}
|
rightContentFunc={handleManualInput}
|
rightChildren={
|
<>
|
<WriteEditOutlined />
|
手动填写
|
</>
|
}
|
/>
|
|
<div className="location-picker-container">
|
{!isManualInput ? (
|
<div className="placeholder-container">
|
{/* 占位内容，可以添加地图或其他选择界面 */}
|
<div className="placeholder-content">地点选择区域（占位）</div>
|
</div>
|
) : (
|
<div className="manual-input-container">
|
<CustomFormView formConfig={formConfig} formData={formData} onChange={handleFormChange} />
|
</div>
|
)}
|
|
{/* 底部保存按钮 */}
|
{isManualInput && (
|
<div className="bottom-bar">
|
<Button type="primary" className="save-button" onClick={handleSave}>
|
保存
|
</Button>
|
</div>
|
)}
|
</div>
|
</>
|
);
|
};
|
|
export default LocationPicker;
|
