Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh

zhangyongtian

2024-09-13 a52d2b801ac2aa6148ae78a5306a13a354abf7d2

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

@@ -1,106 +1,224 @@
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";
import * as $$ from '@/utils/utility';
import { useNavigate } from 'react-router-dom';

const fakeData = [
  {
    handlerUserName: '天河区棠下街综治中心',
    finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间
    handleResult: '1',
    status: '2',
    taskNodeName: '来访登记',
    mediResult: '22_00025-1',
    handleContent: '调解成功，双方达成一致意见。',
    operationName: '李晓明'
  },
  {
    handlerUserName: '系统派单',
    finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间
    handleResult: '1',
    status: '2',
    taskNodeName: '事件流转',
    mediResult: '22_00025-1',
    handleContent: '派单至：白云区新市街市场监管所',
  },
  {
    handlerUserName: '白云区新市街市场监管所',
    finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间
    handleResult: '1',
    status: '2',
    taskNodeName: '事件流转',
    mediResult: '22_00025-1',
    handleContent: '已签收',
    operationName: '赵菲菲'
  },
  {
    handlerUserName: '白云区新市街市场监管所',
    finishTime: new Date().getTime() - 10 * 60 * 60 * 1000, // 半天前的时间
    handleResult: '1',
    status: '3',
    taskNodeName: '事件回退',
    mediResult: '22_00025-1',
    // handleContent: '已签收',
    operationName: '赵菲菲'
  },
  {
    handlerUserName: '白云区新市街综治中心',
    finishTime: new Date().getTime() - 9 * 60 * 60 * 1000, // 半天前的时间
    handleResult: '1',
    status: '2',
    taskNodeName: '回退审核',
    mediResult: '22_00025-1',
    handleContent: '通过',
    operationName: '赵菲菲'
  },
  {
    handlerUserName: '天河区棠下街综治中心',
    finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间
    handleResult: '2',
    status: '1',
    taskNodeName: '事件流转',
    mediResult: '22_00025-1',
    handleContent: '案件已被签收，准备开始调解。',
    operationName: '李晓明'
  },
];
const TabPane = Tabs.TabPane;
const Step = Steps.Step;

function getListCaseFlow(caseId) {
  return $$.ax.request({ url: `caseTask/listCaseFlow?caseId=${caseId}`, type: 'get', service: 'mediate' });
}

function accept(data) {
  return $$.ax.request({ url: `caseTask/accept`, type: 'post', service: 'mediate', data });
}

export default function EventFlow(props) {
  const myButton = [
    {
      label: '受理',
      type: 'primary',
      click: () => {
        Modal.confirm({
          title: '受理确认',
          content: '确认受理该事件？',
          onOk: async () => {
            const res = await accept({
              caseTaskId: props.caseTaskId
            })
            if (res.type) {
              $$.infoSuccess({ content: '受理成功！' });
              navigate(`/mediate/visit/handleFeedback?caseTaskId=${props.caseTaskId}&caseId=${props.caseId}`)
            }
          },
        });
      },
      key: 'sl',
    },
    {
      label: '自行受理',
      type: 'primary',
      click: () => { },
      key: 'zxsl',
    },
    {
      label: '回退',
      type: 'outline',
      click: () => setBackVisible(true),
      key: 'ht',
      status: 'danger'
    },
    {
      label: '交办',
      type: 'outline',
      click: () => setAssignedVisible(true),
      key: 'jb',
    },
    {
      label: '上报',
      type: 'outline',
      click: () => setEscalationVisible(true),
      key: 'sb',
    },
  ]
  const scrollRef = useRef(null)
  const navigate = useNavigate();
  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)
  const [staticButtonList, setStaticButtonList] = useState([])
  const [progressData, setProgressData] = useState({})

  useEffect(() => {
    if (props.authorData) {
      const { buttonList } = props.authorData;
      setStaticButtonList(myButton.filter(item => {
        const flag = buttonList.some(result => {
          if (result.id === item.key) {
            return true
          }
        })
        return flag
      }))
    }
  }, [props.authorData])

  useEffect(() => {
    getData()
    onWindowResize()
    window.addEventListener("resize", onWindowResize);
    // 返回一个函数，该函数会在组件卸载前执行  
    return () => {
      // 组件销毁时执行  
      window.removeEventListener("resize", onWindowResize);
    };
  }, [])

  const onWindowResize = () => {
    let offsetTop = 0;
    if (scrollRef.current.container) {
      offsetTop = getOffset(scrollRef.current.container).top;
    }
    setHeight(getSize().windowH - offsetTop - 16)
  };

  //获取流程信息
  const getData = async () => {
    const res = await getListCaseFlow(
      props.caseId
    )
    if (res.type) {
      setProgressData(res.data)
    }
  }




  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 caseId={props.caseId} />
          <div className='dataSync-hasTabPage' style={{ marginTop: '-8px', paddingBottom: '64px' }}>
            <Tabs defaultActiveTab='1' >
              <TabPane
                key='1'
                title={
                  <span style={{ fontSize: '15px' }}>
                    流转进度
                  </span>
                }
              >
                <ProgressStep progressData={progressData} />
              </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) }}
          footer={null}
          unmountOnExit={true}
          maskClosable={false}
        >
          <BackModel caseId={props.caseId} caseTaskId={props.caseTaskId} onCancel={() => { setBackVisible(false) }} />
        </Modal>
        <Modal
          title='上报'
          visible={escalationVisible}
          onOk={() => setEscalationVisible(false)}
          onCancel={() => { setEscalationVisible(false) }}
          footer={null}
          unmountOnExit={true}
          maskClosable={false}
        >
          <EscalationModel caseId={props.caseId} caseTaskId={props.caseTaskId} onCancel={() => { setEscalationVisible(false) }} />
        </Modal>
        <Modal
          title='交办'
          visible={assignedVisible}
          onOk={() => setAssignedVisible(false)}
          onCancel={() => { setAssignedVisible(false) }}
          footer={null}
          unmountOnExit={true}
          maskClosable={false}
          autoFocus={false}
          focusLock={false}
        >
          <AssignedModel caseId={props.caseId} caseTaskId={props.caseTaskId} onCancel={() => { setAssignedVisible(false) }} />
        </Modal>
        <div className="dataSync-excel">
          <Space size="middle" style={{ margin: '4px 14px' }}>
            {staticButtonList?.map(item => {
              const { label, key, click, ...rest } = item;
              return <Button key={key} onClick={click} {...rest} >{label}</Button>
            })}
            <Button type='secondary'  onClick={() => navigate(-1)}>返回上级页面</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>
  )
}