抽离事项详情

zhangyongtian

2024-08-31 b4852614f236f932c135bec0c1bda727ca5dc3b4

抽离事项详情

 gz-customerSystem/src/views/register/eventFlow/component/FileUpLoad.jsx

New file
@@ -0,0 +1,134 @@
import React, { useState, useEffect } from 'react';
import { Typography, Button } from 'antd';
import { CheckOutlined, } from '@ant-design/icons';
import { Form, Input, Modal,Upload } from '@arco-design/web-react';
import { IconLink } from '@arco-design/web-react/icon';


const { TextArea } = Input;
const { Text } = Typography;

const DocumentScanner = ({
  visible,
  onCancel,
  onConfirm,
  formRef,
}) => {
  const [scanImage, setScanImage] = useState(false);
  const [scaned, setScaned] = useState(false);
  const [fileView, setFileView] = useState(null);

  useEffect(() => {
    if (!visible) {
      setScanImage(false);
      setScaned(false);
      setFileView(null);
    }
  }, [visible]);

  const handleUploadChange = (info) => {
    if (info.fileList.length > 0) {
      setScanImage(true);
    }
    setFileView({
      ...info.fileList[0],
      url: URL.createObjectURL(info.fileList[0].originFile),
    });
  };

  const handleStartRecognition = () => {
    setScaned(true);
    setScanImage(false);
  };

  const handleUseText = (text) => {
    onConfirm(text);
    onCancel(); // 关闭弹窗
  };

  return (
    <>
      <Modal
        style={{ width: '1200px' }}
        visible={visible && !scanImage && !scaned}
        onCancel={onCancel}
        title='识别上传材料'
        centered
        footer={null}
      >
        <Form
          ref={formRef}
          layout='vertical'
          requiredSymbol={false}
          style={{ marginTop: '4px' }}
        >
          <Form.Item label='选择图片' name='file'>
            <Upload
              drag
              limit={1}
              accept='image/*'
              onDrop={() => {}}
              tip='支持png、jpg、pdf等格式文件上传，每次上传大小不超过10M'
              showUploadList={{
                fileIcon: <IconLink style={{ color: '#1D2129' }} />,
              }}
              onChange={handleUploadChange}
            >
              <Text>点击或者拖拽文件到这里</Text>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        style={{ width: '944px' }}
        visible={visible && scanImage}
        onCancel={() => setScanImage(false)}
        footer={null}
        title='选择识别范围'
        centered
      >
        <img
          src={fileView?.url}
          alt=""
          style={{
            display: 'block',
            margin: 'auto',
            maxWidth: '100%',
            maxHeight: '100%',
            objectFit: 'contain',
          }}
        />
        <div style={{ marginTop: '20px' }}>
          <Button type="primary" onClick={handleStartRecognition}>
            开始识别
          </Button>
        </div>
      </Modal>
      <Modal
        style={{ width: '1200px' }}
        visible={visible && scaned}
        onCancel={() => setScaned(false)}
        footer={null}
        title='识别上传材料'
        centered
      >
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
        <TextArea
          showWordLimit
          rows={5}
          placeholder=''
          wrapperStyle={{ width: '100%' }}
          defaultValue='识别内容'
          onChange={(e) => handleUseText(e.target.value)}
        />
        <div style={{ marginTop: '24px' }}>
          <Button type="primary" onClick={() => handleUseText('识别内容')}>
            使用文字
          </Button>
        </div>
      </Modal>
    </>
  );
};

export default DocumentScanner;

 gz-customerSystem/src/views/register/eventFlow/component/MattersInfo.jsx

New file
@@ -0,0 +1,339 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-27 11:31:01
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-31 15:32:42
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\MattersInfo.jsx
 * @Description: 事项详情
 */

import React, { useState, useEffect } from 'react';
import PersonCard from '@/components/personCard'
import { Row, Col, Space, Button, Switch } from 'antd';
import TableView from '@/components/TableView'
import { question, register, Matter, transfer } from '../../../../assets/images'
import * as $$ from '@/utils/utility';
import { Typography, Steps } from '@arco-design/web-react';
import "@arco-themes/react-gzzz/css/arco.css";
import { IconCalendar, IconClockCircle, IconUser } from '@arco-design/web-react/icon';
import Handle from './handle';
import EventFlow from './secondWanderStep/EventFlow';

const style = {
  // textAlign: 'center',
  // marginTop: 20,
};



function getCaseInfoApi(id) {
  return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
}


const MattersInfo = (props) => {
  const [fakeData, setFakeData] = useState([{
    "trueName": "王大锤",
    "mobile": "13380313412",
    "certiType": "09_00015-1",
    "certiTypeName": "身份证",
    "certiNo": "440981199902025123",
    "perType": "15_020008-1",
    "perClass": "09_01001-1",
    "perTypeName": "申请方当事人",
    "perClassName": "自然人",
    "id": "24083010053310002"
  }, {
    "trueName": "刘俊峰",
    "mobile": "13380313412",
    "certiType": "09_00015-1",
    "certiTypeName": "身份证",
    "certiNo": "440981199902023234",
    "perType": "15_020008-2",
    "perClass": "09_01001-1",
    "perTypeName": "被申请方当事人",
    "perClassName": "自然人",
    "id": "24083010054710003"
  }]);//当事人信息数据
  const [upload, setUpLoad] = useState(false);
  const [filesCheck, setFilesCheck] = useState(false);
  const [infoData, setInfoData] = useState({});


  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>下载</div>
          <div onClick={() => setUpLoad(true)}>上传</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 表示系列案
      // 更多字段...
    },

    // 更多数据...
  ];

  //获取id
  const getCaseInfo = async () => {
    const res = await getCaseInfoApi('24083010062110001')
    if (res.type) {
      let data = res.data
      setInfoData([...fakeData1, {
        ...data,
        // status:
        // data.status === '1' ? '待签收' :
        // data.status === '2' ? '待受理' :
        // data.status === '3' ? '办理中' :
        // data.status === '4' ? '结案审核' :
        // data.status === '5' ? '待评价' :
        // data.status === '6' ? '已归档' : '未知状态'
      }])

      setInfoData(res.data)
    }
  }

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


  return (
    <div style={{ position: 'relative' }}>
      {props.active === '1' &&
        <Typography.Paragraph style={style}>
          <div className='dataSync-page'>

            <Col span={24} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <Space size='small'>
                <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
              </Space>
              <div>
                <Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked />
              </div>
            </Col>
            <div style={{ margin: '16px 0' }}>
              <PersonCard
                isCheck={false}
                data={fakeData}
              />
            </div>
            <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.caseId || '-'}</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.caseTypeFirstName}/{infoData.caseTypeName}</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>广州市天河区中山七路康王柏德来商业城</div>
              </Col>
              <Col span={8}>
                <div ><div className="title-text">问题属地</div></div>
                {/* <div>{queProvName}/{queCityName}/{queAreaName}/{queRoadName}</div> */}
              </Col>
              <Col span={8}>
                <div ><div className="title-text">涉及人数（人）</div></div>
                <div>2</div>
              </Col>
              <Col span={8}>
                <div ><div className="title-text">涉及金额（元）</div></div>
                <div>{$$.thousands(20000)}</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>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
              </Col>
              <Col span={24}>
                <div className="title"><div className="title-text">事项申请</div></div>
                <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
              </Col>
              <Col span={16}>
                <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
                <div>否</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><h5>事件材料</h5>
              </Space>
            </Col>

            <TableView
              columns={fakeColumns}
              dataSource={fakeData1}
              size="small"
              rowKey="id"
              bordered={true}
              style={{ marginBottom: '20px' }}
            />
            <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 className="title"><div className="title-text">登记机构</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                <div>天河区棠下街道综治中心</div>
              </Col>
              <Col span={8}>
                <div><div className="title-text">登记人</div></div>
                <div style={{ display: 'flex' }}>
                  <div>李晓明</div>
                  <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
                </div>
              </Col>
              <Col span={8}>
                <div ><div className="title-text">登记时间</div></div>
                <div>2024-7-8 10:00</div>
              </Col>
            </Row>
            <Button type='primary' style={{ marginTop: '20px' }}>修改</Button>
          </div>

        </Typography.Paragraph>
      }
      {
        (props.active === '2' && props.current === 3) && <Typography.Paragraph style={style}>
          <Handle />
        </Typography.Paragraph>
      }
      {
        (props.active === '2' && props.current === 2) && <EventFlow />
      }
    </div>
  )
}

export default MattersInfo;

 gz-customerSystem/src/views/register/eventFlow/component/agentDialog.jsx

New file
@@ -0,0 +1,312 @@
import React, { useState, useEffect, useRef, Fragment } from "react";
import { Row, Col, Space } from 'antd';
import { Form, Input, Button, Radio, Select, Checkbox, Upload } from '@arco-design/web-react';
import KeyVisits from "@/components/personCard/KeyVisits";
import {
  IconLink,
} from '@arco-design/web-react/icon';
import * as $$ from '@/utils/utility';

const FormItem = Form.Item;
const Option = Select.Option;
const InputSearch = Input.Search;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;

export default function AgentDialog(props) {
  const formRef = useRef();
  const [visitList, setVisitList] = useState([])

  useEffect(() => {
    if (props.editData) {
      //编辑
      formRef.current.setFieldsValue({
        ...props.editData
      })
      console.log(props);
      //过滤代理人
      setVisitList(props.fakeData.filter(item => {
        if (props.editData.perType === '24_00006-1') {
          return item.perType === '15_020008-1'
        } else {
          return item.perType === '15_020008-2'
        }
      }))
    } else {
      //过滤代理人
      setVisitList(props.fakeData.filter(item => {
        if (props.dialogType === '24_00006-1') {
          return item.perType === '15_020008-1'
        } else {
          return item.perType === '15_020008-2'
        }
      }))
    }
  }, [])

  //保存信息
  const handleSave = () => {
    if (formRef.current) {
      formRef.current.validate(undefined, (errors, values) => {
        if (!errors) {
          const fieldValue = formRef.current.getFields()
          if (props.editData) {
            props.handleAddParty({
              ...fieldValue
            })
          } else {
            props.handleAddParty({
              ...fieldValue,
              perType: props.dialogType,
              perTypeName: $$.options.personType.find(item => item.value === props.dialogType).label,
            })
          }
          props.onClose()
        }
      });
    }
  }

  return (
    <div className="applyDialog">
      <div style={{ height: '590px', overflowY: 'scroll' }}>
        <Row gutter={[16, 16]} style={{ margin: '0 2px 0 0' }}>
          <Col span={24}>
            <Form
              ref={formRef}
              layout='vertical'
              requiredSymbol={false}
              initialValues={{
              }}//默认值
              scrollToFirstError
            >
              <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>
                <Col span={24}>
                  <FormItem
                    label='身份证明材料'
                    field='file'
                  >
                    <Upload
                      drag
                      multiple
                      accept='image/*'
                      action='/'
                      onDrop={(e) => {
                      }}
                      tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
                      showUploadList={{
                        fileIcon: <IconLink style={{ color: '#1D2129' }} />,
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={24}>
                  <FormItem
                    label='代理人委托书'
                    field='file1'
                  >
                    <Upload
                      drag
                      multiple
                      accept='image/*'
                      action='/'
                      onDrop={(e) => {
                      }}
                      tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>姓名<div className="must">必填</div></div>)}
                    field='trueName'
                    rules={[{ required: true, message: '请输入姓名' }]}
                  >
                    <Input placeholder='请填写' />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)}
                    field='mobile'
                    rules={[
                      { required: true, message: '请输入联系方式' },
                      { match: /^\+?(\d{1,3})?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})$/, message: '请输入正确的电话号码' },
                    ]}
                  >
                    <Input placeholder='请填写' />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)}
                    field='certiType'
                    rules={[{ required: true, message: '请选择证件类型' }]}
                  >
                    <Select
                      placeholder='请选择'
                      allowClear
                      options={$$.options.cardType}
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('certiTypeName', options && options.children)
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>证件号码<div className="must">必填</div></div>)}
                    rules={[
                      { required: true, message: '请输入证件号码' },
                      { match: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X)$/, message: '请输入正确的证件号码' }
                    ]}
                    field='certiNo'
                  >
                    <InputSearch
                      searchButton='读取卡证'
                      placeholder='请填写'
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem label='联系地址' field='addr'>
                    <Input placeholder='请填写' />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem label='户籍地址' field='placeAddr'>
                    <Input placeholder='请填写' />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem label='工作单位' field='workUnit'>
                    <Input placeholder='请填写' />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label='民族'
                    field='nation'
                  >
                    <Select
                      placeholder='请选择'
                      allowClear
                      showSearch
                      options={$$.options.nation}
                      filterOption={(inputValue, option) =>
                        option.props.value.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0 ||
                        option.props.children.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
                      }
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('nationName', options && options.children)
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label='性别'
                    field='sex'
                  >
                    <RadioGroup
                      type='button'
                      options={$$.options.sex}
                      onChange={(value, options) => {
                        if (value) {
                          formRef.current.setFieldValue('sexName', value === '09_00003-1' ? '男' : '女')
                        } else {
                          formRef.current.setFieldValue('sexName', '')
                        }
                      }}
                    >
                    </RadioGroup>
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label='是否极具个人极端倾向'
                    field='extreme'
                  >
                    <RadioGroup>
                      <Radio value={0}>否</Radio>
                      <Radio value={1}>是</Radio>
                    </RadioGroup>
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label='委托关系'
                    field='agentRelate'
                  >
                    <Select
                      placeholder='请选择'
                      allowClear
                      options={$$.options.agentRelate}
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('agentRelateName', options && options.children)
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label='委托类型'
                    field='agentType'
                  >
                    <Select
                      placeholder='请选择'
                      allowClear
                      options={$$.options.agentType}
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('agentTypeName', options && options.children)
                      }}
                    />
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>代理对象<div className="must">必填</div></div>)}
                    rules={[{ required: true, message: '请选择代理对象' }]}
                    field='personId'
                  >
                    <CheckboxGroup
                      direction='vertical'
                      options={visitList.map(x => ({
                        label: <span>{x.trueName}&nbsp;&nbsp;<span style={{ color: '#86909c' }}>({x.perTypeName})</span></span>,
                        value: x.id,
                      }))}
                      onChange={(value) => {
                        if (value) {
                          const personList = visitList.filter(item => value.indexOf(item.id) != -1).map(item => item.trueName)
                          formRef.current.setFieldValue('personNameList', personList)
                        }
                      }}
                    >
                    </CheckboxGroup>
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </Col>
        </Row>

        {/* 重复来访重点人员 */}
        <div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}>
          <KeyVisits />
        </div>
      </div>
      <div className='dialogFooter'>
        <Button
          type="primary"
          className="dialogPrimary"
          onClick={handleSave}
        >
          保存
        </Button>
        <Button className="dialogBack">
          重置
        </Button>
      </div>
    </div>
  )
}

 gz-customerSystem/src/views/register/eventFlow/component/applyDialog.jsx

New file
@@ -0,0 +1,399 @@
import React, { useState, useEffect, useRef, Fragment } from "react";
import * as $$ from '@/utils/utility';
import { Row, Col } from 'antd';
import {
  CheckOutlined,
} from '@ant-design/icons';
import {
  caseperfection_person,
  caseperfection_person_active,
  caseperfection_legal,
  caseperfection_legal_active,
  caseperfection_organize,
  caseperfection_organize_active,
} from '@/assets/images/icon';
import { Form, Input, Button, Radio, Select, Modal, Cascader, Upload, Message } from '@arco-design/web-react';
import KeyVisits from "@/components/personCard/KeyVisits";
import SelectUnitDialog from "./selectUnitDialog";
import {
  IconLink,
} from '@arco-design/web-react/icon';

const FormItem = Form.Item;
const Option = Select.Option;
const InputSearch = Input.Search;
const RadioGroup = Radio.Group;

export default function ApplyDialog(props) {
  const formRef = useRef();
  const [perClass, setPerClass] = useState('09_01001-1');
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (props.editData) {
      //编辑
      formRef.current.setFieldsValue({
        ...props.editData
      })
      setPerClass(props.editData.perClass)
    }
  }, [])


  const personIconType = (v) => {
    switch (v) {
      case '09_01001-1':
        return [caseperfection_person, caseperfection_person_active];
      case '09_01001-2':
        return [caseperfection_legal, caseperfection_legal_active];
      case '09_01001-3':
        return [caseperfection_organize, caseperfection_organize_active];
    }
  }

  //页面返回
  const formType = (type) => {
    if (type === '09_01001-1') {
      //自然人
      return (
        <>
          <Col span={24}>
            <FormItem
              label='身份证明材料'
              field='file'
            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                onDrop={(e) => {
                }}
                tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
                showUploadList={{
                  fileIcon: <IconLink style={{ color: '#1D2129' }} />,
                }}
              />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>姓名<div className="must">必填</div></div>)}
              field='trueName'
              rules={[{ required: true, message: '请输入姓名' }]}
            >
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)}
              field='mobile'
              rules={[
                { required: true, message: '请输入联系方式' },
                { match: /^\+?(\d{1,3})?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})$/, message: '请输入正确的电话号码' },
              ]}
            >
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)}
              field='certiType'
              rules={[{ required: true, message: '请选择证件类型' }]}
            >
              <Select
                placeholder='请选择'
                allowClear
                options={$$.options.cardType}
                onChange={(value, options) => {
                  formRef.current.setFieldValue('certiTypeName', options && options.children)
                }}
              />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>证件号码<div className="must">必填</div></div>)}
              rules={[
                { required: true, message: '请输入证件号码' },
                { match: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X)$/, message: '请输入正确的证件号码' }
              ]}
              field='certiNo'
            >
              <InputSearch
                searchButton='读取卡证'
                placeholder='请填写'
              />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label='联系地址' field='addr'>
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label='户籍地址' field='placeAddr'>
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label='工作单位' field='workUnit'>
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label='民族'
              field='nation'
            >
              <Select
                placeholder='请选择'
                allowClear
                showSearch
                options={$$.options.nation}
                filterOption={(inputValue, option) =>
                  option.props.value.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0 ||
                  option.props.children.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
                }
                onChange={(value, options) => {
                  formRef.current.setFieldValue('nationName', options && options.children)
                }}
              >
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label='性别'
              field='sex'
            >
              <RadioGroup
                type='button'
                options={$$.options.sex}
                onChange={(value, options) => {
                  if (value) {
                    formRef.current.setFieldValue('sexName', value === '09_00003-1' ? '男' : '女')
                  } else {
                    formRef.current.setFieldValue('sexName', '')
                  }
                }}
              >
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label='是否极具个人极端倾向'
              field='extreme'
            >
              <RadioGroup>
                <Radio value={0}>否</Radio>
                <Radio value={1}>是</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </>
      )
    } else {
      //法人、非法人组织
      let isLegal = type === '09_01001-2'
      return (
        <>
          <Col span={24}>
            <FormItem
              label={isLegal ? '企业登记材料' : '机构登记材料'}
              field='file'
            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                onDrop={(e) => {
                }}
                tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
              />
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem
              label={isLegal ? '法定代表人身份证明材料' : '机构代表人身份证明材料'}
              field='file1'
            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                onDrop={(e) => {
                }}
                tip='支持png、jpg、pdf格式的图片上传，每次上传大小不超过10M'
              />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>{isLegal ? '企业名称' : '机构名称'}<div className="must">必填</div></div>)}
              rules={[{ required: true, message: '请输入' + isLegal ? '企业名称' : '机构名称' }]}
              field='trueName'
            >
              <InputSearch
                searchButton='选择'
                placeholder='请填写'
                onSearch={handleSelect}
              />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)}
              field='mobile'
              rules={[
                { required: true, message: '请输入联系方式' },
                { match: /^\+?(\d{1,3})?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})$/, message: '请输入正确的电话号码' },
              ]}
            >
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label={isLegal ? '企业所在地' : '机构所在地'} field='addr'>
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label={isLegal ? '统一社会信用代码' : '组织机构代码'} field='orgaCode'>
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label={isLegal ? '法定代表人' : '机构代表人'} field='deputy'>
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              label={isLegal ? '企业类型' : '机构类型'}
              field='orgaType'
            >
              <Select
                placeholder='请选择'
                allowClear
                options={isLegal ? $$.options.enterpriseType : $$.options.orgaType}
                onChange={(value, options) => {
                  formRef.current.setFieldValue('orgaTypeName', options && options.children)
                }}
              />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label='住所' field='placeAddr'>
              <Input placeholder='请填写' />
            </FormItem>
          </Col>
        </>
      )
    }
  }

  //保存信息
  const handleSave = () => {
    if (formRef.current) {
      formRef.current.validate(undefined, (errors, values) => {
        if (!errors) {
          const fieldValue = formRef.current.getFields()
          if (props.editData) {
            props.handleAddParty({
              ...fieldValue
            })
          } else {
            props.handleAddParty({
              ...fieldValue,
              perType: props.dialogType,
              perClass: perClass,
              perTypeName: $$.options.personType.find(item => item.value === props.dialogType).label,
              perClassName: $$.options.personClass.find(item => item.value === perClass).label
            })
          }
          props.onClose()
        }
      });
    }
  }

  //选择
  const handleSelect = (value) => {
    setVisible(true)
  }

  return (
    <div className="applyDialog">
      <div style={{ height: '590px', overflowY: 'scroll' }}>
        <div className="dialogTitle">当事人类型</div>
        <Row gutter={[16, 16]} style={{ margin: '0 2px 0 0' }}>
          {$$.options.personClass.map((x, t) => {
            return (
              <Col span={8} key={t}>
                <div
                  onClick={() => { setPerClass(x.value) }}
                  className={`casePerfection-cardTab-tab ${x.value === perClass && 'casePerfection-cardTab-tabActive'}`}
                >
                  <img src={x.value === perClass ? personIconType(x.value)[1] : personIconType(x.value)[0]} alt="" />
                  <div className="casePerfection-cardTab-tab-name">{x.label}</div>
                  {x.value === perClass && (
                    <>
                      <div className="casePerfection-cardTab-tab-triangle" />
                      <CheckOutlined className="casePerfection-cardTab-tab-check" />
                    </>
                  )}
                </div>
              </Col>
            );
          })}
          <Col span={24}>
            <Form
              ref={formRef}
              layout='vertical'
              requiredSymbol={false}
              initialValues={{
              }}//默认值
              scrollToFirstError
            >
              <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>{formType(perClass)}</Row>
            </Form>
          </Col>
        </Row>

        {/* 重复来访重点人员 */}
        <div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}>
          <KeyVisits />
        </div>
      </div>
      <div className='dialogFooter'>
        <Button
          type="primary"
          className="dialogPrimary"
          onClick={handleSave}
        >
          保存
        </Button>
        <Button className="dialogBack">
          重置
        </Button>
      </div>
      <Modal
        title={'选择单位'}
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        autoFocus={false}
        focusLock={true}
        footer={null}
      >
        <SelectUnitDialog />
      </Modal>
    </div>
  )
}

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

New file
@@ -0,0 +1,370 @@
import React, { useState, useRef, useEffect } from 'react';
import { Col, Space, Row, Tooltip, Button } from 'antd';
import { register, fold, down, empty, link } from '../../../../assets/images';
import { Form, Input, Tabs, Typography, Empty } from '@arco-design/web-react';
import { question1, } from '@/assets/images';
import ProgressStep from '../../../../components/ProgressStep/VisitStep';
import SelectObjModal from '../../../../components/SelectObjModal/selectPerson';
import WantUserTag from '../../../../components/WantUserTag/Handling';
import { scan } from '@/assets/images/icon'
import DocumentScanner from './FileUpLoad'
import * as $$ from '@/utils/utility';


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

const style = {
  textAlign: 'center',
  marginTop: 20,
};



const Handle = () => {
  const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab
  const [wantUser, setWantUser] = useState({});
  // const [scanFile, setScanFile] = useState(false);

  const tabs = [
    { index: '1', label: '承办部门' },
    { index: '2', label: '配合部门' },
  ];

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



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

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


  const [scannerVisible, setScannerVisible] = useState(false);

  const handleConfirm = (text) => {
    console.log('识别完成:', text);
    setScannerVisible(false);
  };

  const openScanner = () => {
    setScannerVisible(true);
    formRef.current?.resetFields();
    formRef.current?.setFieldsValue({});
  };

  const onCancel = () => {
    setScannerVisible(false);
  };





  return (
    <>
      <div className='container'>
        <div className='container-top'>
          <Col span={24}>
            <Space size='small'>
              <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
            </Space>
          </Col>
          <Row gutter={[16, 16]}>
            <Col span={8} style={{ display: 'flex' }}>
              <div><div className="title-text">承办部门：</div></div>
              <div>天河区棠下街综治中心</div>
            </Col>
            <Col span={8} style={{ display: 'flex' }}>
              <div><div className="title-text">经办人：</div></div>
              <div style={{ display: 'flex' }}>
                <div>王一顺</div>
                <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
              </div>
            </Col>
            <Col span={8} style={{ display: 'flex' }}>
              <div><div className="title-text">配合部门：</div></div>
              <div>-</div>
            </Col>
            <Col span={8} style={{ display: 'flex' }}>
              <div><div className="title-text">受理时间：</div></div>
              <div>2024-7-5 11:45</div>
            </Col>
          </Row>

        </div>

        <div className='container-bottom'>
          <div className='container-bottom-left'>
            <Col span={24} style={{ marginBottom: '8px' }}>
              <Space size='small'>
                <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>办理反馈</h5>
              </Space>
            </Col>
            <Form
              layout='vertical'
              requiredSymbol={false}
              scrollToFirstError={true}
            >
              <Col span={8}>
                <FormItem label={<div style={{ display: 'flex' }}>
                  <span style={{ color: '#86909C' }}>经办人</span>
                  <Tooltip>
                    <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                  </Tooltip>
                </div>
                }
                  field='level' >
                  {wantUser.wantUserId ?
                    <WantUserTag name={wantUser.wantUserName} onClose={() => setWantUser({ wantUserId: null, wantUserName: null })} />
                    :
                    <InputSearch
                      searchButton='选择'
                      placeholder='请选择'
                      style={{ width: 350 }}
                      onClick={() => setIsModalVisible(true)}
                      onSearch={() => setIsModalVisible(true)}
                    />
                  }
                </FormItem>
              </Col>
              <Col span={24}>
                <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
                {records.length > 0 ?
                  <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>
                  :
                  <Empty
                    icon={
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'center',
                          marginBottom: '100px'
                        }}
                      >
                        <img src={empty} alt='' style={{ width: '160px', height: '160px' }} />
                      </div>
                    }
                    description='暂无数据'
                  />
                }
                <div className='Form'>
                  <Col span={24} style={{ marginBottom: '8px' }}>
                    <Space size='small'>
                      <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>添加办理记录</h5>
                    </Space>
                  </Col>
                  <Col span={24}>
                    <FormItem
                      label={<div style={{ display: 'flex' }}>
                        办理意见
                        <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
                        <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={openScanner}>识别材料</div>
                      </div>
                      }
                      field='caseDes'
                      rules={[{ message: '请填写事项概况', required: true }]}
                    >
                      <Input.TextArea
                        maxLength={2000}
                        showWordLimit
                        rows={5}
                        placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
                        wrapperStyle={{ width: '100%' }}
                      />
                    </FormItem>
                  </Col>

                </div>
              </Col>
            </Form>
            <Space style={{ marginTop: '38px', position: 'absolute', bottom: '4px' }}>
              <Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>添加办理记录</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >结案申请</Button>
              <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>联合处置申请</Button>
              <Button type='secondary'>返回上级页面</Button>
            </Space>
          </div>
          <div className='container-bottom-right'>
            <Tabs defaultActiveTab='1' className='tabs-container' >
              <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 caseId='202408291012566613' pageFrom="dispatchRecord" />
                    </div>
                  }
                </Typography.Paragraph>
              </TabPane>
              <TabPane
                key='2'
                title={
                  <span style={{ fontSize: '15px' }}>
                    督办信息
                  </span>
                }
              >
                <Typography.Paragraph style={style}>Content of Tab Panel 2</Typography.Paragraph>
              </TabPane>
            </Tabs>

          </div>
        </div>

        {/* 选择经办人*/}
        <SelectObjModal
          visible={isModalVisible}
          checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined}
          onOk={(value) => {
            setIsModalVisible(false);
            setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name });
          }}
          onClose={() => setIsModalVisible(false)}
        />

        <DocumentScanner
          visible={scannerVisible}
          onCancel={onCancel}
          onConfirm={handleConfirm}
          formRef={formRef}
        />
      </div >
    </>
  )

}

export default Handle;

 gz-customerSystem/src/views/register/eventFlow/component/levelDetail.jsx

New file
@@ -0,0 +1,72 @@
import React from 'react';
import MyDrawer from '@/components/MyDrawer';

const EventLevelDrawer = ({ visible, onClose }) => {
    return (
        <MyDrawer
            visible={visible}
            onClose={onClose}
            title="事件等级指南"
            width={1000}
            style={{ position: 'absolute' }}
            bodyStyle={{ marginTop: '-8px' }}
            titleBefore={true}
        >
            <div style={{ marginTop: '-8px' }}>
                <div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px' }}>一类重点事件</div>
                    1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
                    2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
                    3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
                    4、拖欠工资总全额5万元以上，经济合同外涉金额20万元以上；<br />
                    5、扬言到市赴省进京越级上访；
                    6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
                    7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
                </div>
                <div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>二类重点事件</div>
                    1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
                    2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
                    3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
                    4、拖欠工资总全额5万元以上，经济合同外涉金额20万元以上；<br />
                    5、扬言到市赴省进京越级上访；
                    6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
                    7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
                </div>
                <div>
                    <div style={{ color: '#1A6FB8', fontSize: '15px', lineHeight: '23px', marginBottom: '8px', marginTop: '20px' }}>三类普通事件</div>
                    1、5人（含5人）以上到非接待场所聚集、滞留、静坐、游行或准备上访；<br />
                    2、拉横幅、穿着“状衣”、呼喊口号、呼喊标语、堵塞交通非法占据公其场所、扰乱公共秩序、向他人散发传单等上访材料；<br />
                    3、拖欠工资、劳资纠纷涉及人数5人以上；<br />
                    4、拖欠工资总全额5万元以上，经济合同外涉金额20万元以上；<br />
                    5、扬言到市赴省进京越级上访；
                    6、存在轻生、自残等危险行为，打砸公私财物等极端倾向；<br />
                    7、群体性民事纠纷（5人及5人以上的邻里矛盾纠纷、经济债务纠纷、家庭纠纷等可能导致“民转刑”的民事纠纷）；8、存在重大安全隐患、重大不稳定因索的矛盾；9、涉及政治类，非宗教类的非访宣传（在出租屋内从事涉邪教迷信印刷、存放资料的；在公共场所粘贴类似邪教的符号、图案、标志等）10、县（市、区）职能部门、各镇（街道）分管领导根据应急情况认为有必要启动红色预警机制的其他矛盾纠纷。
                </div>

            </div>
        </MyDrawer>
    );
};

const MattersDetail = ({ visible, onClose }) => {
    return (
        <MyDrawer
            visible={visible}
            onClose={onClose}
            title="事项概况指南"
            width={1000}
            style={{ position: 'absolute' }}
            bodyStyle={{ marginTop: '-8px' }}
            titleBefore={true}
        >
            <div style={{ marginTop: '-8px' }}>
                事项简述应该填写完整，完整的事项简述应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过。<br />
                例如：<br />
                2024年8月13日，张某与女性好友王某在某烧烤档就餐期间发生场盾争执，报警人称女方从今年一月份开始，以各种理由让其帮忙付了外卖费，送金链等首饰，但又不确认关系，女方后期还拉黑了报警人，因此报警人认为女方涉嫌诈骗。
            </div>
        </MyDrawer>
    );
}

export { EventLevelDrawer, MattersDetail };

 gz-customerSystem/src/views/register/eventFlow/component/map.jsx

New file
@@ -0,0 +1,197 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-17 14:41:57
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-27 10:17:49
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx
 * @Description: 地图
 */
import React, { useEffect, useRef, useState } from 'react';
import { Map, CustomOverlay } from 'react-bmapgl';
import { Form, Input, Button, Message, Spin } from '@arco-design/web-react';

import { Row, Col } from 'antd';
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 17,
  },
};

const BMapGL = window.BMapGL

// 自定义Marker的icon  
let myIcon = new BMapGL.Icon(require("@/assets/images/icon/frame.png"), new BMapGL.Size(24, 24), {
  // 是否允许缩放图标  
  enableScaling: true
});

export default function MapView(props) {
  const mapRef = useRef()
  const formRef = useRef()
  const [addressList, setAddressList] = useState([])
  const [addressData, setAddressData] = useState({})
  const [selectData, setSelectData] = useState({})
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    //初次进入定位在当前浏览器
    if (mapRef.current) {
      setLoading(true)
      let geolocation = new BMapGL.Geolocation();
      geolocation.getCurrentPosition((r) => {
        if (geolocation.getStatus() === 0) {
          handleAnalysis(r.point);
        } else {
          Message.warning(`Failed with status ${geolocation.getStatus()}`);
        }
        setLoading(false)
      }, '广州市');
    }
  }, [mapRef]);

  //查询
  const handleSubmit = (addItem) => {
    if (formRef.current) {
      formRef.current.validate(undefined, (errors, values) => {
        if (!errors) {
          var myGeo = new BMapGL.Geocoder();
          myGeo.getPoint(values.name, (point) => {
            if (point) {
              handleAnalysis(point, addItem); // 添加地点名称
            } else {
              Message.warning('您输入的地址没有解析到结果！');
            }
          }, '广州市');
        }
      });
    }
  };

  // 解析地址为中文
  const handleAnalysis = (pt, addItem) => {
    if (!addItem) {
      let geoc = new BMapGL.Geocoder();
      geoc.getLocation(pt, (rs) => {
        let addComp = rs.content;
        let addName = `${addComp.address}  ${addComp.poi_desc}`;
        let surroundingPois = rs.surroundingPois;
        mapRef.current?.map.centerAndZoom(pt, 15);//地图指向中心
        mapRef.current?.map.clearOverlays();//清除所有标点
        mapRef.current?.map.addOverlay(new BMapGL.Marker(pt, { icon: myIcon }));//添加标点
        setAddressList(surroundingPois);
        setAddressData({
          pt,
          addName
        })
      });
    } else {
      mapRef.current?.map.centerAndZoom(addItem.point, 15);//地图指向中心
      mapRef.current?.map.clearOverlays();//清除所有标点
      mapRef.current?.map.addOverlay(new BMapGL.Marker(addItem.point, { icon: myIcon }));//添加标点
      setAddressData({
        pt: addItem.point,
        addName: addItem.address + addItem.title
      })
    }

  };

  //点击附近地址
  const clickVicinity = (data) => {
    const address = data.address + data.title
    setSelectData({
      uid: data.uid,
      address
    })
    formRef.current.setFieldValue('name', address)
    handleSubmit(data)
  }

  //使用地址
  const handleUseAddress = (e) => {
    e.stopPropagation()
    props.selectAdd(addressData)
  }

  return (
    <Spin tip='正在获取附近地址...' loading={loading} style={{ width: '100%', height: '100%' }}>
      <Row
        gutter={[16, 0]}
        onKeyDown={(event) => {
          if (event.key === 'Enter') {
            event.preventDefault();
            handleSubmit(false)
          }
        }}
      >
        <Col span={16}>
          <Form
            ref={formRef}
            layout='inline'
            {...formItemLayout}
            style={{ marginBottom: '8px' }}
          >
            <FormItem
              label='查询位置：'
              field='name'
            >
              <Input placeholder='请输入' style={{ width: '522px' }} />
            </FormItem>
            <Button style={{ marginRight: '20px' }}>
              重置
            </Button>
            <Button
              type="primary"
              onClick={() => { handleSubmit(false) }}
            >
              查询
            </Button>
          </Form>
          <Map
            ref={mapRef}
            zoom="15"
            enableScrollWheelZoom
            onClick={(e) => {
              let pt = e.latlng;
              handleAnalysis(pt);
            }}
            center={new BMapGL.Point(113.27142900886543, 23.13533647285972)}
          >
            {addressData.pt && <CustomOverlay
              position={addressData.pt}
              offset={{ width: -91, height: -25 }}
            >
              <div className='mapPopconfirm'>
                <div style={{marginBottom: '10px'}}>{addressData.addName}</div>
                <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
                  <div className='mapPopconfirm-btn' onClick={handleUseAddress}>使用地址</div>
                </div>
              </div>
            </CustomOverlay>}
          </Map>
        </Col>
        <Col span={8}>
          <div style={{ color: '#86909C', marginTop: '43px' }} >附近地址</div>
          <div style={{ height: '343px', overflowY: 'scroll', paddingRight: '10px' }}>
            {addressList?.map(item => (
              <div
                key={item.uid}
                className='mapVicinity'
                onClick={() => { clickVicinity(item) }}
                style={{ color: selectData.uid === item.uid ? '#1A6FB8' : '' }}
              >
                <div style={{ marginRight: '5px', flex: 1 }}>{item.address}&nbsp;&nbsp;&nbsp;&nbsp;{item.title}</div>
                {selectData.uid === item.uid ? <div className='mapVicinityIcon'></div> : <div style={{ width: '14px' }}></div>}
              </div>
            ))}
          </div>
        </Col>
      </Row>
    </Spin>
  )
}

 gz-customerSystem/src/views/register/eventFlow/component/secondWanderStep/EventFlow.jsx

New file
@@ -0,0 +1,77 @@
import React from 'react';
import { Button } from '@arco-design/web-react';
import { Space } from 'antd';
import ProgressStep from '@/components/ProgressStep/VisitStep';

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: '李晓明'
  },
];

export default function EventFlow(props) {
  const tabs = [
    { index: '1', label: '承办部门' },
    { index: '2', label: '配合部门' },
  ];
  return (
    <div className='dataSync'>
      <div className='dataSync-hasTabPage' >
        <ProgressStep progressData={fakeData} />
      </div>
      <div className="dataSync-excel">
        <Space size="large" style={{ margin: '4px 14px' }}>
          <Button type="primary"  >受理</Button>
          <Button type='outline' status='danger'>回退</Button>
          <Button type='secondary' >返回上级页面</Button>
        </Space>
      </div>
    </div>
  )
}

 gz-customerSystem/src/views/register/eventFlow/component/selectUnitDialog.jsx

New file
@@ -0,0 +1,142 @@
import React, { useState, useRef } from 'react'
import TableSearch from '@/components/TableSearch';
import TableView from '@/components/TableView';
import { Row, Col } from 'antd';
import { Form, Input, Button, Divider } from '@arco-design/web-react';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 17,
  },
};

export default function SelectUnitDialog(props) {
  const formRef = useRef();
  const [search, setSearch] = useState({ page: 1, size: 10, status: '1' });// 搜索
  // 数据
  const [data, setData] = useState({});

  const fakeData1 = [
    {
      id: 1,
      caseNo: 'A20230101',
      judicNo: 'J20230101',
      perClassName: '自然人',
      inputUserName: '张三',
      mediateUserName: '李四',
      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',
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    {
      title: '材料类型',
      dataIndex: 'judicNo',
      key: 'judicNo',
    },
    {
      title: '材料数量',
      dataIndex: 'perClassName',
      key: 'perClassName',
    },
    {
      title: '材料名称',
      dataIndex: 'perClassName',
      key: 'perClassName',
    },
    {
      title: '上传时间',
      dataIndex: 'perClassName',
      key: 'perClassName',
    },
    {
      title: '操作',
      dataIndex: 'perClassName',
      key: 'perClassName',
      width: 120,
      render: (text) => (
        <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
          <div>选择</div>
        </div>
      )
    },
    // 更多列配置...
  ];

  // 搜索 or 重置
  function handleSearch(type, data) {
    if (type === 'changePage') {
      let obj = type === 'changeTabs' ? { page: 1, status: data } : { page: data[0], size: data[1] };
      // getSignForListData({ ...search, ...obj });
    }
  }

  return (
    <div>
      <Form
        ref={formRef}
        requiredSymbol={false}
        layout='inline'
        {...formItemLayout}
      >
        <FormItem
          label='单位名称：'
          field='name'
        >
          <Input placeholder='请填写' style={{width: '500px'}}/>
        </FormItem>
        <Button style={{marginRight: '20px'}}>
          重置
        </Button>
        <Button
          type="primary"
          // onClick={handleSave}
        >
          查询
        </Button>
      </Form>
      <Divider />
      <div className='unitDialogResult'>
        查询结果
      </div>
      <TableView
        columns={fakeColumns}
        dataSource={fakeData1}
        size="small"
        rowKey="id"
        bordered={true}
        style={{ marginBottom: '60px' }}
        pagination={{
          current: search.page,
          pageSize: search.size,
          total: data.total,
          onChange: (page, pageSize) => handleSearch('changePage', [page, pageSize]),
        }}
      />
    </div>
  )
}

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

New file
@@ -0,0 +1,791 @@
import React, { useState, useEffect, useRef } from "react";
import { Row, Col, Space, Tooltip, Button } from 'antd';
import { Form, Input, Radio, Select, DatePicker, Cascader, Modal, Upload, InputNumber } from '@arco-design/web-react';
import PersonCard from '@/components/personCard';
import * as $$ from '@/utils/utility';
import {
  question1,
  applyMaterials,
  applyMaterials_active,
  evidenceMaterials,
  evidenceMaterials_active,
} from '@/assets/images';
import { CheckOutlined, } from '@ant-design/icons';
import TableView from '@/components/TableView';
import '../../index.less';
import ApplyDialog from "./applyDialog";
import AgentDialog from "./agentDialog";
import NewFileCheck from '../../../filesCheck/newFileCheck';
import { IconLink } from '@arco-design/web-react/icon';
import MapView from './map'
import { scan } from '@/assets/images/icon'
import { EventLevelDrawer, MattersDetail } from './levelDetail'

const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息
const FormItem = Form.Item;
const InputSearch = Input.Search;

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


const VisitorRegister = (props) => {
  const [dialogType, setDialogType] = useState();//添加当事人的类型
  const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制
  const [fakeData, setFakeData] = useState([]);//当事人信息数据
  const [scanFile, setScanFile] = useState(false);
  const [scanImage, setScanImage] = useState(false);
  const [scaned, setScaned] = useState(false);
  const [upload, setUpLoad] = useState(false);
  const [sourceType, setSourceType] = useState('09_01010-1');
  const [filesCheck, setFilesCheck] = useState(false);
  const [fileView, setFileView] = useState();
  const [fileTip, setFileTip] = useState('0');
  const [mapView, setMapView] = useState(false);
  const [visible, setVisible] = useState(false);
  const [apply, setApply] = useState(false);
  const [editData, setEditData] = useState(null);
  const [agentVisible, setAgentVisible] = useState(false);
  const peopleMap = {
    '15_020008-1': '申请方',
    '15_020008-2': '被申请方',
    '24_00006-1': '申请方代理人',
    '24_00006-2': '被申请方代理人'
  }

  useEffect(() => {
    if (props.formRef.current) {
      //引入当事人数据
      props.formRef.current.setFieldValue('fakeData', fakeData)
    }
  }, [fakeData])

  const personIconType = (v) => {
    switch (v) {
      case '09_01010-1':
        return [applyMaterials, applyMaterials_active,
        ];
      case '09_01010-2':
        return [evidenceMaterials, evidenceMaterials_active];
    }
  }

  const formType = (type) => {
    if (type === '09_01010-1') {
      //申请材料
      return (
        <>
          <Col span={24}>
            <FormItem
              field='file'

            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                height={158}
                onDrop={(e) => {
                }}
                showUploadList={{
                  // Please dont remove this comment
                  fileIcon: <IconLink style={{ color: '#1D2129' }} />,
                }}
                onChange={(v) => {
                  setFileTip((prevLength) => {
                    if (v.length > 0) {
                      console.log(v, 'vvvvvvv');
                      return v.length;
                    }
                    return v.length;
                  });
                }}
                tip='支持png、 jpg、excel、word、pdf等格式的文件上传，每次上传大小不超过10M'
              />

            </FormItem>
            {fileTip > 0 && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 申请材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>}
          </Col>
        </>
      )
    }
    if (type === '09_01010-2') {
      //证据材料
      return (
        <>
          <Col span={24}>
            <FormItem
              field='file'

            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                height={158}
                onDrop={(e) => {
                }}
                showUploadList={{
                  // Please dont remove this comment
                  fileIcon: <IconLink style={{ color: '#1D2129' }} />,
                }}
                onChange={(v) => {
                  setFileTip((prevLength) => {
                    if (v.length > 0) {
                      console.log(v, 'vvvvvvv');
                      return v.length;
                    }
                    return v.length;
                  });
                }}
                tip='支持png、 jpg、excel、word、pdf等格式的文件上传，每次上传大小不超过10M'
              />

            </FormItem>
            {fileTip > 0 && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 证据材料累计上传：<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>}
          </Col>
        </>
      )
    }
  }

  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>下载</div>
          <div onClick={() => setUpLoad(true)}>上传</div>
        </div>
      )
    },
    // 更多列配置...
  ];

  const options1 = [
    {
      value: 'jingjijiufen',
      label: '经济纠纷',
      children: [
        {
          value: 'laodongjiufen',
          label: '劳动纠纷',
        },
        {
          value: 'laodongzhengyijiufen',
          label: '劳动争议纠纷',
        },
      ],
    },
    {
      value: 'linlijiufen',
      label: '邻里纠纷',
      children: [
        {
          value: 'linlijiufen',
          label: '邻里纠纷',
        },
      ],
    },
  ];

  //获取id
  const getAppId = async (value) => {
    const res = await getId()
    if (res.type) {
      setFakeData([...fakeData, {
        ...value,
        id: res.data
      }])
    }
  }

  //获取当前时间
  const getFormattedDateTime = () => {
    let now = new Date();
    let year = now.getFullYear();
    let month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的，所以要+1  
    let day = now.getDate().toString().padStart(2, '0');
    let hours = now.getHours().toString().padStart(2, '0');
    let minutes = now.getMinutes().toString().padStart(2, '0');

    return `${year}-${month}-${day} ${hours}:${minutes}`;
  }

  //添加当事人
  const handleAdd = (type) => {
    if (type === '24_00006-1' || type === '24_00006-2') {
      setAgentVisible(true)
    } else {
      setAddVisabled(true)
    }
    setDialogType(type)
  }

  //添加当事人
  const handleAddParty = (value) => {
    if (value.id) {
      //编辑
      const newList = fakeData.map(item => {
        if (item.id === value.id) {
          return value
        } else {
          return item
        }
      })
      setFakeData(newList)
      setEditData(null)
    } else {
      getAppId(value)
    }
  }

  //删除当事人
  const handleDeleteParty = (event, value) => {
    event.stopPropagation();
    const filterData = fakeData.filter(item => item.id !== value.id)
    setFakeData(filterData)
  }

  //编辑
  const handleEdit = (value) => {
    if (value.perType === '15_020008-1' || value.perType === '15_020008-2') {
      //当事人
      setAddVisabled(true)
    } else {
      //代理人
      setAgentVisible(true)
    }
    setDialogType(value.perType)
    setEditData(value)
  }


  return (
    <div className='dataSync-page' style={{ ...props.style }}>
      <Col span={24} style={{ display: 'flex', alignItems: 'center' }}>
        <Space size='small'>
          <div className='MediationInfo-subTitle' style={{ marginTop: '-9px', }}></div><h4>当事人信息</h4>
        </Space>
      </Col>
      <div style={{ margin: '16px 0' }}>
        <PersonCard
          isCheck={true}
          data={fakeData}
          handleAdd={handleAdd}
          handleDeleteParty={handleDeleteParty}
          handleEdit={handleEdit}
        />
      </div>
      <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>
      <Form
        ref={props.formRef}
        layout='vertical'
        requiredSymbol={false}
        scrollToFirstError={true}
        initialValues={{
          caseLevel: 3,
          visitTime: getFormattedDateTime(),
          majorStatus: 0,
        }}//默认值
      >
        <Row gutter={[32, 0]}>
          <Col span={8}>
            <FormItem
              label={<div style={{ display: 'flex' }}>
                事项等级
                <Tooltip onClick={() => setApply(true)}>
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                </Tooltip>
              </div>
              }
              field='caseLevel'
            >
              <Select placeholder='请选择事项等级' allowClear options={$$.options.caseLevelList}>
              </Select>
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label='来访时间' field='visitTime'>
              <DatePicker
                style={{ width: '100%' }}
                format='YYYY-MM-DD HH:mm'
                showTime={true}
              />
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label='来访人数（人）' field='visitPeopleNum'>
              <InputNumber placeholder='请填写' min={1} />
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>纠纷类型<div className="must">必填</div></div>)}
              rules={[{ message: '请选择纠纷类型', required: true }]}
              field='caseType'
            >
              <Cascader
                placeholder='请选择'
                options={options1}
                onChange={(value, option) => {
                  console.log(value, option);
                }}
                allowClear
              />
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>纠纷发生时间<div className="must">必填</div></div>)}
              rules={[{ message: '请选择纠纷发生时间', required: true }]}
              field='occurTime'
            >
              <DatePicker
                style={{ width: '100%' }}
                placeholder='请选择'
                format='YYYY-MM-DD HH:mm'
                showTime={true}
              />
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem
              label={(<div style={{ display: 'flex' }}>纠纷发生地点<div className="must">必填</div></div>)}
              rules={[{ message: '请选择纠纷发生地点', required: true }]}
              field='addr'
            >
              <InputSearch
                placeholder='选择纠纷发生地的详细地址'
                searchButton='选择'
                readOnly={true} // 设置为只读，防止直接编辑
                onSearch={() => setMapView(true)}
              />
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label='问题属地' field='quesAddress'>
              <Cascader
                placeholder='请选择'
                options={$$.locationOption()}
                showSearch
                onChange={(value, option) => {
                  if (option) {
                    props.formRef.current.setFieldsValue({
                      queProv: option[0].value,
                      queProvName: option[0].label,
                      queCity: option[1].value,
                      queCityName: option[1].label,
                      queArea: option[2].value,
                      queAreaName: option[2].label,
                      queRoad: option[3] && option[3].value || '',
                      queRoadName: option[3] && option[3].label || '',
                    })
                  } else {
                    //清除数据
                    props.formRef.current.setFieldsValue({
                      queProv: undefined,
                      queProvName: undefined,
                      queCity: undefined,
                      queCityName: undefined,
                      queArea: undefined,
                      queAreaName: undefined,
                      queRoad: undefined,
                      queRoadName: undefined,
                    })
                  }
                }}
                allowClear
              />
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label='涉及人数（人）' field='peopleNum'>
              <InputNumber placeholder='请填写' />
            </FormItem>
          </Col>

          <Col span={8}>
            <FormItem label='涉及金额（元）' field='amount'>
              <InputNumber placeholder='请填写' />
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem
              label={<div style={{ display: 'flex' }}>
                事项概况
                <Tooltip onClick={() => setVisible(true)}>
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} />
                </Tooltip>
                <div className="must" style={{ marginLeft: '4px' }}>必填</div>
                <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div>
              </div>
              }
              field='caseDes'
              rules={[{ message: '请填写事项概况', required: true }]}
            >
              <Input.TextArea
                maxLength={2000}
                showWordLimit
                rows={5}
                placeholder='请完整描述事项概况，应具备5要素：发生时间+发生地点+人物情况+事项起因+事项经过'
                wrapperStyle={{ width: '100%' }}
              />
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem
              label={<div style={{ display: 'flex' }}>
                申请请求
                {/* <Tooltip onClick={() => setApply(true)}>
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', margin:'4px 4px 0px 4px' }} />
                </Tooltip> */}
                <div className="must">必填</div>
                <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} />
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div>
              </div>
              }
              field='caseClaim'
              rules={[{ message: '请填写申请请求', required: true }]}

            >
              <Input.TextArea
                maxLength={2000}
                showWordLimit
                rows={5}
                placeholder='希望相关部门如何处理，建议分条描述，如请求1，请求2...'
                wrapperStyle={{ width: '100%' }}
              />
            </FormItem>
          </Col>
          <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#F2F3F5', borderRadius: '2px', marginTop: '4px', display: 'flex', alignItems: 'center' }}>
            <FormItem
              label='是否重大矛盾纠纷'
              style={{ width: '300px', marginBottom: 0 }}
              field='majorStatus'
              layout='horizontal'
              labelCol={{ span: 11 }}
              wrapperCol={{ span: 13 }}
            >
              <RadioGroup options={[{ value: 0, label: '否' }, { value: 1, label: '是' }]} />
            </FormItem>
          </div>
        </Row>

      </Form>
      <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={scanFile} onCancel={() => setScanFile(false)} title='识别上传材料' centered footer={null}>
        <Form
          ref={props.formRef}
          layout='vertical'
          requiredSymbol={false}
          initialValues={{
          }}//默认值
          style={{ marginTop: '4px' }}
        >
          <FormItem
            label='选择图片'
            field='file'
          >
            <Upload
              drag
              // multiple
              limit={1}
              accept='image/*'
              // action='/'
              onDrop={(e) => {
              }}
              tip='支持png、 jpg、pdf等格式文件上传，每次上传大小不超过10M'
              showUploadList={{
                // Please dont remove this comment
                fileIcon: <IconLink style={{ color: '#1D2129' }} />,
              }}
              onChange={(info, currentFile) => {
                console.log(currentFile, info, 'info', 'currentFile')
                if (info.length > 0) {
                  setScanImage(true);
                }
                setFileView({
                  ...currentFile,
                  url: URL.createObjectURL(currentFile.originFile),

                });

              }}
              onSuccess={() => setScanImage(true)}
            />
            {/* <img src={file?.url} alt=""/> */}
          </FormItem>

        </Form>

      </Modal>
      <Modal style={{ width: '944px' }} visible={scanImage} onCancel={() => setScanImage(false)} footer={null} title='选择识别范围' centered>
        <img
          src={fileView?.url}
          alt=""
          style={{
            display: 'block',       // 确保图片在容器中居中显示
            margin: 'auto',         // 居中显示
            maxWidth: '100%',       // 图片最大宽度为容器宽度的100%
            maxHeight: '100%',      // 图片最大高度为容器高度的100%
            objectFit: 'contain',   // 图片缩放以适应容器，保持原图比例
          }}
        />
        <div><Button type="primary" onClick={() => setScaned(true)} style={{ marginTop: '20px' }}>开始识别</Button></div>
      </Modal>
      <Modal style={{ width: '1200px' }} visible={scaned} onCancel={() => setScaned(false)} footer={null} title='识别上传材料' centered>
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
        <Input.TextArea
          showWordLimit
          rows={5}
          placeholder=''
          wrapperStyle={{ width: '100%' }}
          defaultValue='识别内容'
          onChange={(v) => console.log(v, 'vvvvvv')}
        />
        <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => { setScanFile(false); setScanImage(false); setScaned(false) }}>使用文字</Button></div>
      </Modal>
      <Modal style={{ width: '512px' }} visible={upload} onCancel={() => setUpLoad(false)} footer={null} title='上传材料' centered>
        <div style={{ paddingTop: '8px' }}>
          <Row gutter={[30, 24]}>
            {$$.options.fileOwnerType.map((x, t) => {
              return (
                <Col span={12} key={t}>
                  <div
                    onClick={() => { setSourceType(x.value) }}
                    className={`casePerfection-cardTab-tab ${x.value === sourceType && 'casePerfection-cardTab-tabActive'}`}
                  >
                    <img src={x.value === sourceType ? personIconType(x.value)?.[1] : personIconType(x.value)?.[0]} alt="" style={{ width: '40px', height: '40px' }} />
                    <div className="casePerfection-cardTab-tab-name">{x.label}</div>
                    {x.value === sourceType && (
                      <>
                        <div className="casePerfection-cardTab-tab-triangle" />
                        <CheckOutlined className="casePerfection-cardTab-tab-check" />
                      </>
                    )}
                  </div>
                </Col>
              );
            })}
            <Col span={24}>
              <Form
                ref={props.formRef}
                layout='vertical'
                requiredSymbol={false}
                initialValues={{
                }}//默认值
                style={{ position: 'relative' }}
              >

                <Row gutter={[32, 0]}>{formType(sourceType)}</Row>
              </Form>
            </Col>
            <Button type="primary" style={{ marginTop: '-20px', marginLeft: '16px' }}>上传完成</Button>
          </Row>
        </div>

      </Modal>
      <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>
      <Modal
        title={(editData ? '修改' : '添加') + peopleMap[dialogType]}
        visible={addVisabled}
        onOk={() => setAddVisabled(false)}
        onCancel={() => {
          setAddVisabled(false)
          setEditData(null)
        }}
        autoFocus={false}
        focusLock={true}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        <ApplyDialog
          dialogType={dialogType}
          onClose={() => setAddVisabled(false)}
          handleAddParty={handleAddParty}
          editData={editData}
        />
      </Modal>
      <Modal
        title={(editData ? '修改' : '添加') + peopleMap[dialogType]}
        visible={agentVisible}
        onOk={() => setAgentVisible(false)}
        onCancel={() => {
          setAgentVisible(false)
          setEditData(null)
        }}
        autoFocus={false}
        focusLock={true}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        <AgentDialog
          handleAddParty={handleAddParty}
          onClose={() => setAgentVisible(false)}
          fakeData={fakeData}
          dialogType={dialogType}
          editData={editData}
        />
      </Modal>
      <Modal
        style={{ width: '1200px' }}
        visible={mapView}
        onCancel={() => setMapView(false)}
        footer={null}
        title='选择纠纷发生地'
        centered
        unmountOnExit={true}
        maskClosable={false}
      >
        <MapView
          selectAdd={(data) => {
            props.formRef.current.setFieldsValue({
              addr: data.addName,
              lng: data.pt.lng,
              lat: data.pt.lat,
            })
            setMapView(false)
          }}
        />
      </Modal>
      <MattersDetail
        visible={visible}
        onClose={() => setVisible(false)}
      />
      <EventLevelDrawer
        visible={apply}
        onClose={() => setApply(false)}
      />
    </div>
  )
}

export default VisitorRegister;





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

New file
@@ -0,0 +1,234 @@
/*
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-09 09:59:43
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-28 14:38:20
 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx
 * @Description: 来访登记
 */

import React, { useState, useRef, Fragment } from "react";
import NewPage from '@/components/NewPage';
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
import '../index.less';
import { Space } from 'antd';
import { Button, Steps, Tabs, Message } from '@arco-design/web-react';
import VisitorRegister from './component/visitorRegister';
import Preview from './preview';
import MattersInfo from './component/MattersInfo';
import { question, register, Matter, transfer } from '@/assets/images'

const Step = Steps.Step;
const TabPane = Tabs.TabPane;

function saveDispute(data) {
    return $$.ax.request({ url: `casedraftInfo/caseDraftRegister`, type: 'post', service: 'mediate', data });
}

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

function submitDispute(data) {
    return $$.ax.request({ url: `caseInfo/caseRegister`, type: 'post', service: 'mediate', data });
}


const Organization = () => {
    const formRef = useRef();

    const [isReview, setIsReview] = useState(false);//预览页面控制
    const [current, setCurrent] = useState(2);
    const [tabsActive, setTabsActive] = useState('1');
    const [tabsList, setTabList] = useState([
        {
            img: Matter,
            label: '事项详情',
            key: '1'
        },
        {
            img: transfer,
            label: '流转办理',
            key: '2',
            isNeedStep: true,//加上这个就有进度条
        },
    ])
    const breadcrumbDataMap = {
        1: { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' },
        2: { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' },
        3: { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
    }

    //提交信息，需要校验规则
    const handleSubmit = async () => {
        if (formRef.current) {
            formRef.current.validate(undefined, (errors, values) => {
                if (!errors) {
                    const data = formRef.current.getFields()
                    handleData(data).then(res => {
                        reauestSubmit({
                            ...res,
                            isSelfAccept: 0,
                            isDraft: 0,
                            operateType: 0,
                        })
                    })
                }
            });
        }
    }

    //保存草稿信息,不需要校验规则
    const handleSave = () => {
        if (formRef.current) {
            const data = formRef.current.getFields()
            handleData(data).then(res => {
                requestSave(res)
            })
        }
    }

    //数据处理
    const handleData = async (data) => {
        const { fakeData, ...newObj } = data
        if (data.id) {
            return {
                ...newObj,
                personList: fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "15_020008-2"),
                agentList: fakeData?.filter(item => item.perType === "24_00006-1" || item.perType === "24_00006-2").map(item => {
                    //personNameList用于查看详情显示代理人名字，不需要上传，去除
                    const { personNameList, ...rest } = item
                    return {
                        ...rest,
                        personId: item.personId.join(',')
                    }
                }),
            }
        } else {
            const res = await getId()
            if (res.type) {
                return {
                    ...newObj,
                    personList: fakeData?.filter(item => item.perType === "15_020008-1" || item.perType === "15_020008-2"),
                    agentList: fakeData?.filter(item => item.perType === "24_00006-1" || item.perType === "24_00006-2").map(item => {
                        //personNameList用于查看详情显示代理人名字，不需要上传，去除
                        const { personNameList, ...rest } = item
                        return {
                            ...rest,
                            personId: item.personId.join(',')
                        }
                    }),
                    id: res.data
                }
            }
        }
    }

    //预览信息
    const handleReview = () => {
        setIsReview(!isReview)
    }

    function selfAcceptance() {
        $$.modalInfo({
            title: '自行受理确认',
            content: '确定自行受理吗？',
            okText: '确定受理',
            cancelText: '我再想想',
            onOk: async () => {
                setCurrent(3)
            },
        });
    }

    //保存请求
    const requestSave = async (data) => {
        const response = await saveDispute(data)
        if (response.type) {
            Message.success('保存草稿成功！')
        }
    }

    //提交请求
    const reauestSubmit = async (data) => {
        const response = await submitDispute(data)
        if (response.type) {
            Message.success('提交成功！')
            setCurrent(2)
        }
    }

    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    breadcrumbDataMap[current]
                }
            >
                {
                    current === 1 &&
                    <Fragment>
                        <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>
                        </div>
                        <Preview style={{ display: isReview ? '' : 'none' }} />
                        <VisitorRegister formRef={formRef} style={{ display: isReview ? 'none' : '' }} />
                        <div className="dataSync-excel">
                            <Space size="large" style={{ margin: '4px 14px' }}>
                                <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={handleSave} >保存</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleReview}>预览</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleSubmit}>提交</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => selfAcceptance()}>自行受理</Button>
                                <Button type='secondary' onClick={handleReview}>返回上级页面</Button>
                            </Space>
                        </div>
                    </Fragment>
                }
                {
                    (current === 2 || current === 3) &&
                    <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>
                                    </div>
                                }
                                <MattersInfo active={tabsActive} current={current} />
                            </TabPane>
                        })}
                    </Tabs>
                }
            </NewPage>
        </div>
    )
}

export default Organization;

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

New file
@@ -0,0 +1,306 @@
import React, { useState, useEffect } from 'react';
import { Row, Col, Space, Button, Switch } from 'antd';
import PersonCard from '@/components/personCard';
import TableView from '@/components/TableView';
import * as $$ from '@/utils/utility';
import { Typography, Steps } from '@arco-design/web-react';
import { question, register, Matter, transfer } from '@/assets/images'

function getCaseInfoApi(id) {
  return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
}


export default function MatterDetali() {
  const [fakeData, setFakeData] = useState([{
    "trueName": "王大锤",
    "mobile": "13380313412",
    "certiType": "09_00015-1",
    "certiTypeName": "身份证",
    "certiNo": "440981199902025123",
    "perType": "15_020008-1",
    "perClass": "09_01001-1",
    "perTypeName": "申请方当事人",
    "perClassName": "自然人",
    "id": "24083010053310002"
  }, {
    "trueName": "刘俊峰",
    "mobile": "13380313412",
    "certiType": "09_00015-1",
    "certiTypeName": "身份证",
    "certiNo": "440981199902023234",
    "perType": "15_020008-2",
    "perClass": "09_01001-1",
    "perTypeName": "被申请方当事人",
    "perClassName": "自然人",
    "id": "24083010054710003"
  }]);//当事人信息数据
  const [upload, setUpLoad] = useState(false);
  const [filesCheck, setFilesCheck] = useState(false);
  const [infoData, setInfoData] = useState({});

  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>下载</div>
          <div onClick={() => setUpLoad(true)}>上传</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 表示系列案
      // 更多字段...
    },

    // 更多数据...
  ];


  //获取id
  const getCaseInfo = async () => {
    const res = await getCaseInfoApi('24083010062110001')
    if (res.type) {
      let data = res.data
      setInfoData([...fakeData1, {
        ...data,
        // status:
        // data.status === '1' ? '待签收' :
        // data.status === '2' ? '待受理' :
        // data.status === '3' ? '办理中' :
        // data.status === '4' ? '结案审核' :
        // data.status === '5' ? '待评价' :
        // data.status === '6' ? '已归档' : '未知状态'
      }])

      setInfoData(res.data)
    }
  }

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

  return (
    <div style={{ position: 'relative' }}>
      <Typography.Paragraph>
        <div className='dataSync-page'>

          <Col span={24} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Space size='small'>
              <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
            </Space>
            <div>
              <Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked />
            </div>
          </Col>
          <div style={{ margin: '16px 0' }}>
            <PersonCard
              isCheck={false}
              data={fakeData}
            />
          </div>
          <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.caseId || '-'}</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.caseTypeFirstName}/{infoData.caseTypeName}</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>广州市天河区中山七路康王柏德来商业城</div>
            </Col>
            <Col span={8}>
              <div ><div className="title-text">问题属地</div></div>
              {/* <div>{queProvName}/{queCityName}/{queAreaName}/{queRoadName}</div> */}
            </Col>
            <Col span={8}>
              <div ><div className="title-text">涉及人数（人）</div></div>
              <div>2</div>
            </Col>
            <Col span={8}>
              <div ><div className="title-text">涉及金额（元）</div></div>
              <div>{$$.thousands(20000)}</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>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
            </Col>
            <Col span={24}>
              <div className="title"><div className="title-text">事项申请</div></div>
              <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
            </Col>
            <Col span={16}>
              <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
              <div>否</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><h5>事件材料</h5>
            </Space>
          </Col>

          <TableView
            columns={fakeColumns}
            dataSource={fakeData1}
            size="small"
            rowKey="id"
            bordered={true}
            style={{ marginBottom: '20px' }}
          />
          <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 className="title"><div className="title-text">登记机构</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
              <div>天河区棠下街道综治中心</div>
            </Col>
            <Col span={8}>
              <div><div className="title-text">登记人</div></div>
              <div style={{ display: 'flex' }}>
                <div>李晓明</div>
                <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
              </div>
            </Col>
            <Col span={8}>
              <div ><div className="title-text">登记时间</div></div>
              <div>2024-7-8 10:00</div>
            </Col>
          </Row>
          <Button type='primary' style={{ marginTop: '20px' }}>修改</Button>
        </div>

      </Typography.Paragraph>
    </div>
  )
}

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

@@ -18,6 +18,7 @@
import { IconCalendar, IconClockCircle, IconUser } from '@arco-design/web-react/icon';
import Handle from './handle';
import EventFlow from './secondWanderStep/EventFlow';
import MatterDetali from '../../matterDetail';

const style = {
  // textAlign: 'center',
@@ -32,297 +33,17 @@


const MattersInfo = (props) => {
  const [fakeData, setFakeData] = useState([{
    "trueName": "王大锤",
    "mobile": "13380313412",
    "certiType": "09_00015-1",
    "certiTypeName": "身份证",
    "certiNo": "440981199902025123",
    "perType": "15_020008-1",
    "perClass": "09_01001-1",
    "perTypeName": "申请方当事人",
    "perClassName": "自然人",
    "id": "24083010053310002"
  }, {
    "trueName": "刘俊峰",
    "mobile": "13380313412",
    "certiType": "09_00015-1",
    "certiTypeName": "身份证",
    "certiNo": "440981199902023234",
    "perType": "15_020008-2",
    "perClass": "09_01001-1",
    "perTypeName": "被申请方当事人",
    "perClassName": "自然人",
    "id": "24083010054710003"
  }]);//当事人信息数据
  const [upload, setUpLoad] = useState(false);
  const [filesCheck, setFilesCheck] = useState(false);
  const [infoData, setInfoData] = useState({});
  


  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>下载</div>
          <div onClick={() => setUpLoad(true)}>上传</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 表示系列案
      // 更多字段...
    },

    // 更多数据...
  ];

  //获取id
  const getCaseInfo = async () => {
    const res = await getCaseInfoApi('24083010062110001')
    if (res.type) {
      let data = res.data
      setInfoData([...fakeData1, {
        ...data,
        // status:
        // data.status === '1' ? '待签收' :
        // data.status === '2' ? '待受理' :
        // data.status === '3' ? '办理中' :
        // data.status === '4' ? '结案审核' :
        // data.status === '5' ? '待评价' :
        // data.status === '6' ? '已归档' : '未知状态'
      }])

      setInfoData(res.data)
    }
  }

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


  return (
    <div style={{ position: 'relative' }}>
      {props.active === '1' &&
        <Typography.Paragraph style={style}>
          <div className='dataSync-page'>

            <Col span={24} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <Space size='small'>
                <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5>
              </Space>
              <div>
                <Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked />
              </div>
            </Col>
            <div style={{ margin: '16px 0' }}>
              <PersonCard
                isCheck={false}
                data={fakeData}
              />
            </div>
            <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.caseId || '-'}</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.caseTypeFirstName}/{infoData.caseTypeName}</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>广州市天河区中山七路康王柏德来商业城</div>
              </Col>
              <Col span={8}>
                <div ><div className="title-text">问题属地</div></div>
                {/* <div>{queProvName}/{queCityName}/{queAreaName}/{queRoadName}</div> */}
              </Col>
              <Col span={8}>
                <div ><div className="title-text">涉及人数（人）</div></div>
                <div>2</div>
              </Col>
              <Col span={8}>
                <div ><div className="title-text">涉及金额（元）</div></div>
                <div>{$$.thousands(20000)}</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>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
              </Col>
              <Col span={24}>
                <div className="title"><div className="title-text">事项申请</div></div>
                <div>张先生与李先生是多年的朋友关系。2023年4月，李先生因生意周转需要向张先生借款人民币20万元，并口头承诺于一年内还清。出于信任，张先生未要求签订书面借条或借款合同。然而，到了2024年4月，李先生并未如约归还借款。张先生多次通过电话、微信等方式催促还款，但李先生先是拖延，后干脆以各种理由拒绝偿还，甚至声称该笔款项属于赠予而非借款，这使得张先生感到十分无奈。 </div>
              </Col>
              <Col span={16}>
                <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div>
                <div>否</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><h5>事件材料</h5>
              </Space>
            </Col>

            <TableView
              columns={fakeColumns}
              dataSource={fakeData1}
              size="small"
              rowKey="id"
              bordered={true}
              style={{ marginBottom: '20px' }}
            />
            <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 className="title"><div className="title-text">登记机构</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div>
                <div>天河区棠下街道综治中心</div>
              </Col>
              <Col span={8}>
                <div><div className="title-text">登记人</div></div>
                <div style={{ display: 'flex' }}>
                  <div>李晓明</div>
                  <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} />
                </div>
              </Col>
              <Col span={8}>
                <div ><div className="title-text">登记时间</div></div>
                <div>2024-7-8 10:00</div>
              </Col>
            </Row>
            <Button type='primary' style={{ marginTop: '20px' }}>修改</Button>
          </div>

        </Typography.Paragraph>
        <MatterDetali />
      }
      {
        (props.active === '2' && props.current === 3) && <Typography.Paragraph style={style}>