import React, { useState, useEffect } from 'react';
|
import { Row, Col, Space, Typography } from 'antd';
|
import { Modal, Divider } from '@arco-design/web-react';
|
import * as $$ from '../../../utils/utility';
|
import PreviewImage from '@/components/PreviewImage';
|
import NameCard2 from '../../../components/NameCard2';
|
import { judicial_3 } from '@/assets/images';
|
import MyPDF from '../../../components/MyPDF';
|
import { judicial_7 } from '../../../assets/images';
|
|
// 司法确认详情接口
|
function getJudicInfoApi(submitData) {
|
return $$.ax.request({ url: '/judicInfo/getJudicCaseInfo', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
function getVideoApi(caseId) {
|
return $$.ax.request({ url: `meetJudic/getVideo?caseId=${caseId}`, type: 'get', service: 'mediate' });
|
}
|
|
//会议查询
|
function getMeetInfoApi(data) {
|
return $$.ax.request({ url: `meetJudic/getMeetInfo`, type: 'get', service: 'mediate', data });
|
}
|
|
const { Paragraph, Link, Text } = Typography;
|
const Judicial = (props) => {
|
const [data, setData] = useState({});
|
const [videoList, setVideoList] = useState([]);
|
// 预添加预约
|
const [preBookData, setPreBookData] = useState({});
|
const [radioVisible, setRadioVisible] = useState(false);
|
|
function checkTimeRange(startTime, endTime, currentTime) {
|
if (currentTime < new Date(startTime)) {
|
return <div className="public-color">未开始</div>; // 当前时间在时间范围之前
|
} else if (currentTime >= new Date(startTime) && currentTime <= new Date(endTime)) {
|
return <div style={{ color: '#EF6C24' }}>进行中</div>; // 当前时间在时间范围内
|
} else {
|
return <div className="public-orange">已结束</div>; // 当前时间在时间范围之后
|
}
|
}
|
// 初始化附件回显
|
async function getJudicialApply(id) {
|
global.setSpinning(true);
|
const res = await getJudicInfoApi({ caseId: id });
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data);
|
}
|
}
|
|
// 获取预约调解记录
|
async function getMeetInfo(id) {
|
global.setSpinning(true);
|
const res = await getMeetInfoApi({ caseId: id });
|
global.setSpinning(false);
|
if (res.type) {
|
let list = res.data || [];
|
if (list?.length > 0) {
|
setPreBookData(list[0]);
|
}
|
}
|
}
|
|
const getVideo = async (id) => {
|
const res = await getVideoApi(id);
|
if (res.type) {
|
if (res.data) {
|
setVideoList(res.data || []);
|
} else {
|
setVideoList(null);
|
}
|
}
|
};
|
|
useEffect(() => {
|
getJudicialApply(props.caseId);
|
getMeetInfo(props.caseId);
|
getVideo(props.caseId);
|
}, []);
|
|
return (
|
<div style={{ ...props.style, position: 'relative' }}>
|
<Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
|
<Space size="small">
|
<div className="MediationInfo-subTitle" style={{ marginTop: '-7px' }}></div>
|
<h4>司法确认信息</h4>
|
</Space>
|
</Col>
|
<table border="1" align="center" cellpadding="8" className="table">
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">
|
司法确认结果
|
</th>
|
<td width="380" style={{ color: data?.judicResult == '22_00028-1' ? '#00b42a' : '#f53f3f' }}>
|
{data?.judicResult == '22_00028-1' ? '已达成' : data?.judicResult == '22_00028-2' ? '未达成' : '-'}
|
</td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">
|
预约信息
|
</th>
|
<td width="380">
|
{preBookData?.orderStartTime ? (
|
<span
|
className="public-a public-color"
|
onClick={() => {
|
setRadioVisible(true);
|
}}
|
>
|
点击查看
|
</span>
|
) : (
|
'-'
|
)}
|
</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">
|
司法确认部门
|
</th>
|
<td width="380">{data?.courtName || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">
|
结案时间
|
</th>
|
<td width="380">{$$.minuteFormat(data?.judicEndTime)}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">
|
承办法官
|
</th>
|
<td width="380">
|
<div className="public-infoSubTitle">
|
<NameCard2 name={data.judgeName} userId={data.judgeNameId || ''} />
|
</div>
|
</td>
|
<th bgcolor="#F7F8FA" className="table-title">
|
助理/书记员
|
</th>
|
<td width="380">
|
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }} className="public-infoSubTitle">
|
{data?.judicAssistList?.map((i) => (
|
<NameCard2 name={i.assUserName} userId={i.assUserId} />
|
))}
|
</div>
|
</td>
|
</tr>
|
{data?.judicResult == '22_00028-1' && (
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">
|
司法确认案号
|
</th>
|
<td width="380">{data?.judicNo || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">
|
诉前调确号
|
</th>
|
<td width="380">{data?.mediateJudicNo || '-'}</td>
|
</tr>
|
)}
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">
|
申请时间
|
</th>
|
<td width="380">{$$.minuteFormat(data?.applyTime)}</td>
|
<th bgcolor="#F7F8FA" className="table-title">
|
申请部门
|
</th>
|
<td width="380">{data?.applyUnitName || '-'}</td>
|
</tr>
|
{data?.judicResult == '22_00028-1' && (
|
<>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">
|
裁定文书
|
</th>
|
<td width="380" colspan="3">
|
{data?.fileList?.find((i) => i.ownerType === '22_00018-405')?.fileList?.length ? (
|
data?.fileList
|
?.find((i) => i.ownerType === '22_00018-405')
|
?.fileList?.map((item, index) => {
|
return (
|
<>
|
<MyPDF key={index} name={item.name} fileUrl={item.showUrl} fileType={item.suffix} />
|
</>
|
);
|
})
|
) : (
|
<div className="public-infoSubTitle">-</div>
|
)}
|
</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">
|
询问笔录
|
</th>
|
<td width="380" colspan="3">
|
{data?.fileList?.find((i) => i.ownerType === '22_00018-401')?.fileList?.length ? (
|
data?.fileList
|
?.find((i) => i.ownerType === '22_00018-401')
|
?.fileList?.map((item, index) => {
|
return (
|
<>
|
<MyPDF key={index} name={item.name} fileUrl={item.showUrl} fileType={item.suffix} />
|
</>
|
);
|
})
|
) : (
|
<div className="public-infoSubTitle">-</div>
|
)}
|
</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">
|
送达地址确认书
|
</th>
|
<td width="380" colspan="3">
|
{data?.fileList?.find((i) => i.ownerType === '22_00018-108')?.fileList?.length ? (
|
data?.fileList
|
?.find((i) => i.ownerType === '22_00018-108')
|
?.fileList?.map((item, index) => {
|
return (
|
<>
|
<MyPDF key={index} name={item.name} fileUrl={item.showUrl} fileType={item.suffix} />
|
</>
|
);
|
})
|
) : (
|
<div className="public-infoSubTitle">-</div>
|
)}
|
</td>
|
</tr>
|
{videoList?.length > 0 && (
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">
|
司法确认视频
|
</th>
|
<td colspan="3">
|
{videoList?.map((item, index) => {
|
return (
|
<div key={'video' + index} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
<img src={judicial_7} alt="" srcset="" />
|
<Link
|
onClick={() => {
|
window.open(item.playUrl);
|
}}
|
>
|
{item.videoName}
|
</Link>
|
</div>
|
);
|
})}
|
</td>
|
</tr>
|
)}
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">
|
结案说明
|
</th>
|
<td width="380" colspan="3">
|
{data?.judicContent || '-'}
|
</td>
|
</tr>
|
</>
|
)}
|
{data?.judicResult == '22_00028-2' && (
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">
|
未达成原因
|
</th>
|
<td width="380" colspan="3">
|
{data?.judicFalseCause || '-'}
|
</td>
|
</tr>
|
)}
|
</table>
|
<Modal
|
title="预约信息"
|
style={{ width: '40%' }}
|
className="judicial-handle-modal"
|
onCancel={() => setRadioVisible(false)}
|
visible={radioVisible}
|
footer={null}
|
>
|
<div style={{ marginBottom: '0' }} className="judicial-item-content">
|
<div className="judicial-item-content-left">
|
{/* <div className='judicial-item-content-left-del public-a'><img src={judicial_3} alt="" srcset="" /></div> */}
|
<div className="judicial-item-content-left-t">
|
<div className="judicial-item-content-left-t-l">
|
<div className="judicial-item-content-left-bigTitle public-color">{$$.myTimeFormat(preBookData?.orderStartTime, 'HH:mm')}</div>
|
<div className="public-color">{$$.myTimeFormat(preBookData?.orderStartTime, 'YYYY年MM月DD日')}</div>
|
</div>
|
<div className="judicial-item-content-left-t-l">
|
<Space size="small">
|
<div className="judicial-item-content-left-inline"></div>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', alignItems: 'center', justifyContent: 'center' }}>
|
{checkTimeRange(preBookData?.orderStartTime, preBookData?.orderEndTime, new Date())}
|
<div className="public-color judicial-item-content-left-time">
|
{$$.calculateTimeDifference(preBookData?.orderStartTime, preBookData?.orderEndTime)}
|
</div>
|
</div>
|
<div className="judicial-item-content-left-inline"></div>
|
</Space>
|
</div>
|
<div className="judicial-item-content-left-t-l">
|
<div className="judicial-item-content-left-bigTitle public-color">{$$.myTimeFormat(preBookData?.orderEndTime, 'HH:mm')}</div>
|
<div className="public-color">{$$.myTimeFormat(preBookData?.orderEndTime, 'YYYY年MM月DD日')}</div>
|
</div>
|
</div>
|
<Divider />
|
<div className="judicial-item-content-left-c-flex">
|
<div className="judicial-item-content-left-c">
|
<div className="judicial-item-content-left-c-title">司法确认方式</div>
|
<div className="judicial-item-content-left-c-content">{preBookData?.meetWayName || '-'}</div>
|
</div>
|
<div className="judicial-item-content-left-c">
|
<div className="judicial-item-content-left-c-title">远程视频司法确认号</div>
|
<div className="judicial-item-content-left-c-content">
|
<span style={{ fontSize: '16px', lineHeight: '24px' }}>{preBookData?.roomNo || '-'}</span>
|
{preBookData?.roomNo && (
|
<span
|
onClick={() => {
|
navigator.clipboard
|
.writeText(preBookData?.roomNo)
|
.then(() => {
|
$$.infoSuccess({ content: '复制成功' });
|
})
|
.catch((err) => {
|
$$.catchApiError('复制失败', err);
|
});
|
}}
|
className="public-color public-a"
|
>
|
复制
|
</span>
|
)}
|
</div>
|
</div>
|
<div className="judicial-item-content-left-c">
|
<div className="judicial-item-content-left-c-title">司法确认地点</div>
|
<div className="judicial-item-content-left-c-content">{preBookData?.meetAddr || '-'}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</Modal>
|
</div>
|
);
|
};
|
|
export default Judicial;
|
