From 544148eddae96db824423cd059ebecb9d13c392e Mon Sep 17 00:00:00 2001
From: xusd <330628789@qq.com>
Date: Thu, 19 Jun 2025 20:52:50 +0800
Subject: [PATCH] fix:市平台项目更新
---
src/views/register/matterDetail/Judicial.jsx | 531 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 321 insertions(+), 210 deletions(-)
diff --git a/src/views/register/matterDetail/Judicial.jsx b/src/views/register/matterDetail/Judicial.jsx
index c59d88f..4f74fa9 100644
--- a/src/views/register/matterDetail/Judicial.jsx
+++ b/src/views/register/matterDetail/Judicial.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+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';
@@ -6,232 +6,343 @@
import NameCard2 from '../../../components/NameCard2';
import { judicial_3 } from '@/assets/images';
import MyPDF from '../../../components/MyPDF';
-import { judicial_7 } from "../../../assets/images";
+import { judicial_7 } from '../../../assets/images';
// 司法确认详情接口
function getJudicInfoApi(submitData) {
- return $$.ax.request({ url: '/judicInfo/getJudicCaseInfo', type: 'get', data: submitData, service: 'mediate' });
+ 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' });
+ 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 });
+ 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);
+ 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);
+ }
+ }
- 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);
+ }
+ }
+ };
- // 获取预约调解记录
- 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])
- }
- }
- }
+ 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>
+ );
+};
- 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
\ No newline at end of file
+export default Judicial;
--
Gitblit v1.8.0