联调办理反馈接口

dminyi

2024-09-04 27fb65ba5c31fbbad4c17166a72901d8db80ae03

联调办理反馈接口

 gz-customerSystem/src/components/SelectObjModal/selectPerson.jsx

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-29 17:41:09
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-29 20:03:51
 * @LastEditTime: 2024-09-04 15:16:56
 * @FilePath: \gzDyh\gz-customerSystem\src\components\SelectObjModal\selectPerson.jsx
 * @Description: 选择经办人
 */
@@ -31,7 +31,7 @@
 * onClose, // 关闭
 * onOk, // 点击确定的回调
 */
const SelectObjModal = ({ visible = false, checkKeys = [], type = 'person', isCheckbox = false, searchData = {}, onClose, onOk }) => {
const SelectObjModal = ({ visible = false, checkKeys = [], type = 'person', isCheckbox = false, searchData = {}, onClose, onOk, }) => {
    const [data, setData] = useState([]);

    const [checkedKeys, setCheckedKeys] = useState({ keys: [], items: [] });
@@ -153,6 +153,7 @@
  // 默认调解员查询'22_00024-4'
    const searchRole = type === 'person' ? { roleCode: '22_00024-4' } : {};

    console.log(checkedKeys.keys,'checkedKeys.keyscheckedKeys.keys')
    useEffect(() => {
        if (!visible) return;
        // 获取数据

 gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx

@@ -9,15 +9,15 @@
import { scan } from '@/assets/images/icon'
import DocumentScanner from './FileUpLoad'
import * as $$ from '@/utils/utility';
import {
  IconLink,
} from '@arco-design/web-react/icon';
import CaseResult from './CaseResult'
import ArcoUpload from '@/components/ArcoUpload';


const InputSearch = Input.Search;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const appUrl = $$.appUrl;


const style = {
  textAlign: 'center',
@@ -80,10 +80,23 @@
  return $$.ax.request({ url: 'ctUser/getByIdRole?id=' + id, type: 'get', service: 'cust' });
}

function choosePrincipalApi(id) {
  return $$.ax.request({ url: 'caseInfoUnfold/choosePrincipal?caseId=24083010062110001&userId=' + id, type: 'get', service: 'mediate' });
}

function delFile(id) {
  return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
}

function getNewTimeIdApi(id) {
  return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
}




const Handle = () => {
  const formRef = useRef();
  const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
  const [wantUser, setWantUser] = useState({});
  const [formView, setFormView] = useState(false);
@@ -97,12 +110,15 @@
  ];

  const [isModalVisible, setIsModalVisible] = useState(false);


  const [id, setId] = useState('')

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

  const handleCheckedKeys = (userId) => {
    choosePrincipal(userId)
  }

  const [records, setRecords] = useState([
    {
@@ -211,16 +227,50 @@

  }

  const choosePrincipal = async (id) => {
    console.log(id, 'choosePrincipalId')
    const res = await choosePrincipalApi(id)
    if (res.type) {
      let data = res.data
      console.log(data, 'choosePrincipalchoosePrincipal')
    }

  }


  //删除文件
  const handleDelFile = async (id) => {
    const res = await delFile(id)
    if (res.type) {
      $$.infoSuccess({ content: '删除成功！' });
    }
  }

  const getNewTimeId = async () => {
    const res = await getNewTimeIdApi()
    if (res.type) {
      setId(res.data)
    }
  }

  const addMark = () => {
    setFormView(!formView);
    getNewTimeId()
  }

  const handleFinish = () => {
    console.log(formRef.current.getFields(), formRef, 'formRef.current.getFields()', 'formRef')
  }

  const Supervising = () => {
    
  }



  useEffect(() => {
    getByIdRole()
  }, [])







  return (
@@ -344,6 +394,14 @@
                      </Space>
                    </Col>
                    <Col span={24}>
                      <Form
                        ref={formRef}
                        layout='vertical'
                        requiredSymbol={false}
                        scrollToFirstError={true}
                      >
                        <Row gutter={[32, 0]}>
                          <Col  span={24}>
                      <FormItem
                        label={<div style={{ display: 'flex' }}>
                          办理意见
@@ -362,6 +420,7 @@
                          wrapperStyle={{ width: '100%' }}
                        />
                      </FormItem>

                    </Col>
                    <Col span={24}>
                      <FormItem
@@ -372,22 +431,24 @@
                        field='caseDes'
                        rules={[{ message: '请填写事项概况', required: true }]}
                      >
                        <Upload
                          drag
                          multiple
                          accept='image/*'
                          action='/'
                          onDrop={(e) => {
                              <ArcoUpload
                                params={{
                                  action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId='24083010062110001'&&ownerId=${id}&ownerType=22_00018-102`,
                          }}
                          tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
                          showUploadList={{
                            fileIcon: <IconLink style={{ color: '#1D2129' }} />,
                          }}
                                field='file1'
                                // handleChangeFile={handleChangeFile}
                                label=''
                                // editData={props.editData}
                                handleDelFile={handleDelFile}
                        />
                      </FormItem>
                    </Col>

                        </Row>
                      </Form>
                    </Col>
                    <Space size='middle'>
                      <Button type='primary'>保存</Button>
                      <Button type='primary' onClick={() => handleFinish()}>保存</Button>
                      <Button type='secondary'>取消添加</Button>
                    </Space>
                  </div>
@@ -396,9 +457,10 @@
              </Col>
            </Form>
            <Space style={{ marginTop: '38px', bottom: '4px' }}>
              <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={() => setFormView(!formView)}>添加办理记录</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => SetCaseResult(!caseResult)}>结案申请</Button>
              <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={() => addMark()}>添加办理记录</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>联合处置申请</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => SetCaseResult(!caseResult)}>结案申请</Button>
              <Button type='outline' style={{ color: '#EF6C24', border: '1px solid #EF6C24' }} onClick={() => Supervising(!caseResult)}>督办</Button>
              <Button type='secondary'>返回上级页面</Button>
            </Space>
          </div>
@@ -457,8 +519,10 @@
          visible={isModalVisible}
          checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined}
          onOk={(value) => {
            console.log(value.key, value, 'value.key', 'value')
            setIsModalVisible(false);
            setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name });
            handleCheckedKeys(value.keys?.[0])
          }}
          onClose={() => setIsModalVisible(false)}
        />

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

@@ -188,7 +188,7 @@

.arco-upload-list-type-text .arco-upload-list-item:first-of-type,
.arco-upload-list-type-picture-list .arco-upload-list-item:first-of-type {
    margin-top: 34px;
    // margin-top: 34px;

}

@@ -451,3 +451,8 @@
    z-index: 9999;
}

.gap {
    height: 8px;
    background-color: #F2F3F5;
    margin: 16px -18px 0px -16px;
}

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

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




const Step = Steps.Step;
const TabPane = Tabs.TabPane;
@@ -12,6 +21,8 @@

  const [tabsActive, setTabsActive] = useState('1');
  const [current, setCurrent] = useState(7);
  const [filesCheck, setFilesCheck] = useState(false);
  const [infoData, setInfoData] = useState({});
  const [tabsList, setTabList] = useState([
        {
            img: result,
@@ -26,6 +37,299 @@
            isNeedStep: true,//加上这个就有进度条
        },
    ])
  const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab


  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 applyDialog = [
    {
      trueName: '李四',
      perClassName: '高级',
      phone: '13700137000',
      sex: '女',
      certiTypeName: '护照',
      certiNo: 'G12345678',
      nationName: '满',
      addr: '上海市浦东新区某公寓2号楼2单元202室',
      placeAddr: '上海市黄浦区某路3号',
      extreme: '否',
      workUnit: '上海某金融公司',
      person: '/path/to/anotherPerson.jpg', // 这应该是图片的实际路径
      link: '/path/to/anotherLink.png',     // 这应该是链接图标的实际路径
    }
    // 可以根据需要添加更多的对象来模拟更多条目的数据
  ];

  const agentDialog = [
    {
      trueName: '王五',
      perClassName: '自然人',
      phone: '13600136000',
      sex: '男',
      certiTypeName: '身份证',
      certiNo: '110101199501012345',
      nationName: '汉',
      addr: '广州市天河区某大厦A座501室',
      placeAddr: '广州市越秀区某街4号',
      extreme: '否',
      workUnit: '广州某贸易公司',
      agentRelateName: '配偶',
      agentTypeName: '法定代理人',
      perTypeName: '成年人',
      person: '/path/to/person.jpg', // 应该是图片的实际路径
      link: '/path/to/link.png',     // 应该是链接图标的实际路径
    },
  ];

  const respondent = [
    {
      orgaType: '广东好又多贸易有限公司',
      perClassName: '企业法人',
      phone: '020-12345678',
      address: '广州市天河区珠江新城花城大道66号',
      companyType: '有限责任公司',
      legalPerson: '江照月',
      creditCode: '914401011234567890',
      president: '广州市天河区珠江新城花城大道66号A座20层',
      link: '/path/to/link.png', // 应该是链接图标的实际路径
    },
  ];

  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;
    }));
  };







  return (
@@ -63,7 +367,308 @@
                </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 applyDialog={applyDialog} />
                    <AgentDialog agentDialog={agentDialog} />
                    <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>
                    <Respondent respondent={respondent} />
                    <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' }}>{infoData?.statusName || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div><div className="title-text">事项编号</div></div>
                        <div>{infoData?.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' }}>{infoData.caseLevel || '-'}</div></div>级</div>
                      </Col>
                      <Col span={8}>
                        <div><div className="title-text">来访时间</div></div>
                        <div>{infoData.visitTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">来访人数（人）</div></div>
                        <div>{infoData.visitPeopleNum || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷类型</div></div>
                        <div>{infoData.caseType || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷发生时间</div></div>
                        <div>{infoData.occurTime || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">纠纷发生地点</div></div>
                        <div>{infoData.addr || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">问题属地</div></div>
                        <div>{infoData.questionName || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">涉及人数（人）</div></div>
                        <div>{infoData.peopleNum || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">涉及金额（元）</div></div>
                        <div>{$$.thousands(infoData.amount) || '-'}</div>
                      </Col>
                      <Col span={8}>
                        <div ><div className="title-text">事项来源</div></div>
                        <div>{infoData.canalName || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div ><div className="title-text">来访形式</div></div>
                        <div>{infoData.visitWayName || '-'}</div>
                      </Col>
                      <Col span={24}>
                        <div className="title"><div className="title-text">事项概况</div></div>
                        <div>{infoData.caseDes || '-'}</div>
                      </Col>
                      <Col span={24}>
                        <div className="title"><div className="title-text">事项申请</div></div>
                        <div>{infoData.caseClaim || '-'}</div>
                      </Col>
                      <Col span={16}>
                        <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
                        <div>{infoData.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'>化解成功</td>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">经办人</th>
                        <td width='380'>李晓明</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title">承办部门</th>
                        <td>天河区棠下街综治中心</td>
                        <th bgcolor="#F7F8FA" className="table-title">配合部门</th>
                        <td>-</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'>2024-7-15 11:45</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th>
                        <td width='380' colspan='3'>调解开始，我首先安抚双方情绪，确保对话在一个平和的氛围中展开。随后，我引导被申请人详细说明了他的财务困境及还款意愿，同时让银行代表理解其处境，强调长期合作的重要性。经过反复沟通，被申请人理解了自身行为给申请人带来的不便，在相关证据的出示下，被申请人同意了申请方的申请请求，双方最终达成一致，签署了调解协议。</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">协议要点</th>
                        <td width='380' colspan='3'>经过协商，李女士同意承担主要维修费用，但考虑到水管老化属自然磨损，张先生也表示愿意承担一小部分费用以示友好特申请结案。</td>
                      </tr>
                      <tr>
                        <th bgcolor="#F7F8FA" className="table-title" width="120">结案意见</th>
                        <td width='380' colspan='3'>考虑到事项已经得到平息，过程材料也都比较完善，现申请结案</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>
                      <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 defaultValue={3} disabled /></div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价时间</div>
                        </div>
                        <div>2024-8-1 12:00</div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">评价人</div>
                        </div>
                        <div>张梦雨</div>
                      </Col>
                      <Col span={12}>
                        <div className="title">
                          <div className="title-text">评语</div>
                        </div>
                        <div>实名表扬天河区棠下街综治中心，真的很有耐心处置我提出的问题，得到满意的答复。</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>天河区棠下街道综治中心</div>
                      </Col>
                      <Col span={8}>
                        <div className="title">
                          <div className="title-text">登记人</div>
                        </div>
                        <div>
                          李晓明
                          <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>2024-7-8 10:00</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' &&

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

@@ -10,11 +10,11 @@
          <table border="1" align="center" cellpadding="6" className="table">
            <tr>
              <th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
              <td width='380'><div style={{ display: 'flex' }}><div>{item.trueName}</div><div className="title-personRemark">{item.perClassName}</div></div></td>
              <td width='380'><div style={{ display: 'flex' }}><div>{item.trueName || '-'}</div><div className="title-personRemark">自然人</div></div></td>
              <th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
              <td width='380'>{item.phone}</td>
              <td width='380'>{item.mobile || '-'}</td>
              <th bgcolor="#F7F8FA" className="table-title" width='140'>性别</th>
              <td>{item.sex}</td>
              <td>{item.sexName || '-'}</td>
              <td rowspan="4" width="112" height='147' style={{ padding: '0px' }}>
                <img border="0" src={person} alt="" style={{
                  width: '100%',
@@ -26,23 +26,23 @@
            </tr>
            <tr>
              <th bgcolor="#F7F8FA" className="table-title">证件类型</th>
              <td>{item.certiTypeName}</td>
              <td>{item.certiTypeName || '-'}</td>
              <th bgcolor="#F7F8FA" className="table-title">证件号码</th>
              <td>{item.certiNo}</td>
              <td>{item.certiNo || '-'}</td>
              <th bgcolor="#F7F8FA" className="table-title">民族</th>
              <td>{item.nationName}</td>
              <td>{item.nationName || '-'}</td>
            </tr>
            <tr>
              <th bgcolor="#F7F8FA" className="table-title">联系地址</th>
              <td>{item.addr}</td>
              <td>{item.addr || '-'}</td>
              <th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
              <td>{item.placeAddr}</td>
              <td>{item.placeAddr || '-'}</td>
              <th bgcolor="#F7F8FA" className="table-title" rowspan="2" >是否有个人极端倾向</th>
              <td rowspan="2" >{item.extreme}</td>
              <td rowspan="2" >{item.extreme === 1 ? '是' : '否' || '-'}</td>
            </tr>
            <tr>
              <th bgcolor="#F7F8FA" className="table-title">工作单位</th>
              <td>{item.workUnit}</td>
              <td>{item.workUnit || '-'}</td>
              <th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
              <td>
                <a href="your-link-here.html" target="_blank">
@@ -68,42 +68,42 @@
        <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
            <td width='380'><div style={{ display: 'flex' }}><div>{item.trueName}</div><div className="title-personRemark">{item.perClassName}</div></div></td>
            <td width='380'><div style={{ display: 'flex' }}><div>{item.trueName || '-'}</div><div className="title-personRemark">代理人</div></div></td>
            <th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
            <td width='380'>{item.phone}</td>
            <td width='380'>{item.mobile || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title" width="140">性别</th>
            <td>{item.sex}</td>
            <td>{item.sexName || '-'}</td>
            <td rowspan="4" width="112" height='147' style={{ padding: '0px' }}>
              <img border="0" src={person} alt="" style={{ width: '100%', height: '100%' }} />
            </td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">证件类型</th>
            <td>{item.certiTypeName}</td>
            <td>{item.certiTypeName || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">证件号码</th>
            <td>{item.certiNo}</td>
            <td>{item.certiNo || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">民族</th>
            <td>{item.nationName}</td>
            <td>{item.nationName || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">联系地址</th>
            <td>{item.addr}</td>
            <td>{item.addr || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
            <td>{item.placeAddr}</td>
            <td>{item.placeAddr || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title" >是否有个人极端倾向</th>
            <td>{item.extreme}</td>
            <td>{item.extreme || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">工作单位</th>
            <td>{item.workUnit}</td>
            <td>{item.workUnit || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">委托关系</th>
            <td>{item.agentRelateName}</td>
            <td>{item.agentRelate || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">委托类型</th>
            <td>{item.agentTypeName}</td>
            <td>{item.agentType || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">代理对象</th>
            <td>{item.perTypeName}</td>
            <td>{item.personId || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
            <td>
              <a href="your-link-here.html" target="_blank">
@@ -132,23 +132,23 @@
        <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">企业名称</th>
            <td width='380'><div style={{ display: 'flex' }}><div>{item.orgaType}</div><div className="title-personRemark">{item.perClassName}</div></div></td>
            <td width='380'><div style={{ display: 'flex' }}><div>{item.trueName}</div><div className="title-personRemark">{item.perClassName}</div></div></td>
            <th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
            <td width='380'>{item.phone}</td>
            <td width='380'>{item.mobile || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title" width="120">企业所在地</th>
            <td>{item.address}</td>
            <td>{item.addr || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">企业类型</th>
            <td>{item.companyType}</td>
            <td>{item.orgaTypeName || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">法定代表人</th>
            <td>{item.legalPerson}</td>
            <td>{item.deputy || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">统一社会信用代码</th>
            <td>{item.creditCode}</td>
            <td>{item.orgaCode || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">住所</th>
            <td>{item.president}</td>
            <td>{item.placeAddr || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">企业登记材料</th>
            <td>
              <a href="your-link-here.html" target="_blank">
@@ -171,4 +171,50 @@

}

export { ApplyDialog, AgentDialog,Respondent };
const Company = ({ company }) => {
  return (
    <>
      {company?.map((item, index) => (
        <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title" width="120">机构名称</th>
            <td width='380'><div style={{ display: 'flex' }}><div>{item.trueName}</div><div className="title-personRemark">{item.perClassName}</div></div></td>
            <th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
            <td width='380'>{item.mobile || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title" width="120">机构所在地</th>
            <td>{item.addr || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">机构类型</th>
            <td>{item.orgaTypeName || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">机构代表人</th>
            <td>{item.deputy || '-'}</td>
            <th bgcolor="#F7F8FA" className="table-title">机构组织代码</th>
            <td>{item.orgaCode || '-'}</td>
          </tr>
          <tr>
            <th bgcolor="#F7F8FA" className="table-title">住所</th>
            <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>
            </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>
            </td>
          </tr>
        </table>

      ))
      }
    </>
  )

}

export { ApplyDialog, AgentDialog, Respondent, Company };

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

@@ -109,16 +109,16 @@
          <Col span={24}>
            <ArcoUpload
              params={{
                action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00014-1`,
                action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00018-101`,
              }}
              field='file'
              handleChangeFile={handleChangeFile}
              label='身份证明材料'
              label=''
              editData={props.editData}
              handleDelFile={handleDelFile}
              onFileListChange={(v) => { setFileLength(v); console.log(v, 'vvsetFileLength') }}
            />
            {fileLength.length > 0 && <div style={{ position: 'absolute', top: '233px', left: '16px', color: '#86909C' }}>申请材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileLength.length}</span></div>}
            {fileLength.length > 0 && <div style={{ position: 'absolute',top:'198px', left: '16px', color: '#86909C' }}>申请材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileLength.length}</span></div>}
          </Col>
        </>
      )
@@ -130,11 +130,11 @@
          <Col span={24}>
            <ArcoUpload
              params={{
                action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00014-2`,
                action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00018-102`,
              }}
              field='file1'
              handleChangeFile={handleChangeFile}
              label='身份证明材料'
              label=''
              editData={props.editData}
              handleDelFile={handleDelFile}
            />
@@ -325,7 +325,8 @@
    setEditData(value)
  }

  console.log(sourceType, 'sourceType')
  // console.log(sourceType, 'sourceType')
  // console.log(props.formRef?.current?.getFields(),'formRef.current.getFields()')


  return (

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

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-09 09:59:43
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-02 19:59:41
 * @LastEditTime: 2024-09-04 10:20:40
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx
 * @Description: 来访登记
 */
@@ -186,7 +186,7 @@
                            <Step title='结案归档' disabled />
                        </Steps>
                    </div>
                    <Preview style={{ display: isReview ? '' : 'none' }} />
                    <Preview style={{ display: isReview ? '' : 'none' }} data={formRef?.current?.getFields()} />
                    <VisitorRegister formRef={formRef} style={{ display: isReview ? 'none' : '' }} mainId={id} />
                    <div className="dataSync-excel">
                        <Space size="large" style={{ margin: '4px 14px' }}>

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

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-13 15:19:57
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-03 17:02:58
 * @LastEditTime: 2024-09-04 15:00:02
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx
 * @Description: 预览信息
 */
@@ -14,7 +14,7 @@
import { Modal } from '@arco-design/web-react';
import NewFileCheck from '../../filesCheck/newFileCheck';
import * as $$ from '../../../utils/utility';
import { ApplyDialog, AgentDialog,Respondent } from './component/previewTable'
import { ApplyDialog, AgentDialog, Respondent, Company } from './component/previewTable'

const Preview = (props) => {
    const [filesCheck, setFilesCheck] = useState(false);
@@ -125,59 +125,19 @@
        // 更多列配置...
    ];

    const applyDialog = [
        {
            trueName: '李四',
            perClassName: '高级',
            phone: '13700137000',
            sex: '女',
            certiTypeName: '护照',
            certiNo: 'G12345678',
            nationName: '满',
            addr: '上海市浦东新区某公寓2号楼2单元202室',
            placeAddr: '上海市黄浦区某路3号',
            extreme: '否',
            workUnit: '上海某金融公司',
            person: '/path/to/anotherPerson.jpg', // 这应该是图片的实际路径
            link: '/path/to/anotherLink.png',     // 这应该是链接图标的实际路径
        }
        // 可以根据需要添加更多的对象来模拟更多条目的数据
    ];

    const agentDialog = [
        {
            trueName: '王五',
            perClassName: '自然人',
            phone: '13600136000',
            sex: '男',
            certiTypeName: '身份证',
            certiNo: '110101199501012345',
            nationName: '汉',
            addr: '广州市天河区某大厦A座501室',
            placeAddr: '广州市越秀区某街4号',
            extreme: '否',
            workUnit: '广州某贸易公司',
            agentRelateName: '配偶',
            agentTypeName: '法定代理人',
            perTypeName: '成年人',
            person: '/path/to/person.jpg', // 应该是图片的实际路径
            link: '/path/to/link.png',     // 应该是链接图标的实际路径
        },
    ];
    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 === "非法人组织");
    const respondentData = props.data?.fakeData?.filter(item => item.perTypeName === "申请方当事人" && item.perClassName === "法人");

    const respondent = [
        {
            orgaType: '广东好又多贸易有限公司',
            perClassName: '企业法人',
            phone: '020-12345678',
            address: '广州市天河区珠江新城花城大道66号',
            companyType: '有限责任公司',
            legalPerson: '江照月',
            creditCode: '914401011234567890',
            president: '广州市天河区珠江新城花城大道66号A座20层',
            link: '/path/to/link.png', // 应该是链接图标的实际路径
        },
    ];
    const applyData1 = props.data?.fakeData?.filter(item => item.perTypeName === "被申请方当事人" && item.perClassName === "自然人");
    const agentData1 = props.data?.fakeData?.filter(item => item.perTypeName === "被申请方代理人");
    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')




@@ -195,15 +155,46 @@
                <div className="line middle-line"></div>
                <div className="line right-line"></div>
            </div>
            <ApplyDialog applyDialog={applyDialog} />
            <AgentDialog agentDialog={agentDialog} />
            {/* 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>
            <Respondent respondent={respondent} />
            {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>
@@ -214,39 +205,49 @@
                    <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' }}>3</div></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>2024-7-12 10:00</div>
                    <div>{props.data?.visitTime || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">来访人数（人）</div></div>
                    <div>2</div>
                    <div>{props.data?.visitPeopleNum || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">纠纷类型</div></div>
                    <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>2024-7-11</div>
                    <div>{props.data?.occurTime || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">纠纷发生地点</div></div>
                    <div>广州市天河区中山七路康王柏德来商业城</div>
                    <div>{props.data?.addr || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">问题属地</div></div>
                    <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>2</div>
                    <div>{props.data?.peopleNum || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">涉及金额（元）</div></div>
                    <div>{$$.thousands(20000)}</div>
                    <div>{$$.thousands(props.data?.amount) || '-'}</div>
                </Col>
                <Col span={8}>
                    <div ><div className="title-text">事项来源</div></div>
@@ -258,15 +259,15 @@
                </Col>
                <Col span={24}>
                    <div className="title"><div className="title-text">事项概况</div></div>
                    <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
                    <div>{props.data?.caseDes || '-'} </div>
                </Col>
                <Col span={24}>
                    <div className="title"><div className="title-text">事项申请</div></div>
                    <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
                    <div>{props.data?.caseClaim || '-'}</div>
                </Col>
                <Col span={16}>
                    <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
                    <div>否</div>
                    <div>{props.data?.majorStatus === 1 ? '是' : '否'}</div>
                </Col>
            </Row>
            <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}>