import React, { useState, useEffect } from 'react';
|
import { useHistory, useLocation } from 'react-router-dom';
|
import { Input, Toast } from 'dingtalk-design-mobile';
|
import { SearchOutlined } from 'dd-icons';
|
import NavBarPage from '../../../components/NavBarPage';
|
import caseTypeSelect from '../../../utils/caseTypeSelect';
|
import './index.less';
|
|
const DisputeTypePicker = () => {
|
const history = useHistory();
|
const location = useLocation();
|
const [searchValue, setSearchValue] = useState('');
|
const [selectedCategory, setSelectedCategory] = useState(''); // 初始设为空字符串
|
const [searchResults, setSearchResults] = useState([]);
|
const [showSearchResults, setShowSearchResults] = useState(false);
|
const searchCategoryId = 'search-results-category'; // 搜索结果分类的唯一ID
|
|
// 组件初始化时设置默认选中的分类
|
useEffect(() => {
|
try {
|
if (caseTypeSelect && Array.isArray(caseTypeSelect.caseTypeSelect) && caseTypeSelect.caseTypeSelect.length > 0) {
|
// 默认选中第一个分类
|
setSelectedCategory(caseTypeSelect.caseTypeSelect[0].value);
|
}
|
} catch (error) {
|
console.error('初始化分类选择失败:', error);
|
}
|
}, []);
|
|
// 处理返回按钮
|
const handleBack = () => {
|
history.goBack();
|
};
|
|
// 高亮搜索关键词
|
const highlightText = (text, keyword) => {
|
if (!keyword.trim()) return text;
|
|
const parts = text.split(new RegExp(`(${keyword})`, 'gi'));
|
return (
|
<>
|
{parts.map((part, index) =>
|
part.toLowerCase() === keyword.toLowerCase() ?
|
<span key={index} className="highlight-text">{part}</span> :
|
part
|
)}
|
</>
|
);
|
};
|
|
// 处理搜索
|
const handleSearch = () => {
|
if (!searchValue.trim()) {
|
setShowSearchResults(false);
|
return;
|
}
|
|
const results = [];
|
caseTypeSelect.caseTypeSelect.forEach(category => {
|
if (category && Array.isArray(category.children) && category.children.length > 0) {
|
category.children.forEach(item => {
|
if (item && item.label && item.label.includes(searchValue)) {
|
results.push({
|
...item,
|
categoryName: category.label || '未分类',
|
categoryValue: category.value
|
});
|
}
|
});
|
}
|
});
|
|
setSearchResults(results);
|
setShowSearchResults(true);
|
|
// 不管是否有搜索结果，只要执行了搜索，都选中"搜索结果"分类
|
setSelectedCategory(searchCategoryId);
|
};
|
|
// 处理搜索输入变化
|
const handleSearchInputChange = (value) => {
|
setSearchValue(value);
|
if (!value) {
|
// 当搜索框清空时，如果之前在搜索结果页面，则切换到第一个分类
|
if (selectedCategory === searchCategoryId && caseTypeSelect.caseTypeSelect.length > 0) {
|
setSelectedCategory(caseTypeSelect.caseTypeSelect[0].value);
|
}
|
setShowSearchResults(false);
|
}
|
};
|
|
// 处理分类选择
|
const handleCategorySelect = (categoryValue) => {
|
setSelectedCategory(categoryValue);
|
// 如果选择了非搜索结果分类，则清除搜索状态和搜索框内容
|
if (categoryValue !== searchCategoryId) {
|
setShowSearchResults(false);
|
setSearchValue(''); // 清空搜索框内容
|
}
|
};
|
|
// 处理类型选择
|
const handleTypeSelect = (type) => {
|
// 检查type是否包含必要的属性
|
if (!type || !type.value || !type.label) {
|
Toast.fail({
|
content: '选择的类型数据不完整',
|
duration: 2,
|
});
|
return;
|
}
|
|
// 构造完整的选择信息，包括一级案由和二级案件
|
const selectedTypeInfo = {
|
// 二级案件信息
|
value: type.value, // 二级案件的value，对应表单中的caseType
|
label: type.label, // 二级案件的label，对应表单中的caseTypeName
|
|
// 一级案由信息
|
caseTypeFirst: type.categoryValue, // 一级案由的value
|
caseTypeFirstName: type.categoryName // 一级案由的label
|
};
|
|
console.log('将要保存的纠纷类型信息:', selectedTypeInfo);
|
|
// 将选择的完整纠纷类型信息存储到 sessionStorage
|
try {
|
sessionStorage.setItem('selectedDisputeType', JSON.stringify(selectedTypeInfo));
|
|
// 同时更新caseDes_form_cache缓存
|
const formCacheKey = 'caseDes_form_cache';
|
const existingCache = sessionStorage.getItem(formCacheKey);
|
let formCache = {};
|
|
if (existingCache) {
|
try {
|
formCache = JSON.parse(existingCache);
|
} catch (parseError) {
|
console.error('解析表单缓存失败:', parseError);
|
// 继续使用空对象
|
}
|
}
|
|
// 更新caseDes_form_cache中的纠纷类型相关字段
|
const updatedCache = {
|
...formCache,
|
// 确保使用统一的字段名，与BasicInfoForm组件中使用的保持一致
|
caseType: selectedTypeInfo.value, // 二级案件value
|
caseTypeName: selectedTypeInfo.label, // 二级案件label
|
caseTypeFirst: selectedTypeInfo.caseTypeFirst, // 一级案由value
|
caseTypeFirstName: selectedTypeInfo.caseTypeFirstName // 一级案由label
|
};
|
|
// 保存更新后的缓存
|
sessionStorage.setItem(formCacheKey, JSON.stringify(updatedCache));
|
console.log('成功更新表单缓存中的纠纷类型数据:', {
|
caseType: updatedCache.caseType,
|
caseTypeName: updatedCache.caseTypeName,
|
caseTypeFirst: updatedCache.caseTypeFirst,
|
caseTypeFirstName: updatedCache.caseTypeFirstName
|
});
|
|
Toast.success({
|
content: `已选择${selectedTypeInfo.caseTypeFirstName}/${type.label}`,
|
duration: 1,
|
});
|
|
// 返回上一页
|
history.goBack();
|
} catch (error) {
|
console.error('保存选择数据失败:', error);
|
Toast.fail({
|
content: '保存选择失败，请重试',
|
duration: 2,
|
});
|
}
|
};
|
|
// 渲染左侧分类导航
|
const renderCategoryNav = () => {
|
const categories = [...caseTypeSelect.caseTypeSelect];
|
|
// 只要执行过搜索操作就添加"搜索结果"分类，不管是否有搜索结果
|
const searchResultsCategory = showSearchResults ?
|
[{
|
value: searchCategoryId,
|
label: '搜索结果'
|
}] : [];
|
|
return (
|
<div className="category-nav">
|
{[...searchResultsCategory, ...categories].map(category => (
|
<div
|
key={category.value}
|
className={`category-nav-item ${selectedCategory === category.value ? 'active' : ''}`}
|
onClick={() => handleCategorySelect(category.value)}
|
>
|
{category.label}
|
</div>
|
))}
|
</div>
|
);
|
};
|
|
// 渲染右侧类型列表
|
const renderTypeList = () => {
|
// 如果当前选中的是搜索结果分类，则显示搜索结果
|
if (selectedCategory === searchCategoryId && showSearchResults) {
|
return renderSearchResults();
|
}
|
|
const currentCategory = caseTypeSelect.caseTypeSelect.find(item => item.value === selectedCategory);
|
|
if (!currentCategory) return null;
|
|
// 确保children存在且是一个数组
|
const children = Array.isArray(currentCategory.children) ? currentCategory.children : [];
|
|
return (
|
<div className="type-list">
|
<div className="type-category-title">{currentCategory.label}</div>
|
<div className="type-items">
|
{children.length > 0 ? (
|
children.map((type, index) => {
|
// 为每个类型项添加一级案由信息
|
const typeWithCategory = {
|
...type,
|
categoryName: currentCategory.label,
|
categoryValue: currentCategory.value
|
};
|
|
return (
|
<div
|
key={type.value || `type-${Math.random()}`}
|
className="type-item"
|
onClick={() => handleTypeSelect(typeWithCategory)}
|
>
|
<div className="type-item-icon">
|
<div className="inner-icon"></div>
|
</div>
|
<div className="type-item-label">{type.label}</div>
|
</div>
|
);
|
})
|
) : (
|
<div className="no-items">暂无数据</div>
|
)}
|
</div>
|
</div>
|
);
|
};
|
|
// 渲染搜索结果
|
const renderSearchResults = () => {
|
if (searchResults.length === 0) {
|
// 返回空内容，但保留容器
|
return <div className="search-results"></div>;
|
}
|
|
// 按一级案由分组
|
const groupedResults = searchResults.reduce((acc, type) => {
|
const categoryItem = caseTypeSelect.caseTypeSelect.find(cat => cat.value === type.categoryValue);
|
const categoryName = categoryItem ? categoryItem.label : '未分类';
|
|
if (!acc[categoryName]) {
|
acc[categoryName] = {
|
categoryValue: type.categoryValue,
|
items: []
|
};
|
}
|
|
acc[categoryName].items.push(type);
|
return acc;
|
}, {});
|
|
return (
|
<div className="search-results">
|
{Object.entries(groupedResults).map(([categoryName, group]) => (
|
<div key={categoryName} className="search-category">
|
<div className="type-category-title">{categoryName}</div>
|
<div className="type-items">
|
{group.items.map((type) => {
|
// 为搜索结果添加一级案由信息
|
const typeWithCategory = {
|
...type,
|
categoryName: categoryName,
|
categoryValue: group.categoryValue
|
};
|
|
return (
|
<div
|
key={type.value}
|
className="type-item"
|
onClick={() => handleTypeSelect(typeWithCategory)}
|
>
|
<div className="type-item-icon">
|
<div className="inner-icon"></div>
|
</div>
|
<div className="type-item-label">
|
{highlightText(type.label, searchValue)}
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
</div>
|
))}
|
</div>
|
);
|
};
|
|
return (
|
<div className="dispute-type-picker">
|
<NavBarPage
|
leftContentVisible={true}
|
title="选择纠纷类型"
|
leftContentFunc={handleBack}
|
/>
|
|
<div className="main-container">
|
{/* 搜索区域 */}
|
<div className="search-container">
|
<div className="search-context">
|
<div className="search-icon">
|
<SearchOutlined />
|
</div>
|
<Input
|
placeholder="搜索纠纷类型"
|
value={searchValue}
|
onChange={(value) => {
|
handleSearchInputChange(value);
|
}}
|
onKeyPress={(e) => {
|
if (e.key === 'Enter') {
|
handleSearch();
|
}
|
}}
|
/>
|
<div className="search-button" onClick={handleSearch}>
|
<p className="search-split">|</p>
|
<p className="search-text">查询</p>
|
</div>
|
</div>
|
</div>
|
|
{/* 类型选择区域 - 不再使用showSearchResults控制显示，而是通过选中的category类型控制 */}
|
<div className="category-container">
|
{renderCategoryNav()}
|
{renderTypeList()}
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default DisputeTypePicker;
|
