import React, { useEffect, useState } from 'react';
|
import NewPage from '@/components/NewPage';
|
import { Steps, Tabs, Button, Badge } from '@arco-design/web-react';
|
import { apply, floating } from '@/assets/images';
|
import { result } from '@/assets/images/icon';
|
import * as $$ from '@/utils/utility';
|
import { Space } from 'antd';
|
import ProgressStep from '@/components/ProgressStep/VisitStep';
|
import ApplyInfo from './ApplyInfo';
|
import Preview from '../visit/preview';
|
import HandleRecord from './HandleRecord';
|
import { Scrollbars } from "react-custom-scrollbars";
|
import RateModule from './RateModule';
|
import RegisInfoModule from './RegisInfoModule';
|
import SupervisingView from "./Supervising";
|
import { useNavigate } from 'react-router-dom';
|
|
const Step = Steps.Step;
|
const TabPane = Tabs.TabPane;
|
|
function getTransactResultApi(caseId) {
|
return $$.ax.request({ url: `caseInfoUnfold/getTransactResult?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' });
|
}
|
|
const FileMessage = (props) => {
|
const navigate = useNavigate();
|
const caseTaskId = $$.getQueryString('caseTaskId')
|
const caseId = $$.getQueryString('caseId')
|
const [tabsActive, setTabsActive] = useState('1');
|
const [current, setCurrent] = useState(7);
|
const [grade, setGrade] = useState(null);
|
const [caseInfo, setCaseInfo] = useState({})
|
const [TransactResult, setTransactResult] = useState({})
|
const [tabsList, setTabList] = useState([
|
{
|
img: result,
|
label: '档案信息',
|
key: '1',
|
isNeedStep: true
|
},
|
{
|
img: floating,
|
label: '流转督办',
|
key: '2',
|
},
|
{
|
img: apply,
|
label: '申请记录',
|
key: '3',
|
},
|
])
|
const [list, setList] = useState([])
|
const [progressData, setProgressData] = useState({});
|
|
useEffect(() => {
|
console.log(caseId, 'caseId')
|
getByCaseId(caseId);
|
getTransactResult(caseId);
|
getCaseInfo(caseId);
|
listFeedback(caseId);
|
getData(caseId)
|
}, [])
|
|
const getTransactResult = async (id) => {
|
const res = await getTransactResultApi(id)
|
if (res.type) {
|
setTransactResult({ ...res.data, fileName: res.data.fileInfoBaseDTOList.map(item => item.trueName) })
|
}
|
}
|
|
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 obj = {
|
...rest,
|
fakeData: parList,
|
}
|
setCaseInfo(obj)
|
}
|
}
|
|
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)
|
}
|
}
|
|
return (
|
<NewPage
|
pageHead={
|
{ breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '详情' }
|
}
|
>
|
<Tabs
|
defaultActiveTab='1'
|
onChange={(v) => setTabsActive(v)}
|
className='myTabContent'
|
>
|
{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>
|
}
|
>
|
{
|
item.isNeedStep && <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 />
|
<Step title='当事人评价' disabled />
|
<Step title='结案归档' disabled />
|
</Steps>
|
</div>
|
}
|
{
|
tabsActive === '1' &&
|
<>
|
<Scrollbars style={{ height: 'calc(100vh - 291px)', marginTop: '8px' }} autoHide>
|
<div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px' }}>
|
<Preview 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} />
|
</div>
|
}
|
{grade &&
|
<div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
|
<RateModule grade={grade} />
|
</div>
|
}
|
<div style={{ backgroundColor: '#ffff', margin: '8px 16px 65px 16px', padding: '12px' }}>
|
<RegisInfoModule caseInfo={caseInfo} />
|
</div>
|
</Scrollbars>
|
<div className="dataSync-excel">
|
<Space size="large" style={{ margin: '4px 14px' }}>
|
<Button type='primary' >导出</Button>
|
<Button type='secondary'onClick={() => navigate(-1)}>返回上级页面</Button>
|
</Space>
|
</div>
|
</>
|
}
|
{
|
tabsActive === '2' &&
|
<div className='dataSync-hasTabPage' style={{ marginTop: '-8px' }}>
|
<Tabs defaultActiveTab='1' >
|
<TabPane
|
key='1'
|
title={
|
<span style={{ fontSize: '15px' }}>
|
流转进度
|
</span>
|
}
|
>
|
<ProgressStep progressData={progressData} hasTab={true} />
|
</TabPane>
|
<TabPane
|
key='2'
|
title={
|
<span style={{ fontSize: '15px' }}>
|
督办信息
|
<Badge maxCount={99} count={1000} />
|
</span>
|
}
|
>
|
<div style={{ marginBottom: '20px' }}>
|
<SupervisingView id={''} />
|
</div>
|
</TabPane>
|
</Tabs>
|
</div>
|
}
|
{
|
tabsActive === '3' &&
|
<ApplyInfo />
|
}
|
</TabPane>
|
})}
|
</Tabs>
|
</NewPage>
|
)
|
}
|
|
export default FileMessage;
|
