feat: 事件流转静态

zhangyongtian

2024-09-05 61f77fc8ebbfaa7cd516aa24e628da8fab9c8794

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