修改页面架构

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

@@ -24,7 +24,7 @@
    // marginTop: 20,
};

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

    const [fakeData, setFakeData] = useState([]);//当事人信息数据
    const [agentVisible, setAgentVisible] = useState(false);
@@ -33,8 +33,6 @@
    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;


@@ -96,7 +94,6 @@
        },
        // 更多列配置...
    ];

    const fakeData1 = [
        {
            id: 1,
@@ -171,17 +168,7 @@

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

                >
      {props.active === '1' &&
                    <Typography.Paragraph style={style}>
                        <div className='dataSync-page'>

@@ -316,23 +303,12 @@
                        </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}>
                       
      {
        props.active === '3' && <Typography.Paragraph style={style}>
                            <Handle />
                        
                    </Typography.Paragraph>
                </TabPane>
            </Tabs>
      }
        </div>
    )
}

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

@@ -10,21 +10,9 @@


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

 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,33 +78,24 @@
            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' }} /> */}

                {
                    current === 1 &&
                    <Fragment>
                    <div style={{ backgroundColor: '#fff', margin: '12px 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
                        <Steps type='navigation' current={current} onChange={setCurrent} style={{}}>
                            <Steps type='navigation' current={current}>
                            <Step title='来访登记' disabled />
                            <Step title='事件流转' disabled />
                            <Step title='办理反馈' disabled />
@@ -107,10 +103,7 @@
                            <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' }}>
@@ -123,24 +116,37 @@
                            </div>
                        </Fragment>
                    }
                </NewPage>
            }
            {tabsActive === '2' &&
                <div style={{ position: 'relative' }}>

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

                        <Fragment>

                            <MattersInfo />
                        </Fragment>
                    </NewPage>
                                {
                                    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>
    )
}