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 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 [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 (
|
<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' 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>
|
</Fragment>
|
)
|
}
|
