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 <>{item.suffix === 'pdf' ? <MyPDF name={item?.name} fileUrl={item?.showUrl} key={index} /> : <PreviewImage key={index} name={item.name} src={item.showUrl} />}</>
|
})
|
: <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 <>{item.suffix === 'pdf' ? <MyPDF name={item?.name} fileUrl={item?.showUrl} key={index} /> : <PreviewImage key={index} name={item.name} src={item.showUrl} />}</>
|
})
|
: <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 <>{item.suffix === 'pdf' ? <MyPDF name={item?.fileName} fileUrl={item?.showUrl} key={index} /> : <PreviewImage key={index} name={item.fileName} src={item.showUrl} />}</>
|
})
|
: <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
|
