/*
|
* @Company: hugeInfo
|
* @Author: xzx
|
* @Date: 2022-03-21 17:16:30
|
* @LastEditors: lwh
|
* @LastEditTime: 2023-05-13 16:23:27
|
* @Version: 1.0.0
|
* @Description: 调解结果
|
*/
|
import React, { useEffect, useState, useRef } from 'react';
|
import { Row, Col, Typography, Space } from 'antd';
|
import * as $$ from '../../../utils/utility';
|
import NameCard from '../../../components/NameCard';
|
import MyUpload from '../../../components/MyUpload';
|
import FilesDrawer from '../../../components/FilesDrawer';
|
import { mp4 } from '../../../assets/images/icon';
|
import CaseFolderCheck from '../../../components/CaseFolderCheck';
|
|
const { Paragraph, Link, Text } = Typography;
|
|
// 调解结果接口
|
function getMediationResultApi(caseId) {
|
return $$.ax.request({ url: 'caseTask/mediateRecord?caseId=' + caseId, type: 'get', service: 'mediate' });
|
}
|
|
// 调解结果接口
|
function mediateBookRecordApi(caseId) {
|
return $$.ax.request({ url: 'caseTask/mediateBookRecord?bookId=' + caseId, type: 'get', service: 'mediate' });
|
}
|
|
const MediationResultCheck = ({ contentData = {} }) => {
|
const myUploadRef = useRef();
|
|
// TODO：协助调解反馈暂时没有，modal没有。
|
const msg = [
|
{ title: '调解结果', key: 'mediResultName', span: 24 },
|
{
|
title: '调解时间',
|
content:
|
$$.myTimeFormat(contentData['mediStartTime'], 'YYYY-MM-DD HH:mm') + ' ~ ' + $$.myTimeFormat(contentData['mediEndTime'], 'YYYY-MM-DD HH:mm'),
|
tooltip:
|
$$.myTimeFormat(contentData['mediStartTime'], 'YYYY-MM-DD HH:mm') + ' ~ ' + $$.myTimeFormat(contentData['mediEndTime'], 'YYYY-MM-DD HH:mm'),
|
},
|
{ title: '调解地点', key: 'meetAddr' },
|
// { title: '调解案号', key: 'caseNo', span: 18 },
|
{ title: '调解方式', key: 'meetWayName' },
|
{
|
title: '调解上传附件',
|
content: () => {
|
let arr = contentData['sceneFileInfoList']?.filter((_, index) => index < 2);
|
return (
|
<FilesDrawer
|
name={
|
<div className="mediationResult-imgBox">
|
{arr.length === 0 && '-'}
|
{arr.map((item, index) => (
|
<div className="mediationResult-img" key={index}>
|
<img style={{ width: '100%', height: '100%' }} src={$$.appUrl.fileUrl + $$.appUrl.fileShowUrl + item.id} alt="" />
|
</div>
|
))}
|
{contentData['sceneFileInfoList']?.length > 2 && (
|
<div className="mediationResult-img mediationResult-img-add">+{contentData['sceneFileInfoList']?.length - 2}</div>
|
)}
|
</div>
|
}
|
title="调解上传附件"
|
filesData={contentData['sceneFileInfoList']}
|
/>
|
);
|
},
|
},
|
{ title: '调解组织', key: 'mediUnitName' },
|
{ title: '调解员', content: <NameCard name={contentData['mediator']} userId={contentData['mediatorId']} /> },
|
{ title: '协助调解员', key: 'assistMediator' },
|
// {
|
// title: '协助调解反馈',
|
// key: 'xiezhu',
|
// content: <Link className="public-underline">查看详情</Link>,
|
// },
|
...(contentData.mediResult === '22_00025-1'
|
? [
|
{ title: '达成的调解协议', key: 'agreeContent', span: 24 },
|
{ title: '履行情况', key: 'fulfilSituName' },
|
{ title: '是否转诉讼案件', content: contentData.civilStatus === '2' ? '是' : '否' },
|
{ title: '诉前调书号', key: 'mediateBookNo' },
|
{ title: '诉前调解案号', key: 'mediateNo' },
|
]
|
: [
|
{ title: '不成功原因', key: 'mediFalseName' },
|
{
|
title: '是否转诉讼案件',
|
content: (
|
<>
|
<span>{contentData.civilStatus === '2' ? '是' : '否'}</span>
|
{contentData.civilNo && <span className="public-rightBorder">{contentData.civilNo}</span>}
|
</>
|
),
|
},
|
]),
|
{ title: '调解备注', key: 'mediateContent', span: 24 },
|
];
|
|
return (
|
<div className="mediationResult">
|
{/* 为了获取myUploadRef实例调用方法 */}
|
<MyUpload type="diy" myUploadRef={myUploadRef} />
|
<Row gutter={[16, 12]}>
|
<Col span={24}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle'></div><h5> 调解结果</h5>
|
</Space>
|
</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={{ tooltip: x.tooltip || contentData[x.key], rows: x.span === 24 ? 2 : 1 }}>
|
{x.content || contentData[x.key] || '-'}
|
</Paragraph>
|
</Col>
|
);
|
})}
|
<Col span={24}>
|
<div className="caseDetail-divider" />
|
</Col>
|
<Col span={24}>
|
<h5>调解视频录像信息</h5>
|
</Col>
|
<Col span={24}>
|
<Row gutter={[16, 12]}>
|
{contentData.meetVideoList?.length === 0 || !contentData.meetVideoList && <Col span={24}>{$$.MyEmpty({ description: '无调解视频录像信息' })}</Col>}
|
{contentData.meetVideoList?.map((x, t) => (
|
<Col span={8} key={t}>
|
<div className="public-fileCard public-fileCard-noBorder">
|
<img src={mp4} alt="" />
|
<div className="public-fileCard-main">
|
<Text ellipsis={{ tooltip: x.videoName }}>{x.videoName}</Text>
|
<Space size="middle" className="public-fileCard-action">
|
<Link onClick={() => window.open(x.playUrl)}>在线播放</Link>
|
<Link href={x.downUrl}>下载</Link>
|
</Space>
|
</div>
|
</div>
|
<div className="public-fileCard-text">
|
<div>状态：{x.recordStatusName || '-'}</div>
|
<div>上传时间：{$$.timeFormat(x.startTime)}</div>
|
</div>
|
</Col>
|
))}
|
</Row>
|
</Col>
|
<Col span={24}>
|
<div className="caseDetail-divider" />
|
</Col>
|
<Col span={24}>
|
<h5>结果文书信息</h5>
|
</Col>
|
<Col span={24}>
|
<Row gutter={[16, 12]}>
|
{!contentData.resultFileInfoList?.length && <Col span={24}>{$$.MyEmpty({ description: '无结果文书信息' })}</Col>}
|
{contentData?.resultFileInfoList?.map((x, t) =>
|
x.fileList?.map((y, z) => {
|
return (
|
<Col span={12} key={z}>
|
<div className="public-fileCard public-fileCard-noBorder">
|
<img src={$$.fileType(x.cat)} alt="" />
|
<div className="public-fileCard-main">
|
<Text ellipsis={{ tooltip: y.name }}>{y.name}</Text>
|
<Space size="middle" className="public-fileCard-action">
|
<Link onClick={() => myUploadRef.current.handleOpenFiles(y)}>在线预览</Link>
|
<Link onClick={() => myUploadRef.current.handleDownloadFiles(y)}>下载</Link>
|
</Space>
|
</div>
|
</div>
|
<div className="public-fileCard-text">
|
<div>材料类型：{y.ownerTypeName || '-'}</div>
|
<div>材料数量：1份</div>
|
<div>上传时间：{$$.timeFormat(y.createTime)}</div>
|
</div>
|
</Col>
|
);
|
})
|
)}
|
</Row>
|
</Col>
|
<Col span={24}>
|
<div className="caseDetail-divider" />
|
</Col>
|
<Col span={24}>
|
<h5>申请人参与信息</h5>
|
</Col>
|
{contentData.plaintiffList?.length > 0 || contentData.defendantList?.length > 0 ? (
|
['plaintiffList', 'defendantList'].map((item, index) => (
|
<Col span={24} key={index}>
|
<Row gutter={[16, 12]}>
|
{contentData[item]?.map((x, t) => (
|
<Col span={8} key={t}>
|
<div className="public-nameCard">
|
<div className={`public-nameCard-card ${index === 0 ? 'public-nameCard-card-blue' : 'public-nameCard-card-orange'}`}>
|
{x.userName.substr(0, 1)}
|
<div className="public-nameCard-card-bottomRight" style={{ color: x.signStatus === '3' && 'rgba(0,0,0,0.65)' }}>
|
{x.fixStatusName}
|
</div>
|
</div>
|
<div className="public-nameCard-content">
|
<div>
|
<Text ellipsis={{ tooltip: x.userName }}>{x.userName}</Text>
|
</div>
|
<div>联系电话：{x.userMobile}</div>
|
<div
|
style={{ marginTop: '2px', position: 'absolute' }}
|
className={`public-nameCard-tag ${index === 0 ? 'public-nameCard-tag-blue' : 'public-nameCard-tag-orange'}`}
|
>
|
{x.userTypeName}
|
</div>
|
</div>
|
</div>
|
</Col>
|
))}
|
</Row>
|
</Col>
|
))
|
) : (
|
<Col span={24}>{$$.MyEmpty({ description: '暂无申请人参与信息' })}</Col>
|
)}
|
</Row>
|
</div>
|
);
|
};
|
|
const MediationResult = ({ caseId, mediationType }) => {
|
// 调解结果数据
|
const [data, setData] = useState({});
|
|
//初始化组件数据
|
useEffect(() => {
|
console.log('mediationType', mediationType);
|
// 获取记录数据
|
async function getMediationResult() {
|
global.setSpinning(true);
|
const res = mediationType == 'ledger' ? await mediateBookRecordApi(caseId) : await getMediationResultApi(caseId);
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data || {});
|
}
|
}
|
getMediationResult();
|
}, [caseId]);
|
|
return !data.serieStatus ? (
|
<div></div>
|
) : data.serieStatus === '2' ? (
|
<CaseFolderCheck caseData={data.content || []} childrenDom={(x) => <MediationResultCheck contentData={x} />} />
|
) : (
|
<MediationResultCheck contentData={(data.content || [])[0]} />
|
);
|
};
|
|
export default MediationResult;
|
