feat: 办理记录静态

zhangyongtian

2024-09-07 3a2cd57a3ab0aee051da9dab313ab5a3706fc74d

 gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx

@@ -1,8 +1,17 @@
import React, { useState } from 'react';
import { Button, Modal } from '@arco-design/web-react';
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { Button, Modal, Tabs, Badge, Steps } 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';
import MatterDetail from '../../matterDetail';
import SupervisingView from "../../matterDetail/Supervising";

const TabPane = Tabs.TabPane;
const Step = Steps.Step;

const fakeData = [
  {
@@ -67,40 +76,124 @@
];

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

  return (
    <div className='dataSync'>
      <div className='dataSync-hasTabPage' >
        <ProgressStep progressData={fakeData} />
    <Fragment>
      <div style={{ backgroundColor: '#fff', margin: '0 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}>
        <Steps type='navigation' current={2}>
          <Step title='来访登记' disabled />
          <Step title='事件流转' disabled />
          <Step title='办理反馈' disabled />
          <Step title='结案审核' disabled />
          <Step title='当事人评价' disabled />
          <Step title='结案归档' disabled />
        </Steps>
      </div>
      <div className="dataSync-excel">
        <Space size="large" style={{ margin: '4px 14px' }}>
          <Button type="primary"  >受理</Button>
          <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='secondary' >返回上级页面</Button>
        </Space>

      <div className='dataSync' style={{ marginTop: '8px' }}>
        <Scrollbars
          style={{ height: height }}
          ref={scrollRef}
          autoHide
        >
          <MatterDetail />
          <div className='dataSync-hasTabPage' style={{ marginTop: '-8px' }}>
            <Tabs defaultActiveTab='1' >
              <TabPane
                key='1'
                title={
                  <span style={{ fontSize: '15px' }}>
                    流转进度
                  </span>
                }
              >
                <ProgressStep progressData={fakeData} />
              </TabPane>
              <TabPane
                key='2'
                title={
                  <span style={{ fontSize: '15px' }}>
                    督办信息
                    <Badge maxCount={99} count={1000} />
                  </span>
                }
              >
                <div style={{ marginBottom: '20px' }}>
                  <SupervisingView id={''} />
                </div>
              </TabPane>
            </Tabs>
          </div>
        </Scrollbars>
        <Modal
          title='回退'
          visible={backVisible}
          onOk={() => setBackVisible(false)}
          onCancel={() => { setBackVisible(false) }}
          autoFocus={false}
          focusLock={true}
          footer={null}
          unmountOnExit={true}
          maskClosable={false}
        >
          <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 className="dataSync-excel">
          <Space size="large" style={{ margin: '4px 14px' }}>
            <Button type="primary"  >受理</Button>
            <Button type="primary"  >提交</Button>
            <Button type="primary"  >自行受理</Button>
            <Button type='outline' status='danger' onClick={() => setBackVisible(true)}>回退</Button>
            <Button type='outline' onClick={() => setAssignedVisible(true)}>交办</Button>
            <Button type='outline' onClick={() => setEscalationVisible(true)}>上报</Button>
            <Button type='secondary' >返回上级页面</Button>
          </Space>
        </div>
      </div>
      <Modal
        title='回退'
        visible={backVisible}
        onOk={() => setBackVisible(false)}
        onCancel={() => { setBackVisible(false) }}
        autoFocus={false}
        focusLock={true}
        footer={null}
        unmountOnExit={true}
        maskClosable={false}
      >
        <BackModel />
      </Modal>
    </div>
    </Fragment>
  )
}