fix:市平台项目更新

xusd

7 days ago 544148eddae96db824423cd059ebecb9d13c392e

 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>&nbsp;&nbsp;
                           {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>&nbsp;&nbsp;{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
export default Judicial;