/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-15 10:43:14
|
* @LastEditTime: 2022-12-02 16:34:49
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 案件详情页面集合
|
* 注意：
|
* 1.点击案件的各种处理页面通过不同tabs引入不同的component来操作;
|
* 2.点击跳转进入该页面时需要setSessionStorage,可传入：
|
* 1）search：跳转页面的search方便返回时赋值查询出原来的状态
|
* 2）breadcrumbData：面包屑参数
|
* 3）title: 详情页面标题
|
* 4）pageFrom: 点击来源页面，此参数判断tabs选中值
|
* 5）tableActive: table选中项参数
|
* 6）tabs: 额外的tabs的页面
|
* 地址栏必须携带caseId,返回路由地址back;
|
*/
|
import React, { useState, useEffect, useRef } from 'react';
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
import { Tooltip, Image, Typography, Row, Col } from 'antd';
|
import { QrcodeOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import Page from '../../components/Page';
|
import {
|
DisputeMsg,
|
DispatchRecord,
|
ProcessRecord,
|
MediationPower,
|
MediationResult,
|
JudicialApply,
|
JudicialResult,
|
Archives,
|
SignFor,
|
CaseHandle,
|
Dispatch,
|
MediateAbnormalDetail,
|
FeedBack,
|
CaseFolderFeedBack,
|
} from './components';
|
import MyTabs from '../../components/MyTabs';
|
import MyDrawer from '../../components/MyDrawer';
|
import { qrCodeImg } from '../../assets/images/icon';
|
|
const { Link, Paragraph } = Typography;
|
|
const CaseDetail = () => {
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const back = searchParams.get('back');
|
|
const caseId = searchParams.get('caseId');
|
|
const taskId = searchParams.get('taskId');
|
|
const judicialId = searchParams.get('judicialId');
|
|
const dispId = searchParams.get('dispId');
|
|
// pageHeader数据
|
const [headerData, setHeaderData] = useState({});
|
|
// tabs当前选择的标签信息
|
const [tabsActive, setTabsActive] = useState();
|
|
// 调解邀请码显隐
|
const [qrCodeVisible, setQrCodeVisible] = useState(false);
|
|
// 返回
|
function handleReturn() {
|
back ? navigate(`${back}?isBack=true`, { replace: true }) : navigate(-1);
|
}
|
|
// 初始化定位到当前加载哪个页面
|
useEffect(() => {
|
let returnRouteData = $$.getSessionStorage(back);
|
if (!!returnRouteData) {
|
setHeaderData(returnRouteData);
|
let active = '';
|
switch (returnRouteData.pageFrom) {
|
case 'mediateAbnormal':
|
active = 'mediateAbnormalDetail';
|
break;
|
case 'mediateHis':
|
active = 'dispatchRecord';
|
break;
|
case 'mediateList':
|
active = 'dispatch';
|
break;
|
case 'myMediation':
|
case 'mediateAll':
|
case 'mediateArchives':
|
active = 'mediationResult';
|
break;
|
case 'signForList':
|
active = 'signFor';
|
break;
|
case 'myReturn':
|
case 'myWaitFoCase':
|
active = 'caseHandle';
|
break;
|
case 'myCase':
|
active = 'processRecord';
|
break;
|
case 'judicialOverview':
|
case 'myConfirmation':
|
active = 'judicialResult';
|
break;
|
case 'myMediationFeedBack':
|
case 'myConfirmationFeedBack':
|
active = 'feedBack';
|
break;
|
case 'myMediationCaseFolderFeedBack':
|
case 'myConfirmationCaseFolderFeedBack':
|
active = 'caseFolderFeedBack';
|
break;
|
default:
|
active = 'disputeMsg';
|
}
|
setTabsActive(active);
|
}
|
}, [back]);
|
|
const tabs = [
|
{ label: '纠纷信息', key: 'disputeMsg' },
|
{ label: '调度记录', key: 'dispatchRecord' },
|
{ label: '办转记录', key: 'processRecord' },
|
{ label: '调解力量', key: 'mediationPower' },
|
{ label: '调解结果', key: 'mediationResult' },
|
{ label: '调解档案', key: 'archives' },
|
...(!!judicialId
|
? [
|
{ label: '司法确认申请', key: 'judicialApply' },
|
{ label: '司法确认结果', key: 'judicialResult' },
|
]
|
: []),
|
...(headerData.tabs || []),
|
];
|
|
return (
|
<Page
|
pageHead={{
|
fromType: 'caseDetail',
|
title: headerData.title || '详情',
|
subtitle: headerData.subtitle,
|
breadcrumbData: headerData.breadcrumbData,
|
handleReturn,
|
// TODO:小程序协助调解暂未开启
|
// titleButton: [
|
// <Tooltip title="调解邀请码" placement="topLeft">
|
// <QrcodeOutlined onClick={() => setQrCodeVisible(true)} style={{ fontSize: '36px' }} />
|
// </Tooltip>,
|
// ],
|
}}
|
>
|
{!headerData.isNotTabs && (
|
<div className="caseDetail-tabs">
|
<MyTabs tabs={tabs} activeKey={tabsActive} onChange={(activeKey) => setTabsActive(activeKey)} />
|
</div>
|
)}
|
<div className="caseDetail">
|
{/* 纠纷信息 */}
|
{tabsActive === 'disputeMsg' && <DisputeMsg caseId={caseId} />}
|
{/* 调度记录 */}
|
{tabsActive === 'dispatchRecord' && <DispatchRecord caseId={caseId} dispId={dispId} isEdit={headerData.isEdit} handleReturn={handleReturn} />}
|
{/* 办转记录 */}
|
{tabsActive === 'processRecord' && <ProcessRecord caseId={caseId} />}
|
{/* 调解力量 */}
|
{tabsActive === 'mediationPower' && <MediationPower caseId={caseId} />}
|
{/* 调解结果 */}
|
{tabsActive === 'mediationResult' && <MediationResult caseId={caseId} />}
|
{/* 司法确认申请 */}
|
{tabsActive === 'judicialApply' && <JudicialApply judicialId={judicialId} />}
|
{/* 司法确认结果 */}
|
{tabsActive === 'judicialResult' && <JudicialResult judicialId={judicialId} />}
|
{/* 调解档案 */}
|
{tabsActive === 'archives' && <Archives caseId={caseId} />}
|
|
{/* 调度中心 - 调度 */}
|
{tabsActive === 'dispatch' && <Dispatch caseId={caseId} dispId={dispId} handleReturn={handleReturn} />}
|
{/* 预审异常 - 处理 */}
|
{tabsActive === 'mediateAbnormalDetail' && <MediateAbnormalDetail dispId={dispId} handleReturn={handleReturn} />}
|
{/* 签收列表 - 签收 */}
|
{tabsActive === 'signFor' && (
|
<SignFor type={headerData.signForEditType} signForId={searchParams.get('signForId')} handleReturn={handleReturn} />
|
)}
|
{/* 我的待办 - 案件处理 */}
|
{tabsActive === 'caseHandle' && <CaseHandle caseId={caseId} taskId={taskId} handleReturn={handleReturn} />}
|
{/* 我的调解 - 协助调解反馈 and 我的司法确认 - 协助司法确认反馈 */}
|
{tabsActive === 'feedBack' && (
|
<FeedBack
|
handleType={headerData.pageFrom === 'myMediationFeedBack' ? 'mediation' : 'judicial'}
|
caseId={caseId}
|
judicialId={judicialId}
|
handleReturn={handleReturn}
|
/>
|
)}
|
{/* 我的调解 - 系列案反馈 and 我的司法确认 - 系列案反馈 */}
|
{tabsActive === 'caseFolderFeedBack' && (
|
<CaseFolderFeedBack
|
handleType={headerData.pageFrom === 'myMediationCaseFolderFeedBack' ? 'mediation' : 'judicial'}
|
caseId={caseId}
|
taskId={taskId}
|
handleReturn={handleReturn}
|
/>
|
)}
|
</div>
|
{/* 调解邀请码 */}
|
<MyDrawer visible={qrCodeVisible} title="调解邀请码" onClose={() => setQrCodeVisible(false)}>
|
<MediationInvitationCode caseId={caseId} />
|
</MyDrawer>
|
</Page>
|
);
|
};
|
|
// 调解邀请码组件
|
const MediationInvitationCode = ({ caseId }) => {
|
// 获取邀请码
|
function handleGetScanApi(submitData) {
|
return $$.ax.request({ url: 'caseInfo/getInviteCode?caseId=' + submitData, type: 'get', service: 'mediate' });
|
}
|
|
const [data, setData] = useState({});
|
|
const qrCodeRef = useRef();
|
|
// 下载二维码
|
function handleUpload() {
|
if (!data.inviteCode) {
|
$$.info({ type: 'error', content: '暂无二维码' });
|
return;
|
}
|
let raw = window.atob(data.inviteCode);
|
let rawLength = raw.length;
|
let uInt8Array = new Uint8Array(rawLength);
|
for (let i = 0; i < rawLength; ++i) {
|
uInt8Array[i] = raw.charCodeAt(i);
|
}
|
let url = URL.createObjectURL(new Blob([uInt8Array], { type: 'image/jpeg' }));
|
qrCodeRef.current.download = '二维码.png';
|
qrCodeRef.current.href = url;
|
}
|
|
useEffect(() => {
|
// 获取邀请码
|
async function handleGetScan() {
|
global.setSpinning(true);
|
const res = await handleGetScanApi(caseId);
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data || {});
|
}
|
}
|
handleGetScan();
|
}, [caseId]);
|
|
return (
|
<>
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h5>调解案号</h5>
|
{data.caseNo}
|
</Col>
|
<Col span={24}>
|
<h5>调解邀请码</h5>
|
<p style={{ marginBottom: '8px', color: 'rgba(0,0,0,0.65)' }}>使用小程序“协助调解”功能输入「调解邀请码」开展协同办案</p>
|
<Paragraph style={{ margin: 0 }} copyable>
|
{data.inviteNum || '-'}
|
</Paragraph>
|
</Col>
|
<Col span={24}>
|
<h5>调解邀请二维码</h5>
|
<p style={{ marginBottom: '8px', color: 'rgba(0,0,0,0.65)' }}>使用小程序“协助调解”功能扫描「调解邀二维请码」开展协同办案</p>
|
<div style={{ marginBottom: '8px' }}>
|
<Link onClick={handleUpload} ref={qrCodeRef}>
|
下载二维码
|
</Link>
|
</div>
|
<div style={{ position: 'relative' }}>
|
<img src={qrCodeImg} alt="" />
|
<div style={{ position: 'absolute', top: 40, left: 16 }}>
|
<Image width={76} src={`data:image/jpeg;base64,${data.inviteCode}`} />
|
</div>
|
</div>
|
</Col>
|
</Row>
|
</>
|
);
|
};
|
|
export default CaseDetail;
|
