/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2025-01-02 09:20:18
|
* @LastEditTime: 2025-02-20 17:58:49
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { Fragment, useEffect, useState } from 'react';
|
import { Steps, Tabs, Button, Badge, Message } from '@arco-design/web-react';
|
import { Space } from 'antd';
|
import { Scrollbars } from "react-custom-scrollbars";
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
|
import { apply, floating, Matter, judicial_8, transfer_1 } from '@/assets/images';
|
import { result } from '@/assets/images/icon';
|
|
import NewPage from '@/components/NewPage';
|
import ProgressStep from '@/components/ProgressStep/VisitStep';
|
|
import Preview from '../register/visit/preview';
|
import Judicial from '../register/matterDetail/Judicial';
|
import ApplyInfo from './ApplyInfo';
|
import HandleRecord from '../register/matterDetail/HandleRecord';
|
import SupervisingView from '../register/matterDetail/Supervising';
|
import RateModule from '../register/matterDetail/RateModule';
|
import DismissModule from '../register/matterDetail/DismissModule';
|
import RegisInfoModule from '../register/matterDetail/RegisInfoModule';
|
|
import RepeatView from '../register/handleFeedback/component/RepeatView';
|
import EventFlow from '../register/eventFlow/component/EventFlow';
|
|
// RepeatView
|
import * as $$ from '@/utils/utility';
|
|
const Step = Steps.Step;
|
const TabPane = Tabs.TabPane;
|
|
function getTransactResultApi(caseId) {
|
return $$.ax.request({ url: `caseInfoUnfold/getTransactResult?caseId=${caseId}`, type: 'get', service: 'mediate' });
|
}
|
|
function getVideoApi(caseId) {
|
return $$.ax.request({ url: `meetInfo/getVideo?caseId=${caseId}`, type: 'get', service: 'mediate' });
|
|
}
|
|
function getByCaseIdApi(caseId) {
|
return $$.ax.request({ url: `caseEvaluate/getByCaseId?caseId=${caseId}`, type: 'get', service: 'mediate' });
|
}
|
|
function getCaseInfoApi(id) {
|
return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
|
}
|
|
function listFeedbackApi(id) {
|
return $$.ax.request({ url: `caseFeedback/listFeedback?id=` + id, type: 'get', service: 'mediate' });
|
}
|
|
function getListCaseFlow(caseId) {
|
return $$.ax.request({ url: `caseTask/listCaseFlow?caseId=` + caseId, type: 'get', service: 'mediate' });
|
}
|
|
function getCaseDismiss(caseId) {
|
return $$.ax.request({ url: `caseDismiss/getByCaseId?caseId=` + caseId, type: 'get', service: 'mediate' });
|
}
|
|
function getTabButton(data) {
|
return $$.ax.request({ url: `caseTask/getTabButton`, type: 'get', service: 'mediate', data });
|
}
|
|
function getLatestTaskIdApi(caseId) {
|
return $$.ax.request({
|
url: `caseTask/getLatestTaskId?caseId=${caseId}`,
|
type: 'get',
|
service: 'mediate'
|
});
|
}
|
//对接单点登录，获取token
|
function gridLogin(data) {
|
return $$.ax.request({ url: `ctAccount/gridLogin`, type: 'post', service: 'cust', isGrid: true, data });
|
}
|
|
// 角色选择
|
function switchRoleApi(data) {
|
return $$.ax.request({ url: 'ctAccount/switchRole', type: 'get', data, service: 'cust' });
|
}
|
|
const myTab = [
|
{
|
img: Matter,
|
label: '详情',
|
key: 'byslxq',
|
},
|
{
|
img: result,
|
label: '档案信息',
|
key: 'daxx',
|
},
|
{
|
img: result,
|
label: '事项详情',
|
key: 'dslxq',
|
},
|
{
|
img: result,
|
label: '事项详情',
|
key: 'sxxq',
|
},
|
{
|
img: transfer_1,
|
label: '重复事项',
|
key: "cfsx",
|
isNeedStep: true,
|
},
|
{
|
img: floating,
|
label: '流转督办',
|
key: 'lcdb',
|
},
|
{
|
img: apply,
|
label: '申请记录',
|
key: 'sqjl',
|
},
|
{
|
img: judicial_8,
|
label: '司法确认',
|
key: 'sfqr',
|
},
|
]
|
const GridDetail = () => {
|
const navigate = useNavigate();
|
const [searchParams] = useSearchParams();
|
const [caseTaskId, setCaseTaskId] = useState(null);
|
const back = searchParams.get('back');
|
const tab = searchParams.get('tab');
|
const caseId = $$.getQueryString('caseId')
|
const gridToken = $$.getQueryString('gridToken')
|
const moutedTab = $$.getQueryString('moutedTab')
|
const [tabsActive, setTabsActive] = useState();
|
const [current, setCurrent] = useState(7);
|
const [tabsList, setTabsList] = useState([])
|
const [grade, setGrade] = useState(null);
|
const [caseInfo, setCaseInfo] = useState({})
|
const [TransactResult, setTransactResult] = useState(null)
|
const [videoList, setVideoList] = useState([])
|
const [list, setList] = useState([])
|
const [progressData, setProgressData] = useState({});
|
const [dismissData, setDismissData] = useState(null);
|
const [authorData, setAuthorData] = useState({});
|
const [staticButtonList, setStaticButtonList] = useState([])
|
const [userData, setUserData] = useState({});
|
// 当前选中的角色 及其 权限
|
const [roleActive, setRoleActive] = useState({ id: null, powerMap: {} });
|
const [gridStatus, setGridStatus] = useState(false)
|
const [isLoading, setIsLoading] = useState(true);
|
|
const myButton = [
|
{
|
label: '处理',
|
type: 'primary',
|
click: () => {
|
navigate(`/mediate/visit/eventFlow?caseTaskId=${caseTaskId}&caseId=${caseId}`)
|
},
|
key: 'xqcl',
|
},
|
{
|
label: '处理',
|
type: 'primary',
|
click: () => {
|
switch (moutedTab) {
|
case 'sxbl':
|
navigate(`/mediate/visit/handleFeedback?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=sxbl`)
|
break;
|
case 'htsh':
|
navigate(`/mediate/visit/eventFlow?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=htsh`)
|
break;
|
case 'sbsh':
|
navigate(`/mediate/visit/eventFlow?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=sbsh`)
|
break;
|
case 'jash':
|
navigate(`/mediate/visit/closingReview?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=jash`)
|
break;
|
case 'lhczsh':
|
navigate(`/mediate/visit/handleFeedback?caseTaskId=${caseTaskId}&caseId=${caseId}&moutedTab=lhczsh`)
|
break;
|
default:
|
break;
|
}
|
},
|
key: 'tabcl',
|
},
|
]
|
|
const getLatestTaskId = async () => {
|
try {
|
const res = await getLatestTaskIdApi(caseId);
|
if (res.type) {
|
setCaseTaskId(res.data);
|
getAuthor(res.data);
|
}
|
} catch (error) {
|
console.error('Failed to get latest task ID:', error);
|
}
|
}
|
const getGridToken = async (token) => {
|
try {
|
const res = await gridLogin({
|
token
|
})
|
if (res.type) {
|
// 清除旧的存储
|
$$.clearSessionStorage();
|
|
// 设置新的 token 和用户信息
|
$$.setSessionStorage('customerSystemToken', res.data?.token);
|
$$.setSessionStorage('customerSystemUser', res.data || {});
|
setUserData(res.data || {});
|
setGridStatus(true)
|
console.log('token获取token完成')
|
|
}
|
} catch (error) {
|
console.error('Grid token verification failed:', error);
|
Message.error('登录验证失败，请重试');
|
}
|
}
|
useEffect(() => {
|
if (gridToken) {
|
const initializeApp = async () => {
|
try {
|
// 1. 获取并设置 token
|
const res = await gridLogin({ token: gridToken });
|
if (res.type) {
|
$$.clearSessionStorage();
|
$$.setSessionStorage('customerSystemToken', res.data?.token);
|
$$.setSessionStorage('customerSystemUser', res.data || {});
|
setUserData(res.data || {});
|
|
// 2. 切换角色
|
let ctUseroleList = res.data?.ctUseroleList || [];
|
const roleCode = ctUseroleList[0]?.roleCode;
|
const result = await switchRoleApi({ roleCode });
|
|
if (result.type) {
|
$$.setSessionStorage('customerSystemToken', result.data);
|
setGridStatus(true);
|
|
// 3. 获取其他数据
|
if (caseId) {
|
await getLatestTaskId();
|
await Promise.all([
|
getByCaseId(caseId),
|
getTransactResult(caseId),
|
getVideo(caseId),
|
getCaseInfo(caseId),
|
listFeedback(caseId),
|
getData(caseId),
|
getDismissData(caseId)
|
]);
|
}
|
}
|
}
|
} catch (error) {
|
console.error('初始化失败:', error);
|
Message.error('初始化失败，请重试');
|
} finally {
|
setIsLoading(false);
|
}
|
};
|
|
initializeApp();
|
}
|
}, [gridToken]);
|
|
const getAuthor = async (taskId) => {
|
const res = await getTabButton({
|
caseTaskId: taskId
|
})
|
if (res.type) {
|
const { tabList } = res.data
|
const { buttonList } = res.data
|
setAuthorData(res.data)
|
if (tabList.length === 0) {
|
//没有tab
|
setTabsList([{
|
img: result,
|
label: '详情',
|
key: 'daxx',
|
}])
|
setTabsActive('daxx')
|
} else {
|
const list = myTab.filter(item => {
|
const flag = tabList.some(result => {
|
if (result.id === item.key) {
|
return true
|
}
|
})
|
return flag
|
}).map(item => {
|
const data = tabList.find(res => res.id == item.key) || {}
|
return {
|
...item,
|
label: data.name || item.label
|
}
|
})
|
setTabsList(list)
|
setTabsActive(list[0].key)
|
}
|
setStaticButtonList(myButton.filter(item => {
|
const flag = buttonList.some(result => {
|
if (result.id === item.key) {
|
return true
|
}
|
})
|
return flag
|
}).map(item => {
|
const data = buttonList.find(res => res.id == item.key)
|
return {
|
...item,
|
label: data.name,
|
id: item.key,
|
name: data.name,
|
}
|
}))
|
}
|
}
|
|
const getDismissData = async (id) => {
|
const res = await getCaseDismiss(id)
|
if (res.type) {
|
setDismissData(res.data)
|
}
|
}
|
|
const getTransactResult = async (id) => {
|
const res = await getTransactResultApi(id)
|
if (res.type) {
|
if (res.data) {
|
setTransactResult({ ...res.data })
|
} else {
|
setTransactResult(null)
|
}
|
}
|
}
|
|
const getVideo = async (id) => {
|
const res = await getVideoApi(id)
|
if (res.type) {
|
if (res.data) {
|
setVideoList(res.data || [])
|
} else {
|
setVideoList(null)
|
}
|
}
|
}
|
|
const getByCaseId = async (id) => {
|
const res = await getByCaseIdApi(id)
|
if (res.type) {
|
setGrade(res.data)
|
}
|
}
|
|
const getCaseInfo = async (id) => {
|
const res = await getCaseInfoApi(id)
|
if (res.type) {
|
const { agentList, personList, ...rest } = res.data
|
const parList = agentList.concat(personList)
|
const newParList = parList?.map(item => {
|
const fileInfoList = item.fileInfoList
|
let file = [];//身份证明材料、企业登记材料
|
let file1 = [];//法人、机构身份证明材料、代理人授权委托书
|
if (fileInfoList && fileInfoList.length != 0) {
|
fileInfoList.forEach(item => {
|
if (item.ownerType == '22_00018-202' || item.ownerType == '22_00018-203') {
|
item.fileList.forEach(res => {
|
file.push({
|
...res,
|
uid: res.id,
|
})
|
})
|
}
|
if (item.ownerType == '22_00018-204' || item.ownerType == '22_00018-207') {
|
item.fileList.forEach(res => {
|
file1.push({
|
...res,
|
uid: res.id,
|
})
|
})
|
}
|
})
|
}
|
return {
|
...item,
|
file,
|
file1
|
}
|
}) || []
|
const obj = {
|
...rest,
|
fakeData: newParList,
|
}
|
setCurrent(obj.process)
|
setCaseInfo(obj)
|
if (obj.status == 2) {
|
//待签收自动跳转到受理页面
|
handleSign()
|
}
|
}
|
}
|
|
const handleSign = () => {
|
Message.success({
|
content: <div className='myMessageBox'>
|
<div className='messageTop'>签收成功</div>
|
<div className='messageBottom'>请在受理时限内及时跟进</div>
|
</div>,
|
showIcon: true,
|
className: 'acro-myMessage',
|
position: 'bottom'
|
})
|
navigate(`/mediate/visit/eventFlow?caseTaskId=${caseTaskId}&caseId=${caseId}`)
|
}
|
|
const listFeedback = async (id) => {
|
const res = await listFeedbackApi(id)
|
if (res.type) {
|
let data = res.data.caseFeedbackList
|
setList(data)
|
}
|
}
|
|
const getData = async (id) => {
|
const res = await getListCaseFlow(id)
|
if (res.type) {
|
setProgressData(res.data)
|
}
|
}
|
|
const getTypeDom = (key) => {
|
if (key === 'byslxq') {
|
return <Fragment>
|
<Scrollbars style={{ height: 'calc(100vh - 219px)' }} autoHide>
|
<div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px' }}>
|
<Preview mainId={caseId} data={caseInfo} transactResult={TransactResult} isDoc={true} isNotAccet={true} />
|
</div>
|
<div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
|
<Tabs defaultActiveTab='1' >
|
<TabPane
|
key='1'
|
title={
|
<span style={{ fontSize: '15px' }}>
|
流转进度
|
</span>
|
}
|
>
|
<ProgressStep progressData={progressData} />
|
</TabPane>
|
<TabPane
|
key='2'
|
title={
|
<span style={{ fontSize: '15px' }}>
|
督办信息
|
{/* <Badge maxCount={99} count={1000} /> */}
|
</span>
|
}
|
>
|
<SupervisingView caseId={caseId} />
|
</TabPane>
|
</Tabs>
|
</div>
|
{dismissData && <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
|
<DismissModule dismissData={dismissData} />
|
</div>}
|
</Scrollbars>
|
</Fragment>
|
}
|
if (key === 'daxx') {
|
return <Fragment>
|
<Scrollbars style={{ height: 'calc(100vh - 156px)' }} autoHide>
|
<div style={{ backgroundColor: '#fff', margin: '0 16px', paddingTop: '16px', paddingLeft: '91px' }}>
|
<Steps type='navigation' current={current}>
|
<Step title='来访登记' disabled />
|
<Step title='事件流转' disabled />
|
<Step title='办理反馈' disabled />
|
<Step title='结案审核' disabled />
|
{caseInfo.canal != '22_00001-3' && <Step title='当事人评价' disabled />}
|
<Step title='结案归档' disabled />
|
</Steps>
|
</div>
|
<div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px', marginTop: '8px' }}>
|
<Preview videoList={videoList} isReview={true} mainId={caseId} data={caseInfo} transactResult={TransactResult} isDoc={true} />
|
</div>
|
{list.length != 0 &&
|
<div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理记录（{list.length}）</h4>
|
</Space>
|
<HandleRecord isReview={true} data={list} noEdit />
|
</div>
|
}
|
{grade &&
|
<div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
|
<RateModule grade={grade} />
|
</div>
|
}
|
{caseInfo?.canal === '22_00001-1' &&
|
<div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
|
<RegisInfoModule caseInfo={caseInfo} />
|
</div>
|
}
|
{dismissData && <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
|
<DismissModule dismissData={dismissData} />
|
</div>}
|
</Scrollbars>
|
</Fragment>
|
}
|
if (key === 'cfsx') {
|
return <Scrollbars style={{ height: 'calc(100vh - 156px)' }} autoHide>
|
<div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px' }}>
|
<RepeatView caseId={caseId} />
|
</div>
|
</Scrollbars>
|
}
|
if (key === 'lcdb') {
|
return <div className='dataSync-hasTabPage' style={{ marginTop: '-8px' }}>
|
<Tabs defaultActiveTab='1' >
|
<TabPane
|
key='1'
|
title={
|
<span style={{ fontSize: '15px' }}>
|
流转进度
|
</span>
|
}
|
>
|
<Scrollbars style={{ height: 'calc(100vh - 238px)' }} autoHide>
|
<ProgressStep progressData={progressData} />
|
</Scrollbars>
|
</TabPane>
|
<TabPane
|
key='2'
|
title={
|
<span style={{ fontSize: '15px' }}>
|
督办信息
|
{/* <Badge maxCount={99} count={1000} /> */}
|
</span>
|
}
|
>
|
<Scrollbars style={{ height: 'calc(100vh - 238px)' }} autoHide>
|
<SupervisingView caseId={caseId} />
|
</Scrollbars>
|
</TabPane>
|
</Tabs>
|
</div>
|
}
|
if (key === 'sqjl') {
|
return <ApplyInfo caseId={caseId} />
|
}
|
if (key === 'dslxq' || key === 'sxxq') {
|
return <EventFlow gridDetail={true} authorType={key} authorData={{ buttonList: [] }} caseId={caseId} caseTaskId={caseTaskId} moutedTab={moutedTab} />
|
}
|
if (key === 'sfqr') {
|
return <div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px', marginTop: '8px' }}>
|
<Scrollbars style={{ height: 'calc(100vh - 156px)' }} autoHide>
|
<Judicial caseId={caseId} />
|
</Scrollbars>
|
</div>
|
}
|
}
|
|
if (isLoading) {
|
return null;
|
} else {
|
return (
|
<NewPage
|
pageHead={
|
{ breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '详情' }
|
}
|
>
|
<Tabs
|
onChange={(v) => setTabsActive(v)}
|
className='myTabContent'
|
activeTab={tabsActive}
|
destroyOnHide
|
>
|
{tabsList?.map(item => {
|
return <TabPane
|
key={item.key}
|
title={
|
<span>
|
{tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
|
<span style={{ fontSize: '16px' }}>{item.label}</span>
|
</span>
|
}
|
>
|
{getTypeDom(item.key)}
|
</TabPane>
|
})}
|
</Tabs>
|
</NewPage>
|
)
|
}
|
}
|
|
export default GridDetail;
|
