广州市综治平台前端
xusd
7 days ago 544148eddae96db824423cd059ebecb9d13c392e
src/views/judicialSubmit/courtEdit.jsx
@@ -11,7 +11,7 @@
import { Row, Col, Space, Typography, Empty } from 'antd';
import { Input, Select, Radio, Modal, Button, Form, Divider, DatePicker, Alert } from '@arco-design/web-react';
import { IconInfoCircleFill } from '@arco-design/web-react/icon';
import { Scrollbars } from "react-custom-scrollbars";
import { Scrollbars } from 'react-custom-scrollbars';
import * as $$ from '../../utils/utility';
import { useNavigate } from 'react-router-dom';
import ArcoUpload from '@/components/ArcoUpload';
@@ -46,7 +46,7 @@
}
// 提交审核
function judicConfirmApi(submitData) {
  return $$.ax.request({ url: `judicInfo/judicConfirm`, type: 'post', service: 'mediate', data: submitData, });
   return $$.ax.request({ url: `judicInfo/judicConfirm`, type: 'post', service: 'mediate', data: submitData });
}
// 获取助理列表
function listAssistApi(submitData) {
@@ -82,15 +82,14 @@
  return $$.ax.request({ url: `meetJudic/saveVideo`, type: 'post', service: 'mediate', data });
}
const CourtAuditEdit = () => {
  const formRef = useRef();
  const form = useRef();
  const formVideo = useRef();
  let navigate = useNavigate();
  const judicId = $$.getQueryString('judicId')
  const caseId = $$.getQueryString('caseId')
  const caseTaskId = $$.getQueryString('caseTaskId')
   const judicId = $$.getQueryString('judicId');
   const caseId = $$.getQueryString('caseId');
   const caseTaskId = $$.getQueryString('caseTaskId');
  const [caseCheckModal, setCaseCheckModal] = useState(false);
@@ -99,7 +98,6 @@
  // 数据
  const [formData, setFormData] = useState({});
  const [caseData, setCaseData] = useState({});
  const [filesList, setFilesList] = useState([]);
  // 司法确认部门单位
@@ -116,32 +114,31 @@
  // 选择法官弹窗
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectObjModalData, setSelectObjModalData] = useState({})
   const [selectObjModalData, setSelectObjModalData] = useState({});
  // 司法确认结果是否同意
  const [agree, setAgree] = useState('')
   const [agree, setAgree] = useState('');
  function handleChangeFile(type, info, apiResult) {
    console.log('handleChangeFile', type, info, apiResult);
    let list = info.fileList ? info.fileList : [];
    // .map(item => ({ ...item, name: item.trueName }))
    setFilesList(list)
      setFilesList(list);
    // setResult(apiResult)
    console.log('list', list);
    if (list.length >= 1) {
      setStepsNum(1)
         setStepsNum(1);
    } else {
      setStepsNum(0)
         setStepsNum(0);
    }
  }
  //删除文件
  const handleDelFile = async (id) => {
    const res = await delFile(id)
      const res = await delFile(id);
    if (res.type) {
      $$.infoSuccess({ content: '删除成功!' });
    }
  }
   };
  // 修改
  function handleChangeValue(key, value) {
@@ -155,7 +152,7 @@
      if (formRef.current) {
        formRef.current.validate(undefined, (errors, values) => {
          if (!errors) {
            const data = formRef?.current.getFields()
                  const data = formRef?.current.getFields();
            console.log('data', data);
            $$.arcoModalInfo({
@@ -167,24 +164,23 @@
              okText: '确定',
              cancelText: '我再想想',
              onOk: () => {
                applyJudicial({ ...data, judicId, submitType: '1' }, type)
                saveVideo(caseId)
                        applyJudicial({ ...data, judicId, submitType: '1' }, type);
                        saveVideo(caseId);
              },
            });
          }
        })
            });
      }
    }
    if (type === 'draft') {
      const data = formRef?.current.getFields();
      applyJudicial({ ...data, judicId, submitType: '2' }, type)
         applyJudicial({ ...data, judicId, submitType: '2' }, type);
    }
  }
  // 保存调解视频
  async function saveVideo(caseId) {
    const res = await saveVideoApi({ caseId })
      const res = await saveVideoApi({ caseId });
    if (res.type) {
    }
  }
@@ -200,14 +196,13 @@
    }
  }
  // 助理列表字典值选择
  async function gatListCourt(data) {
    global.setSpinning(true);
    const res = await listAssistApi({ courtId: data?.courtId });
    global.setSpinning(false);
    if (res.type) {
      setListCourt(res.data || [])
         setListCourt(res.data || []);
    }
  }
@@ -220,7 +215,7 @@
      setData(res.data);
      gatListCourt(res.data || {});
      formRef.current.setFieldsValue(res.data || {});
      setAgree(res.data?.judicResult || '')
         setAgree(res.data?.judicResult || '');
    }
  }
  async function getCaseData() {
@@ -228,51 +223,52 @@
    const res = await getCaseDataApi({ id: caseId });
    global.setSpinning(false);
    if (res.type) {
      const { agentList, personList, ...rest } = res.data
      const parList = agentList.concat(personList)
      const newParList = parList?.map(item => {
        const fileInfoList = item.fileInfoList
         const { agentList, personList, ...rest } = res.data;
         const parList = agentList.concat(personList);
         const newParList =
            parList?.map((item) => {
               const fileInfoList = item.fileInfoList;
        let file = [];//身份证明材料、企业登记材料
        let file1 = [];//法人、机构身份证明材料、代理人授权委托书
        if (fileInfoList && fileInfoList.length != 0) {
          fileInfoList.forEach(item => {
                  fileInfoList.forEach((item) => {
            if (item.ownerType == '22_00018-202' || item.ownerType == '22_00018-203') {
              item.fileList.forEach(res => {
                        item.fileList.forEach((res) => {
                file.push({
                  ...res,
                  uid: res.id,
                })
              })
                           });
                        });
            }
            if (item.ownerType == '22_00018-204' || item.ownerType == '22_00018-207') {
              item.fileList.forEach(res => {
                        item.fileList.forEach((res) => {
                file1.push({
                  ...res,
                  uid: res.id,
                })
              })
                           });
                        });
            }
          })
                  });
        }
        return {
          ...item,
          file,
          file1
        }
      }) || []
                  file1,
               };
            }) || [];
      const obj = {
        ...rest,
        fakeData: newParList,
      }
      setCaseData(obj)
         };
         setCaseData(obj);
    }
  }
  // 视频调解部分
  // 添加预约重置
  function resetClick() {
    form.current.resetFields()
    form.current.setFieldValue()
      form.current.resetFields();
      form.current.setFieldValue();
  }
  function submitClick() {
@@ -282,12 +278,17 @@
          let submitData = form.current.getFields();
          submitData.orderStartTime = submitData.time[0];
          submitData.orderEndTime = submitData.time[1];
          delete submitData.time
               delete submitData.time;
          console.log('submitData', submitData);
          // submitData.
          $$.modalInfo({
            title: '添加预约调解确认',
            content: <div>确认添加预约<span className='public-color'>{submitData.orderStartTime}</span>-<span className='public-color'>{submitData.orderEndTime}</span>的调解吗?</div>,
                  content: (
                     <div>
                        确认添加预约<span className="public-color">{submitData.orderStartTime}</span>-
                        <span className="public-color">{submitData.orderEndTime}</span>的调解吗?
                     </div>
                  ),
            okText: '确定添加',
            cancelText: '我再想想',
            onOk: () => addMeetInfo({ caseId, ...submitData }),
@@ -302,8 +303,8 @@
    const res = await addMeetInfoApi(submitData);
    global.setSpinning(false);
    if (res.type) {
      setPreBookVisible(false)
      form.current.resetFields()
         setPreBookVisible(false);
         form.current.resetFields();
      getMeetInfo(caseId);
    }
  }
@@ -311,14 +312,19 @@
    if (formVideo.current) {
      formVideo.current.validate(undefined, (errors, values) => {
        if (!errors) {
          let submitData = formVideo.current.getFields()
               let submitData = formVideo.current.getFields();
          submitData.orderStartTime = submitData.time[0];
          submitData.orderEndTime = submitData.time[1];
          delete submitData.time
               delete submitData.time;
          console.log('submitData', submitData);
          $$.modalInfo({
            title: '创建视频号确认',
            content: <div>确认创建<span className='public-color'>{submitData.orderStartTime}</span>-<span className='public-color'>{submitData.orderEndTime}</span>的视频号吗?</div>,
                  content: (
                     <div>
                        确认创建<span className="public-color">{submitData.orderStartTime}</span>-
                        <span className="public-color">{submitData.orderEndTime}</span>的视频号吗?
                     </div>
                  ),
            okText: '确定创建',
            cancelText: '我再想想',
            onOk: () => addRoomInfo({ caseId, ...submitData }),
@@ -334,14 +340,14 @@
    const res = await addRoomInfoApi(submitData);
    global.setSpinning(false);
    if (res.type) {
      setRadioVisible(false)
      formVideo.current.resetFields()
         setRadioVisible(false);
         formVideo.current.resetFields();
      getMeetInfo(caseId);
    }
  }
  function radioResetClick() {
    formVideo.current.resetFields()
      formVideo.current.resetFields();
  }
  function delClick() {
@@ -360,7 +366,7 @@
    global.setSpinning(false);
    if (res.type) {
      $$.infoSuccess({ content: '删除成功' });
      setPreBookData({})
         setPreBookData({});
    }
  }
@@ -372,28 +378,28 @@
    if (res.type) {
      let list = res.data || [];
      if (list?.length > 0) {
        setPreBookData(list[0])
            setPreBookData(list[0]);
      }
    }
  }
  function checkTimeRange(startTime, endTime, currentTime) {
    if (currentTime < new Date(startTime)) {
      return <div className='public-color'>未开始</div>; // 当前时间在时间范围之前
         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>; // 当前时间在时间范围之后
         return <div className="public-orange">已结束</div>; // 当前时间在时间范围之后
    }
  }
  async function getTransactResult(id) {
    const res = await getTransactResultApi(id)
      const res = await getTransactResultApi(id);
    if (res.type) {
      if (res.data) {
        setTransactResult({ ...res.data })
            setTransactResult({ ...res.data });
      } else {
        setTransactResult(null)
            setTransactResult(null);
      }
    }
  }
@@ -402,7 +408,7 @@
  useEffect(() => {
    if (caseId) {
      getMeetInfo(caseId);
      getTransactResult(caseId)
         getTransactResult(caseId);
    }
    if (judicId) {
      getCaseData();
@@ -410,207 +416,343 @@
    }
  }, []);
  return (
    <NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '司法确认' }], title: '司法确认' }}>
      <Fragment>
        <Scrollbars style={{ height: 'calc(100vh - 219px)' }} autoHide>
          <div className=' dataSync-noScrollPage'>
               <div className=" dataSync-noScrollPage">
            <Row gutter={[16, 16]}>
              <Col span={24}>
                <Space>
                  <div className='MediationInfo-subTitle'></div><span style={{ fontSize: '16px', lineHeight: '24px' }}>申请信息</span>
                           <div className="MediationInfo-subTitle"></div>
                           <span style={{ fontSize: '16px', lineHeight: '24px' }}>申请信息</span>
                </Space>
              </Col>
              <Col span={24}>
                <div className='public-infoTitle'>案件信息</div>
                        <div className="public-infoTitle">案件信息</div>
                {/* <div className='judicialSubmit-audit-case' onClick={() => setCaseCheckModal(true)}> */}
                
                <div className='judicialSubmit-audit-case' onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${caseTaskId}&caseId=${caseId}`)}>
                        <div
                           className="judicialSubmit-audit-case"
                           onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${caseTaskId}&caseId=${caseId}`)}
                        >
                  <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
                    <div><img src={judicial_5} alt="" srcset="" /></div>
                    <div>
                      <div className='judicialSubmit-audit-case-flex'>
                                 <img src={judicial_5} alt="" srcset="" />
                              </div>
                              <div>
                                 <div className="judicialSubmit-audit-case-flex">
                        <div>承办部门:{transactResult?.mediateUnitName || '-'}</div>
                        <div className='judicialSubmit-audit-case-subTitle'>申请方:{caseData.fakeData?.filter(i => i.perType === '15_020008-1')?.length === 1 ? caseData.fakeData?.filter(i => i.perType === '15_020008-1')[0].trueName : caseData.fakeData?.filter(i => i.perType === '15_020008-1')?.length > 1 ? `${caseData.fakeData?.filter(i => i.perType === '15_020008-1')[0].trueName}...等共${caseData.fakeData?.filter(i => i.perType === '15_020008-1')?.length}人` : '-'} | 被申请方:{caseData.fakeData?.filter(i => i.perType === '15_020008-2')?.length === 1 ? caseData.fakeData?.filter(i => i.perType === '15_020008-1')[0].trueName : caseData.fakeData?.filter(i => i.perType === '15_020008-2')?.length > 1 ? `${caseData.fakeData?.filter(i => i.perType === '15_020008-2')[0].trueName}...等共${caseData.fakeData?.filter(i => i.perType === '15_020008-2')?.length}人` : '-'}</div>
                      </div>
                      <div className='judicialSubmit-audit-case-subTitle'>办结时间:{$$.minuteFormat(transactResult?.closeTime)} | {transactResult?.mediResultName || '-'}</div>
                                    <div className="judicialSubmit-audit-case-subTitle">
                                       申请方:
                                       {caseData.fakeData?.filter((i) => i.perType === '15_020008-1')?.length === 1
                                          ? caseData.fakeData?.filter((i) => i.perType === '15_020008-1')[0].trueName
                                          : caseData.fakeData?.filter((i) => i.perType === '15_020008-1')?.length > 1
                                          ? `${caseData.fakeData?.filter((i) => i.perType === '15_020008-1')[0].trueName}...等共${
                                                caseData.fakeData?.filter((i) => i.perType === '15_020008-1')?.length
                                            }人`
                                          : '-'}{' '}
                                       | 被申请方:
                                       {caseData.fakeData?.filter((i) => i.perType === '15_020008-2')?.length === 1
                                          ? caseData.fakeData?.filter((i) => i.perType === '15_020008-1')[0].trueName
                                          : caseData.fakeData?.filter((i) => i.perType === '15_020008-2')?.length > 1
                                          ? `${caseData.fakeData?.filter((i) => i.perType === '15_020008-2')[0].trueName}...等共${
                                                caseData.fakeData?.filter((i) => i.perType === '15_020008-2')?.length
                                            }人`
                                          : '-'}
                    </div>
                  </div>
                  <div><img src={judicial_6} alt="" srcset="" /></div>
                                 <div className="judicialSubmit-audit-case-subTitle">
                                    办结时间:{$$.minuteFormat(transactResult?.closeTime)} | {transactResult?.mediResultName || '-'}
                                 </div>
                              </div>
                           </div>
                           <div>
                              <img src={judicial_6} alt="" srcset="" />
                           </div>
                </div>
              </Col>
              <Col span={24}>
                <div className='public-infoTitle'>申请理由</div>
                <div className='public-infoSubTitle'>{data?.applyContent || '-'}</div>
                        <div className="public-infoTitle">申请理由</div>
                        <div className="public-infoSubTitle">{data?.applyContent || '-'}</div>
              </Col>
              <Col span={24}>
                <div className='public-infoTitle'>调解协议书</div>
                {
                  data?.fileList?.find(i => i.ownerType === '22_00018-302')?.fileList?.length ?
                    data?.fileList?.find(i => i.ownerType === '22_00018-302')?.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-infoTitle">调解协议书</div>
                        {data?.fileList?.find((i) => i.ownerType === '22_00018-302')?.fileList?.length ? (
                           data?.fileList
                              ?.find((i) => i.ownerType === '22_00018-302')
                              ?.fileList?.map((item, index) => {
                                 return (
                                    <>
                                       <MyPDF key={index} name={item.name} fileUrl={item.showUrl} fileType={item.suffix} />
                                    </>
                                 );
                    })
                    : <div className='public-infoSubTitle'>-</div>
                }
                        ) : (
                           <div className="public-infoSubTitle">-</div>
                        )}
              </Col>
              <Col span={24}>
                <div className='public-infoTitle'>非诉讼调解协议司法确认申请书</div>
                {
                  data?.fileList?.find(i => i.ownerType === '22_00018-402')?.fileList?.length ?
                    data?.fileList?.find(i => i.ownerType === '22_00018-402')?.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-infoTitle">非诉讼调解协议司法确认申请书</div>
                        {data?.fileList?.find((i) => i.ownerType === '22_00018-402')?.fileList?.length ? (
                           data?.fileList
                              ?.find((i) => i.ownerType === '22_00018-402')
                              ?.fileList?.map((item, index) => {
                                 return (
                                    <>
                                       <MyPDF key={index} name={item.name} fileUrl={item.showUrl} fileType={item.suffix} />
                                    </>
                                 );
                    })
                    : <div className='public-infoSubTitle'>-</div>
                }
                        ) : (
                           <div className="public-infoSubTitle">-</div>
                        )}
              </Col>
              <Col span={24}>
                <div className='public-infoTitle'>诉前联调协议案件移送函</div>
                {
                  data?.fileList?.find(i => i.ownerType === '22_00018-403')?.fileList?.length ?
                    data?.fileList?.find(i => i.ownerType === '22_00018-403')?.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-infoTitle">诉前联调协议案件移送函</div>
                        {data?.fileList?.find((i) => i.ownerType === '22_00018-403')?.fileList?.length ? (
                           data?.fileList
                              ?.find((i) => i.ownerType === '22_00018-403')
                              ?.fileList?.map((item, index) => {
                                 return (
                                    <>
                                       <MyPDF key={index} name={item.name} fileUrl={item.showUrl} fileType={item.suffix} />
                                    </>
                                 );
                    })
                    : <div className='public-infoSubTitle'>-</div>
                }
                        ) : (
                           <div className="public-infoSubTitle">-</div>
                        )}
              </Col>
              <Col span={24}>
                <div className='public-infoTitle'>送达地址确认书</div>
                {
                  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?.name} fileUrl={item?.showUrl} key={index} /> : <PreviewImage key={index} name={item.name} src={item.showUrl} />}</>
                        <div className="public-infoTitle">送达地址确认书</div>
                        {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>
                }
                        ) : (
                           <div className="public-infoSubTitle">-</div>
                        )}
              </Col>
              <Col span={24}>
                <div className='public-infoTitle'>申请时间</div>
                <div className='public-infoSubTitle'>{$$.minuteFormat(data?.applyTime)}</div>
                        <div className="public-infoTitle">申请时间</div>
                        <div className="public-infoSubTitle">{$$.minuteFormat(data?.applyTime)}</div>
              </Col>
              <Col span={24}>
                <div className='public-infoTitle'>申请人</div>
                <div className='public-infoSubTitle'><span className='public-nameCard2'>{(data?.applyUnitName)}&nbsp;&nbsp;<NameCard2 name={data.applyUserName} userId={data.applyUserId} /></span></div>
                        <div className="public-infoTitle">申请人</div>
                        <div className="public-infoSubTitle">
                           <span className="public-nameCard2">
                              {data?.applyUnitName}&nbsp;&nbsp;
                              <NameCard2 name={data.applyUserName} userId={data.applyUserId} />
                           </span>
                        </div>
              </Col>
            </Row>
          </div>
          <div style={{ height: '16px' }}></div>
          <div className=' dataSync-noScrollPage'>
               <div className=" dataSync-noScrollPage">
            <Row gutter={[20, 20]}>
              <Col span={24}>
                <Space>
                  <div className='MediationInfo-subTitle'></div><span style={{ fontSize: '16px', lineHeight: '24px' }}>司法确认信息</span>
                           <div className="MediationInfo-subTitle"></div>
                           <span style={{ fontSize: '16px', lineHeight: '24px' }}>司法确认信息</span>
                </Space>
              </Col>
              <Col span={24}>
                <table style={{ marginBottom: '0px' }} border="1" align="center" cellpadding="6" className="table">
                  <tr>
                    <th bgcolor="#F7F8FA" className="table-title" width="120" >承办法官</th>
                    <td width='380'><div className='public-infoSubTitle'><NameCard2 name={data.judgeName} userId={data.judicId} /></div></td>
                    <th bgcolor="#F7F8FA" className="table-title" width="120">助理/书记员</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>
                              <th bgcolor="#F7F8FA" className="table-title" width="120">
                                 承办法官
                              </th>
                              <td width="380">
                                 <div className="public-infoSubTitle">
                                    <NameCard2 name={data.judgeName} userId={data.judicId} />
                                 </div>
                              </td>
                              <th bgcolor="#F7F8FA" className="table-title" width="120">
                                 助理/书记员
                              </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>
                </table>
              </Col>
              <Col span={24}>
                <div className='judicial-item' style={{ marginTop: '0', marginRight: '0' }}>
                  <div className='handle-content-empty judicial-item-left' >
                    <div className='judicial-item-title'><img src={judicial_1} alt="" srcset="" />预约信息</div>
                    {
                      preBookData?.orderStartTime ?
                        <div className='judicial-item-content'>
                          <div className='judicial-item-content-left'>
                            <div onClick={() => delClick()} 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>
                        <div className="judicial-item" style={{ marginTop: '0', marginRight: '0' }}>
                           <div className="handle-content-empty judicial-item-left">
                              <div className="judicial-item-title">
                                 <img src={judicial_1} alt="" srcset="" />
                                 预约信息
                              </div>
                              {preBookData?.orderStartTime ? (
                                 <div className="judicial-item-content">
                                    <div className="judicial-item-content-left">
                                       <div onClick={() => delClick()} 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 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 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(() => {
                                          <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 => {
                                                            })
                                                            .catch((err) => {
                                    $$.catchApiError('复制失败', err);
                                  });
                                }} className='public-color public-a'>复制</span>}</div>
                                                      }}
                                                      className="public-color public-a"
                                                   >
                                                      复制
                                                   </span>
                                                )}
                              </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 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> :
                        <Empty description={<span className='empty-text'>暂无数据</span>} image={empty}><Button onClick={() => setPreBookVisible(true)} type='outline'>添加预约</Button></Empty>
                    }
                  </div>
                  <div className='handle-content-empty judicial-item-left'>
                    <div className='judicial-item-title'><img src={judicial_2} alt="" srcset="" />远程视频司法确认</div>
                    {
                      preBookData?.orderStartTime ?
                        <div className='judicial-item-video'>
                          <div className='judicial-item-video-flex'>
                            <div className='judicial-item-video-img'><img src={judicial_4} alt="" srcset="" /></div>
                              ) : (
                                 <Empty description={<span className="empty-text">暂无数据</span>} image={empty}>
                                    <Button onClick={() => setPreBookVisible(true)} type="outline">
                                       添加预约
                                    </Button>
                                 </Empty>
                              )}
                           </div>
                           <div className="handle-content-empty judicial-item-left">
                              <div className="judicial-item-title">
                                 <img src={judicial_2} alt="" srcset="" />
                                 远程视频司法确认
                              </div>
                              {preBookData?.orderStartTime ? (
                                 <div className="judicial-item-video">
                                    <div className="judicial-item-video-flex">
                                       <div className="judicial-item-video-img">
                                          <img src={judicial_4} alt="" srcset="" />
                                       </div>
                            <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 style={{ color: "#4E5969", marginTop: '4px' }}>{$$.myTimeFormat(preBookData?.orderStartTime, 'YYYY年MM月DD日')}&nbsp;{$$.myTimeFormat(preBookData?.orderStartTime, 'HH:mm')}-{$$.myTimeFormat(preBookData?.orderEndTime, 'HH:mm')}</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 style={{ color: '#4E5969', marginTop: '4px' }}>
                                             {$$.myTimeFormat(preBookData?.orderStartTime, 'YYYY年MM月DD日')}&nbsp;
                                             {$$.myTimeFormat(preBookData?.orderStartTime, 'HH:mm')}-{$$.myTimeFormat(preBookData?.orderEndTime, 'HH:mm')}
                            </div>
                          </div>
                          <Alert type='info' content={<span>请使用小鱼易连客户端加入该号码连线</span>} />
                        </div> :
                        <Empty description={<span className='empty-text'>暂无数据</span>} image={empty}><Button onClick={() => setRadioVisible(true)} type='outline'>创建视频号</Button></Empty>}
                                    </div>
                                    <Alert type="info" content={<span>请使用小鱼易连客户端加入该号码连线</span>} />
                                 </div>
                              ) : (
                                 <Empty description={<span className="empty-text">暂无数据</span>} image={empty}>
                                    <Button onClick={() => setRadioVisible(true)} type="outline">
                                       创建视频号
                                    </Button>
                                 </Empty>
                              )}
                  </div>
                </div>
              </Col>
            </Row>
          </div>
          <div className=' dataSync-noScrollPage'>
               <div className=" dataSync-noScrollPage">
            <Form
              ref={formRef}
              layout='vertical'
                     layout="vertical"
              requiredSymbol={false}
              scrollToFirstError={true}
              onChange={(first, allValues) => {
                if (first?.judicResult) {
                  setAgree(first?.judicResult)
                  formRef.current.clearFields()
                           setAgree(first?.judicResult);
                           formRef.current.clearFields();
                  formRef.current.setFieldsValue({
                    judicResult: first.judicResult,
                  });
                }
              }}
              initialValues={{
              }}//默认值
                     initialValues={{}} //默认值
            >
              <Row>
                <Col span={24}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>司法确认结果</div>)}
                    field='judicResult'
                              label={<div style={{ display: 'flex' }}>司法确认结果</div>}
                              field="judicResult"
                    rules={[{ required: true, message: '请选择司法确认结果' }]}
                  >
                    <Radio.Group>
                      <Space direction="vertical">
                        {[{ value: '22_00028-1', label: '已达成', }, { value: '22_00028-2', label: '未达成' }].map((x) => (
                                    {[
                                       { value: '22_00028-1', label: '已达成' },
                                       { value: '22_00028-2', label: '未达成' },
                                    ].map((x) => (
                          <Radio value={x.value} key={x.value} label={x.label}>
                            {x.label}
                          </Radio>
@@ -624,16 +766,15 @@
                  <>
                    <Col span={24}>
                      <FormItem
                        label={(<div style={{ display: 'flex' }}>未达成原因<div className="must">必填</div></div>)}
                        field='judicFalseCause'
                                    label={
                                       <div style={{ display: 'flex' }}>
                                          未达成原因<div className="must">必填</div>
                                       </div>
                                    }
                                    field="judicFalseCause"
                        rules={[{ required: true, message: '未达成原因不能为空' }]}
                      >
                        <TextArea
                          rows={5}
                          maxLength={256}
                          autoSize={{ minRows: 4, maxRows: 8 }}
                          placeholder='请填写'
                        />
                                    <TextArea rows={5} maxLength={256} autoSize={{ minRows: 4, maxRows: 8 }} placeholder="请填写" />
                      </FormItem>
                    </Col>
                  </>
@@ -641,29 +782,31 @@
                {agree === '22_00028-1' && (
                  <>
                    <Col span={24} className="doubleFile">
                      <div style={{ display: 'flex', marginBottom: '8px' }}>裁定文书<div className="must">必填</div></div>
                                 <div style={{ display: 'flex', marginBottom: '8px' }}>
                                    裁定文书<div className="must">必填</div>
                                 </div>
                      <ArcoUpload
                        params={{
                          action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&&ownerId=${judicId}&ownerType=22_00018-405`,
                        }}
                        formItemParams={{
                          rules: [{ message: '请上传裁定文书', required: true }]
                                       rules: [{ message: '请上传裁定文书', required: true }],
                        }}
                        field='filesList'
                        label=''
                                    field="filesList"
                                    label=""
                        editData={{
                          filesList: filesList || []
                                       filesList: filesList || [],
                        }}
                        handleDelFile={handleDelFile}
                        onFileListChange={(v) => {
                          let newList = v?.map(item => {
                                       let newList = v?.map((item) => {
                            if (item.response) {
                              return item.response.data[0]
                                             return item.response.data[0];
                            } else {
                              return item
                                             return item;
                            }
                          })
                          setFilesList(newList)
                                       });
                                       setFilesList(newList);
                        }}
                      />
                    </Col>
@@ -673,58 +816,51 @@
                        params={{
                          action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&&ownerId=${judicId}&ownerType=22_00018-401`,
                        }}
                        field='filesList1'
                        label=''
                                    field="filesList1"
                                    label=""
                        editData={{
                          filesList1: filesList || []
                                       filesList1: filesList || [],
                        }}
                        handleDelFile={handleDelFile}
                        onFileListChange={(v) => {
                          let newList = v?.map(item => {
                                       let newList = v?.map((item) => {
                            if (item.response) {
                              return item.response.data[0]
                                             return item.response.data[0];
                            } else {
                              return item
                                             return item;
                            }
                          })
                          setFilesList(newList)
                                       });
                                       setFilesList(newList);
                        }}
                      />
                    </Col>
                    <Col span={24}>
                      <FormItem
                        label={(<div style={{ display: 'flex' }}>诉前调确号</div>)}
                        field='mediateJudicNo'
                      >
                        <Input style={{ width: '450px' }} placeholder='请填写审判系统中的诉前调确号(如有)' allowClear />
                                 <FormItem label={<div style={{ display: 'flex' }}>诉前调确号</div>} field="mediateJudicNo">
                                    <Input style={{ width: '450px' }} placeholder="请填写审判系统中的诉前调确号(如有)" allowClear />
                      </FormItem>
                    </Col>
                    <Col span={24}>
                      <FormItem
                        label={(<div style={{ display: 'flex' }}>结案说明</div>)}
                        field='judicContent'
                      >
                        <TextArea
                          rows={5}
                          maxLength={256}
                          autoSize={{ minRows: 4, maxRows: 8 }}
                          placeholder='请填写'
                        />
                                 <FormItem label={<div style={{ display: 'flex' }}>结案说明</div>} field="judicContent">
                                    <TextArea rows={5} maxLength={256} autoSize={{ minRows: 4, maxRows: 8 }} placeholder="请填写" />
                      </FormItem>
                    </Col>
                  </>
                )}
              </Row>
            </Form >
          </div>
        </Scrollbars>
        <div className="dataSync-excel">
          <Space size="large" style={{ margin: '4px 14px' }}>
            <Button onClick={() => handleApply('submit')} type="primary" className="dialogPrimary">办结</Button>
            <Button onClick={() => handleApply('draft')} type="outline" className="dialogPrimary">保存</Button>
            <Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button>
                  <Button onClick={() => handleApply('submit')} type="primary" className="dialogPrimary">
                     办结
                  </Button>
                  <Button onClick={() => handleApply('draft')} type="outline" className="dialogPrimary">
                     保存
                  </Button>
                  <Button type="secondary" onClick={() => navigate(-1)}>
                     返回上级页面
                  </Button>
          </Space>
        </div>
      </Fragment>
@@ -732,9 +868,9 @@
        <CaseDetail caseId={caseId} caseData={caseData} />
      </MyModal>
      <Modal
        title='添加预约'
            title="添加预约"
        style={{ width: '40%' }}
        className='judicial-handle-modal'
            className="judicial-handle-modal"
        onCancel={() => setPreBookVisible(false)}
        visible={preBookVisible}
        footer={null}
@@ -743,85 +879,94 @@
          <Col span={24} >
            <Form
              ref={form}
              layout='vertical'
                     layout="vertical"
              requiredSymbol={false}
              initialValues={{
                meetWay: '22_00021-3',
                meetWayName: '线上 + 线下'
                        meetWayName: '线上 + 线下',
              }}//默认值
              scrollToFirstError
            >
              <Row>
                <Col span={24}>
                  <Form.Item rules={[{ required: true, message: '请选择预约调解时间' }]} label={(<div style={{ display: 'flex' }}>预约调解时间<div className="must">必填</div></div>)} field="time">
                    <RangePicker
                      showTime={{ format: 'HH:mm' }}
                      allowClear={true}
                      style={{ width: '100%' }}
                    />
                           <Form.Item
                              rules={[{ required: true, message: '请选择预约调解时间' }]}
                              label={
                                 <div style={{ display: 'flex' }}>
                                    预约调解时间<div className="must">必填</div>
                                 </div>
                              }
                              field="time"
                           >
                              <RangePicker showTime={{ format: 'HH:mm' }} allowClear={true} style={{ width: '100%' }} />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <FormItem
                    label='纠纷化解方式'
                    field='meetWay'
                  >
                           <FormItem label="纠纷化解方式" field="meetWay">
                    <Select
                      placeholder='请选择'
                                 placeholder="请选择"
                      allowClear={false}
                      options={$$.options.meetWay}
                      onChange={(value, options) => {
                        form.current.setFieldValue('meetWayName', options && options.children)
                                    form.current.setFieldValue('meetWayName', options && options.children);
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={24}>
                  <FormItem label='纠纷化解地点' field='meetAddr'>
                    <Input placeholder='请填写' />
                           <FormItem label="纠纷化解地点" field="meetAddr">
                              <Input placeholder="请填写" />
                  </FormItem>
                </Col>
              </Row>
            </Form>
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px', position: 'absolute', bottom: '0' }}>
              <Button type="primary" onClick={() => submitClick()}>提交</Button>
              <Button onClick={() => resetClick()} danger>重置</Button>
                     <Button type="primary" onClick={() => submitClick()}>
                        提交
                     </Button>
                     <Button onClick={() => resetClick()} danger>
                        重置
                     </Button>
            </div>
          </Col>
        </Row>
      </Modal>
      <Modal
        title='创建远程调解视频号'
            title="创建远程调解视频号"
        style={{ width: '40%' }}
        className='judicial-handle-modal'
            className="judicial-handle-modal"
        onCancel={() => setRadioVisible(false)}
        visible={radioVisible}
        footer={null}
      >
        <Row style={{ height: '480px', position: 'relative' }}>
          <Col span={24} >
            <Form
              ref={formVideo}
              layout='vertical'
              requiredSymbol={false}
              scrollToFirstError
            >
                  <Form ref={formVideo} layout="vertical" requiredSymbol={false} scrollToFirstError>
              <Row>
                <Col span={24}>
                  <Form.Item style={{ marginBottom: '8px' }} rules={[{ required: true, message: '请选择有效期' }]} label={(<div style={{ display: 'flex' }}>有效期<div className="must">必填</div></div>)} field="time">
                    <RangePicker
                      showTime={{ format: 'HH:mm' }}
                      allowClear={true}
                      style={{ width: '100%' }}
                    />
                           <Form.Item
                              style={{ marginBottom: '8px' }}
                              rules={[{ required: true, message: '请选择有效期' }]}
                              label={
                                 <div style={{ display: 'flex' }}>
                                    有效期<div className="must">必填</div>
                                 </div>
                              }
                              field="time"
                           >
                              <RangePicker showTime={{ format: 'HH:mm' }} allowClear={true} style={{ width: '100%' }} />
                  </Form.Item>
                  <Alert type='info' content={<span>创建成功后请在有效期内使用小鱼易连客户端加入该号码连线</span>} />
                           <Alert type="info" content={<span>创建成功后请在有效期内使用小鱼易连客户端加入该号码连线</span>} />
                </Col>
              </Row>
            </Form>
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px', position: 'absolute', bottom: '0' }}>
              <Button type="primary" onClick={() => radioSubmitClick()}>提交</Button>
              <Button onClick={() => radioResetClick()} danger>重置</Button>
                     <Button type="primary" onClick={() => radioSubmitClick()}>
                        提交
                     </Button>
                     <Button onClick={() => radioResetClick()} danger>
                        重置
                     </Button>
            </div>
          </Col>
        </Row>
@@ -829,7 +974,5 @@
    </NewPage >
  );
};
export default CourtAuditEdit;