修改页面架构

zhangyongtian

2024-08-28 463d13dd669905200aecb974cd65a251e83f4df7

修改页面架构

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

@@ -267,7 +267,7 @@

.container {
    background-color: rgb(242, 243, 245);
    height: calc(-281px + 100vh);
    height: calc(-293px + 100vh);
    overflow-y: scroll;

    &-top {

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

@@ -20,321 +20,297 @@
const TabPane = Tabs.TabPane;

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

const MattersInfo = () => {
const MattersInfo = (props) => {

    const [fakeData, setFakeData] = useState([]);//当事人信息数据
    const [agentVisible, setAgentVisible] = useState(false);
    const [dialogType, setDialogType] = useState(0);//添加当事人的类型
    const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制
    const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制
    const [upload, setUpLoad] = useState(false);
    const [filesCheck, setFilesCheck] = useState(false);
    const [active, setActive] = useState('1')
    const [current, setCurrent] = useState(3);
    const Step = Steps.Step;
  const [fakeData, setFakeData] = useState([]);//当事人信息数据
  const [agentVisible, setAgentVisible] = useState(false);
  const [dialogType, setDialogType] = useState(0);//添加当事人的类型
  const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制
  const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制
  const [upload, setUpLoad] = useState(false);
  const [filesCheck, setFilesCheck] = useState(false);
  const Step = Steps.Step;


    const fakeColumns = [
        {
            title: '序号',
            dataIndex: 'caseNo',
            key: 'caseNo',
            width: 100,
            render: (text, record, index) => <span>{index + 1}</span>,
        },
        {
            title: '材料类型',
            dataIndex: 'judicNo',
            key: 'judicNo',
            width: 60,
  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: 'inputUserName',
      key: 'perClassName',
      width: 180,
      render: (text) => (
        <>
          {text}份
        </>
      )


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

        },
        {
            title: '最新上传时间',
            dataIndex: 'mediateUserName',
            key: 'mediateUserName',
            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 表示系列案
            // 更多字段...
        },

        // 更多数据...
    ];


    //查看
    const handleCheckParty = (value) => {
        console.log(value);
        setDialogType(value.partyType)
        setDetailVisabled(true)
    }

    //添加申请人: 0、被申请人: 1、申请代理人: 2、被申请代理人：3
    const handleAdd = (type) => {
        if (type === 2 || type === 3) {
            setAgentVisible(true)
        } else {
            setAddVisabled(true)
        }
        setDialogType(type)
    }

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

    return (
        <div style={{ position: 'relative' }}>
            <Tabs defaultActiveTab='1' onChange={(v) => setActive(v)}>
                <TabPane
                    key='1'
                    title={
                        <span>
                            {active === '1' && <img src={Matter} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                            <span style={{ fontSize: '16px' }}>事项详情</span>
                        </span>
                    }

                >
                    <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={true}
                                    partyType={'applicant'} // 这里设定为申请人
                                    data={fakeData}
                                    handleCheckParty={handleCheckParty}
                                    handleAdd={handleAdd}
                                    handleDeleteParty={handleDeleteParty}
                                />
                            </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' }}>待办理</div>
                                </Col>
                                <Col span={16}>
                                    <div><div className="title-text">事项编号</div></div>
                                    <div>GZ202408010001</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' }}>3</div></div>级</div>
                                </Col>
                                <Col span={8}>
                                    <div><div className="title-text">来访时间</div></div>
                                    <div>2024-7-12 10:00</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>市场监管/金融纠纷</div>
                                </Col>
                                <Col span={8}>
                                    <div ><div className="title-text">纠纷发生时间</div></div>
                                    <div>2024-7-11</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>广州市/天河区/棠下街道</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>
                </TabPane>
                <TabPane
                    key='3'
                    title={
                        <span>
                            {active === '3' && <img src={transfer} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />}
                            <span style={{ fontSize: '16px' }}>流转办理</span>
                        </span>
                    }
                >
                    <Typography.Paragraph style={style}>
                       
                            <Handle />
                        
                    </Typography.Paragraph>
                </TabPane>
            </Tabs>
    },
    {
      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 表示系列案
      // 更多字段...
    },

    // 更多数据...
  ];


  //查看
  const handleCheckParty = (value) => {
    console.log(value);
    setDialogType(value.partyType)
    setDetailVisabled(true)
  }

  //添加申请人: 0、被申请人: 1、申请代理人: 2、被申请代理人：3
  const handleAdd = (type) => {
    if (type === 2 || type === 3) {
      setAgentVisible(true)
    } else {
      setAddVisabled(true)
    }
    setDialogType(type)
  }

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

  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={true}
                partyType={'applicant'} // 这里设定为申请人
                data={fakeData}
                handleCheckParty={handleCheckParty}
                handleAdd={handleAdd}
                handleDeleteParty={handleDeleteParty}
              />
            </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' }}>待办理</div>
              </Col>
              <Col span={16}>
                <div><div className="title-text">事项编号</div></div>
                <div>GZ202408010001</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' }}>3</div></div>级</div>
              </Col>
              <Col span={8}>
                <div><div className="title-text">来访时间</div></div>
                <div>2024-7-12 10:00</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>市场监管/金融纠纷</div>
              </Col>
              <Col span={8}>
                <div ><div className="title-text">纠纷发生时间</div></div>
                <div>2024-7-11</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>广州市/天河区/棠下街道</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 === '3' && <Typography.Paragraph style={style}>
          <Handle />
        </Typography.Paragraph>
      }
    </div>
  )
}

export default MattersInfo;

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

@@ -10,117 +10,105 @@


const Handle = () => {
    const [current, setCurrent] = useState(3);
    const Step = Steps.Step;

    return (
        <>
            <div className='steps'>
                <Steps type='navigation' current={current} onChange={setCurrent} style={{}}>
                    <Step title='来访登记' disabled />
                    <Step title='事件流转' disabled />
                    <Step title='办理反馈' disabled />
                    <Step title='结案审核' disabled />
                    <Step title='当事人评价' disabled />
                    <Step title='结案归档' disabled />
                </Steps>
            </div>
            <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>
  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>

                <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}
                        >
                            <Row>
                                <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' >
                                        <Select placeholder='请选择' allowClear>
                                            {['一级', '二级', '三级', '四级'].map((option, index) => (
                                                <Option key={option} value={option}>
                                                    {option}
                                                </Option>
                                            ))}
        <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}
            >
              <Row>
                <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' >
                    <Select placeholder='请选择' allowClear>
                      {['一级', '二级', '三级', '四级'].map((option, index) => (
                        <Option key={option} value={option}>
                          {option}
                        </Option>
                      ))}

                                        </Select>
                                        <Button type='primary' style={{ position: 'absolute', right: 0 }}>保存</Button>
                                    </FormItem>
                                </Col>
                                <Col span={24}>
                                    <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
                                    <Empty
                                        icon={
                                            <div
                                                style={{
                                                    display: 'flex',
                                                    // width: 160,
                                                    justifyContent: 'center',
                                                }}
                                            >
                                                <img src={empty} alt='' style={{width:'160px',height:'160px'}}/>
                                            </div>
                                        }
                                        description='暂无数据'
                                    />
                                </Col>
                            </Row>
                        </Form>
                        <Space>
                            <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='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >自行受理</Button>
                            <Button type='secondary'>返回上级页面</Button>
                        </Space>
                    </div>
                    <div className='container-bottom-right'>22</div>
                </div>
            </div>
        </>
    )
                    </Select>
                    <Button type='primary' style={{ position: 'absolute', right: 0 }}>保存</Button>
                  </FormItem>
                </Col>
                <Col span={24}>
                  <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div>
                  <Empty
                    icon={
                      <div
                        style={{
                          display: 'flex',
                          // width: 160,
                          justifyContent: 'center',
                        }}
                      >
                        <img src={empty} alt='' style={{ width: '160px', height: '160px' }} />
                      </div>
                    }
                    description='暂无数据'
                  />
                </Col>
              </Row>
            </Form>
            <Space>
              <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='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >自行受理</Button>
              <Button type='secondary'>返回上级页面</Button>
            </Space>
          </div>
          <div className='container-bottom-right'>22</div>
        </div>
      </div>
    </>
  )

}


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

@@ -7,19 +7,20 @@
 * @Description: 来访登记
 */

import React, { useState, useEffect, useRef, Fragment } from "react";
import React, { useState, useRef, Fragment } from "react";
import NewPage from '@/components/NewPage';
import RegisterTab from '@/components/registerTab';
import * as $$ from '@/utils/utility';
import "@arco-themes/react-gzzz/css/arco.css";
import '../index.less';
import { Space } from 'antd';
import { Button, Steps } from '@arco-design/web-react';
import { Button, Steps, Tabs } 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 getCaseDataApi(submitData) {
    return $$.ax.request({ url: `caseInfo/getCaseInfo?id=${submitData}`, type: 'get', service: 'mediate' });
@@ -33,16 +34,20 @@
    const [isReview, setIsReview] = useState(false);//预览页面控制
    const [current, setCurrent] = useState(1);
    const [tabsActive, setTabsActive] = useState('1');
    const [tabsList, setTabList] = useState([
        {
            img: Matter,
            label: '事项详情',
            key: '1'
        },
        {
            img: transfer,
            label: '流转办理',
            key: '3',
            isNeedStep: true,//加上这个就有进度条
        },
    ])

    const tabs = [
        { label: '事件登记', key: '1' },
        { label: '事件流转', key: '2' },
        { label: '办理反馈', key: '3' },
        { label: '申请结案', key: '4' },
        { label: '当事人评价', key: '5' },
        { label: '结案归档', key: '6', img1: true },

    ];

    //提交信息，需要校验规则
    const handleSubmit = async () => {
@@ -73,74 +78,75 @@
            okText: '确定受理',
            cancelText: '我再想想',
            onOk: async () => {
                setTabsActive('2')
                setCurrent(3)
            },
        });

    }

    function submit() {
        $$.info({ type: 'warning', content: '您没有预约记录，暂时无法提交' })
    }
    console.log(current, 'current')


    return (
        <div style={{ position: 'relative' }}>
            {tabsActive !== '2' &&

                <NewPage
                    pageHead={
                        { breadcrumbData: [{ title: '工作台' }, { title: '来访登记' }], title: '来访登记' }
                    }
                >
                    {/*onChange={(activeKey) => setTabsActive(activeKey)}*/}

                    {/* <RegisterTab tabs={tabs} activeKey={tabsActive} style={{ background: '#fff' }} /> */}

                    <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                        <Steps type='navigation' current={current} onChange={setCurrent} style={{}}>
                            <Step title='来访登记' disabled />
                            <Step title='事件流转' disabled />
                            <Step title='办理反馈' disabled />
                            <Step title='结案审核' disabled />
                            <Step title='当事人评价' disabled />
                            <Step title='结案归档' disabled />
                        </Steps>

                    </div>
                    {tabsActive === '1' &&
                        <Fragment>
                            {isReview ? <Preview /> : <VisitorRegister formRef={formRef} />}
                            <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>
            }
            {tabsActive === '2' &&
                <div style={{ position: 'relative' }}>

                    <NewPage
                        pageHead={
                            { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '办理反馈' }
                        }
                    >

                        <Fragment>

                            <MattersInfo />
                        </Fragment>
                    </NewPage>
                </div>
            }
            <NewPage
                pageHead={
                    { 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>
                        {isReview ? <Preview /> : <VisitorRegister formRef={formRef} />}
                        <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 === 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} />
                            </TabPane>
                        })}
                    </Tabs>
                }
            </NewPage>
        </div>
    )
}