From b6e3c80c170641da5bee32e779458a7ab42f0d21 Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Fri, 30 Aug 2024 17:53:17 +0800 Subject: [PATCH] feat: 事件流转 --- gz-customerSystem/src/views/register/index.less | 23 +++++++++++ gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx | 63 +++++++++++++++---------------- gz-customerSystem/src/views/register/visit/index.jsx | 10 +++- gz-customerSystem/src/views/register/visit/component/secondWanderStep/EventFlow.jsx | 19 +++++++++ 4 files changed, 78 insertions(+), 37 deletions(-) diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less index e065fc8..b559ae7 100644 --- a/gz-customerSystem/src/views/register/index.less +++ b/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; + } } \ No newline at end of file diff --git a/gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx b/gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx index 418a908..3f74a54 100644 --- a/gz-customerSystem/src/views/register/visit/component/MattersInfo.jsx +++ b/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> ) } diff --git a/gz-customerSystem/src/views/register/visit/component/secondWanderStep/EventFlow.jsx b/gz-customerSystem/src/views/register/visit/component/secondWanderStep/EventFlow.jsx new file mode 100644 index 0000000..7cc80fb --- /dev/null +++ b/gz-customerSystem/src/views/register/visit/component/secondWanderStep/EventFlow.jsx @@ -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> + ) +} diff --git a/gz-customerSystem/src/views/register/visit/index.jsx b/gz-customerSystem/src/views/register/visit/index.jsx index 8a3be63..aee38fa 100644 --- a/gz-customerSystem/src/views/register/visit/index.jsx +++ b/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> -- Gitblit v1.8.0