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;
|
|
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: '李晓明'
|
},
|
];
|
|
export default function EventFlow(props) {
|
const scrollRef = useRef(null)
|
const [backVisible, setBackVisible] = useState(false)
|
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' >
|
<Tabs defaultActiveTab='1' >
|
<TabPane
|
key='1'
|
title={
|
<span style={{ fontSize: '15px' }}>
|
流转进度
|
</span>
|
}
|
>
|
<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>
|
|
</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' onClick={() => setAssignedVisible(true)}>交办</Button>
|
<Button type='outline' onClick={() => setEscalationVisible(true)}>上报</Button>
|
<Button type='secondary' >返回上级页面</Button>
|
</Space>
|
</div>
|
<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>
|
)
|
}
|
