From 65c8026eaeff3d769a1d168933e13035708233e0 Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Thu, 05 Sep 2024 10:00:48 +0800 Subject: [PATCH] 合并冲突 --- gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx | 73 ++++++++++++++++++++++++++++++++---- 1 files changed, 64 insertions(+), 9 deletions(-) diff --git a/gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx b/gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx index ef729ea..96ba746 100644 --- a/gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx +++ b/gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx @@ -1,8 +1,12 @@ -import React, { useState } from 'react'; -import { Button, Modal, Tabs } from '@arco-design/web-react'; +import React, { useState, useRef, useEffect } from 'react'; +import { Button, Modal, Tabs, Badge } from '@arco-design/web-react'; import { Space } from 'antd'; import ProgressStep from '@/components/ProgressStep/VisitStep'; import BackModel from "./BackModel"; +import { Scrollbars } from "react-custom-scrollbars"; +import { getOffset, getSize } from '@/utils/utility'; +import EscalationModel from './EscalationModel'; +import AssignedModel from './AssignedModel'; const TabPane = Tabs.TabPane; @@ -69,11 +73,27 @@ ]; export default function EventFlow(props) { + const scrollRef = useRef(null) const [backVisible, setBackVisible] = useState(false) - const tabs = [ - { index: '1', label: '流转进度' }, - { index: '2', label: '督办信息' }, - ]; + const [height, setHeight] = useState(500) + const [escalationVisible, setEscalationVisible] = useState(false) + const [assignedVisible, setAssignedVisible] = useState(false) + + useEffect(() => { + onWindowResize() + window.addEventListener("resize", onWindowResize); + }, []) + + const onWindowResize = () => { + let offsetLeft = 0; + let offsetTop = 0; + if (scrollRef.current.container) { + offsetLeft = getOffset(scrollRef.current.container).left; + offsetTop = getOffset(scrollRef.current.container).top; + } + setHeight(getSize().windowH - offsetTop - 65) + }; + return ( <div className='dataSync'> <div className='dataSync-hasTabPage' > @@ -86,16 +106,27 @@ </span> } > - <div styles={{ height: "400px" }}><ProgressStep progressData={fakeData} /></div> + <Scrollbars + style={{ height: height }} + ref={scrollRef} + autoHide + > + <ProgressStep progressData={fakeData} /> + </Scrollbars> </TabPane> <TabPane key='2' title={ <span style={{ fontSize: '15px' }}> 督办信息 + <Badge maxCount={99} count={1000} /> </span> } > + <Scrollbars + style={{ height: height }} + ref={scrollRef} + ></Scrollbars> </TabPane> </Tabs> @@ -106,8 +137,8 @@ <Button type="primary" >提交</Button> <Button type="primary" >自行受理</Button> <Button type='outline' status='danger' onClick={() => setBackVisible(true)}>回退</Button> - <Button type='outline'>交办</Button> - <Button type='outline'>上报</Button> + <Button type='outline' onClick={() => setAssignedVisible(true)}>交办</Button> + <Button type='outline' onClick={() => setEscalationVisible(true)}>上报</Button> <Button type='secondary' >返回上级页面</Button> </Space> </div> @@ -124,6 +155,30 @@ > <BackModel /> </Modal> + <Modal + title='上报' + visible={escalationVisible} + onOk={() => setEscalationVisible(false)} + onCancel={() => { setEscalationVisible(false) }} + autoFocus={false} + focusLock={true} + footer={null} + unmountOnExit={true} + maskClosable={false} + > + <EscalationModel /> + </Modal> + <Modal + title='交办' + visible={assignedVisible} + onOk={() => setAssignedVisible(false)} + onCancel={() => { setAssignedVisible(false) }} + footer={null} + unmountOnExit={true} + maskClosable={false} + > + <AssignedModel /> + </Modal> </div> ) } -- Gitblit v1.8.0