/*
|
* @Author: Claude
|
* @Date: 2025-04-15 09:28:00
|
* @LastEditTime: 2025-05-20 15:17:53
|
* @LastEditors: lwh
|
* @Description: 综合查询页面
|
*/
|
import React, { useState, useEffect, useRef } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { SearchBar, Button, Modal, Select, InputItem, Toast, Picker } from 'dingtalk-design-mobile';
|
import { Scrollbars } from 'react-custom-scrollbars';
|
import NavBarPage from '../../components/NavBarPage';
|
import MyList from '../../components/MyList';
|
import CalendarRangeTwoDay from '../../components/CalendarRangeTwoDay';
|
import * as $$ from '../../utils/utility';
|
import { caseQuery_1, caseQuery_2, workStatistics_5 } from '../../assets/img';
|
import { SearchOutlined,RightArrow2Outlined } from 'dd-icons';
|
import './index.less';
|
|
// 全局日期格式化函数
|
function formatDate(date) {
|
if (!date) return '';
|
const d = new Date(date);
|
const year = d.getFullYear();
|
const month = String(d.getMonth() + 1).padStart(1, '0');
|
const day = String(d.getDate()).padStart(1, '0');
|
return `${year}-${month}-${day}`;
|
}
|
|
// 综合查询接口
|
function exportQueryAllApi(data) {
|
return $$.ax.request({
|
url: 'caseInfo/pageQueryAll',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 问题属地接口
|
function getRegionTreeApi() {
|
return $$.ax.request({
|
url: 'syRegion/treeByUserId',
|
type: 'get',
|
service: 'sys',
|
});
|
}
|
|
const CaseQuery = () => {
|
const history = useHistory();
|
|
// 搜索关键词
|
const [keyword, setKeyword] = useState('');
|
|
// 列表数据和分页状态
|
const [listData, setListData] = useState([]);
|
const [loading, setLoading] = useState(false);
|
const [refreshing, setRefreshing] = useState(false);
|
const [hasMore, setHasMore] = useState(true);
|
const [page, setPage] = useState(1);
|
const [totalCount, setTotalCount] = useState(0);
|
const [totalPages, setTotalPages] = useState(1);
|
|
// 日期选择弹窗状态
|
const [datePickerVisible, setDatePickerVisible] = useState(false);
|
const [currentDateType, setCurrentDateType] = useState('');
|
|
// 查询参数
|
const [queryParams, setQueryParams] = useState({
|
page: 1,
|
size: 10,
|
keyword: '',
|
sortColmn: '1',
|
sortType: '2',
|
});
|
|
// 高级筛选参数
|
const [advancedParams, setAdvancedParams] = useState({
|
queCity: '',
|
queArea: '',
|
queRoad: '',
|
queVillage: '',
|
inputUnitName: '',
|
createStart: '',
|
createEnd: '',
|
closeStart: '',
|
closeEnd: '',
|
caseType: '',
|
mediResult: '',
|
canal: '',
|
status: '',
|
caseLevel: '',
|
majorStatus: '',
|
mediateUnitId: '',
|
assistUnitId: '',
|
mediator: '',
|
caseRef: '',
|
plaintiffs: '',
|
defendants: '',
|
amount: '',
|
evaluateGrade: '',
|
fileStart: '',
|
fileEnd: '',
|
isRisk: '',
|
agreeType: '',
|
isDuplicate: '',
|
sortColmn: '1',
|
sortType: '2',
|
});
|
|
// 用于显示的部门和人员名称
|
const [displayNames, setDisplayNames] = useState({
|
mediateUnitName: '',
|
assistUnitName: '',
|
mediatorName: '',
|
});
|
|
// 地区树形数据
|
const [regionTree, setRegionTree] = useState([]);
|
|
// 查询状态
|
const [hasSearched, setHasSearched] = useState(false);
|
|
// 高级筛选弹窗状态
|
const [filterVisible, setFilterVisible] = useState(false);
|
|
// 选择器弹窗状态
|
const [selectorVisible, setSelectorVisible] = useState(false);
|
const [selectorTitle, setSelectorTitle] = useState('');
|
const [selectorOptions, setSelectorOptions] = useState([]);
|
const [selectorKey, setSelectorKey] = useState('');
|
|
// 新增：时间类型选项
|
const dateTypeOptions = [
|
{ value: 'custom', label: '自定义' },
|
{ value: 'lastMonth', label: '上月' },
|
{ value: 'lastWeek', label: '上周' },
|
{ value: 'thisMonth', label: '本月' },
|
{ value: 'thisWeek', label: '本周' },
|
{ value: 'thisYear', label: '本年度' },
|
{ value: 'lastYear', label: '上年度' },
|
];
|
|
const [dateTypeModalVisible, setDateTypeModalVisible] = useState(false);
|
const [dateTypeTarget, setDateTypeTarget] = useState(''); // 'create' or 'close'
|
|
// 新增：地区选择相关state
|
const [regionPickerVisible, setRegionPickerVisible] = useState(false);
|
const [regionPickerValue, setRegionPickerValue] = useState([]);
|
|
// 初始化加载地区数据
|
useEffect(() => {
|
fetchRegionTree();
|
}, []);
|
|
// 接收承办部门选择结果
|
useEffect(() => {
|
const data = $$.getLocal('mainDept');
|
if (data) {
|
setDisplayNames((prev) => ({ ...prev, mediateUnitName: data[0].label }));
|
setAdvancedParams((prev) => ({ ...prev, mediateUnitId: data[0].value }));
|
setFilterVisible(true);
|
$$.clearLocal('mainDept');
|
}
|
}, [$$.getLocal('mainDept')]);
|
|
// 接收配合部门选择结果
|
useEffect(() => {
|
const data = $$.getLocal('cooperateDepts');
|
if (data && data.length > 0) {
|
setDisplayNames((prev) => ({ ...prev, assistUnitName: data[0].label }));
|
setAdvancedParams((prev) => ({ ...prev, assistUnitId: data[0].value }));
|
setFilterVisible(true);
|
$$.clearLocal('cooperateDepts');
|
}
|
}, [$$.getLocal('cooperateDepts')]);
|
|
// 接收经办人选择结果
|
useEffect(() => {
|
const data = $$.getLocal('selectPerson');
|
if (data) {
|
console.log('data', data);
|
setDisplayNames((prev) => ({ ...prev, mediatorName: data[0]?.label }));
|
setAdvancedParams((prev) => ({ ...prev, mediator: data[0]?.value }));
|
setFilterVisible(true);
|
$$.clearLocal('selectPerson');
|
}
|
}, [$$.getLocal('selectPerson')]);
|
|
// 获取地区树形数据
|
const fetchRegionTree = async () => {
|
try {
|
const res = await getRegionTreeApi();
|
if (res.type) {
|
setRegionTree(res.data || []);
|
}
|
} catch (error) {
|
console.error('获取地区数据失败', error);
|
}
|
};
|
|
// 获取列表数据
|
const fetchListData = async (currentPage, params = {}) => {
|
setLoading(true);
|
|
try {
|
const requestParams = {
|
...params,
|
page: currentPage,
|
size: 10,
|
sortColmn: '1',
|
sortType: '2',
|
};
|
|
// 打印请求参数检查
|
console.log('请求参数:', requestParams);
|
|
const res = await exportQueryAllApi(requestParams);
|
|
if (res.type) {
|
const { content, totalElements, totalPages, last } = res.data;
|
|
// 确保返回的数据不为空
|
const dataList = content || [];
|
|
if (currentPage === 1) {
|
// 第一页数据，直接设置
|
setListData(dataList);
|
} else {
|
// 加载更多数据
|
setListData((prev) => [...prev, ...dataList]);
|
}
|
|
setTotalCount(totalElements);
|
setTotalPages(totalPages);
|
setHasMore(!last);
|
setPage(currentPage);
|
setQueryParams({ ...requestParams });
|
setHasSearched(true);
|
}
|
} catch (error) {
|
console.error('获取列表数据失败', error);
|
Toast.show({
|
content: '获取数据失败，请稍后重试',
|
position: 'bottom',
|
});
|
} finally {
|
setLoading(false);
|
setRefreshing(false);
|
}
|
};
|
|
// 下拉刷新
|
const handleRefresh = () => {
|
setRefreshing(true);
|
fetchListData(1, queryParams);
|
};
|
|
// 加载更多
|
const loadMoreData = (callback) => {
|
if (loading || !hasMore) {
|
if (callback) callback();
|
return;
|
}
|
|
setLoading(true);
|
fetchListData(page + 1, queryParams)
|
.then(() => {
|
if (callback) callback();
|
})
|
.catch(() => {
|
if (callback) callback();
|
});
|
};
|
|
// 处理搜索
|
const handleSearch = () => {
|
const params = { ...queryParams, keyword, page: 1 };
|
fetchListData(1, params);
|
};
|
|
// 打开高级筛选
|
const handleOpenFilter = () => {
|
setFilterVisible(true);
|
};
|
|
// 关闭高级筛选
|
const handleCloseFilter = () => {
|
setFilterVisible(false);
|
};
|
|
// 重置高级筛选
|
const handleResetFilter = () => {
|
setAdvancedParams({
|
queCity: '',
|
queArea: '',
|
queRoad: '',
|
queVillage: '',
|
inputUnitName: '',
|
createStart: '',
|
createEnd: '',
|
closeStart: '',
|
closeEnd: '',
|
caseType: '',
|
mediResult: '',
|
canal: '',
|
status: '',
|
caseLevel: '',
|
majorStatus: '',
|
mediateUnitId: '',
|
assistUnitId: '',
|
mediator: '',
|
caseRef: '',
|
plaintiffs: '',
|
defendants: '',
|
amount: '',
|
evaluateGrade: '',
|
fileStart: '',
|
fileEnd: '',
|
isRisk: '',
|
agreeType: '',
|
isDuplicate: '',
|
sortColmn: '1',
|
sortType: '2',
|
});
|
setDisplayNames({
|
mediateUnitName: '',
|
assistUnitName: '',
|
mediatorName: '',
|
});
|
setRegionPickerValue([]);
|
};
|
|
// 应用高级筛选
|
const handleApplyFilter = () => {
|
// 确保日期参数正确传递
|
const params = {
|
...advancedParams,
|
page: 1,
|
size: 10,
|
sortColmn: '1',
|
sortType: '2',
|
};
|
|
// 打印参数检查
|
console.log('查询参数:', params);
|
|
fetchListData(1, params);
|
handleCloseFilter();
|
};
|
|
// 处理问题属地选择
|
const handleRegionChange = (value, options) => {
|
const level = options[options.length - 1]?.level;
|
const selectedValue = value[value.length - 1];
|
|
if (level === '1') {
|
setAdvancedParams((prev) => ({ ...prev, queCity: selectedValue, queArea: '', queRoad: '', queVillage: '' }));
|
} else if (level === '2') {
|
setAdvancedParams((prev) => ({ ...prev, queArea: selectedValue, queRoad: '', queVillage: '' }));
|
} else if (level === '3') {
|
setAdvancedParams((prev) => ({ ...prev, queRoad: selectedValue, queVillage: '' }));
|
} else if (level === '4') {
|
setAdvancedParams((prev) => ({ ...prev, queVillage: selectedValue }));
|
}
|
};
|
|
// 转换地区数据为Picker格式
|
const formatRegionData = (data) => {
|
return data.map((item) => ({
|
value: item.value,
|
label: item.label,
|
level: item.level,
|
children: item.children && item.children.length > 0 ? formatRegionData(item.children) : undefined,
|
}));
|
};
|
|
// 选择承办部门
|
const handleSelectMediateUnit = () => {
|
setFilterVisible(false);
|
history.push(`/gzdyh/selectPerson?type=3&isMultiple=true`);
|
};
|
|
// 选择配合部门
|
const handleSelectAssistUnit = () => {
|
setFilterVisible(false);
|
history.push('/gzdyh/selectPerson?type=4&isMultiple=true');
|
};
|
|
// 选择经办人
|
const handleSelectMediator = () => {
|
setFilterVisible(false);
|
history.push('/gzdyh/selectPerson?type=1&isMultiple=trua');
|
};
|
|
// 渲染列表项
|
const renderListItem = (item) => {
|
// 格式化时间
|
const formatTime = (time) => {
|
if (!time) return '';
|
const date = new Date(time);
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
return `${year}-${month}-${day}`;
|
};
|
|
// 判断化解结果样式
|
const getResultStyle = (result) => {
|
if (result === '化解成功') {
|
return 'success';
|
} else if (result === '化解不成功') {
|
return 'fail';
|
}
|
return '';
|
};
|
|
const createDate = formatTime(item.createTime);
|
const resultStyle = getResultStyle(item.mediResultName);
|
|
return (
|
<div className="query-list-item" onClick={() => history.push(`/gzdyh/flow?caseTaskId=${item.caseTaskId}&caseId=${item.id}&editShow=false`)}>
|
<div className="query-list-header">
|
<div className="query-list-title">
|
<span>{item.plaintiffs}</span>
|
{item.defendants && (
|
<>
|
<span className="query-list-separator">、</span>
|
<span>{item.defendants}</span>
|
</>
|
)}
|
<span className="query-list-arrow"><RightArrow2Outlined /></span>
|
</div>
|
<div className="query-list-status">{item.statusName}</div>
|
</div>
|
|
<div className="query-list-content">
|
<div className="query-list-row">
|
<div className="query-list-label">登记时间</div>
|
<div className="query-list-value">{createDate}</div>
|
</div>
|
|
<div className="query-list-row">
|
<div className="query-list-label">纠纷类型</div>
|
<div className="query-list-value">{item.caseTypeName}</div>
|
</div>
|
|
<div className="query-list-row">
|
<div className="query-list-label">承办部门</div>
|
<div className="query-list-value">{item.mediateUnitName}</div>
|
</div>
|
<div className="query-list-row">
|
<div className="query-list-label">事项编号</div>
|
<div className="query-list-value">{item.caseRef}</div>
|
</div>
|
<div className="query-list-row">
|
<div className="query-list-label">化解结果</div>
|
<div className={`query-list-value query-result-${resultStyle}`}>{item.mediResultName}</div>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
// 渲染初始状态
|
const renderInitialState = () => {
|
return (
|
<div className="query-initial-state">
|
<img src={caseQuery_1} alt="请输入关键词查询" className="query-initial-image" />
|
<div className="query-initial-text">请输入关键词查询</div>
|
</div>
|
);
|
};
|
|
// 渲染无数据状态
|
const renderEmptyState = () => {
|
return (
|
<div className="query-empty-state">
|
<img src={caseQuery_2} alt="暂无数据" className="query-empty-image" />
|
<div className="query-empty-text">暂无数据</div>
|
</div>
|
);
|
};
|
|
// 打开选择器弹窗
|
const openSelector = (title, options, key) => {
|
setSelectorTitle(title);
|
setSelectorOptions(options);
|
setSelectorKey(key);
|
setSelectorVisible(true);
|
};
|
|
// 关闭选择器弹窗
|
const closeSelector = () => {
|
setSelectorVisible(false);
|
};
|
|
// 处理选择器选择
|
const handleSelectorSelect = (value) => {
|
setAdvancedParams((prev) => ({ ...prev, [selectorKey]: value }));
|
closeSelector();
|
};
|
|
// 计算时间范围
|
const getDateRangeByType = (type) => {
|
const now = new Date();
|
let start, end;
|
switch (type) {
|
case 'lastMonth': {
|
const year = now.getMonth() === 0 ? now.getFullYear() - 1 : now.getFullYear();
|
const month = now.getMonth() === 0 ? 11 : now.getMonth() - 1;
|
start = new Date(year, month, 1);
|
end = new Date(year, month + 1, 0);
|
break;
|
}
|
case 'thisMonth': {
|
start = new Date(now.getFullYear(), now.getMonth(), 1);
|
end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
|
break;
|
}
|
case 'lastWeek': {
|
const day = now.getDay() || 7;
|
end = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day);
|
start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day - 6);
|
break;
|
}
|
case 'thisWeek': {
|
const day = now.getDay() || 7;
|
start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day + 1);
|
end = new Date(now.getFullYear(), now.getMonth(), now.getDate() - day + 7);
|
break;
|
}
|
case 'thisYear': {
|
start = new Date(now.getFullYear(), 0, 1);
|
end = new Date(now.getFullYear(), 11, 31);
|
break;
|
}
|
case 'lastYear': {
|
start = new Date(now.getFullYear() - 1, 0, 1);
|
end = new Date(now.getFullYear() - 1, 11, 31);
|
break;
|
}
|
default:
|
start = end = now;
|
}
|
return [formatDate(start), formatDate(end)];
|
};
|
|
// 打开时间类型弹窗
|
const handleOpenDateTypeModal = (target) => {
|
setDateTypeTarget(target);
|
setDateTypeModalVisible(true);
|
};
|
|
// 选择时间类型
|
const handleDateTypeSelect = (type) => {
|
setDateTypeModalVisible(false);
|
if (type === 'custom') {
|
setCurrentDateType(dateTypeTarget);
|
setDatePickerVisible(true);
|
} else {
|
const [start, end] = getDateRangeByType(type);
|
switch (dateTypeTarget) {
|
case 'create':
|
setAdvancedParams((prev) => ({ ...prev, createStart: start, createEnd: end }));
|
break;
|
case 'close':
|
setAdvancedParams((prev) => ({ ...prev, closeStart: start, closeEnd: end }));
|
break;
|
case 'file':
|
setAdvancedParams((prev) => ({ ...prev, fileStart: start, fileEnd: end }));
|
break;
|
default:
|
break;
|
}
|
}
|
};
|
|
// 渲染选择器弹窗
|
const renderSelectorModal = () => {
|
return (
|
<Modal
|
visible={selectorVisible}
|
onClose={closeSelector}
|
className="custom-selector-modal"
|
position="bottom"
|
maskClosable={true}
|
popup
|
transparent={false}
|
>
|
<div className="modal-header">
|
<div className="modal-title">{selectorTitle}</div>
|
<span className="modal-close" onClick={closeSelector}>
|
×
|
</span>
|
</div>
|
<div className="selector-modal-content">
|
{selectorOptions.map((option) => (
|
<div
|
key={option.value}
|
className="selector-modal-item"
|
onClick={() => handleSelectorSelect(option.value)}
|
style={{ color: option.value === advancedParams[selectorKey] ? '#1A6FB8' : '#171A1D' }}
|
>
|
{option.label}
|
</div>
|
))}
|
</div>
|
</Modal>
|
);
|
};
|
|
// 新增：时间类型选择弹窗渲染
|
const renderDateTypeModal = () => (
|
<Modal
|
visible={dateTypeModalVisible}
|
onClose={() => setDateTypeModalVisible(false)}
|
className="date-type-modal"
|
position="bottom"
|
maskClosable={true}
|
popup
|
transparent={false}
|
>
|
<div className="modal-header">
|
<div className="modal-title">选择时间类型</div>
|
<span className="modal-close" onClick={() => setDateTypeModalVisible(false)}>
|
×
|
</span>
|
</div>
|
<div className="date-type-modal-content">
|
{dateTypeOptions.map((opt) => (
|
<div key={opt.value} className="date-type-modal-item" onClick={() => handleDateTypeSelect(opt.value)}>
|
{opt.label}
|
</div>
|
))}
|
</div>
|
</Modal>
|
);
|
|
// 新增：自定义时间选择弹窗渲染
|
const renderDatePickerModal = () => (
|
<Modal
|
visible={datePickerVisible}
|
onClose={() => setDatePickerVisible(false)}
|
className="date-picker-modal"
|
position="bottom"
|
maskClosable={true}
|
popup
|
transparent={false}
|
>
|
<div className="modal-header">
|
<div className="modal-title">选择日期范围</div>
|
<span className="modal-close" onClick={() => setDatePickerVisible(false)}>
|
×
|
</span>
|
</div>
|
<CalendarRangeTwoDay CalendaronClick={handleCalendarClick} onClickDate={handleDateChange} />
|
</Modal>
|
);
|
|
// 工具函数：通过value获取label
|
const getSelectLabel = (options = [], value) => {
|
if (!value || !options || !options.length) return '';
|
const option = options.find((item) => item.value === value);
|
return option ? option.label : '';
|
};
|
|
// 新增：获取地区label字符串的函数
|
const getRegionLabel = () => {
|
if (!regionPickerValue || regionPickerValue.length === 0) return '请选择';
|
// 遍历regionTree，找到每一级的label
|
let labels = [];
|
let currentList = regionTree;
|
for (let i = 0; i < regionPickerValue.length; i++) {
|
const found = currentList && currentList.find(item => item.value === regionPickerValue[i]);
|
if (found) {
|
labels.push(found.label);
|
currentList = found.children;
|
} else {
|
break;
|
}
|
}
|
return labels.length > 0 ? labels.join(' / ') : '请选择';
|
};
|
|
// 新增：通用函数，判断有值时加深色样式
|
const renderSelectorText = (val, text) => {
|
return val ? <span style={{color: '#171A1D'}}>{text}</span> : text;
|
};
|
|
// 渲染高级筛选弹窗
|
const renderFilterModal = () => {
|
return (
|
<Modal
|
visible={filterVisible}
|
onClose={handleCloseFilter}
|
className="casequery-filter-modal"
|
position="bottom"
|
maskClosable={true}
|
popup
|
transparent={false}
|
>
|
<div className="query-filter-content">
|
<div className="filter-item">
|
<div className="filter-label">问题属地</div>
|
<div
|
className="filter-selector"
|
onClick={() => setRegionPickerVisible(true)}
|
>
|
{regionPickerValue && regionPickerValue.length > 0
|
? <span style={{color: '#171A1D'}}>{getRegionLabel()}</span>
|
: getRegionLabel()}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
{/* 地区选择Picker弹窗，单独渲染，避免嵌套错误 */}
|
<Picker
|
visible={regionPickerVisible}
|
data={regionTree}
|
value={regionPickerValue}
|
title="请选择地区"
|
okText="确定"
|
cancelText="取消"
|
onOk={(val) => {
|
setRegionPickerValue(val);
|
setAdvancedParams((prev) => ({
|
...prev,
|
queCity: val[0] || '',
|
queArea: val[1] || '',
|
queRoad: val[2] || '',
|
queVillage: val[3] || '',
|
}));
|
setRegionPickerVisible(false);
|
}}
|
onCancel={() => setRegionPickerVisible(false)}
|
cascade={true}
|
/>
|
|
<div className="filter-item">
|
<div className="filter-label">登记机构</div>
|
<div className="filter-input">
|
<InputItem
|
placeholder="请选择"
|
value={advancedParams.inputUnitName}
|
onChange={(val) => setAdvancedParams((prev) => ({ ...prev, inputUnitName: val }))}
|
style={advancedParams.inputUnitName ? {color: '#171A1D'} : {}}
|
/>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">登记时间</div>
|
<div className="filter-selector" onClick={() => handleOpenDateTypeModal('create')}>
|
{advancedParams.createStart && advancedParams.createEnd
|
? <span style={{color: '#171A1D'}}>{`${advancedParams.createStart}-${advancedParams.createEnd}`}</span>
|
: '请选择'}
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">办结时间</div>
|
<div className="filter-selector" onClick={() => handleOpenDateTypeModal('close')}>
|
{advancedParams.closeStart && advancedParams.closeEnd
|
? <span style={{color: '#171A1D'}}>{`${advancedParams.closeStart}-${advancedParams.closeEnd}`}</span>
|
: '请选择'}
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">纠纷类型</div>
|
<div className="filter-selector" onClick={() => openSelector('纠纷类型', $$.caseTypeSelect.caseTypeSelect || [], 'caseType')}>
|
{renderSelectorText(advancedParams.caseType, advancedParams.caseType ? getSelectLabel($$.caseTypeSelect.caseTypeSelect, advancedParams.caseType) : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">化解结果</div>
|
<div className="filter-selector" onClick={() => openSelector('化解结果', $$.selectOption.mediResult || [], 'mediResult')}>
|
{renderSelectorText(advancedParams.mediResult, advancedParams.mediResult ? getSelectLabel($$.selectOption.mediResult, advancedParams.mediResult) : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">事项来源</div>
|
<div className="filter-selector" onClick={() => openSelector('事项来源', $$.selectOption.caseCanal || [], 'canal')}>
|
{renderSelectorText(advancedParams.canal, advancedParams.canal ? getSelectLabel($$.selectOption.caseCanal, advancedParams.canal) : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">事项状态</div>
|
<div className="filter-selector" onClick={() => openSelector('事项状态', $$.selectOption.caseStatus || [], 'status')}>
|
{renderSelectorText(advancedParams.status, advancedParams.status ? getSelectLabel($$.selectOption.caseStatus, advancedParams.status) : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">事项等级</div>
|
<div className="filter-selector" onClick={() => openSelector('事项等级', $$.selectOption.caseLevelList || [], 'caseLevel')}>
|
{renderSelectorText(advancedParams.caseLevel, advancedParams.caseLevel ? getSelectLabel($$.selectOption.caseLevelList, advancedParams.caseLevel) : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">是否重大矛盾纠纷</div>
|
<div
|
className="filter-selector"
|
onClick={() =>
|
openSelector(
|
'是否重大矛盾纠纷',
|
[
|
{ label: '否', value: '0' },
|
{ label: '是', value: '1' },
|
],
|
'majorStatus'
|
)
|
}
|
>
|
{renderSelectorText(advancedParams.majorStatus, advancedParams.majorStatus ? (advancedParams.majorStatus === '1' ? '是' : '否') : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">承办部门</div>
|
<div className="filter-selector" onClick={handleSelectMediateUnit}>
|
{renderSelectorText(displayNames.mediateUnitName, displayNames.mediateUnitName || '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">配合部门</div>
|
<div className="filter-selector" onClick={handleSelectAssistUnit}>
|
{renderSelectorText(displayNames.assistUnitName, displayNames.assistUnitName || '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">经办人</div>
|
<div className="filter-selector" onClick={handleSelectMediator}>
|
{renderSelectorText(displayNames.mediatorName, displayNames.mediatorName || '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">事项编号</div>
|
<div className="filter-input">
|
<InputItem
|
placeholder="请填写"
|
value={advancedParams.caseRef}
|
onChange={(val) => setAdvancedParams((prev) => ({ ...prev, caseRef: val }))}
|
style={advancedParams.caseRef ? {color: '#171A1D'} : {}}
|
/>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">申请方</div>
|
<div className="filter-input">
|
<InputItem
|
placeholder="请填写"
|
value={advancedParams.plaintiffs}
|
onChange={(val) => setAdvancedParams((prev) => ({ ...prev, plaintiffs: val }))}
|
style={advancedParams.plaintiffs ? {color: '#171A1D'} : {}}
|
/>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">被申请方</div>
|
<div className="filter-input">
|
<InputItem
|
placeholder="请填写"
|
value={advancedParams.defendants}
|
onChange={(val) => setAdvancedParams((prev) => ({ ...prev, defendants: val }))}
|
style={advancedParams.defendants ? {color: '#171A1D'} : {}}
|
/>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">涉及金额</div>
|
<div className="filter-selector" onClick={() => openSelector('涉及金额', $$.selectOption.amount || [], 'amount')}>
|
{renderSelectorText(advancedParams.amount, advancedParams.amount ? getSelectLabel($$.selectOption.amount, advancedParams.amount) : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">评价等级</div>
|
<div className="filter-selector" onClick={() => openSelector('评价等级', $$.selectOption.evaluateGrade || [], 'evaluateGrade')}>
|
{renderSelectorText(advancedParams.evaluateGrade, advancedParams.evaluateGrade ? getSelectLabel($$.selectOption.evaluateGrade, advancedParams.evaluateGrade) : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">归档时间</div>
|
<div className="filter-selector" onClick={() => handleOpenDatePicker('file')}>
|
{advancedParams.fileStart && advancedParams.fileEnd ? `${advancedParams.fileStart} 至 ${advancedParams.fileEnd}` : '请选择'}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">是否扬言极端</div>
|
<div
|
className="filter-selector"
|
onClick={() =>
|
openSelector(
|
'是否扬言极端',
|
[
|
{ label: '否', value: '0' },
|
{ label: '是', value: '1' },
|
],
|
'isRisk'
|
)
|
}
|
>
|
{renderSelectorText(advancedParams.isRisk, advancedParams.isRisk ? (advancedParams.isRisk === '1' ? '是' : '否') : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">结案协议类型</div>
|
<div className="filter-selector" onClick={() => openSelector('结案协议类型', $$.selectOption.agreeType || [], 'agreeType')}>
|
{renderSelectorText(advancedParams.agreeType, advancedParams.agreeType ? getSelectLabel($$.selectOption.agreeType, advancedParams.agreeType) : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
|
<div className="filter-item">
|
<div className="filter-label">是否重复事项</div>
|
<div
|
className="filter-selector"
|
onClick={() =>
|
openSelector(
|
'是否重复事项',
|
[
|
{ label: '否', value: '0' },
|
{ label: '是', value: '1' },
|
],
|
'isDuplicate'
|
)
|
}
|
>
|
{renderSelectorText(advancedParams.isDuplicate, advancedParams.isDuplicate ? (advancedParams.isDuplicate === '1' ? '是' : '否') : '请选择')}
|
<i className="filter-arrow"></i>
|
</div>
|
</div>
|
</div>
|
|
<div className="query-filter-buttons">
|
<Button className="filter-reset" onClick={handleResetFilter}>
|
重置
|
</Button>
|
<Button className="filter-apply" type="primary" onClick={handleApplyFilter}>
|
查询
|
</Button>
|
</div>
|
</Modal>
|
);
|
};
|
|
// 处理日期选择
|
const handleOpenDatePicker = (type) => {
|
setCurrentDateType(type);
|
setDatePickerVisible(true);
|
};
|
|
const calendarSelectedRef = useRef([]);
|
|
const handleDateChange = (dates) => {
|
if (!dates || dates.length !== 2) return;
|
|
const formatDate = (date) => {
|
if (!date || !date.key) return '';
|
return date.key;
|
};
|
|
const formattedStart = formatDate(dates[0]);
|
const formattedEnd = formatDate(dates[1]);
|
|
switch (currentDateType) {
|
case 'create':
|
setAdvancedParams((prev) => ({
|
...prev,
|
createStart: formattedStart,
|
createEnd: formattedEnd,
|
}));
|
break;
|
case 'close':
|
setAdvancedParams((prev) => ({
|
...prev,
|
closeStart: formattedStart,
|
closeEnd: formattedEnd,
|
}));
|
break;
|
case 'file':
|
setAdvancedParams((prev) => ({
|
...prev,
|
fileStart: formattedStart,
|
fileEnd: formattedEnd,
|
}));
|
break;
|
default:
|
break;
|
}
|
setDatePickerVisible(false);
|
};
|
|
const handleCalendarClick = (type, action) => {
|
if (action === 'onClose') {
|
setDatePickerVisible(false);
|
} else if (action === 'submit') {
|
if (calendarSelectedRef.current && calendarSelectedRef.current.length === 2) {
|
handleDateChange(calendarSelectedRef.current);
|
} else {
|
setDatePickerVisible(false);
|
}
|
}
|
};
|
|
// 处理"更多"按钮点击事件
|
const handleMore = () => {
|
// 这里可以弹窗、展开高级筛选、或自定义逻辑
|
// 目前先简单弹窗
|
window && window.alert ? window.alert('更多功能开发中') : console.log('更多功能开发中');
|
};
|
|
// 渲染内容区域
|
const renderContent = () => {
|
// 初始状态，未搜索
|
if (!hasSearched) {
|
return renderInitialState();
|
}
|
|
// 搜索后无数据
|
if (hasSearched && listData.length === 0 && !loading) {
|
return renderEmptyState();
|
}
|
|
// 搜索中
|
if (loading && page === 1) {
|
return (
|
<div className="query-loading">
|
<div className="query-loading-text">加载中...</div>
|
</div>
|
);
|
}
|
|
// 搜索后有数据
|
return (
|
<Scrollbars style={{ height: 'calc(100vh - 155px)' }}>
|
<MyList
|
data={listData}
|
dataTotal={totalCount}
|
hasMore={hasMore}
|
loadMore={loadMoreData}
|
itemDom={renderListItem}
|
threshold={100}
|
showBottomText={true}
|
/>
|
</Scrollbars>
|
);
|
};
|
|
return (
|
<NavBarPage title="综合查询" showBackArrow={true}>
|
<div className="query-container">
|
<div className="query-header">
|
<div
|
className="query-search"
|
style={{
|
display: 'flex',
|
alignItems: 'center',
|
background: '#F2F3F5',
|
borderRadius: 8,
|
padding: '2px 10px',
|
height: 32,
|
margin: '8px 12px',
|
}}
|
>
|
<span style={{ color: '#bfc2cc', marginRight: 6, fontSize: 18 }} className="iconfont icon-search" />
|
<SearchOutlined style={{ color: '#bfc2cc', marginRight: 6, fontSize: 18 }} />
|
<InputItem
|
placeholder="申请方/被申请方/事项编号"
|
clear
|
maxLength={50}
|
value={keyword}
|
onChange={(val) => setKeyword(val)}
|
className="query-search-input"
|
style={{
|
flex: 1,
|
background: 'transparent',
|
border: 'none',
|
fontSize: 15,
|
}}
|
/>
|
<button className="custom-action-btn" onClick={handleSearch}>
|
查询
|
</button>
|
</div>
|
<div className="query-actions">
|
<button className="custom-action-btn" onClick={handleOpenFilter}>
|
<img src={workStatistics_5} alt="" className="settings-icon" />
|
<span>更多</span>
|
</button>
|
</div>
|
</div>
|
{/* 新增：有查询结果时显示总数 */}
|
{hasSearched && listData.length > 0 && (
|
<div className="query-total-count">
|
共<span className="query-total-count-number">{totalCount}</span>条记录
|
</div>
|
)}
|
<div className="query-content">{renderContent()}</div>
|
|
{renderFilterModal()}
|
{renderSelectorModal()}
|
{renderDateTypeModal()}
|
{renderDatePickerModal()}
|
</div>
|
</NavBarPage>
|
);
|
};
|
|
export default CaseQuery;
|
