feat: 结案归档

zhangyongtian

2024-09-10 1373ca4e2cd04896254690e0bd24316067f1645d

feat: 结案归档

 gz-customerSystem/src/api/appUrl.js

@@ -10,11 +10,11 @@
export const debug = {
  // web服务
  // baseUrl: 'http://gz.hugeinfo.com.cn',
  baseUrl: "http://w88bsz.natappfree.cc",
  baseUrl: "http://6dycet.natappfree.cc",
  // baseUrl: 'http://mdqgnh.natappfree.cc',

  // 附件服务
  fileUrl: "http://w88bsz.natappfree.cc",
  fileUrl: "http://6dycet.natappfree.cc",
  // fileUrl: 'http://gz.hugeinfo.com.cn',

  // 文件查看url 后面接附件编号

 gz-customerSystem/src/views/register/eventFlow/index.jsx

@@ -1,10 +1,10 @@
import React, { useState, useRef, Fragment, useEffect } from "react";
import React, { useState, useEffect } from "react";
import NewPage from '@/components/NewPage';
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
import '../index.less';
import { Steps, Tabs } from '@arco-design/web-react';
import { examine, Matter, transfer, applyRecord } from '@/assets/images'
import { examine, Matter, applyRecord } from '@/assets/images'
import EventFlow from './component/EventFlow';
import Examine from "./component/Examine";
import ApplyInfo from "../matterDetail/ApplyInfo";
@@ -59,7 +59,7 @@

    //获取权限tab和按钮权限
    const getAuthor = async () => {
        console.log(routeData, 'routeData')
        console.log(caseTaskId, caseId)
        const res = await getTabButton({
            caseTaskId: caseTaskId
        })

 gz-customerSystem/src/views/register/index.less

@@ -88,7 +88,7 @@
        width: 14px;
        height: 14px;
        margin-right: 4px;
        margin-top: 4px;
        margin-top: -2px;
    }

    &-register {
@@ -141,7 +141,7 @@
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.25);
        z-index: 1;
        z-index: 2;
    }

    &-hasTabPage {

 gz-customerSystem/src/views/register/matterDetail/FileTable.jsx

@@ -342,7 +342,6 @@
        size="small"
        rowKey="ownerType"
        bordered={true}
        style={{ marginBottom: '65px' }}
        scroll={{ x: 1300 }}
      />
      <Modal

 gz-customerSystem/src/views/register/matterDetail/RateModule.jsx

New file
@@ -0,0 +1,41 @@
import React, { Fragment } from 'react'
import { Row, Col, Space } from 'antd';
import { Rate } from '@arco-design/web-react';

export default function RateModule(props) {
  return (
    <Fragment>
      <Col span={24} style={{ display: 'flex', alignItems: 'center', margin: '12px 0px 4px 0px' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人评价</h4>
        </Space>
      </Col>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <div className="title">
            <div className="title-text">评价等级</div>
          </div>
          <div style={{ display: 'flex' }}><Rate value={props.grade?.evaluateGrade} disabled /></div>
        </Col>
        <Col span={8}>
          <div className="title">
            <div className="title-text">评价时间</div>
          </div>
          <div>{props.grade?.createTime || '-'}</div>
        </Col>
        <Col span={8}>
          <div className="title">
            <div className="title-text">评价人</div>
          </div>
          <div>{props.grade?.evaluateUserName || '-'}</div>
        </Col>
        <Col span={12}>
          <div className="title">
            <div className="title-text">评语</div>
          </div>
          <div>{props.grade?.evaluateContent}</div>
        </Col>
      </Row>
    </Fragment>
  )
}

 gz-customerSystem/src/views/register/matterDetail/RegisInfoModule.jsx

New file
@@ -0,0 +1,38 @@
import React, { Fragment } from 'react';
import { Row, Col, Space } from 'antd';
import { register } from '@/assets/images';

export default function RegisInfoModule(props) {
  return (
    <Fragment>
      <Col span={24} style={{ display: 'flex', alignItems: 'center', margin: '12px 0px 4px 0px' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>登记信息</h4>
        </Space>
      </Col>
      <Row gutter={[16, 16]} >
        <Col span={8}>
          <div className="title">
            <div className="title-text">登记机构</div>
          </div>
          <div>{props.caseInfo?.inputUnitName || '-'}</div>
        </Col>
        <Col span={8}>
          <div className="title">
            <div className="title-text">登记人</div>
          </div>
          <div>
            {props.caseInfo?.inputUserName}
            <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '-4px' }} />
          </div>
        </Col>
        <Col span={8}>
          <div className="title">
            <div className="title-text">登记时间</div>
          </div>
          <div>{props.caseInfo?.visitTime || '-'}</div>
        </Col>
      </Row>
    </Fragment>
  )
}

 gz-customerSystem/src/views/register/matterDetail/fileMessage.jsx

@@ -1,18 +1,17 @@
import React, { useEffect, useState } from 'react';
import NewPage from '@/components/NewPage';
import { Row, Col, Space } from 'antd';
import { Steps, Tabs, Typography, Rate, Button } from '@arco-design/web-react';
import { apply,floating } from '@/assets/images';
import { Steps, Tabs, Button } from '@arco-design/web-react';
import { apply, floating } from '@/assets/images';
import { result } from '@/assets/images/icon';
import * as $$ from '@/utils/utility';
import TableView from '../../../components/TableView';
import { register, fold, down, empty, link } from '@/assets/images';
import { Space } from 'antd';
import ProgressStep from '@/components/ProgressStep/VisitStep';
import { ApplyDialog, AgentDialog, Respondent, Company } from '../visit/component/previewTable';
import ApplyInfo from './ApplyInfo';
import Preview from '../visit/preview';
import HandleRecord from './HandleRecord';
import { useParams } from 'react-router-dom';
import ApplyInfo from './ApplyInfo'

import { Scrollbars } from "react-custom-scrollbars";
import RateModule from './RateModule';
import RegisInfoModule from './RegisInfoModule';

const Step = Steps.Step;
const TabPane = Tabs.TabPane;
@@ -39,13 +38,13 @@


const FileMessage = (props) => {
    const routeData = useParams();
  const caseTaskId = $$.getQueryString('caseTaskId')
  const caseId = $$.getQueryString('caseId')
  const [tabsActive, setTabsActive] = useState('1');
  const [current, setCurrent] = useState(7);
  const [grade, setGrade] = useState(0);
  const [grade, setGrade] = useState(null);
  const [caseInfo, setCaseInfo] = useState({})
  const [TransactResult, setTransactResult] = useState({})
  const [filesCheck, setFilesCheck] = useState(false);
  const [tabsList, setTabList] = useState([
    {
      img: result,
@@ -64,88 +63,41 @@
      key: '3',
    },
  ])
  const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
  const [list, setList] = useState([])
  const [progressData, setProgressData] = useState({})
  const [progressData, setProgressData] = useState({});

  useEffect(() => {
    getByCaseId(caseId);
    getTransactResult(caseId);
    getCaseInfo(caseId);
    listFeedback(caseId);
    getData(caseId)
  }, [])

  const tabs = [
    { index: '1', label: '承办部门' },
    { index: '2', label: '配合部门' },
  ];
  const fakeData = [
    {
      handlerUserName: '天河区棠下街综治中心',
      finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '来访登记',
      mediResult: '22_00025-1',
      handleContent: '调解成功，双方达成一致意见。',
      operationName: '李晓明'
    },
    {
      handlerUserName: '系统派单',
      finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '事件流转',
      mediResult: '22_00025-1',
      handleContent: '派单至：白云区新市街市场监管所',
    },
    {
      handlerUserName: '白云区新市街市场监管所',
      finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '事件流转',
      mediResult: '22_00025-1',
      handleContent: '已签收',
      operationName: '赵菲菲'
    },
    {
      handlerUserName: '白云区新市街市场监管所',
      finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '3',
      taskNodeName: '事件回退',
      mediResult: '22_00025-1',
      // handleContent: '已签收',
      operationName: '赵菲菲'
    },
    {
      handlerUserName: '天河区棠下街综治中心',
      finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间
      handleResult: '2',
      status: '1',
      taskNodeName: '事件流转',
      mediResult: '22_00025-1',
      handleContent: '案件已被签收，准备开始调解。',
      operationName: '李晓明'
    },
  ];

  const handleTabChange = (newTabIndex) => {
    setSelectedTab(newTabIndex);
  };

  const getTransactResult = async () => {
    const res = await getTransactResultApi('24083010062110001')
  const getTransactResult = async (id) => {
    const res = await getTransactResultApi(id)
    if (res.type) {
      setTransactResult({ ...res.data, fileName: res.data.fileInfoBaseDTOList.map(item => item.trueName) })
    }
  }

  const getByCaseId = async () => {
    const res = await getByCaseIdApi('24083010062110001')
    setGrade(res.data)
    console.log(res, 'resrs')
  const getByCaseId = async (id) => {
    const res = await getByCaseIdApi(id)
    if (res.type) {
      setGrade(res.data)
    }
  }

  const getCaseInfo = async () => {
    const res = await getCaseInfoApi('24083010062110001')
  const getCaseInfo = async (id) => {
    const res = await getCaseInfoApi(id)
    if (res.type) {
      setCaseInfo(res.data)
      const { agentList, personList, ...rest } = res.data
      const parList = agentList.concat(personList)
      const obj = {
        ...rest,
        fakeData: parList,
      }
      setCaseInfo(obj)
    }
  }

@@ -157,594 +109,92 @@
    }
  }

  const getData = async () => {
  const getData = async (id) => {
    const res = await getListCaseFlow({
      caseId: routeData.caseId
      caseId: id
    })
    if (res.type) {
      setProgressData(res.data)
    }
  }

  const fakeColumns = [
    {
      title: '序号',
      dataIndex: 'caseNo',
      key: 'caseNo',
      width: 100,
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    {
      title: '材料类型',
      dataIndex: 'judicNo',
      key: 'judicNo',
      width: 60,

    },
    {
      title: '材料数量',
      dataIndex: 'inputUserName',
      key: 'perClassName',
      width: 180,
      render: (text) => (
        <>
          {text}份
        </>
      )

    },
    {
      title: '最新上传时间',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 180,

    },
    {
      title: '操作',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 200,
      render: (text) => (
        <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
          <div onClick={() => setFilesCheck(true)}>查看</div>
          <div>下载</div>
        </div>
      )
    },
    // 更多列配置...
  ];
  const fakeData1 = [
    {
      id: 1,
      caseNo: 'A20230101',
      judicNo: '申请材料',
      perClassName: '李晓明的纠纷化解申请表、身份证...',
      inputUserName: '0',
      mediateUserName: '2024-7-12 12:00',
      judgeName: '王五',
      mediator: '赵六',
      handlerUserName: '钱七',
      returnUserName: '孙八',
      expireTime: '2023-08-10T08:00:00.000Z',
      processName: '进行中',
      otherMediator: '周九',
      canalName: '网络',
      judicResult: '通过',
      assistName: '吴十',
      mediTypeName: '民事调解',
      serieStatus: '1', // 1 表示非系列案，2 表示系列案
      // 更多字段...
    },
    {
      id: 2,
      caseNo: 'A20230101',
      judicNo: '证据材料',
      perClassName: '李晓明的纠纷化解申请表、身份证...',
      inputUserName: '0',
      mediateUserName: '2024-7-12 12:00',
      judgeName: '王五',
      mediator: '赵六',
      handlerUserName: '钱七',
      returnUserName: '孙八',
      expireTime: '2023-08-10T08:00:00.000Z',
      processName: '进行中',
      otherMediator: '周九',
      canalName: '网络',
      judicResult: '通过',
      assistName: '吴十',
      mediTypeName: '民事调解',
      serieStatus: '1', // 1 表示非系列案，2 表示系列案
      // 更多字段...
    },

    // 更多数据...
  ];
  const [records, setRecords] = useState([
    {
      id: 1,
      date: '2024 - 7 - 1 10:00',
      location: '天河区棠下街综治中心',
      remark: '配合部门',
      showView: false,
      details: [
        {
          title: '操作人',
          content: (
            <div style={{ display: 'flex' }}>
              <div>李晓明</div>
              <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
            </div>
          ),
        },
        {
          title: '办理意见',
          content: (
            <div>
              调解开始，我首先安抚双方情绪，确保对话在一个平和的氛围中展开。随后，我引导王先生详细说明了他的财务困境及还款意愿，同时让银行代表理解其处境，强调长期合作的重要性。经过反复沟通，银行同意调整还款计划，降低利率，并给予王先生一定的宽限期。王先生则承诺按新计划履行还款义务，双方最终达成一致，签署了调解协议。
            </div>
          ),
        },
        {
          title: '办理附件',
          content: (
            <a href="your-link-here.html" target="_blank">
              <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf
            </a>
          ),
        },
      ],
    },
    {
      id: 2,
      date: '2024 - 7 - 2 14:00',
      location: '天河区天河南街道办事处',
      remark: '承办部门',
      showView: false,
      details: [
        {
          title: '操作人',
          content: (
            <div style={{ display: 'flex' }}>
              <div>张伟</div>
              <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
            </div>
          ),
        },
        {
          title: '办理意见',
          content: (
            <div>
              在本次协调会议中，我们成功解决了双方之间的纠纷，确保了所有参与方的利益得到了妥善处理。通过深入交流，各方达成了共识，同意采取一系列措施来解决现存的问题。
            </div>
          ),
        },
        {
          title: '办理附件',
          content: '广州市天河区天河南路200号',
        },
      ],
    },
  ]);
  const toggleView = (id) => {
    setRecords(records.map(record => {
      if (record.id === id) {
        return {
          ...record,
          showView: !record.showView,
        };
      }
      return record;
    }));
  };


  useEffect(() => {
    getByCaseId();
    getTransactResult();
    getCaseInfo();
    listFeedback('24083010062110001');
    getData()
  }, [])


  const applyData = caseInfo?.personList?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "自然人");
  const agentData = caseInfo?.personList?.filter(item => item.perTypeName === "申请方代理人");
  const company = caseInfo?.personList?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "非法人组织");
  const respondentData = caseInfo?.personList?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "法人");

  const applyData1 = caseInfo?.personList?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "自然人");
  const agentData1 = caseInfo?.personList?.filter(item => item.perTypeName === "被申请方代理人");
  const company1 = caseInfo?.personList?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "非法人组织");
  const respondentData1 = caseInfo?.personList?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "法人");




  return (
    <>
      <NewPage
        pageHead={
          { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '详情' }
        }
    <NewPage
      pageHead={
        { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '详情' }
      }
    >
      <Tabs
        defaultActiveTab='1'
        onChange={(v) => setTabsActive(v)}
        className='myTabContent'
      >
        <Tabs
          defaultActiveTab='1'
          onChange={(v) => setTabsActive(v)}
          className='myTabContent'
        >
          {tabsList?.map(item => {
            return <TabPane
              key={item.key}
              title={
                <span>
                  {tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                  <span style={{ fontSize: '16px' }}>{item.label}</span>
                </span>
              }
            >
              {
                item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                  <Steps type='navigation' current={current}>
                    <Step title='来访登记' disabled />
                    <Step title='事件流转' disabled />
                    <Step title='办理反馈' disabled />
                    <Step title='结案审核' disabled />
                    <Step title='当事人评价' disabled />
                    <Step title='结案归档' disabled />
                  </Steps>
        {tabsList?.map(item => {
          return <TabPane
            key={item.key}
            title={
              <span>
                {tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                <span style={{ fontSize: '16px' }}>{item.label}</span>
              </span>
            }
          >
            {
              item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '0 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                <Steps type='navigation' current={current}>
                  <Step title='来访登记' disabled />
                  <Step title='事件流转' disabled />
                  <Step title='办理反馈' disabled />
                  <Step title='结案审核' disabled />
                  <Step title='当事人评价' disabled />
                  <Step title='结案归档' disabled />
                </Steps>
              </div>
            }
            {
              tabsActive === '1' &&
              <>
                <Scrollbars style={{ height: 'calc(100vh - 291px)', marginTop: '8px' }} autoHide>
                  <div style={{ backgroundColor: '#ffff', margin: '0 16px 0px 16px', padding: '12px' }}>
                    <Preview mainId={caseId} data={caseInfo} transactResult={TransactResult} isDoc={true} />
                  </div>
                  {list.length != 0 &&
                    <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理记录（{list.length}）</h4>
                      </Space>
                      <HandleRecord isReview={true} data={list} />
                    </div>
                  }
                  {grade &&
                    <div style={{ backgroundColor: '#ffff', margin: '8px 16px 0px 16px', padding: '12px' }}>
                      <RateModule grade={grade} />
                    </div>
                  }
                  <div style={{ backgroundColor: '#ffff', margin: '8px 16px 65px 16px', padding: '12px' }}>
                    <RegisInfoModule caseInfo={caseInfo} />
                  </div>
                </Scrollbars>
                <div className="dataSync-excel">
                  <Space size="large" style={{ margin: '4px 14px' }}>
                    <Button type='primary' >导出</Button>
                    <Button type='secondary' >返回上级页面</Button>
                  </Space>
                </div>
              }
              {tabsActive === '1' &&
                <>
                  <div style={{ backgroundColor: '#ffff', margin: '8px 8px 0px 16px', padding: '12px 18px 16px 16px', height: 'calc(100vh - 278px)', overflowY: 'scroll' }}>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人信息</h4>
                      </Space>
                    </Col>
                    <div style={{ marginBottom: '8px' }}>申请方</div>
                    <div className="line-container" style={{ marginBottom: '20px' }}>
                      <div className="line left-line"></div>
                      <div className="line middle-line"></div>
                      <div className="line right-line"></div>
                    </div>
                    {/* ApplyDialog 只有在 applyData 存在且不为空时才渲染 */}
                    {applyData && applyData.length > 0 ? (
                      <ApplyDialog applyDialog={applyData} />
                    ) : null}

                    {/* AgentDialog 只有在 agentData 存在且不为空时才渲染 */}
                    {agentData && agentData.length > 0 ? (
                      <AgentDialog agentDialog={agentData} />
                    ) : null}

                    {/* Respondent 只有在 respondentData 存在且不为空时才渲染 */}
                    {respondentData && respondentData.length > 0 ? (
                      <Respondent respondent={respondentData} />
                    ) : null}

                    {company && company.length > 0 ? (
                      <Company company={company} />
                    ) : null}

                    <div style={{ marginBottom: '8px' }}>被申请方</div>
                    <div className="line-container" style={{ marginBottom: '20px' }}>
                      <div className="line left-line"></div>
                      <div className="line middle-line"></div>
                      <div className="line right-line"></div>
                    </div>
                    {applyData1 && applyData1.length > 0 ? (
                      <ApplyDialog applyDialog={applyData1} />
                    ) : null}

                    {agentData1 && agentData1.length > 0 ? (
                      <AgentDialog agentDialog={agentData1} />
                    ) : null}

                    {respondentData1 && respondentData1.length > 0 ? (
                      <Respondent respondent={respondentData1} />
                    ) : null}

                    {company1 && company1.length > 0 ? (
                      <Company company={company1} />
                    ) : null}
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5>
                      </Space>
                    </Col>
                    <Row gutter={[16, 16]}>
                      <Col span={8}>
                        <div><div className="title-text">事项状态</div></div>
                        <div style={{ color: '#1A6FB8' }}>{caseInfo?.statusName || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div><div className="title-text">事项编号</div></div>
                        <div>{caseInfo?.caseRef || '-'}</div>
                      </Col>
                      {/*事项等级分为三级，颜色需要做判断*/}
                      <Col span={8}>
                        <div className="title"><div className="title-text">事项等级</div></div>
                        <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#00B42A', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>{caseInfo?.caseLevel || '-'}</div></div>级</div>
                      </Col>
                      <Col span={8}>
                        <div><div className="title-text">来访时间</div></div>
                        <div>{caseInfo?.visitTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">来访人数（人）</div></div>
                        <div>{caseInfo?.visitPeopleNum || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷类型</div></div>
                        <div>{caseInfo?.caseType || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷发生时间</div></div>
                        <div>{caseInfo?.occurTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷发生地点</div></div>
                        <div>{caseInfo?.addr || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">问题属地</div></div>
                        <div>{caseInfo?.questionName || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">涉及人数（人）</div></div>
                        <div>{caseInfo?.peopleNum || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">涉及金额（元）</div></div>
                        <div>{$$.thousands(caseInfo?.amount) || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">事项来源</div></div>
                        <div>{caseInfo?.canalName || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div ><div className="title-text">来访形式</div></div>
                        <div>{caseInfo?.visitWayName || '-'}</div>
                      </Col>
                      <Col span={24}>
                        <div className="title"><div className="title-text">事项概况</div></div>
                        <div>{caseInfo?.caseDes || '-'}</div>
                      </Col>
                      <Col span={24}>
                        <div className="title"><div className="title-text">事项申请</div></div>
                        <div>{caseInfo?.caseClaim || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
                        <div>{caseInfo?.majorStatus === '0' ? '否' : '是'}</div>
                      </Col>
                    </Row>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', marginTop: '20px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></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'>{TransactResult.mediResultName || '-'}</td>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">经办人</th>
                        <td width='380'>{TransactResult.mediator || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title">承办部门</th>
                        <td>{TransactResult.mediateUnitName || '-'}</td>
                        <th bgcolor="#F7F8FA" className="table-title">配合部门</th>
                        <td>{TransactResult.applyAssistUnitName || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">受理时间</th>
                        <td width='380'>2024-7-1 10:00</td>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">办结时间</th>
                        <td width='380'>{TransactResult?.fileTime || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th>
                        <td width='380' colspan='3'>{TransactResult?.windupContent || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">协议要点</th>
                        <td width='380' colspan='3'>{TransactResult?.agreeContent || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">结案意见</th>
                        <td width='380' colspan='3'>{TransactResult?.windupContent || '-'}</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">协议文书</th>
                        <td colspan='3'>
                          <a href="your-link-here.html" target="_blank">
                            <img src={link} alt="" className="title-file" />申请人张三丰的人民调解协议书.pdf
                          </a>
                        </td>
                      </tr>
                    </table>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', marginTop: '20px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>事件材料</h4>
                      </Space>
                    </Col>
                    <TableView
                      columns={fakeColumns}
                      dataSource={fakeData1}
                      size="small"
                      rowKey="id"
                      bordered={true}
                      style={{ marginBottom: '16px' }}
                    />
                    <div className='gap'></div>
                    <Col span={24} style={{ marginTop: '12px' }}>
                      <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
                      <HandleRecord isReview={false} data={list} />

                      {/* <div>
                        {records.map(record => (
                          <div key={record.id} className='container-bottom-left-record'>
                            <div className='container-bottom-left-record-top'>
                              {
                                record.showView ? (
                                  <img src={down} alt='' style={{ width: '18px', marginRight: '6px' }} onClick={() => toggleView(record.id)} />
                                ) : (
                                  <img src={fold} alt='' className='container-bottom-left-record-top-icon' onClick={() => toggleView(record.id)} />
                                )
                              }
                              <div>{`${record.date} ${record.location}`}</div>
                              <div className={`container-bottom-left-record-top-${record.remark === '配合部门' ? 'remark' : 'hostOrg'}`}>{record.remark}</div>
                            </div>
                            <div className='container-bottom-left-record-bottom' style={{ display: record.showView ? 'block' : 'none' }}>
                              <table border="1" cellpadding="8" className='container-bottom-left-record-bottom-table'>
                                {record.details.map(detail => (
                                  <tr key={detail.title}>
                                    <th bgcolor="#F7F8FA" className="table-title" width="120">{detail.title}</th>
                                    <td>{detail.content}</td>
                                  </tr>
                                ))}
                              </table>
                            </div>
                          </div>
                        ))}
                      </div> */}
                    </Col>
                    <div className='gap'></div>
                    <div style={{ marginLeft: '-16px' }}>
                      <Tabs defaultActiveTab='1'>
                        <TabPane
                          key='1'
                          title={
                            <span style={{ fontSize: '15px' }}>
                              流转进度
                            </span>
                          }
                        >
                          <Typography.Paragraph>
                            <div style={{ display: 'flex', marginLeft: '16px', gap: '16px' }}>
                              {tabs.map((tab) => (
                                <div
                                  key={tab.index}
                                  style={{
                                    color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)',
                                    padding: '6px 12px',
                                    border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`,
                                    borderRadius: '4px',
                                    cursor: 'pointer',
                                  }}
                                  onClick={() => handleTabChange(tab.index)}
                                >
                                  {tab.label}
                                </div>
                              ))}
                            </div>
                            {selectedTab === '1' &&
                              <div className='progress'>
                                <ProgressStep progressData={fakeData} />
                              </div>
                            }
                          </Typography.Paragraph>
                        </TabPane>
                        <TabPane
                          key='2'
                          title={
                            <span style={{ fontSize: '15px' }}>
                              督办信息
                            </span>
                          }
                        >
                          <Typography.Paragraph>Content of Tab Panel 2</Typography.Paragraph>
                        </TabPane>
                      </Tabs>

                    </div>
                    <div className='gap'></div>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', margin: '12px 0px 4px 0px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人评价</h4>
                      </Space>
                    </Col>
                    <Row gutter={[16, 16]}>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价等级</div>
                        </div>
                        <div style={{ display: 'flex' }}><Rate value={grade?.evaluateGrade} disabled /></div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价时间</div>
                        </div>
                        <div>{grade?.createTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价人</div>
                        </div>
                        <div>{grade?.evaluateUserName || '-'}</div>
                      </Col>
                      <Col span={12}>
                        <div className="title">
                          <div className="title-text">评语</div>
                        </div>
                        <div>{grade?.evaluateContent}</div>
                      </Col>
                    </Row>
                    <div className='gap'></div>
                    <Col span={24} style={{ display: 'flex', alignItems: 'center', margin: '12px 0px 4px 0px' }}>
                      <Space size='small'>
                        <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>登记信息</h4>
                      </Space>
                    </Col>
                    <Row gutter={[16, 16]} style={{ marginBottom: '90px' }}>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">登记机构</div>
                        </div>
                        <div>{caseInfo?.inputUnitName || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">登记人</div>
                        </div>
                        <div>
                          {caseInfo.inputUserName}
                          <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
                        </div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">登记时间</div>
                        </div>
                        <div>{caseInfo?.visitTime || '-'}</div>
                      </Col>
                    </Row>
                  </div>
                  <div className="dataSync-excel">
                    <Space size="large" style={{ margin: '4px 14px' }}>
                      <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} >导出</Button>
                      <Button type='secondary'>返回上级页面</Button>
                    </Space>
                  </div>
                </>
              }
              {
                tabsActive === '2' &&
                <ProgressStep progressData={progressData} />
              }
              {tabsActive === '3' &&
                <ApplyInfo />
              }
            </TabPane>
          })}
        </Tabs>


      </NewPage>
    </>
              </>
            }
            {
              tabsActive === '2' &&
              <ProgressStep progressData={progressData} />
            }
            {
              tabsActive === '3' &&
              <ApplyInfo />
            }
          </TabPane>
        })}
      </Tabs>
    </NewPage>
  )
}


 gz-customerSystem/src/views/register/visit/component/previewTable.jsx

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { person, link } from '@/assets/images'


@@ -45,9 +45,18 @@
              <td>{item.workUnit || '-'}</td>
              <th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
              <td>
                <a href="your-link-here.html" target="_blank">
                  <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf
                </a>
                {
                  item.fileInfoList?.map(res => {
                    if (res.ownerType == "22_00018-202") {
                      return res.fileList.map((result, resIndex) => {
                        return <a href="your-link-here.html" target="_blank">
                          <img src={link} alt="" className="title-file" />{result.trueName}
                          {resIndex !== res.fileList.length - 1 && <>，</>}
                        </a>
                      })
                    }
                  })
                }
              </td>
            </tr>
          </table>
@@ -106,15 +115,33 @@
            <td>{item.personId || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
            <td>
              <a href="your-link-here.html" target="_blank">
                <img src={link} alt="" className="title-file" />李巧凤身份证明材料.pdf
              </a>
              {
                item.fileInfoList?.map(res => {
                  if (res.ownerType == "22_00018-202") {
                    return res.fileList?.map((result, resIndex) => {
                      return <a href="your-link-here.html" target="_blank">
                        <img src={link} alt="" className="title-file" />{result.trueName}
                        {resIndex !== res.fileList.length - 1 && <>，</>}
                      </a>
                    })
                  }
                })
              }
            </td>
            <th bgcolor="#F7F8FA" className="table-title">代理人授权委托书</th>
            <td>
              <a href="your-link-here.html" target="_blank">
                <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf
              </a>
              {
                item.fileInfoList?.map(res => {
                  if (res.ownerType == '22_00018-207') {
                    return res.fileList.map((result, resIndex) => {
                      return <a href="your-link-here.html" target="_blank">
                        <img src={link} alt="" className="title-file" />{result.trueName}
                        {resIndex !== res.fileList.length - 1 && <>，</>}
                      </a>
                    })
                  }
                })
              }
            </td>
          </tr>

@@ -151,15 +178,33 @@
            <td>{item.placeAddr || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">企业登记材料</th>
            <td>
              <a href="your-link-here.html" target="_blank">
                <img src={link} alt="" className="title-file" />广东好又多贸易有限公司营业执照副本.pdf
              </a>
              {
                item.fileInfoList?.map(res => {
                  if (res.ownerType == '22_00018-203') {
                    return res.fileList.map((result, resIndex) => {
                      return <a href="your-link-here.html" target="_blank">
                        <img src={link} alt="" className="title-file" />{result.trueName}
                        {resIndex !== res.fileList.length - 1 && <>，</>}
                      </a>
                    })
                  }
                })
              }
            </td>
            <th bgcolor="#F7F8FA" className="table-title" >法定代表人身份证明材料</th>
            <td>
              <a href="your-link-here.html" target="_blank">
                <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf
              </a>
              {
                item.fileInfoList?.map(res => {
                  if (res.ownerType == '22_00018-204') {
                    return res.fileList.map((result, resIndex) => {
                      return <a href="your-link-here.html" target="_blank">
                        <img src={link} alt="" className="title-file" />{result.trueName}
                        {resIndex !== res.fileList.length - 1 && <>，</>}
                      </a>
                    })
                  }
                })
              }
            </td>
          </tr>
        </table>
@@ -197,15 +242,33 @@
            <td>{item.placeAddr || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">机构登记材料</th>
            <td>
              <a href="your-link-here.html" target="_blank">
                <img src={link} alt="" className="title-file" />广东好又多贸易有限公司营业执照副本.pdf
              </a>
              {
                item.fileInfoList?.map(res => {
                  if (res.ownerType == '22_00018-203') {
                    return res.fileList.map((result, resIndex) => {
                      return <a href="your-link-here.html" target="_blank">
                        <img src={link} alt="" className="title-file" />{result.trueName}
                        {resIndex !== res.fileList.length - 1 && <>，</>}
                      </a>
                    })
                  }
                })
              }
            </td>
            <th bgcolor="#F7F8FA" className="table-title" >机构代表人身份证明材料</th>
            <td>
              <a href="your-link-here.html" target="_blank">
                <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf
              </a>
              {
                item.fileInfoList?.map(res => {
                  if (res.ownerType == '22_00018-204') {
                    return res.fileList.map((result, resIndex) => {
                      return <a href="your-link-here.html" target="_blank">
                        <img src={link} alt="" className="title-file" />{result.trueName}
                        {resIndex !== res.fileList.length - 1 && <>，</>}
                      </a>
                    })
                  }
                })
              }
            </td>
          </tr>
        </table>

 gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx

@@ -390,7 +390,10 @@
          <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>事件材料</h4>
        </Space>
      </Col>
      <FileTable mainId={props.mainId} fileInfoList={props.fileInfoList} isReview={false}/>
      <div style={{ marginBottom: '65px' }}>
        <FileTable mainId={props.mainId} fileInfoList={props.fileInfoList} isReview={false} />
      </div>


      <DocumentScanner
        visible={scanFile}

 gz-customerSystem/src/views/register/visit/index.jsx

@@ -8,7 +8,7 @@
 */

import React, { useState, useRef, Fragment, useEffect } from "react";
import { useSearchParams, useNavigate } from 'react-router-dom';
import { useParams, useNavigate } from 'react-router-dom';
import NewPage from '@/components/NewPage';
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
@@ -17,7 +17,6 @@
import { Button, Steps, Message } from '@arco-design/web-react';
import VisitorRegister from './component/visitorRegister';
import Preview from './preview';
import { useParams } from 'react-router-dom';

const Step = Steps.Step;

@@ -191,7 +190,9 @@
                            <Step title='结案归档' disabled />
                        </Steps>
                    </div>
                    <Preview style={{ display: isReview ? '' : 'none' }} data={formRef?.current?.getFields()} />
                    <div style={{ backgroundColor: '#ffff', margin: '8px 8px 0px 16px', padding: '12px 18px 16px 16px', height: 'calc(100vh - 228px)', overflowY: 'scroll', display: isReview ? '' : 'none' }}>
                        <Preview style={{ display: isReview ? '' : 'none' }} data={formRef?.current?.getFields()} mainId={id} />
                    </div>
                    <VisitorRegister
                        formRef={formRef}
                        style={{ display: isReview ? 'none' : '' }}

 gz-customerSystem/src/views/register/visit/preview.jsx

@@ -6,126 +6,18 @@
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx
 * @Description: 预览信息
 */
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import { Row, Col, Space } from 'antd';
import { person, question, link } from '../../../assets/images'
import '../index.less';
import TableView from '../../../components/TableView';
import { Modal } from '@arco-design/web-react';
import NewFileCheck from '../matterDetail/NewFileCheck';
import * as $$ from '../../../utils/utility';
import { ApplyDialog, AgentDialog, Respondent, Company } from './component/previewTable'
import FileTable from "../matterDetail/FileTable";
import { link } from '@/assets/images';

const Preview = (props) => {
    const [filesCheck, setFilesCheck] = useState(false);
    const [apply, setApply] = useState(false);
    const [visible, setVisible] = useState(false);
  const [data, setData] = useState({})

    const fakeData1 = [
        {
            id: 1,
            caseNo: 'A20230101',
            judicNo: '申请材料',
            perClassName: '李晓明的纠纷化解申请表、身份证...',
            inputUserName: '0',
            mediateUserName: '2024-7-12 12:00',
            judgeName: '王五',
            mediator: '赵六',
            handlerUserName: '钱七',
            returnUserName: '孙八',
            expireTime: '2023-08-10T08:00:00.000Z',
            processName: '进行中',
            otherMediator: '周九',
            canalName: '网络',
            judicResult: '通过',
            assistName: '吴十',
            mediTypeName: '民事调解',
            serieStatus: '1', // 1 表示非系列案，2 表示系列案
            // 更多字段...
        },
        {
            id: 2,
            caseNo: 'A20230101',
            judicNo: '证据材料',
            perClassName: '李晓明的纠纷化解申请表、身份证...',
            inputUserName: '0',
            mediateUserName: '2024-7-12 12:00',
            judgeName: '王五',
            mediator: '赵六',
            handlerUserName: '钱七',
            returnUserName: '孙八',
            expireTime: '2023-08-10T08:00:00.000Z',
            processName: '进行中',
            otherMediator: '周九',
            canalName: '网络',
            judicResult: '通过',
            assistName: '吴十',
            mediTypeName: '民事调解',
            serieStatus: '1', // 1 表示非系列案，2 表示系列案
            // 更多字段...
        },

        // 更多数据...
    ];

    // 列配置
    const fakeColumns = [
        {
            title: '序号',
            dataIndex: 'caseNo',
            key: 'caseNo',
            width: 100,
            render: (text, record, index) => <span>{index + 1}</span>,
        },
        {
            title: '材料类型',
            dataIndex: 'judicNo',
            key: 'judicNo',
            width: 60,

        },
        {
            title: '材料数量',
            dataIndex: 'inputUserName',
            key: 'perClassName',
            width: 180,
            render: (text) => (
                <>
                    {text}份
                </>
            )

        },
        {
            title: '材料名称',
            dataIndex: 'perClassName',
            key: 'perClassName',
            width: 180,

        },
        {
            title: '上传时间',
            dataIndex: 'mediateUserName',
            key: 'mediateUserName',
            width: 180,

        },
        {
            title: '操作',
            dataIndex: 'perClassName',
            key: 'perClassName',
            width: 200,
            render: (text) => (
                <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
                    <div onClick={() => setFilesCheck(true)}>查看</div>
                    <div>下载</div>
                </div>
            )
        },
        // 更多列配置...
    ];


  useEffect(() => {
    console.log(props.data);
    const applyData = props.data?.fakeData?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "自然人");
    const agentData = props.data?.fakeData?.filter(item => item.perTypeName === "申请方代理人");
    const company = props.data?.fakeData?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "非法人组织");
@@ -136,168 +28,216 @@
    const company1 = props.data?.fakeData?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "非法人组织");
    const respondentData1 = props.data?.fakeData?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "法人");

    console.log(props.data, 'props.data')
    setData({
      applyData,
      agentData,
      company,
      respondentData,
      applyData1,
      agentData1,
      company1,
      respondentData1
    })
  }, [props.data])

  return (
    <div style={{ ...props.style }}>
      <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>
      <div style={{ marginBottom: '8px' }}>申请方</div>
      <div className="line-container" style={{ marginBottom: '20px' }}>
        <div className="line left-line"></div>
        <div className="line middle-line"></div>
        <div className="line right-line"></div>
      </div>
      {/* ApplyDialog 只有在 applyData 存在且不为空时才渲染 */}
      {data.applyData && data.applyData.length > 0 ? (
        <ApplyDialog applyDialog={data.applyData} />
      ) : null}

      {/* AgentDialog 只有在 agentData 存在且不为空时才渲染 */}
      {data.agentData && data.agentData.length > 0 ? (
        <AgentDialog agentDialog={data.agentData} />
      ) : null}

      {/* Respondent 只有在 respondentData 存在且不为空时才渲染 */}
      {data.respondentData && data.respondentData.length > 0 ? (
        <Respondent respondent={data.respondentData} />
      ) : null}

      {data.company && data.company.length > 0 ? (
        <Company company={data.company} />
      ) : null}

    return (
        <div style={{ backgroundColor: '#ffff', margin: '8px 8px 0px 16px', padding: '12px 18px 16px 16px', height: 'calc(100vh - 228px)', overflowY: 'scroll', ...props.style }}>
            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                <Space size='small'>
                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人信息</h4>
                </Space>
      <div style={{ marginBottom: '8px' }}>被申请方</div>
      <div className="line-container" style={{ marginBottom: '20px' }}>
        <div className="line left-line"></div>
        <div className="line middle-line"></div>
        <div className="line right-line"></div>
      </div>
      {data.applyData1 && data.applyData1.length > 0 ? (
        <ApplyDialog applyDialog={data.applyData1} />
      ) : null}

      {data.agentData1 && data.agentData1.length > 0 ? (
        <AgentDialog agentDialog={data.agentData1} />
      ) : null}

      {data.respondentData1 && data.respondentData1.length > 0 ? (
        <Respondent respondent={data.respondentData1} />
      ) : null}

      {data.company1 && data.company1.length > 0 ? (
        <Company company={data.company1} />
      ) : null}
      <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>
      <Row gutter={[16, 16]}>
        {props.isDoc &&
          <>
            <Col span={8}>
              <div><div className="title-text">事项状态</div></div>
              <div style={{ color: '#1A6FB8' }}>{props.data?.statusName || '-'}</div>
            </Col>
            <div style={{ marginBottom: '8px' }}>申请方</div>
            <div className="line-container" style={{ marginBottom: '20px' }}>
                <div className="line left-line"></div>
                <div className="line middle-line"></div>
                <div className="line right-line"></div>
            </div>
            {/* ApplyDialog 只有在 applyData 存在且不为空时才渲染 */}
            {applyData && applyData.length > 0 ? (
                <ApplyDialog applyDialog={applyData} />
            ) : null}

            {/* AgentDialog 只有在 agentData 存在且不为空时才渲染 */}
            {agentData && agentData.length > 0 ? (
                <AgentDialog agentDialog={agentData} />
            ) : null}

            {/* Respondent 只有在 respondentData 存在且不为空时才渲染 */}
            {respondentData && respondentData.length > 0 ? (
                <Respondent respondent={respondentData} />
            ) : null}

            {company && company.length > 0 ? (
                <Company company={company} />
            ) : null}

            <div style={{ marginBottom: '8px' }}>被申请方</div>
            <div className="line-container" style={{ marginBottom: '20px' }}>
                <div className="line left-line"></div>
                <div className="line middle-line"></div>
                <div className="line right-line"></div>
            </div>
            {applyData1 && applyData1.length > 0 ? (
                <ApplyDialog applyDialog={applyData1} />
            ) : null}

            {agentData1 && agentData1.length > 0 ? (
                <AgentDialog agentDialog={agentData1} />
            ) : null}

            {respondentData1 && respondentData1.length > 0 ? (
                <Respondent respondent={respondentData1} />
            ) : null}

            {company1 && company1.length > 0 ? (
                <Company company={company1} />
            ) : null}
            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
                <Space size='small'>
                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>纠纷基本情况</h4>
                </Space>
            <Col span={16}>
              <div><div className="title-text">事项编号</div></div>
              <div>{props.data?.caseRef || '-'}</div>
            </Col>
            <Row gutter={[16, 16]}>
                <Col span={8}>
                    <div className="title">
                        <div className="title-text">事项等级</div>
                    </div>
                    <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#00B42A', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>{props.data?.caseLevel || '-'}</div></div>级</div>
                </Col>
                <Col span={8}>
                    <div><div className="title-text">来访时间</div></div>
                    <div>{props.data?.visitTime || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">来访人数（人）</div></div>
                    <div>{props.data?.visitPeopleNum || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">纠纷类型</div></div>
                    <div>
                        {props.data?.caseTypeFirstName ?
                            `${props.data.caseTypeFirstName}/${props.data.caseTypeName}`
                            : '-'
                        }
                    </div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">纠纷发生时间</div></div>
                    <div>{props.data?.occurTime || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">纠纷发生地点</div></div>
                    <div>{props.data?.addr || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">问题属地</div></div>
                    <div>
                        {props.data?.queProvName ?
                            `${props.data.queProvName}/${props.data.queCityName}/${props.data.queAreaName}/${props.data.queRoadName}`
                            : '-'
                        }
                    </div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">涉及人数（人）</div></div>
                    <div>{props.data?.peopleNum || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">涉及金额（元）</div></div>
                    <div>{$$.thousands(props.data?.amount) || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">事项来源</div></div>
                    <div>大厅来访</div>
                </Col>
                <Col span={16}>
                    <div ><div className="title-text">来访形式</div></div>
                    <div>来访</div>
                </Col>
                <Col span={24}>
                    <div className="title"><div className="title-text">事项概况</div></div>
                    <div>{props.data?.caseDes || '-'} </div>
                </Col>
                <Col span={24}>
                    <div className="title"><div className="title-text">事项申请</div></div>
                    <div>{props.data?.caseClaim || '-'}</div>
                </Col>
                <Col span={16}>
                    <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
                    <div>{props.data?.majorStatus === 1 ? '是' : '否'}</div>
                </Col>
            </Row>
            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
                <Space size='small'>
                    <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>事件材料</h4>
                </Space>
            </Col>

            <TableView
                columns={fakeColumns}
                dataSource={fakeData1}
                size="small"
                rowKey="id"
                bordered={true}
                style={{ marginBottom: '65px' }}
            />

            <Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered>
                {/* <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> */}
                <div style={{ marginTop: '-16px' }}>
                    <NewFileCheck />
                </div>

                {/* </div> */}
            </Modal>



        </div>
    )
          </>
        }
        <Col span={8}>
          <div className="title">
            <div className="title-text">事项等级</div>
          </div>
          <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#00B42A', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>{props.data?.caseLevel || '-'}</div></div>级</div>
        </Col>
        <Col span={8}>
          <div><div className="title-text">来访时间</div></div>
          <div>{props.data?.visitTime || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">来访人数（人）</div></div>
          <div>{props.data?.visitPeopleNum || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">纠纷类型</div></div>
          <div>
            {props.data?.caseTypeFirstName ?
              `${props.data.caseTypeFirstName}/${props.data.caseTypeName}`
              : '-'
            }
          </div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">纠纷发生时间</div></div>
          <div>{props.data?.occurTime || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">纠纷发生地点</div></div>
          <div>{props.data?.addr || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">问题属地</div></div>
          <div>
            {props.data?.queProvName ?
              `${props.data.queProvName}/${props.data.queCityName}/${props.data.queAreaName}/${props.data.queRoadName}`
              : '-'
            }
          </div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">涉及人数（人）</div></div>
          <div>{props.data?.peopleNum || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">涉及金额（元）</div></div>
          <div>{$$.thousands(props.data?.amount) || '-'}</div>
        </Col>
        <Col span={8}>
          <div ><div className="title-text">事项来源</div></div>
          <div>大厅来访</div>
        </Col>
        <Col span={16}>
          <div ><div className="title-text">来访形式</div></div>
          <div>来访</div>
        </Col>
        <Col span={24}>
          <div className="title"><div className="title-text">事项概况</div></div>
          <div>{props.data?.caseDes || '-'} </div>
        </Col>
        <Col span={24}>
          <div className="title"><div className="title-text">事项申请</div></div>
          <div>{props.data?.caseClaim || '-'}</div>
        </Col>
        <Col span={16}>
          <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
          <div>{props.data?.majorStatus === 1 ? '是' : '否'}</div>
        </Col>
      </Row>
      {props.transactResult && <>
        <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', marginTop: '20px' }}>
          <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'>{props.transactResult.mediResultName || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title" width="120">经办人</th>
            <td width='380'>{props.transactResult.mediator || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">承办部门</th>
            <td>{props.transactResult.mediateUnitName || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">配合部门</th>
            <td>{props.transactResult.applyAssistUnitName || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">受理时间</th>
            <td width='380'>2024-7-1 10:00</td>
            <th bgcolor="#F7F8FA" className="table-title" width="120">办结时间</th>
            <td width='380'>{props.transactResult?.fileTime || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th>
            <td width='380' colspan='3'>{props.transactResult?.windupContent || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">协议要点</th>
            <td width='380' colspan='3'>{props.transactResult?.agreeContent || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">结案意见</th>
            <td width='380' colspan='3'>{props.transactResult?.windupContent || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">协议文书</th>
            <td colspan='3'>
              {props.transactResult?.fileInfoBaseDTOList?.map((item, index) => {
                return <a href="your-link-here.html" target="_blank">
                  <img src={link} alt="" className="title-file" />{item.trueName}
                  {index !== props.transactResult.fileInfoBaseDTOList.length - 1 && <>，</>}
                </a>
              })}
            </td>
          </tr>
        </table>
      </>}
      <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-7px' }}></div><h4>事件材料</h4>
        </Space>
      </Col>
      <FileTable mainId={props.mainId} fileInfoList={props.data?.fileInfoList} isReview={true} />
    </div>
  )
}

export default Preview