import React, { useState, useEffect } from 'react';
|
import { Row, Col, Typography, Tooltip } from 'antd';
|
import FilesTable from '../../components/FilesTable';
|
import PartyMsgTable from '../../components/PartyMsgTable';
|
import PartyCheck from '../../components/PartyCheck';
|
import MyDrawer from '../../components/MyDrawer';
|
import * as $$ from '../../utils/utility';
|
import CaseFolderCheck from '../../components/CaseFolderCheck';
|
|
const { Paragraph } = Typography;
|
|
// 根据调解案号获取纠纷登记信息
|
function getCaseDataApi(submitData) {
|
return $$.ax.request({ url: `caseInfo/getCaseInfo?id=${submitData}`, type: 'get', service: 'mediate' });
|
}
|
|
// 案件信息
|
// isModal: 在modal内展示
|
const DisputeCheck = ({ data = {}, isModal }) => {
|
// 当事人信息Drawer
|
const [partyDrawer, setPartyDrawer] = useState({ type: '', visible: false, data: {} });
|
|
// 查看当事人信息
|
function handleCheckParty({ type, values }) {
|
setPartyDrawer({ type, visible: true, data: values });
|
}
|
|
const msg = [
|
{ title: '调解案号', key: 'caseNo', span: 24 },
|
{ title: '纠纷发生时间', content: $$.dateFormat(data.occurTime) },
|
{ title: '申请调解时间', content: $$.dateFormat(data.createTime) },
|
{ title: '调解类型', key: 'mediTypeName' },
|
{ title: '登记人', key: 'inputUserName' },
|
{ title: '纠纷类型', key: 'caseTypeName' },
|
{
|
title: '纠纷来源',
|
content: (
|
<>
|
<span>{data['sourceName'] || '-'}</span>
|
<span className="public-rightBorder">{data['canalName'] || '-'}</span>
|
</>
|
),
|
},
|
{
|
title: '涉及人数',
|
|
content: (
|
<>
|
<span>{data['peopleNum'] || '-'}</span>
|
<span className="public-rightBorder">{data['crowdName'] || '-'}</span>
|
</>
|
),
|
},
|
{ title: '涉及金额', content: `${data.amount || 0}万元` },
|
{
|
title: '纠纷发生地',
|
content: ['provName', 'cityName', 'areaName', 'roadName', 'villageName'].map((x) => {
|
return `${data[x] || ''}`;
|
}),
|
tooltip: ['provName', 'cityName', 'areaName', 'roadName', 'villageName'].map((x) => {
|
return `${data[x] || ''}`;
|
}),
|
},
|
{ title: '纠纷发生地详细地址', key: 'addr' },
|
{ title: '意向调解组织', key: 'wantUnitName' },
|
{ title: '意向调解员', key: 'wantUserName' },
|
{ title: '纠纷描述', key: 'caseDes', span: 24 },
|
{ title: '调解请求', key: 'caseClaim', span: 24 },
|
];
|
|
return (
|
<>
|
<div className="disputeMsg">
|
<Row gutter={[16, 12]}>
|
<Col span={24}>
|
<h5>案情描述</h5>
|
</Col>
|
{msg.map((x, t) => {
|
return (
|
<Col span={x.span || 6} key={t} style={{ display: 'flex' }}>
|
<div>{x.title}：</div>
|
<Paragraph
|
className="caseDetail-paragraph"
|
ellipsis={{
|
expandable: x.span === 24 ? true : null,
|
tooltip: x.span === 24 ? false : x.tooltip || data[x.key],
|
rows: x.span === 24 ? 2 : 1,
|
}}
|
>
|
{x.content || data[x.key] || '-'}
|
</Paragraph>
|
</Col>
|
);
|
})}
|
<Col span={24}>
|
<div className="caseDetail-divider" />
|
</Col>
|
<Col span={24}>
|
<h5>案件材料</h5>
|
</Col>
|
<Col span={24}>
|
<FilesTable isCheck={true} data={data.fileInfoList || []} />
|
</Col>
|
<Col span={24}>
|
<div className="caseDetail-divider" />
|
</Col>
|
<Col span={24}>
|
<h5>申请人信息</h5>
|
</Col>
|
<Col span={24}>
|
<PartyMsgTable partyType="applicant" data={data?.personList?.filter(i=>i.perType==='15_020008-1') || []} handleCheckParty={handleCheckParty} isCheck={true} />
|
</Col>
|
<Col span={24}>
|
<div className="caseDetail-divider" />
|
</Col>
|
<Col span={24}>
|
<h5>被申请人信息</h5>
|
</Col>
|
<Col span={24}>
|
<PartyMsgTable partyType="respondent" data={data?.personList?.filter(i=>i.perType==='15_020008-2') || []} handleCheckParty={handleCheckParty} isCheck={true} />
|
</Col>
|
</Row>
|
</div>
|
{/* 当事人详情查看 */}
|
<MyDrawer
|
title={partyDrawer.type === 'applicant' ? '申请人' : '被申请人'}
|
visible={partyDrawer.visible}
|
style={{ position: 'absolute' }}
|
onClose={() => setPartyDrawer({ visible: false })}
|
container={isModal}
|
zIndex={isModal ? 1001 : 1000}
|
>
|
<PartyCheck data={partyDrawer.data} />
|
</MyDrawer>
|
</>
|
);
|
};
|
|
const DisputeMsg = ({ caseId, isModal }) => {
|
const [data, setData] = useState({});
|
|
useEffect(() => {
|
// 获取已经提交过的案件
|
async function getCaseData(caseId) {
|
global.setSpinning(true);
|
const res = await getCaseDataApi(caseId);
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data || {});
|
}
|
}
|
getCaseData(caseId);
|
}, [caseId]);
|
|
return (
|
<>
|
{data.serieStatus === '2' ? (
|
<CaseFolderCheck caseData={data.content || []} childrenDom={(x) => <DisputeCheck data={x} isModal={isModal} />} />
|
) : (
|
<DisputeCheck data={data} isModal={isModal} />
|
)}
|
</>
|
);
|
};
|
|
export default DisputeMsg;
|
