/*
|
* @Author: zhouxt
|
* @Date: 2025-04-10 09:28:00
|
* @LastEditTime: 2025-05-23 16:12:10
|
* @LastEditors: lwh
|
* @Description: 粤政易首页
|
*/
|
import React, { useState, useEffect, useRef } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Swiper, Toast, Drawer, Button, Popguide, TextareaItem, InputItem } from 'dingtalk-design-mobile';
|
import { Scrollbars } from 'react-custom-scrollbars';
|
import * as $$ from '../../utils/utility';
|
import NavBarPage from '../../components/NavBarPage';
|
import MyList from '../../components/MyList';
|
import { home_1, home_2, home_3, home_4, home_5, home_6, home_7, home_8, home_9, home_11, caseQuery_2 } from '../../assets/img';
|
import DingUpload from '../../components/DingUpload';
|
import './index.less';
|
import { getNewTimeCaseId } from '../../api/caseApi';
|
|
// 获取任务数量接口
|
function getCountListApi() {
|
return $$.ax.request({
|
url: 'caseTask/getCountList',
|
type: 'get',
|
service: 'mediate',
|
});
|
}
|
|
// 全部待办接口
|
function pageMyTaskAllApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/pageMyTaskAll',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 待合并接口
|
function pageMyTaskHbApi(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 pageMyTaskDbApi(data) {
|
return $$.ax.request({
|
url: 'caseTask/pageMyTaskDb',
|
type: 'get',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 获取督办详情API
|
function getSuperviseDetailApi(id) {
|
return $$.ax.request({
|
url: `caseSupervise/getById?id=${id}`,
|
type: 'get',
|
service: 'mediate',
|
});
|
}
|
|
// 回复督办API
|
function replyCaseSuperviseApi(data) {
|
return $$.ax.request({
|
url: 'caseSupervise/replyCaseSupervise',
|
type: 'post',
|
data,
|
service: 'mediate',
|
});
|
}
|
|
// 获取标签API
|
function getLabelApi(caseId) {
|
return $$.ax.request({
|
url: `caseTask/getLabel?caseId=${caseId}`,
|
type: 'get',
|
service: 'mediate',
|
});
|
}
|
|
const Home = () => {
|
const history = useHistory();
|
|
// Tab 状态
|
const [activeTab, setActiveTab] = useState('all'); // 'all','merge','dispatch','accept','processing','review','supervise'
|
|
// 任务数量
|
const [countData, setCountData] = useState({
|
allTask: 0,
|
waitDisp: 0,
|
waitAccept: 0,
|
Processing: 0,
|
waitReview: 0,
|
supervise: 0,
|
});
|
|
// 列表数据
|
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 [searchParams, setSearchParams] = useState({
|
caseTaskType: '1',
|
caseTaskTypeName: '我承办的',
|
mediatorType: '0',
|
mediatorTypeName: '本部门办理',
|
});
|
|
// 请求参数
|
const [queryParams, setQueryParams] = useState({
|
page: 1,
|
size: 10,
|
status: 1,
|
sortType: 2,
|
sortColmn: 1,
|
type: 1,
|
caseTaskType: 1,
|
});
|
|
// 添加按钮选中状态
|
const [activeButton, setActiveButton] = useState(1); // 1: 我承办的, 2: 我配合的
|
const [activeReviewButton, setActiveReviewButton] = useState(1); // 1: 回退审核, 2: 上报审核, 3: 结案审核, 4: 联合处置审核
|
|
// 滑动图片
|
const carouselItems = [
|
{ id: 1, src: home_1, alt: '轮播图1' },
|
{ id: 2, src: home_1, alt: '轮播图2' },
|
{ id: 3, src: home_1, alt: '轮播图3' },
|
];
|
|
// 底部导航项
|
const bottomNavItems = [
|
{ id: 'home', icon: home_6, text: '首页', path: '/gzdyh/home' },
|
{ id: 'message', icon: home_7, text: '消息', path: '/gzdyh/message' },
|
{ id: 'count', icon: home_8, text: '统计', path: '/gzdyh/workStatistics' },
|
{ id: 'personCenter', icon: home_9, text: '我的', path: '/gzdyh/personCenter' },
|
];
|
|
// 功能按钮项
|
const functionItems = [
|
{ id: 'register', icon: home_2, text: '登记', path: '/gzdyh/Naturepersonnone' },
|
{ id: 'done', icon: home_3, text: '已办事项', path: '/gzdyh/caseYb' },
|
{ id: 'query', icon: home_4, text: '综合查询', path: '/gzdyh/caseQuery' },
|
{ id: 'draft', icon: home_5, text: '草稿箱', path: '/gzdyh/draftBox' },
|
];
|
|
// Tab 列表项
|
const tabItems = [
|
{ id: 'all', text: '全部', countKey: 'allTask', apiFunc: pageMyTaskAllApi },
|
{ id: 'merge', text: '待合并', countKey: null, apiFunc: pageMyTaskHbApi },
|
{ id: 'dispatch', text: '待分派', countKey: 'waitDisp', apiFunc: pageMyTaskFpApi },
|
{ id: 'accept', text: '待受理', countKey: 'waitAccept', apiFunc: pageMyTaskSlApi },
|
{ id: 'processing', text: '办理中', countKey: 'processing', apiFunc: pageMyTaskBlzApi },
|
{ id: 'review', text: '待审核', countKey: 'waitReview', apiFunc: pageMyTaskShApi },
|
{ id: 'supervise', text: '督办', countKey: 'supervise', apiFunc: pageMyTaskDbApi },
|
];
|
|
// 督办回复相关状态
|
const [superviseReplyVisible, setSuperviseReplyVisible] = useState(false);
|
const [currentSupervise, setCurrentSupervise] = useState(null);
|
const [replyContent, setReplyContent] = useState('');
|
const [attachments, setAttachments] = useState([]);
|
const [superviseLoading, setSuperviseLoading] = useState(false);
|
|
// 风险标签相关状态
|
const [labelVisible, setLabelVisible] = useState(false);
|
const [labelInfo, setLabelInfo] = useState({
|
personLabel: '',
|
caseLabel: '',
|
});
|
const [currentCaseId, setCurrentCaseId] = useState(null);
|
|
// 筛选弹窗相关状态
|
const [filterVisible, setFilterVisible] = useState(false);
|
const [filterRole, setFilterRole] = useState(1); // 1:我承办的 2:我配合的
|
const [filterScope, setFilterScope] = useState(1); // 1:本部门办理 2:本人办理 3:未指派经办人
|
|
// 初始化加载数据
|
// useEffect(() => {
|
// fetchCountData();
|
// fetchListData(1, activeTab, queryParams);
|
// }, []);
|
|
useEffect(() => {
|
if ($$.getSessionStorage('visitWorkBench')) {
|
const { tabId, params } = $$.getSessionStorage('visitWorkBench');
|
fetchCountData();
|
fetchListData(1, tabId, params);
|
$$.clearSessionStorage('visitWorkBench');
|
} else {
|
fetchCountData();
|
fetchListData(1, activeTab, queryParams);
|
}
|
}, []);
|
|
// 获取任务数量数据
|
const fetchCountData = async () => {
|
try {
|
const res = await getCountListApi();
|
if (res.type) {
|
setCountData(res.data || {});
|
}
|
} catch (error) {
|
console.error('获取任务数量失败', error);
|
}
|
};
|
|
// 获取列表数据
|
const fetchListData = async (currentPage, tabId, listParams) => {
|
// 根据当前选中的tab，获取对应的api函数
|
const currentTab = tabItems.find((tab) => tab.id === tabId);
|
if (!currentTab || !currentTab.apiFunc) return;
|
|
setLoading(true);
|
|
try {
|
const params = { ...listParams, page: currentPage };
|
|
// 当tab为supervise时，设置status=0
|
if (tabId === 'supervise' || tabId === 'review') {
|
params.status = 0;
|
} else {
|
params.status = 1;
|
}
|
|
const res = await currentTab.apiFunc(params);
|
|
if (res.type) {
|
const { content, totalElements, totalPages, last } = res.data;
|
|
// 确保返回的数据不为空
|
const dataList = content || [];
|
|
if (currentPage === 1) {
|
// 第一页数据，直接设置
|
setListData(dataList);
|
} else {
|
// 加载更多数据
|
setListData((prev) => [...prev, ...dataList]);
|
}
|
setActiveTab(tabId);
|
setTotalCount(totalElements);
|
setTotalPages(totalPages);
|
setHasMore(!last);
|
setPage(currentPage);
|
setQueryParams(listParams);
|
}
|
} catch (error) {
|
console.error('获取列表数据失败', error);
|
Toast.show({
|
content: '获取数据失败，请稍后重试',
|
position: 'bottom',
|
});
|
} finally {
|
setLoading(false);
|
setRefreshing(false);
|
}
|
};
|
|
// 下拉刷新
|
const handleRefresh = () => {
|
setRefreshing(true);
|
fetchCountData();
|
fetchListData(1, activeTab, queryParams);
|
setTimeout(() => {
|
setRefreshing(false);
|
}, 1000);
|
};
|
|
// 加载更多
|
const loadMoreData = (callback) => {
|
if (loading || !hasMore) {
|
if (callback) callback();
|
return;
|
}
|
|
setLoading(true);
|
fetchListData(page + 1, activeTab, queryParams)
|
.then(() => {
|
if (callback) callback();
|
})
|
.catch(() => {
|
if (callback) callback();
|
});
|
};
|
|
// 跳转到详情页
|
const handleGoToDetail = async (item) => {
|
if (!item) return;
|
|
// 督办标签处理
|
if (activeTab === 'supervise') {
|
try {
|
setSuperviseLoading(true);
|
const res = await getSuperviseDetailApi(item.ownerId);
|
if (res.type) {
|
setCurrentSupervise(res.data);
|
setSuperviseReplyVisible(true);
|
} else {
|
Toast.show({
|
content: '获取督办详情失败',
|
position: 'bottom',
|
});
|
}
|
} catch (error) {
|
console.error('获取督办详情失败', error);
|
Toast.show({
|
content: '获取督办详情失败，请稍后重试',
|
position: 'bottom',
|
});
|
} finally {
|
setSuperviseLoading(false);
|
}
|
return;
|
}
|
|
// 全部标签处理
|
if (activeTab === 'all') {
|
if (item.taskTypeName === '督办') {
|
try {
|
setSuperviseLoading(true);
|
const res = await getSuperviseDetailApi(item.ownerId);
|
if (res.type) {
|
setCurrentSupervise(res.data);
|
setSuperviseReplyVisible(true);
|
} else {
|
Toast.show({
|
content: '获取督办详情失败',
|
position: 'bottom',
|
});
|
}
|
} catch (error) {
|
console.error('获取督办详情失败', error);
|
Toast.show({
|
content: '获取督办详情失败，请稍后重试',
|
position: 'bottom',
|
});
|
} finally {
|
setSuperviseLoading(false);
|
}
|
return;
|
}
|
|
// 其他类型的跳转
|
let path = `/gzdyh/flow?caseTaskId=${item.ownerId}&caseId=${item.caseId}&editShow=true`;
|
if (item.taskType) {
|
path += `&moutedTab=${item.taskType}`;
|
}
|
history.push(path);
|
return;
|
}
|
|
// 其他标签的处理
|
let path = '';
|
switch (activeTab) {
|
case 'merge':
|
path = `/gzdyh/flow?caseTaskId=${item.ownerId}&caseId=${item.caseId}&editShow=true&moutedTab=hbcl`;
|
break;
|
case 'dispatch':
|
path = `/gzdyh/flow?caseTaskId=${item.ownerId}&caseId=${item.caseId}&editShow=true&moutedTab=dslxq`;
|
break;
|
case 'accept':
|
path = `/gzdyh/flow?caseTaskId=${item.ownerId}&caseId=${item.caseId}&editShow=true&slTitle=true`;
|
break;
|
case 'processing':
|
path = `/gzdyh/flow?caseTaskId=${item.ownerId}&caseId=${item.caseId}&editShow=true&moutedTab=sxbl`;
|
break;
|
case 'review':
|
let reviewTab = '';
|
switch (activeReviewButton) {
|
case 1:
|
reviewTab = 'htsh';
|
break;
|
case 2:
|
reviewTab = 'sbsh';
|
break;
|
case 3:
|
reviewTab = 'jash';
|
break;
|
case 4:
|
reviewTab = 'lhczsh';
|
break;
|
default:
|
reviewTab = 'htsh';
|
}
|
path = `/gzdyh/flow?caseTaskId=${item.ownerId}&caseId=${item.caseId}&editShow=true&moutedTab=${reviewTab}`;
|
break;
|
default:
|
path = `/gzdyh/detail?caseId=${item.caseId}`;
|
}
|
$$.setSessionStorage('visitWorkBench', {
|
tabId: activeTab,
|
params: queryParams,
|
});
|
history.push(path);
|
};
|
|
// 关闭督办回复弹窗
|
const handleCloseSuperviseReply = () => {
|
setSuperviseReplyVisible(false);
|
setCurrentSupervise(null);
|
setReplyContent('');
|
setAttachments([]);
|
};
|
|
// 处理按钮点击
|
const handleButtonClick = (type) => {
|
if (type === 3) {
|
setFilterVisible(true);
|
return;
|
} else {
|
setActiveButton(type);
|
fetchListData(1, activeTab, { ...queryParams, caseTaskType: type });
|
}
|
};
|
|
// 处理审核按钮点击
|
const handleReviewButtonClick = (type) => {
|
setActiveReviewButton(type);
|
fetchListData(1, activeTab, { ...queryParams, type: type });
|
};
|
|
// 关闭标签气泡
|
const handleCloseLabelPopguide = () => {
|
setLabelVisible(false);
|
setCurrentCaseId(null);
|
};
|
|
// 处理风险标签点击
|
const handleRiskLabelClick = async (caseId) => {
|
try {
|
// 如果是同一个标签再次点击，直接关闭气泡
|
if (currentCaseId === caseId && labelVisible) {
|
setLabelVisible(false);
|
setCurrentCaseId(null);
|
return;
|
}
|
|
setCurrentCaseId(caseId);
|
|
const res = await getLabelApi(caseId);
|
if (res.type) {
|
setLabelInfo({
|
personLabel: res.data.personLabel || '',
|
caseLabel: res.data.caseLabel || '',
|
});
|
// 等数据加载完毕后再显示气泡
|
setTimeout(() => {
|
setLabelVisible(true);
|
}, 10);
|
} else {
|
Toast.show({
|
content: '获取标签信息失败',
|
position: 'bottom',
|
});
|
}
|
} catch (error) {
|
console.error('获取标签信息失败', error);
|
Toast.show({
|
content: '获取标签信息失败，请稍后重试',
|
position: 'bottom',
|
});
|
}
|
};
|
|
// 提交督办回复
|
const handleSubmitSuperviseReply = async () => {
|
if (!replyContent.trim()) {
|
Toast.show({
|
content: '请输入回复内容',
|
position: 'bottom',
|
});
|
return;
|
}
|
|
if (!currentSupervise) return;
|
|
const requestData = {
|
replyContent: replyContent,
|
id: currentSupervise.id,
|
};
|
|
try {
|
global.setSpinning(true);
|
const res = await replyCaseSuperviseApi(requestData);
|
global.setSpinning(false);
|
|
if (res.type) {
|
Toast.show({
|
content: '回复成功',
|
position: 'bottom',
|
});
|
handleCloseSuperviseReply();
|
fetchListData(1, activeTab, queryParams); // 刷新列表
|
} else {
|
Toast.show({
|
content: res.message || '回复失败',
|
position: 'bottom',
|
});
|
}
|
} catch (error) {
|
global.setSpinning(false);
|
console.error('提交督办回复失败', error);
|
Toast.show({
|
content: '网络异常，请稍后再试',
|
position: 'bottom',
|
});
|
}
|
};
|
|
// 使用回复模板
|
const handleUseTemplate = () => {
|
setReplyContent('双方当事人于xx时间xx地址已达成xx协议，纠纷已化解。');
|
};
|
|
// OCR识别材料
|
const handleOcrRecognize = () => {
|
Toast.show({
|
content: '正在识别材料...',
|
position: 'bottom',
|
});
|
|
// 模拟识别结果
|
setTimeout(() => {
|
setReplyContent(replyContent + (replyContent ? '\n\n' : '') + '通过识别，确认双方当事人已达成和解协议，纠纷已妥善处理。');
|
Toast.show({
|
content: '识别完成',
|
position: 'bottom',
|
});
|
}, 1000);
|
};
|
|
// 渲染顶部轮播图
|
const renderCarousel = () => {
|
return (
|
<div className="home-carousel">
|
<Swiper autoplay={true} loop={true}>
|
{carouselItems.map((item) => (
|
<Swiper.Item key={item.id}>
|
<div className="home-carousel-item">
|
<img src={item.src} alt={item.alt} />
|
</div>
|
</Swiper.Item>
|
))}
|
</Swiper>
|
</div>
|
);
|
};
|
|
// 渲染功能按钮
|
const renderFunctionButtons = () => {
|
return (
|
<div className="home-function-buttons">
|
{functionItems.map((item) => (
|
<div key={item.id} className="home-function-button-wrapper">
|
<div className="home-function-button" onClick={() => history.push(item.path)}>
|
<div className="home-function-button-icon">
|
<img src={item.icon} alt={item.text} />
|
</div>
|
</div>
|
<div className="home-function-button-text">{item.text}</div>
|
</div>
|
))}
|
</div>
|
);
|
};
|
|
// 渲染Tab栏
|
const renderTabs = () => {
|
return (
|
<div className="home-tabs">
|
{tabItems.map((tab) => {
|
const count = tab.countKey ? countData[tab.countKey] || 0 : 0;
|
const isActive = activeTab === tab.id;
|
|
return (
|
<div
|
key={tab.id}
|
className={`home-tab ${isActive ? 'home-tab-active' : ''}`}
|
onClick={() => {
|
fetchListData(1, tab.id, queryParams);
|
}}
|
>
|
<div className="home-tab-text">{tab.text}</div>
|
{isActive && count > 0 && <div className="home-tab-count">({count})</div>}
|
</div>
|
);
|
})}
|
</div>
|
);
|
};
|
|
// 渲染列表项
|
const renderListItem = (item, index) => {
|
// 转换事项等级
|
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}`;
|
};
|
|
// 判断时间状态
|
const getTimeStatus = () => {
|
if (!item.timeLimit) return null;
|
|
const now = new Date().getTime();
|
const limitTime = new Date(item.timeLimit).getTime();
|
|
if (now > limitTime) {
|
return 'timeout'; // 已超时
|
} else if (limitTime - now < 3600000) {
|
// 小于一小时(3600000毫秒)
|
return 'soon'; // 即将超时
|
}
|
return null;
|
};
|
|
// 获取标签列表
|
const getTagList = () => {
|
const tags = [];
|
|
// 时间状态标签 - 即将超时
|
if (getTimeStatus() === 'soon') {
|
tags.push({
|
text: '即将超时',
|
type: 'soon',
|
});
|
}
|
|
// 时间状态标签 - 已超时
|
if (getTimeStatus() === 'timeout') {
|
tags.push({
|
text: '已超时',
|
type: 'timeout',
|
});
|
}
|
|
// 督办标签
|
if (item.superviseCount > 0) {
|
tags.push({
|
text: '督办',
|
type: 'supervise',
|
});
|
}
|
|
return tags;
|
};
|
|
return (
|
<div className="home-list-item">
|
<div className="home-list-item-parties">
|
<div className="home-list-item-plaintiffs">{item.plaintiffs}</div>
|
{item.defendants && (
|
<>
|
<div className="home-list-item-parties-separator">、</div>
|
<div className="home-list-item-defendants">{item.defendants}</div>
|
</>
|
)}
|
</div>
|
<div className="home-list-item-time">{formatTime(item.turnaroundTime)}</div>
|
<div className="home-list-item-tags">
|
{activeTab === 'all' && item.taskTypeName && <div className="home-list-item-tag-type">{item.taskTypeName}</div>}
|
<div className="home-list-item-tag">{item.caseType}</div>
|
{activeTab === 'all' && item.isRisk === '1' && (
|
<Popguide
|
visible={labelVisible && currentCaseId === item.caseId}
|
onClose={handleCloseLabelPopguide}
|
title={
|
<div className="risk-label-content">
|
<div className="risk-label-item">
|
<span className="risk-label-title">人员标签：</span>
|
<span className="risk-label-value">({labelInfo.personLabel})</span>
|
</div>
|
<div className="risk-label-item">
|
<span className="risk-label-title">事项标签：</span>
|
<span className="risk-label-value">({labelInfo.caseLabel})</span>
|
</div>
|
</div>
|
}
|
placement="top"
|
getPopupContainer={() => document.querySelector('.home-container')}
|
>
|
<div className="home-list-item-tag-timeout" id={`risk-tag-${item.caseId}`} onClick={() => handleRiskLabelClick(item.caseId)}>
|
风险
|
</div>
|
</Popguide>
|
)}
|
</div>
|
<div className="home-list-item-info">
|
<div className="home-list-item-address">
|
{item.caseSource} | {getGradeText(item.caseGrade)}
|
</div>
|
<div className="home-list-item-action">
|
<div className="home-list-item-action-btn" onClick={() => handleGoToDetail(item)}>
|
处理
|
</div>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
// 渲染列表内容
|
const renderListContent = () => {
|
return (
|
<div className="home-list">
|
{activeTab === 'processing' && (
|
<div className="home-list-processing">
|
<div className="home-list-buttons">
|
<div className={`home-list-button ${activeButton === 1 ? 'active' : ''}`} onClick={() => handleButtonClick(1)}>
|
办理中
|
</div>
|
<div className={`home-list-button ${activeButton === 2 ? 'active' : ''}`} onClick={() => handleButtonClick(2)}>
|
结案申请
|
</div>
|
</div>
|
{/* 筛选条件 */}
|
<div className="home-list-processing-filter" onClick={() => handleButtonClick(3)}>
|
<div className="home-list-processing-filter-item">
|
<div className="home-list-processing-filter-item-img">
|
<img src={home_11} alt="办理中" />
|
</div>
|
<div className="home-list-processing-filter-item-value">
|
{searchParams.caseTaskTypeName}+{searchParams.mediatorTypeName}
|
</div>
|
</div>
|
</div>
|
</div>
|
)}
|
|
{activeTab === 'review' && (
|
<div className="home-list-buttons">
|
<div className={`home-list-button ${activeReviewButton === 1 ? 'active' : ''}`} onClick={() => handleReviewButtonClick(1)}>
|
回退审核
|
</div>
|
<div className={`home-list-button ${activeReviewButton === 2 ? 'active' : ''}`} onClick={() => handleReviewButtonClick(2)}>
|
上报审核
|
</div>
|
<div className={`home-list-button ${activeReviewButton === 3 ? 'active' : ''}`} onClick={() => handleReviewButtonClick(3)}>
|
结案审核
|
</div>
|
<div className={`home-list-button ${activeReviewButton === 4 ? 'active' : ''}`} onClick={() => handleReviewButtonClick(4)}>
|
联合处置审核
|
</div>
|
</div>
|
)}
|
|
{loading && listData.length === 0 ? (
|
<div className="home-loading">
|
<div className="home-loading-text">加载中...</div>
|
</div>
|
) : !loading && listData.length === 0 ? (
|
<div className="home-empty">
|
<img src={caseQuery_2} alt="暂无数据" className="home-empty-image" />
|
<div className="home-empty-text">暂无数据</div>
|
</div>
|
) : (
|
<Scrollbars style={{ height: `calc(100vh - ${activeTab === 'review' || activeTab === 'processing' ? 435 : 386}px)` }}>
|
<MyList
|
data={listData}
|
dataTotal={totalCount}
|
hasMore={hasMore}
|
loadMore={loadMoreData}
|
getScrollTopKey={`home-${activeTab}`}
|
itemDom={renderListItem}
|
threshold={100}
|
showBottomText={true}
|
/>
|
</Scrollbars>
|
)}
|
</div>
|
);
|
};
|
|
// 渲染底部导航
|
const renderBottomNav = () => {
|
return (
|
<div className="home-bottom-nav">
|
{bottomNavItems.map((item) => (
|
<div
|
key={item.id}
|
className={`home-bottom-nav-item ${item.id === 'home' ? 'home-bottom-nav-item-active' : ''}`}
|
onClick={() => history.push(item.path)}
|
>
|
<div className="home-bottom-nav-item-icon">
|
<img src={item.icon} alt={item.text} />
|
</div>
|
<div className="home-bottom-nav-item-text">{item.text}</div>
|
</div>
|
))}
|
</div>
|
);
|
};
|
|
// 渲染督办回复弹窗
|
const renderSuperviseReplyModal = () => {
|
if (!currentSupervise) return null;
|
|
return (
|
<Drawer visible={superviseReplyVisible} onClose={handleCloseSuperviseReply} position="bottom">
|
<div className="dbcb-reply-home-wrapper">
|
<div className="dbcb-reply-home-header">
|
<div className="audit-drawer-title">督办回复</div>
|
<div className="audit-drawer-close" onClick={handleCloseSuperviseReply}>
|
<i className="audit-drawer-close-icon"></i>
|
</div>
|
</div>
|
<Scrollbars style={{ height: '55vh' }}>
|
<div className="dbcb-reply-home-content">
|
{/* 督办详情信息 */}
|
<div className="dbcb-reply-home-detail">
|
<div className="dbcb-reply-home-section">
|
<div className="dbcb-reply-home-label">督办时间</div>
|
<div className="dbcb-reply-home-value">{currentSupervise.supTime}</div>
|
</div>
|
|
<div className="dbcb-reply-home-section">
|
<div className="dbcb-reply-home-label">督办人</div>
|
<div className="dbcb-reply-home-value">{`${currentSupervise.supUserName} (${currentSupervise.supUnitName})`}</div>
|
</div>
|
|
<div className="dbcb-reply-home-section">
|
<div className="dbcb-reply-home-label">督办内容</div>
|
<div className="dbcb-reply-home-value">{currentSupervise.supContent}</div>
|
</div>
|
|
{currentSupervise.fileInfoList && currentSupervise.fileInfoList.length > 0 && (
|
<div className="dbcb-reply-home-section">
|
<div className="dbcb-reply-home-label">督办附件</div>
|
<DingUpload
|
fileList={(currentSupervise.fileInfoList || []).map((file) => ({
|
id: file.id || Date.now().toString(),
|
name: file.name || '附件',
|
size: file.size || '12.3K',
|
showUrl: file.url || '',
|
}))}
|
viewOnly={true}
|
title=""
|
/>
|
</div>
|
)}
|
</div>
|
{/* 分割线 */}
|
<div className="dbcb-reply-home-divider"></div>
|
|
{/* 回复内容区域 */}
|
<div className="dbcb-reply-home-section">
|
<div className="dbcb-reply-home-label">
|
<span className="dbcb-reply-home-label-text">回复内容</span>
|
<div className="dbcb-reply-home-btn-group">
|
{/* <div className="dbcb-reply-home-ocr-btn" onClick={handleOcrRecognize}>
|
<svg viewBox="0 0 1024 1024" width="20" height="20">
|
<path
|
d="M832 128H192c-35.2 0-64 28.8-64 64v640c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64V192c0-35.2-28.8-64-64-64z m0 704H192V192h640v640z"
|
fill="#1A6FB8"
|
></path>
|
<path
|
d="M696.9 298.1H584.1c-12.3 0-22.3 10-22.3 22.3s10 22.3 22.3 22.3h69l-155.8 155.8c-8.7 8.7-8.7 22.8 0 31.5 4.4 4.4 10.1 6.5 15.7 6.5s11.4-2.2 15.7-6.5l155.8-155.8v69c0 12.3 10 22.3 22.3 22.3s22.3-10 22.3-22.3V320.4c0.1-12.3-9.9-22.3-22.2-22.3z"
|
fill="#1A6FB8"
|
></path>
|
<path
|
d="M428.5 685.5c4.4 4.4 10.1 6.5 15.7 6.5s11.4-2.2 15.7-6.5c8.7-8.7 8.7-22.8 0-31.5L303.2 497.3v-69c0-12.3-10-22.3-22.3-22.3s-22.3 10-22.3 22.3v112.8c0 12.3 10 22.3 22.3 22.3h112.8c12.3 0 22.3-10 22.3-22.3s-10-22.3-22.3-22.3h-69L428.5 654c8.6 8.7 8.6 22.8 0 31.5z"
|
fill="#1A6FB8"
|
></path>
|
</svg>
|
识别材料
|
</div> */}
|
<div className="dbcb-reply-home-template-btn" onClick={handleUseTemplate}>
|
<svg viewBox="0 0 1024 1024" width="20" height="20">
|
<path
|
d="M832 64H192C121.6 64 64 121.6 64 192v640c0 70.4 57.6 128 128 128h640c70.4 0 128-57.6 128-128V192c0-70.4-57.6-128-128-128zM192 128h640c35.2 0 64 28.8 64 64v256h-768V192c0-35.2 28.8-64 64-64z m640 768H192c-35.2 0-64-28.8-64-64V512h768v320c0 35.2-28.8 64-64 64z"
|
fill="#1A6FB8"
|
></path>
|
<path d="M672 320H544V192h128v128zM672 832H544V704h128v128z" fill="#1A6FB8"></path>
|
</svg>
|
选择模板
|
</div>
|
</div>
|
</div>
|
<TextareaItem placeholder={`请填写`} value={replyContent} onChange={(value) => setReplyContent(value)} rows={4} />
|
</div>
|
|
{/* 附件区域 */}
|
<div className="dbcb-reply-home-section">
|
<DingUpload
|
fileList={attachments}
|
onChange={(info) => {
|
if (info.fileList) {
|
setAttachments(info.fileList);
|
}
|
}}
|
ownerId={currentSupervise.id}
|
ownerType="22_00018-507"
|
disabled={false}
|
viewOnly={false}
|
accept="image/*, .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt"
|
tipText="支持扩展名：.doc .docx .pdf .jpg 等，30M以内"
|
btnText="添加附件"
|
subtitle="请上传与内容相关的附件材料"
|
title="附件材料"
|
/>
|
</div>
|
</div>
|
</Scrollbars>
|
{/* 底部按钮 */}
|
<div className="dbcb-reply-home-footer">
|
<Button type="primary" className="dbcb-reply-home-submit-btn" onClick={handleSubmitSuperviseReply}>
|
提交
|
</Button>
|
</div>
|
</div>
|
</Drawer>
|
);
|
};
|
|
return (
|
<NavBarPage title="首页">
|
<div className="home-container">
|
{/* 顶部轮播图 */}
|
{renderCarousel()}
|
|
{/* 功能按钮 */}
|
{renderFunctionButtons()}
|
|
{/* Tab栏 */}
|
{renderTabs()}
|
|
{/* 搜索框 */}
|
<div className="home-search-box">
|
<div className="home-search-box-input">
|
<InputItem placeholder="申请人/被申请人/事项编号" value={searchParams.partyName} onChange={(value) => setSearchParams({ ...searchParams, partyName: value })} className="custom-search-input" />
|
<button onClick={() => fetchListData(1, activeTab, { ...queryParams, partyName: searchParams.partyName })} className="custom-search-btn">查询</button>
|
</div>
|
</div>
|
|
{/* 内容区域 */}
|
<div className="home-content">{renderListContent()}</div>
|
|
{/* 底部导航 */}
|
{renderBottomNav()}
|
|
{/* 督办回复弹窗 */}
|
{renderSuperviseReplyModal()}
|
</div>
|
{filterVisible && (
|
<div className="filter-modal-mask" onClick={() => setFilterVisible(false)}>
|
<div className="filter-modal" onClick={(e) => e.stopPropagation()}>
|
<div className="filter-modal-header">
|
<span>筛选</span>
|
<span className="filter-modal-close" onClick={() => setFilterVisible(false)}>
|
×
|
</span>
|
</div>
|
<div className="filter-modal-section">
|
<div className="filter-modal-label">办理角色</div>
|
<div className="filter-modal-options">
|
<div
|
className={`filter-modal-option${searchParams.caseTaskType === '1' ? ' selected' : ''}`}
|
onClick={() => setSearchParams({ ...searchParams, caseTaskTypeName: '我承办的', caseTaskType: '1' })}
|
>
|
我承办的
|
</div>
|
<div
|
className={`filter-modal-option${searchParams.caseTaskType === '2' ? ' selected' : ''}`}
|
onClick={() => setSearchParams({ ...searchParams, caseTaskTypeName: '我配合的', caseTaskType: '2' })}
|
>
|
我配合的
|
</div>
|
</div>
|
</div>
|
<div className="filter-modal-section">
|
<div className="filter-modal-label">查询范围</div>
|
<div className="filter-modal-options">
|
<div
|
className={`filter-modal-option${searchParams.mediatorType === '0' ? ' selected' : ''}`}
|
onClick={() => setSearchParams({ ...searchParams, mediatorTypeName: '本部门办理', mediatorType: '0' })}
|
>
|
本部门办理
|
</div>
|
<div
|
className={`filter-modal-option${searchParams.mediatorType === '1' ? ' selected' : ''}`}
|
onClick={() => setSearchParams({ ...searchParams, mediatorTypeName: '本人办理', mediatorType: '1' })}
|
>
|
本人办理
|
</div>
|
<div
|
className={`filter-modal-option${searchParams.mediatorType === '2' ? ' selected' : ''}`}
|
onClick={() => setSearchParams({ ...searchParams, mediatorTypeName: '未指派经办人', mediatorType: '2' })}
|
>
|
未指派经办人
|
</div>
|
</div>
|
</div>
|
<button
|
className="filter-modal-confirm"
|
onClick={() => {
|
setFilterVisible(false);
|
fetchListData(1, activeTab, {
|
...queryParams,
|
caseTaskType: searchParams.caseTaskType,
|
mediatorType: searchParams.mediatorType,
|
});
|
}}
|
>
|
确定
|
</button>
|
</div>
|
</div>
|
)}
|
</NavBarPage>
|
);
|
};
|
|
export default Home;
|
