Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh

liyj

2024-08-31 ddb82fadc050833c0e5e7603d5993e000776fbcf

Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh

 gz-customerSystem/src/api/appUrl.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:25:57
 * @LastEditTime: 2024-08-29 09:50:55
 * @LastEditTime: 2024-08-31 10:29:49
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: api地址
@@ -10,11 +10,11 @@
export const debug = {
    // web服务
    // baseUrl: 'http://gz.hugeinfo.com.cn',
    baseUrl: 'http://tj4jd4.natappfree.cc',
    baseUrl: 'http://b8bmfu.natappfree.cc',
    // baseUrl: 'http://mdqgnh.natappfree.cc',

    // 附件服务
    fileUrl: 'http://tj4jd4.natappfree.cc',
    fileUrl: 'http://b8bmfu.natappfree.cc',
    // fileUrl: 'http://gz.hugeinfo.com.cn',



 gz-customerSystem/src/assets/images/down.png

 gz-customerSystem/src/assets/images/fold.png

 gz-customerSystem/src/assets/images/index.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: lwh
 * @Date: 2023-04-24 16:12:00
 * @LastEditTime: 2024-08-28 10:47:07
 * @LastEditTime: 2024-08-30 10:47:30
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description:
@@ -49,6 +49,8 @@
import transfer from "./transfer.png";
import empty from "./empty.png";
import feedback from "./feedback.png";
import fold from "./fold.png";
import down from "./down.png"

export {
  ledger_1,
@@ -93,4 +95,6 @@
  transfer,
  empty,
  feedback,
  fold,
  down
};

 gz-customerSystem/src/components/ProgressStep/VisitStep.jsx

@@ -16,37 +16,20 @@
import FilesDrawer from '../FilesDrawer';
import './index.less';

// 获取调度处理进度数据
function getDispProgressDataApi(caseId) {
  return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' });
}

// 获取调解处理进度数据
function getProgressDataApi(caseId) {
  return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' });
}
// 获取司法确认处理进度数据
function getJudicProgressDataApi(caseId) {
  return $$.ax.request({ url: 'judicTask/getTaskProcess?caseId=' + caseId, type: 'get', service: 'mediate' });
}

/**
 * caseId:'', // 案件id
 * pageFrom:'', // 判断那个页面展示
 * progressData:'', // 流程数据
 */
const ProgressStep = ({ caseId, pageFrom }) => {
  const [data, setData] = useState([]);

  // 提交调解  案件调度  案件签收  纠纷调解 指派网格员     
const ProgressStep = ({ progressData }) => {
  const iconMap = {
    1: ledger_8,
    2: ledger_7,
  }

  // 已处理列表第一个元素
  const dom1 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName || '-'}</span>
        {/* <span className={`public-nameCard-tag public-nameCard-tag-grey`}>
          {x.canalName || '-'}
        </span> */}
      </div>
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>操作人：</span>
@@ -64,17 +47,19 @@
      <div className="myStep-item-p">
        <span>{x.handlerUserName || '-'}</span>
      </div>
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>操作人：</span>
        <span>{x.operationName}</span>
      </div>
      {x.operationName &&
        <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
          <span>操作人：</span>
          <span>{x.operationName}</span>
        </div>
      }
      <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
        <span>操作时间：</span>
        <span>{$$.timeFormat(x.finishTime)}</span>
      </div>
      {
        x.handleContent &&
        <div className='myStep-item-p-yy' style={{width:'200px'}}>
        <div className='myStep-item-p-yy' style={{ width: '200px' }}>
          <span className='myStep-item-p-yy-l'>
            {x.handleResult == '2' ?
              <span>退回<Tooltip placement="top" title={x.handleContent || ''}><span>{`（${x.handleContent}）` || '-'}</span></Tooltip></span>
@@ -101,7 +86,7 @@
  const dom3 = (x) => (
    <div>
      <div className="myStep-item-p">
        <span style={{ color: 'rgba(0,0,0,0.50)' }}>办理中</span>
        <span style={{ color: 'rgba(0,0,0,0.50)' }}>待受理</span>
      </div>
      <div className="myStep-item-p">
        <span>{x.handlerUserName}</span>
@@ -109,92 +94,29 @@
    </div>
  );

  const fakeData = [
    {
      handlerUserName: '天河区棠下街综治中心',
      canalName: '来访登记',
      finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '来访登记',
      mediResult: '22_00025-1',
      handleContent: '调解成功，双方达成一致意见。',
      operationName: '李晓明'
    },
    {
      handlerUserName: '天河区棠下街综治中心',
      canalName: '事件流转',
      finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间
      handleResult: '1',
      status: '2',
      taskNodeName: '案件调度',
      mediResult: '22_00025-1',
      handleContent: '自行受理',
      operationName: '李晓明'

    },
    {
      handlerUserName: '天河区棠下街综治中心',
      canalName: '办理反馈',
      finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间
      handleResult: '2',
      status: '3',
      taskNodeName: '案件签收',
      mediResult: '22_00025-1',
      handleContent: '案件已被签收，准备开始调解。',
      operationName: '李晓明'

    },
  ];

  useEffect(() => {
    if (pageFrom === 'dispatchRecord') {
      setData(fakeData || [])
    }
  }, [pageFrom]);

  function splitByLine(str, len = 10) {
    let strLen = str.length,
      num = 0,
      multiple = Math.floor(strLen / len),
      arrStr = str.split(''),
      space = strLen % len > 0 ? multiple + 1 : multiple
    for (let i = 1; i <= space; i++) {
      arrStr.splice((len * i + num), 0, '\n')
      num++
    }
    return arrStr.join('')
  }


  return (
    <>
      {data.length !== 0
        ? data.map((x, t) => {
      {progressData.length !== 0
        ? progressData.map((x, t) => {
          return (
            <div key={t + 1}>
              <div className="myStep-item">
                {t === data.length - 1 ? null : <div className={`${!x.handleContent ? 'myStep-item-divider' : x.fileInfoList?.length > 0 ? 'myStep-item-divider2' : "myStep-item-divider1"} ${x.status === '2' && 'myStep-item-divider-success'}`} />}
                {t === progressData.length - 1 ? null : <div className={`${!x.handleContent ? 'myStep-item-divider' : x.fileInfoList?.length > 0 ? 'myStep-item-divider2' : "myStep-item-divider1"} ${x.status === '2' && 'myStep-item-divider-success'}`} />}
                <div className={`myStep-item-icon1 myStep-item-${x.status === '2' ? 'success1' : 'noStarted1'}`}>
                  <div className="myStep-item-title">{splitByLine(x.taskNodeName || '', 2)}</div>
                  <img className='myStep-item-img' src={x.status === '1' ? ledger_8 : (x.handleResult === '2' ? feedback : ledger_7)} alt="" />
                  {/* <Icon className='myStep-item-img' component={x.handleResult === '2' ? RollbackOutlined : CheckOutlined} /> */}
                  <div className="myStep-item-title">{x.taskNodeName}</div>
                  <img className='myStep-item-img' src={iconMap[x.status]} alt="" />
                </div>
                <div className="myStep-item-right">
                  {/* {dom1(x || {})} */}
                  {
                    t === 0 && dom1(x || {})
                  }
                  {
                    t !== 0 && <>
                      {
                        x.status === '2' ? dom2(x || {}) : dom3(x || {})
                        x.status === '1' ?  dom3(x || {}) : dom2(x || {})
                      }
                    </>
                  }
                  {/* <div className="myStep-item-title">{x.taskNodeName}</div> */}
                  {/* {
                    <StepContent x={x || {}} t={t || 0} />} */}
                </div>
              </div>
            </div>

 gz-customerSystem/src/components/WantUserTag/Handling.jsx

@@ -2,7 +2,7 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-29 20:43:25
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-08-29 20:55:24
 * @LastEditTime: 2024-08-30 10:27:25
 * @FilePath: \gzDyh\gz-customerSystem\src\components\WantUserTag\Handling.jsx
 * @Description: 经办人
 */
@@ -16,10 +16,10 @@
  return (
    <div className="wantUserTag">
      <div className="wantUserTag-wantHandleUser">
        <div className="wantUserTag-wantUser-right">{name}</div>
        <Typography.Link className="wantUserTag-wantHandleUser-close" onClick={() => onClose(value)}>
          <CloseOutlined style={{width:'11px',height:'13px'}}/>
        </Typography.Link>
        <div className="wantUserTag-wantHandleUser-right">{name}</div>
        <div onClick={() => onClose(value)} className="wantUserTag-wantHandleUser-icon">
          <CloseOutlined />
        </div>
      </div>
    </div>
  );

 gz-customerSystem/src/components/WantUserTag/index.less

@@ -34,8 +34,16 @@
        display:flex;
        padding: 5px 8px;
        border: 1px solid rgba(229,230,235,1);
        align-items: center;
        border-radius: 2px;

        &-right {
            margin-left: 8px;
        }

        &-icon{
            color: #1D2129;
        }
    }

    &-green {

 gz-customerSystem/src/router/router.js

@@ -135,9 +135,11 @@
import DataSearch from "../views/statistic/dataSearch";

//来访登记
import Visit from "../views/register/visit"
//自行排查
import Check from "../views/register/visit/check"
import Visit from "../views/register/visit";
//事件流转
import EventFlow from "../views/register/eventFlow";
//办理反馈
import HandleFeedback from "../views/register/handleFeedback";

import Test from "../views/test";

@@ -211,7 +213,8 @@
                        <Route path="judicialOverview" element={<JudicialOverview />} />
                        {/* 来访登记*/}
                        <Route path="visit" element={<Visit />} />
                        <Route path="visit/check" element={<Check />} />
                        <Route path="visit/eventFlow" element={<EventFlow />} />
                        <Route path="visit/handleFeedback" element={<HandleFeedback />} />
                        {/* 工作流模块 */}
                        <Route path="workflowTemplate" element={<WorkflowTemplate />} />
                        <Route path="workflowTemplate/workflowTemplateEdit" element={<WorkflowTemplateEdit />} />

 gz-customerSystem/src/views/register/eventFlow/component/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/index.jsx

New file
@@ -0,0 +1,90 @@
/*
 * @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 { Button, Steps, Tabs, Message } from '@arco-design/web-react';
import { question, register, Matter, transfer } from '@/assets/images'
import EventFlow from './component/EventFlow';
import MatterDetali from '../matterDetail';

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


const Organization = () => {
    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,//加上这个就有进度条
        },
    ])


    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
                }
            >
                <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>
                            }
                            {tabsActive === '1' &&
                                <MatterDetali />
                            }
                            {
                                (tabsActive === '2' && current === 2) && <EventFlow />
                            }
                        </TabPane>
                    })}
                </Tabs>
            </NewPage>
        </div>
    )
}

export default Organization;

 gz-customerSystem/src/views/register/handleFeedback/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/handleFeedback/component/handle.jsx

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



const 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 progressData={fakeData} />
                    </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/handleFeedback/index.jsx

New file
@@ -0,0 +1,96 @@
/*
 * @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 { Typography, Steps, Tabs, Message } from '@arco-design/web-react';
import { question, register, Matter, transfer } from '@/assets/images'
import MatterDetali from '../matterDetail';
import Handle from './component/handle';

const Step = Steps.Step;
const TabPane = Tabs.TabPane;
const style = {
  // textAlign: 'center',
  // marginTop: 20,
};


const Organization = () => {
    const [current, setCurrent] = useState(3);
    const [tabsActive, setTabsActive] = useState('1');
    const [tabsList, setTabList] = useState([
        {
            img: Matter,
            label: '事项详情',
            key: '1'
        },
        {
            img: transfer,
            label: '流转办理',
            key: '2',
            isNeedStep: true,//加上这个就有进度条
        },
    ])


    return (
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
                }
            >
                <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>
                            }
                            {tabsActive === '1' &&
                                <MatterDetali />
                            }
                            {
                                tabsActive === '2' && <Typography.Paragraph style={style}>
                                    <Handle />
                                </Typography.Paragraph>
                            }
                        </TabPane>
                    })}
                </Tabs>
            </NewPage>
        </div>
    )
}

export default Organization;

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

@@ -91,6 +91,7 @@
}

.dataSync {
    position: relative;
    &-page {
        background-color: #fff;
        margin: 8px 8px 0px 16px;
@@ -123,6 +124,14 @@
        justify-content: space-between;
        box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.25);
        z-index: 1;
    }

    &-hasTabPage {
        background-color: #fff;
        margin: 8px 8px 0px 16px;
        padding: 12px 16px 64px 16px;
        height: calc(100vh - 288px);
        overflow-y: scroll;
    }
}

@@ -282,15 +291,64 @@
        display: flex;
        flex-direction: row;
        column-gap: 8px;
        /* margin: 8px 16px 22px; */
        margin: 0px 8px 22px 16px;
        // height: 100vh;


        &-left {
            flex: 3 1 0%;
            background-color: rgb(255, 255, 255);
            padding: 12px 0px 12px 16px;
            margin-bottom: -25px;

            &-record {
                border: 1px solid #D9D9D9;
                border-radius: 8px;
                margin-right: 16px;
                margin-top: 8px;

                &-top {
                    padding: 12px;
                    display: flex;
                    align-items: center;
                    background-color: #FAFAFA;
                    border-radius: 8px;


                    &-icon {
                        width: 12px;
                        height: 12px;
                        margin-right: 12px;
                    }

                    &-remark {
                        border: 1px solid #FFD591;
                        padding: 0px 8px;
                        color: #FA8C16;
                        background-color: #FFF7E6;
                        border-radius: 4px;
                        margin-left: 8px;
                    }

                    &-hostOrg{
                        border: 1px solid #89C2E3;
                        padding: 0px 8px;
                        color: #1A6FB8;
                        background-color: #E8F8FF;
                        border-radius: 4px;
                        margin-left: 8px;

                    }
                }

                &-bottom {
                    margin: 16px 12px;

                    &-table {
                        border: 1px solid #d9d9d9;
                        width: 100%;
                    }
                }
            }
        }

        &-right {
@@ -298,6 +356,13 @@
            background-color: rgb(255, 255, 255);
        }
    }
}

.Form{
    padding: 12px 16px 16px 16px;
    border: 1px dashed #1a6fb8;
    border-radius: 10px;
    margin-top: 16px;
}

.tabs-container .arco-tabs-header {
@@ -317,6 +382,18 @@
    width: 82px;
}

.progress{
.progress {
    margin: 16px 0px 0px 16px;
}

.myTabContent {
    .arco-tabs-header-nav {
        margin-left: 16px
    }
    .arco-tabs-header-nav-line.arco-tabs-header-nav-horizontal>.arco-tabs-header-scroll .arco-tabs-header-title:first-of-type {
        margin-left: 0;
    }
    .arco-tabs-header-nav-line .arco-tabs-header-title {
        margin: 0 16px 0 0;
    }
}

 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/check.jsx

File was deleted

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

File was deleted

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

@@ -241,7 +241,7 @@
                    <Select
                      placeholder='请选择'
                      allowClear
                      options={$$.options.agentType}
                      options={$$.options.agentRelate}
                      onChange={(value, options) => {
                        formRef.current.setFieldValue('agentRelateName', options && options.children)
                      }}

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

@@ -281,7 +281,7 @@
              <Select
                placeholder='请选择'
                allowClear
                options={$$.options.agentType}
                options={isLegal ? $$.options.enterpriseType : $$.options.orgaType}
                onChange={(value, options) => {
                  formRef.current.setFieldValue('orgaTypeName', options && options.children)
                }}

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

File was deleted

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

@@ -13,14 +13,11 @@
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 { Button, Steps, 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 });
@@ -39,26 +36,7 @@
    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: '3',
            isNeedStep: true,//加上这个就有进度条
        },
    ])
    const breadcrumbDataMap = {
        1: { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' },
        2: { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' },
        3: { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
    }
    const [current, setCurrent] = useState(1);

    //提交信息，需要校验规则
    const handleSubmit = async () => {
@@ -163,65 +141,32 @@
        <div style={{ position: 'relative' }}>
            <NewPage
                pageHead={
                    breadcrumbDataMap[current]
                    { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' }
                }
            >
                {
                    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)}>
                        {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>
                }
                <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>
            </NewPage>
        </div>
    )