feat: 事件流转

zhangyongtian

2024-08-30 b6e3c80c170641da5bee32e779458a7ab42f0d21

feat: 事件流转

 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 16px 16px;
        height: calc(100vh - 288px);
        overflow-y: scroll;
    }
}

@@ -317,6 +326,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/visit/component/MattersInfo.jsx

@@ -16,7 +16,9 @@
import { Tabs, Typography, Steps } from '@arco-design/web-react';
import "@arco-themes/react-gzzz/css/arco.css";
import { IconCalendar, IconClockCircle, IconUser } from '@arco-design/web-react/icon';
import Handle from './handle'
import Handle from './handle';
import EventFlow from './secondWanderStep/EventFlow';

const TabPane = Tabs.TabPane;

const style = {
@@ -25,15 +27,31 @@
};

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 [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 Step = Steps.Step;


  const fakeColumns = [
@@ -141,30 +159,6 @@
    // 更多数据...
  ];


  //查看
  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' }}>
@@ -301,10 +295,13 @@
        </Typography.Paragraph>
      }
      {
        (props.active === '3' && props.current === 3) && <Typography.Paragraph style={style}>
        (props.active === '2' && props.current === 3) && <Typography.Paragraph style={style}>
          <Handle />
        </Typography.Paragraph>
      }
      {
        (props.active === '2' && props.current === 2) && <EventFlow />
      }
    </div>
  )
}

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

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

export default function EventFlow(props) {
  return (
    <div className='dataSync'>
      <div className='dataSync-hasTabPage' >
      </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/visit/index.jsx

@@ -50,7 +50,7 @@
        {
            img: transfer,
            label: '流转办理',
            key: '3',
            key: '2',
            isNeedStep: true,//加上这个就有进度条
        },
    ])
@@ -194,7 +194,11 @@
                }
                {
                    (current === 2 || current === 3) &&
                    <Tabs defaultActiveTab='1' onChange={(v) => setTabsActive(v)}>
                    <Tabs
                        defaultActiveTab='1'
                        onChange={(v) => setTabsActive(v)}
                        className='myTabContent'
                    >
                        {tabsList?.map(item => {
                            return <TabPane
                                key={item.key}
@@ -217,7 +221,7 @@
                                        </Steps>
                                    </div>
                                }
                                <MattersInfo active={tabsActive} current={current}/>
                                <MattersInfo active={tabsActive} current={current} />
                            </TabPane>
                        })}
                    </Tabs>