/*
|
* @Author: 韩天尊大人专属AI
|
* @Date: 2025-05-20
|
* @Version: 1.0.0
|
* @Description: 已办事项页面
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Button, Modal, InputItem, 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 { SearchOutlined, CloseOutlined } from 'dd-icons';
|
import './index.less';
|
import caseTypeSelect from '../../utils/caseTypeSelect';
|
import selectOption from '../../utils/selectOption';
|
import { workStatistics_5 } from '../../assets/img';
|
|
// 获取已办数量统计接口
|
function countYbTaskAllApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/countYbTaskAll',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 全部已办接口
|
function pageMyTaskAllApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/pageMyTaskAll',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 已合并接口
|
function pageCaseRepeatHbApi(data) {
|
return $$.ax.request({
|
url: 'caseRepeatInfo/pageCaseRepeatHb',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 已分派接口
|
function pageMyTaskFpApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/pageMyTaskFp',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 受理接口
|
function pageMyTaskSlApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/pageMyTaskSl',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 已结案接口
|
function pageMyTaskBlzApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/pageMyTaskBlz',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 审核接口
|
function pageMyTaskShApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/pageMyTaskSh',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 我发起的审核接口
|
function pageMyTaskShWSQDApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/pageMyTaskShWSQD',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 督办接口
|
function pageMyTaskDbApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/pageMyTaskDb',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 时间类型选项
|
const dateTypeOptions = [
|
{ value: 'custom', label: '自定义' },
|
{ value: 'lastMonth', label: '上月' },
|
{ value: 'lastWeek', label: '上周' },
|
{ value: 'thisMonth', label: '本月' },
|
{ value: 'thisWeek', label: '本周' },
|
{ value: 'thisYear', label: '本年度' },
|
{ value: 'lastYear', label: '上年度' },
|
];
|
|
const CaseYb = () => {
|
const history = useHistory();
|
|
// Tab状态
|
const [activeTab, setActiveTab] = useState('all');
|
|
// 搜索关键词
|
const [keyword, setKeyword] = useState('');
|
|
// 统计数据
|
const [countData, setCountData] = useState({
|
allYbTask: 0,
|
ybMerge: 0,
|
ybDispatch: 0,
|
ybAccept: 0,
|
ybClosed: 0,
|
ybAudit: 0,
|
ybSupervise: 0,
|
});
|
|
// 列表数据
|
const [listData, setListData] = useState([]);
|
const [loading, setLoading] = useState(false);
|
const [hasMore, setHasMore] = useState(true);
|
const [page, setPage] = useState(1);
|
const [totalCount, setTotalCount] = useState(0);
|
|
// 筛选弹窗
|
const [filterVisible, setFilterVisible] = useState(false);
|
|
// 查询参数
|
const [queryParams, setQueryParams] = useState({
|
page: 1,
|
size: 10,
|
status: 2,
|
caseStatus: '',
|
sortType: 2,
|
sortColmn: 1,
|
partyName: '',
|
statisticsTime: '',
|
caseType: '',
|
plaintiffs: '',
|
defendants: '',
|
caseSource: '',
|
caseGrade: '',
|
});
|
|
// 按钮状态
|
const [activeButton, setActiveButton] = useState(1); // 1: 已受理, 2: 不予受理
|
const [activeClosedButton, setActiveClosedButton] = useState(1); // 1: 我承办的, 2: 我配合的
|
const [activeAuditButton, setActiveAuditButton] = useState(1); // 1: 回退审核, 2: 上报审核, 3: 结案审核, 4: 联合处置审核
|
const [activeSuperviseButton, setActiveSuperviseButton] = useState(1); // 1: 已办理, 2: 我发起的
|
const [dateTypeTarget, setDateTypeTarget] = useState('');
|
const [dateTypeModalVisible, setDateTypeModalVisible] = useState(false);
|
|
// 日期选择相关状态
|
const [datePickerVisible, setDatePickerVisible] = useState(false);
|
const [currentDateType, setCurrentDateType] = useState('');
|
|
// 高级筛选参数
|
const [advancedParams, setAdvancedParams] = useState({
|
handleTimeStart: '',
|
handleTimeEnd: '',
|
caseType: '',
|
plaintiffs: '',
|
defendants: '',
|
canal: '',
|
caseStatus: '',
|
mediResult: '',
|
caseLevel: '',
|
});
|
|
// Tab配置
|
const tabConfig = {
|
all: {
|
text: '全部',
|
countKey: 'allYbTask',
|
api: pageMyTaskAllApi,
|
},
|
merge: {
|
text: '已合并',
|
countKey: 'ybMerge',
|
api: pageCaseRepeatHbApi,
|
},
|
dispatch: {
|
text: '已分派',
|
countKey: 'ybDispatch',
|
api: pageMyTaskFpApi,
|
},
|
accept: {
|
text: '受理',
|
countKey: 'ybAccept',
|
api: pageMyTaskSlApi,
|
},
|
closed: {
|
text: '已结案',
|
countKey: 'ybClosed',
|
api: pageMyTaskBlzApi,
|
},
|
audit: {
|
text: '审核',
|
countKey: 'ybAudit',
|
api: pageMyTaskShApi,
|
},
|
supervise: {
|
text: '督办',
|
countKey: 'ybSupervise',
|
api: pageMyTaskDbApi,
|
},
|
};
|
|
// 获取统计数据
|
const fetchCountData = async (params) => {
|
try {
|
const res = await countYbTaskAllApi(params);
|
if (res.type) {
|
setCountData(res.data);
|
}
|
} catch (error) {
|
$$.infoError('获取统计数据失败');
|
}
|
};
|
|
// 获取列表数据
|
const fetchListData = async (currentPage, tab, params = {}, type, buttonType) => {
|
setLoading(true);
|
try {
|
const currentTab = tabConfig[tab];
|
let api = currentTab.api;
|
|
// 处理不同tab的特殊参数
|
let requestParams = {
|
...queryParams,
|
...params,
|
page: currentPage,
|
size: 10,
|
};
|
|
// 处理不同状态的参数
|
switch (tab) {
|
case 'accept':
|
requestParams.status = buttonType === 2 ? 3 : 2;
|
break;
|
case 'closed':
|
requestParams.status = 1;
|
requestParams.caseTaskType = buttonType === 2 ? 2 : 1;
|
break;
|
case 'audit':
|
requestParams.status = 1;
|
requestParams.type = buttonType === 4 ? 4 : buttonType === 3 ? 3 : buttonType === 2 ? 2 : 1;
|
if (buttonType === 5) {
|
// 我发起的
|
api = pageMyTaskShWSQDApi;
|
}
|
break;
|
case 'supervise':
|
requestParams.status = activeSuperviseButton === 1 ? 1 : 3;
|
break;
|
default:
|
break;
|
}
|
|
console.log('api', api);
|
|
const res = await api(requestParams);
|
|
if (res.type) {
|
const { content, totalElements, last } = res.data;
|
if (currentPage === 1) {
|
setListData(content || []);
|
} else {
|
setListData((prev) => [...prev, ...(content || [])]);
|
}
|
setTotalCount(totalElements);
|
setActiveTab(tab);
|
setHasMore(!last);
|
setPage(currentPage);
|
fetchCountData(requestParams);
|
}
|
} catch (error) {
|
$$.infoError('获取列表数据失败');
|
} finally {
|
setLoading(false);
|
global.setSpinning(false);
|
}
|
};
|
|
// 搜索处理
|
const handleSearch = () => {
|
setQueryParams((prev) => ({ ...prev, partyName: keyword }));
|
fetchListData(1, activeTab, { partyName: keyword });
|
};
|
|
// 加载更多
|
const loadMoreData = () => {
|
if (!hasMore || loading) return;
|
fetchListData(page + 1, activeTab);
|
};
|
|
// 筛选相关处理
|
const handleOpenFilter = () => setFilterVisible(true);
|
const handleCloseFilter = () => setFilterVisible(false);
|
|
// 重置筛选
|
const handleResetFilter = () => {
|
setAdvancedParams({
|
handleTimeStart: '',
|
handleTimeEnd: '',
|
caseType: '',
|
plaintiffs: '',
|
defendants: '',
|
canal: '',
|
caseStatus: '',
|
mediResult: '',
|
caseLevel: '',
|
});
|
setQueryParams((prev) => ({
|
...prev,
|
statisticsTime: '',
|
caseType: '',
|
plaintiffs: '',
|
defendants: '',
|
caseSource: '',
|
caseGrade: '',
|
}));
|
handleCloseFilter();
|
fetchListData(1);
|
};
|
|
const handleApplyFilter = () => {
|
// 确保日期参数正确传递
|
const params = {
|
...advancedParams,
|
page: 1,
|
size: 10,
|
sortColmn: '1',
|
sortType: '2',
|
};
|
|
// 打印参数检查
|
console.log('查询参数:', params);
|
|
fetchListData(1, activeTab, params);
|
handleCloseFilter();
|
};
|
|
// Tab切换处理
|
const handleTabChange = (tab) => {
|
setActiveTab(tab);
|
setPage(1);
|
setListData([]);
|
global.setSpinning(true);
|
fetchListData(1, tab);
|
};
|
|
// 按钮点击处理
|
const handleButtonClick = (type, buttonType) => {
|
switch (type) {
|
case 'accept':
|
setActiveButton(buttonType);
|
break;
|
case 'closed':
|
setActiveClosedButton(buttonType);
|
break;
|
case 'audit':
|
setActiveAuditButton(buttonType);
|
break;
|
case 'supervise':
|
setActiveSuperviseButton(buttonType);
|
break;
|
default:
|
break;
|
}
|
setPage(1);
|
setListData([]);
|
global.setSpinning(true);
|
fetchListData(1, activeTab, {}, type, buttonType);
|
};
|
|
// 跳转详情
|
const handleGoToDetail = (item) => {
|
history.push(`/gzdyh/flow?caseTaskId=${item.ownerId}&caseId=${item.caseId}&editShow=false`);
|
};
|
|
// 渲染列表项
|
const renderListItem = (item) => {
|
// 事项等级
|
const getGradeText = (grade) => {
|
switch (grade) {
|
case 1:
|
return '一级';
|
case 2:
|
return '二级';
|
case 3:
|
return '三级';
|
case 4:
|
return '四级';
|
case 5:
|
return '五级';
|
default:
|
return grade;
|
}
|
};
|
// 格式化时间
|
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');
|
const hours = String(date.getHours()).padStart(2, '0');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
};
|
|
return (
|
<div className="case-yb-list-item" onClick={() => handleGoToDetail(item)}>
|
<div className="case-yb-list-item-parties">
|
<div className="case-yb-list-item-plaintiffs">{item.plaintiffs}</div>
|
{item.defendants && (
|
<>
|
<div className="case-yb-list-item-parties-separator">、</div>
|
<div className="case-yb-list-item-defendants">{item.defendants}</div>
|
</>
|
)}
|
</div>
|
<div className="case-yb-list-item-time">{formatTime(item.turnaroundTime)}</div>
|
<div className="case-yb-list-item-tags">
|
{item.taskTypeName && <div className="case-yb-list-item-tag-type">{item.taskTypeName}</div>}
|
<div className="case-yb-list-item-tag">{item.caseType}</div>
|
{item.isRisk === '1' && <div className="case-yb-list-item-tag-timeout">风险</div>}
|
{item.superviseCount > 0 && <div className="case-yb-list-item-tag-supervise">督办</div>}
|
</div>
|
<div className="case-yb-list-item-info">
|
<div className="case-yb-list-item-address">
|
{item.caseSource} | {getGradeText(item.caseGrade)}
|
</div>
|
<div className="case-yb-list-item-action">
|
<div className="case-yb-list-item-action-btn">详情</div>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
// 渲染Tab下方按钮
|
const renderTabButtons = () => {
|
const buttonConfigs = {
|
accept: [
|
{ id: 1, text: '已受理' },
|
{ id: 2, text: '不予受理' },
|
],
|
closed: [
|
{ id: 1, text: '我承办的' },
|
{ id: 2, text: '我配合的' },
|
],
|
audit: [
|
{ id: 1, text: '回退审核' },
|
{ id: 2, text: '上报审核' },
|
{ id: 3, text: '结案审核' },
|
{ id: 4, text: '联合处置审核' },
|
{ id: 5, text: '我发起的' },
|
],
|
supervise: [
|
{ id: 1, text: '已办理' },
|
{ id: 2, text: '我发起的' },
|
],
|
};
|
|
const buttons = buttonConfigs[activeTab];
|
if (!buttons) return null;
|
|
let activeButtonState;
|
switch (activeTab) {
|
case 'accept':
|
activeButtonState = activeButton;
|
break;
|
case 'closed':
|
activeButtonState = activeClosedButton;
|
break;
|
case 'audit':
|
activeButtonState = activeAuditButton;
|
break;
|
case 'supervise':
|
activeButtonState = activeSuperviseButton;
|
break;
|
default:
|
return null;
|
}
|
|
return (
|
<div className="case-yb-list-buttons">
|
{buttons.map((button) => (
|
<div
|
key={button.id}
|
className={`case-yb-list-button${activeButtonState === button.id ? ' active' : ''}`}
|
onClick={() => handleButtonClick(activeTab, button.id)}
|
>
|
{button.text}
|
</div>
|
))}
|
</div>
|
);
|
};
|
|
// 计算时间范围
|
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;
|
}
|
const format = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
return [format(start), format(end)];
|
};
|
|
// 选择时间类型
|
const handleDateTypeSelect = (type) => {
|
setDateTypeModalVisible(false);
|
if (type === 'custom') {
|
setCurrentDateType(dateTypeTarget);
|
setDatePickerVisible(true);
|
} else {
|
const [start, end] = getDateRangeByType(type);
|
if (dateTypeTarget === 'create') {
|
setAdvancedParams((prev) => ({ ...prev, handleTimeStart: start, handleTimeEnd: end }));
|
}
|
}
|
};
|
|
// 处理日期选择
|
const handleDateChange = (dates) => {
|
if (!dates || dates.length !== 2) return;
|
const formatDate = (date) => (date && date.key ? date.key : '');
|
const formattedStart = formatDate(dates[0]);
|
const formattedEnd = formatDate(dates[1]);
|
setAdvancedParams((prev) => ({
|
...prev,
|
handleTimeStart: currentDateType === 'create' ? formattedStart : prev.handleTimeStart,
|
handleTimeEnd: currentDateType === 'create' ? formattedEnd : prev.handleTimeEnd,
|
}));
|
setDatePickerVisible(false);
|
};
|
|
// 时间类型选择弹窗渲染
|
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={() => setDatePickerVisible(false)} onClickDate={handleDateChange} />
|
</Modal>
|
);
|
|
// 打开时间类型弹窗
|
const handleOpenDateTypeModal = (target) => {
|
setDateTypeTarget(target);
|
setDateTypeModalVisible(true);
|
};
|
|
// 筛选弹窗
|
const renderFilterModal = () => (
|
<Modal
|
visible={filterVisible}
|
onClose={handleCloseFilter}
|
className="registerhis-filter-modal"
|
position="bottom"
|
maskClosable={true}
|
popup
|
transparent={false}
|
>
|
<div className="registerhis-filter-content">
|
<div className="registerhis-filter-item">
|
<div className="registerhis-filter-label">统计时间</div>
|
<div className="registerhis-filter-selector" onClick={() => handleOpenDateTypeModal('create')}>
|
{advancedParams.handleTimeStart && advancedParams.handleTimeEnd ? (
|
<span style={{ color: '#171A1D' }}>{`${advancedParams.handleTimeStart}-${advancedParams.handleTimeEnd}`}</span>
|
) : (
|
'请选择'
|
)}
|
</div>
|
</div>
|
<div className="registerhis-filter-item">
|
<div className="registerhis-filter-label">纠纷类型</div>
|
<Picker
|
data={caseTypeSelect.caseTypeSelect}
|
cols={2}
|
cascade={true}
|
title="纠纷类型"
|
value={advancedParams.caseType ? [advancedParams.caseType] : []}
|
okText="确定"
|
onOk={(valArr) => {
|
const value = valArr.filter(Boolean).slice(-1)[0];
|
setAdvancedParams((prev) => ({ ...prev, caseType: value }));
|
}}
|
>
|
<div className="registerhis-filter-selector">
|
{(() => {
|
let label = '';
|
caseTypeSelect.caseTypeSelect.forEach((item) => {
|
if (item.value === advancedParams.caseType) {
|
label = item.label;
|
} else if (item.children) {
|
const child = item.children.find((child) => child.value === advancedParams.caseType);
|
if (child) label = child.label;
|
}
|
});
|
return label || '请选择';
|
})()}
|
<div className="filter-arrow"></div>
|
</div>
|
</Picker>
|
</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="registerhis-filter-item">
|
<div className="registerhis-filter-label">申请方</div>
|
<div className="registerhis-filter-input">
|
<InputItem
|
placeholder="请填写"
|
value={advancedParams.plaintiffs}
|
onChange={(val) => setAdvancedParams((prev) => ({ ...prev, plaintiffs: val }))}
|
clear
|
/>
|
</div>
|
</div>
|
<div className="registerhis-filter-item">
|
<div className="registerhis-filter-label">被申请方</div>
|
<div className="registerhis-filter-input">
|
<InputItem
|
placeholder="请填写"
|
value={advancedParams.defendants}
|
onChange={(val) => setAdvancedParams((prev) => ({ ...prev, defendants: val }))}
|
clear
|
/>
|
</div>
|
</div>
|
<div className="registerhis-filter-item">
|
<div className="registerhis-filter-label">事项状态</div>
|
<Picker
|
data={selectOption.caseStatus}
|
cols={1}
|
title="事项状态"
|
value={advancedParams.caseStatus ? [advancedParams.caseStatus] : []}
|
okText="确定"
|
onOk={(valArr) => setAdvancedParams((prev) => ({ ...prev, caseStatus: valArr[0] }))}
|
>
|
<div className="registerhis-filter-selector">
|
{selectOption.caseStatus.find((i) => i.value === advancedParams.caseStatus)?.label || '请选择'}
|
<div className="filter-arrow"></div>
|
</div>
|
</Picker>
|
</div>
|
<div className="registerhis-filter-item">
|
<div className="registerhis-filter-label">事项来源</div>
|
<Picker
|
data={selectOption.caseCanal}
|
cols={1}
|
title="事项来源"
|
value={advancedParams.canal ? [advancedParams.canal] : []}
|
okText="确定"
|
onOk={(valArr) => setAdvancedParams((prev) => ({ ...prev, canal: valArr[0] }))}
|
>
|
<div className="registerhis-filter-selector">
|
{selectOption.caseCanal.find((i) => i.value === advancedParams.canal)?.label || '请选择'}
|
<div className="filter-arrow"></div>
|
</div>
|
</Picker>
|
</div>
|
<div className="registerhis-filter-item">
|
<div className="registerhis-filter-label">事项等级</div>
|
<Picker
|
data={selectOption.caseLevelList}
|
cols={1}
|
title="事项等级"
|
value={advancedParams.caseLevel ? [advancedParams.caseLevel] : []}
|
okText="确定"
|
onOk={(valArr) => setAdvancedParams((prev) => ({ ...prev, caseLevel: valArr[0] }))}
|
>
|
<div className="registerhis-filter-selector">
|
{selectOption.caseLevelList.find((i) => i.value === advancedParams.caseLevel)?.label || '请选择'}
|
<div className="filter-arrow"></div>
|
</div>
|
</Picker>
|
</div>
|
<div className="registerhis-filter-item">
|
<div className="registerhis-filter-label">化解结果</div>
|
<Picker
|
data={selectOption.mediResult}
|
cols={1}
|
title="化解结果"
|
value={advancedParams.mediResult ? [advancedParams.mediResult] : []}
|
okText="确定"
|
onOk={(valArr) => setAdvancedParams((prev) => ({ ...prev, mediResult: valArr[0] }))}
|
>
|
<div className="registerhis-filter-selector">
|
{selectOption.mediResult.find((i) => i.value === advancedParams.mediResult)?.label || '请选择'}
|
<div className="filter-arrow"></div>
|
</div>
|
</Picker>
|
</div>
|
</div>
|
<div className="registerhis-filter-buttons">
|
<Button className="registerhis-filter-reset" onClick={handleResetFilter}>
|
重置
|
</Button>
|
<Button className="registerhis-filter-apply" type="primary" onClick={handleApplyFilter}>
|
查询
|
</Button>
|
</div>
|
</Modal>
|
);
|
|
useEffect(() => {
|
fetchListData(1, activeTab);
|
}, []);
|
|
return (
|
<div className="case-yb-page">
|
<NavBarPage title="已办事项" />
|
{/* 顶部查询区域，完全复用登记历史页面结构和样式 */}
|
<div className="registerhis-header">
|
<div className="registerhis-search">
|
<SearchOutlined style={{ color: '#bfc2cc', marginRight: 6, fontSize: 18 }} />
|
<InputItem
|
placeholder="申请方/被申请方/事项编号"
|
clear
|
maxLength={50}
|
value={keyword}
|
onChange={(val) => setKeyword(val)}
|
className="registerhis-search-input"
|
style={{ flex: 1, background: 'transparent', border: 'none', fontSize: 15 }}
|
onEnterPress={handleSearch}
|
/>
|
<button className="registerhis-action-btn" onClick={handleSearch}>
|
查询
|
</button>
|
</div>
|
<div className="registerhis-actions">
|
<button className="registerhis-action-btn" onClick={() => setFilterVisible(true)}>
|
{/* 这里建议引入登记历史的workStatistics_5图标，如无可用可省略 */}
|
<img src={workStatistics_5} alt="" className="settings-icon" />
|
<span>更多</span>
|
</button>
|
</div>
|
</div>
|
{/* Tab栏 */}
|
<div className="case-yb-tabs">
|
{Object.entries(tabConfig).map(([key, config]) => (
|
<div key={key} className={`case-yb-tab ${activeTab === key ? 'case-yb-tab-active' : ''}`} onClick={() => handleTabChange(key)}>
|
<div className="case-yb-tab-text">{config.text}</div>
|
{config.countKey && <div className="case-yb-tab-count">({countData[config.countKey] || 0})</div>}
|
</div>
|
))}
|
</div>
|
{/* Tab下方按钮组 */}
|
{renderTabButtons()}
|
{/* 列表内容 */}
|
<div className="case-yb-list">
|
<Scrollbars
|
style={{
|
height:
|
activeTab === 'accept'
|
? 'calc(100vh - 200px)'
|
: activeTab === 'closed'
|
? 'calc(100vh - 200px)'
|
: activeTab === 'audit'
|
? 'calc(100vh - 240px)'
|
: activeTab === 'supervise'
|
? 'calc(100vh - 200px)'
|
: 'calc(100vh - 160px)',
|
}}
|
>
|
<MyList
|
data={listData}
|
dataTotal={totalCount}
|
hasMore={hasMore}
|
loadMore={loadMoreData}
|
itemDom={renderListItem}
|
threshold={100}
|
showBottomText={true}
|
/>
|
</Scrollbars>
|
</div>
|
{/* 筛选弹窗 */}
|
{renderFilterModal()}
|
{renderDateTypeModal()}
|
{renderDatePickerModal()}
|
</div>
|
);
|
};
|
|
export default CaseYb;
|
