/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-15 10:43:14
|
* @LastEditTime: 2023-12-08 17:33:58
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @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 { Button, Image, Typography, Row, Col, Affix } from 'antd';
|
import { QrcodeOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import Page from '../../components/Page';
|
import {
|
DispatchRecord,
|
MediationInfo,
|
MediationInfoLedger,
|
MediateAbnormalDetail,
|
CaseHandle,
|
JudicialApply,
|
JudicialResult,
|
Modify,
|
SignFor,
|
Dispatch,
|
} 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 mediationType = searchParams.get('mediationType');
|
|
const mediateTab = searchParams.get('mediateTab');
|
|
const taskId = searchParams.get('taskId');
|
|
const [data, setData] = useState({});
|
|
|
|
const judicialId = searchParams.get('judicialId');
|
// const judicialId = '2311170954531388';
|
|
const dispId = searchParams.get('dispId');
|
const id = searchParams.get('id');
|
|
// pageHeader数据
|
const [headerData, setHeaderData] = useState({});
|
|
// tabs当前选择的标签信息
|
const [tabsActive, setTabsActive] = useState();
|
|
// 调解邀请码显隐
|
const [qrCodeVisible, setQrCodeVisible] = useState(false);
|
|
// 返回
|
function handleReturn() {
|
back ? navigate(mediateTab ? `${back}?isBack=true&mediateTab=${mediateTab}` : `${back}?isBack=true`, { replace: true }) : navigate(-1);
|
}
|
|
// 初始化定位到当前加载哪个页面
|
useEffect(() => {
|
let returnRouteData = $$.getSessionStorage(back);
|
console.log('returnRouteData', returnRouteData);
|
if (!!returnRouteData) {
|
setHeaderData(returnRouteData);
|
let active = '';
|
switch (returnRouteData.pageFrom) {
|
case 'mediateAll':
|
active = 'mediationInfo';
|
// active = 'Modify';
|
break;
|
// 调解总览修改组件
|
case 'Modify':
|
active = 'Modify';
|
break;
|
case 'signForList':
|
active = 'signFor';
|
break;
|
case 'myReturn':
|
case 'myWaitFoCase':
|
active = 'caseHandle';
|
break;
|
case 'myCase':
|
active = 'processRecord';
|
break;
|
case 'judicialOverview':
|
case 'myConfirmation':
|
active = 'judicialApply';
|
break;
|
case 'myMediationFeedBack':
|
case 'myConfirmationFeedBack':
|
active = 'feedBack';
|
break;
|
case 'myMediationCaseFolderFeedBack':
|
case 'myConfirmationCaseFolderFeedBack':
|
active = 'caseFolderFeedBack';
|
break;
|
default:
|
active = 'mediationInfo';
|
}
|
setTabsActive(active);
|
}
|
}, [back]);
|
|
const tabs = [
|
tabsActive !== 'Modify' && { label: '调解信息', key: 'mediationInfo' },
|
tabsActive === 'Modify' && { label: '案件修改', key: 'Modify' },
|
|
// { label: '纠纷信息', key: 'disputeMsg' },
|
// { label: '调度记录', key: 'dispatchRecord' },
|
// { label: '办转记录', key: 'processRecord' },
|
// { label: '调解力量', key: 'mediationPower' },
|
// { label: '调解结果', key: 'mediationResult' },
|
// { label: '调解档案', key: 'archives' },
|
// ...(judicialId === 'undefined' || !judicialId ? []
|
// : [{ label: '司法确认', key: 'judicialApply' },
|
// // { label: '司法确认结果', key: 'judicialResult' },
|
// ]),
|
// judicialId !== null ? { label: '司法确认', key: 'judicialApply' } : null,
|
...(headerData.tabs || []),
|
];
|
|
|
if (judicialId !== 'null' && judicialId && tabsActive !== 'Modify' && judicialId !== 'undefined') {
|
tabs.push({ label: '司法确认', key: 'judicialApply' });
|
}
|
|
console.log('judicialId:', judicialId);
|
|
console.log('111111', caseId, mediationType);
|
|
|
return (
|
<Page
|
pageHead={{
|
fromType: 'caseDetail',
|
// title: '详情',
|
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">
|
{/* <Affix offsetTop={20} onChange={(affixed) => console.log(affixed)}>
|
<Button>120px to affix top</Button>
|
</Affix> */}
|
{/* 调解信息 */}
|
{tabsActive === 'mediationInfo' && <>
|
{mediationType === 'ledger' ?
|
<MediationInfoLedger caseId={caseId} dispId={dispId} headerData={headerData} /> :
|
<MediationInfo caseId={caseId} dispId={dispId} headerData={headerData} />
|
}
|
</>
|
}
|
{tabsActive === 'Modify' && <>
|
<Modify />
|
</>
|
}
|
|
{/* 预审异常 - 处理 */}
|
{tabsActive === 'mediateAbnormalDetail' && <MediateAbnormalDetail dispId={dispId} handleReturn={handleReturn} />}
|
{/* 签收列表 - 签收 */}
|
{tabsActive === 'signFor' && (
|
<SignFor type={headerData.signForEditType} caseId={caseId} signForId={searchParams.get('signForId')} handleReturn={handleReturn} sleepTab={() => setHeaderData({ ...headerData, isNotTabs: true })} />
|
)}
|
{/* 调度中心 - 调度 */}
|
{tabsActive === 'dispatch' && <Dispatch caseId={caseId} dispId={dispId} handleReturn={handleReturn} />}
|
{/* 调度记录 */}
|
{tabsActive === 'dispatchRecord' && <DispatchRecord caseId={caseId} dispId={dispId} isEdit={headerData.isEdit} handleReturn={handleReturn} />}
|
{/* 我的待办 - 案件处理 */}
|
{tabsActive === 'caseHandle' && <CaseHandle caseId={caseId} taskId={taskId} handleReturn={handleReturn} sleepTab={() => setHeaderData({ ...headerData, isNotTabs: true })} />}
|
{/* 司法确认申请 */}
|
{tabsActive === 'judicialApply' && judicialId !== 'null' && (
|
<JudicialApply judicialId={judicialId} />
|
)} {/* 司法确认结果 */}
|
{/* {tabsActive === 'judicialResult' && <JudicialResult judicialId={judicialId} />} */}
|
</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;
|
