import React, { useState, useRef, useEffect, Fragment, useMemo } from 'react';
|
import { Button, Modal, Tabs, Badge, Steps, Message } 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';
|
import NotEntertained from './NotEntertained';
|
|
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 });
|
}
|
|
function submitDispute(data) {
|
return $$.ax.request({ url: `caseInfo/caseRegister`, type: 'post', service: 'mediate', data });
|
}
|
|
function submitCaseCancel(data) {
|
return $$.ax.request({ url: `casedata/cancel-case`, type: 'post', serviceType: 'thrid', service: 'sys', data });
|
}
|
|
function getCaseInfoApi(id) {
|
return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' });
|
}
|
// 删除已结案数据
|
function deleteCaseInfoByIdApi(data) {
|
return $$.ax.request({ url: `caseInfo/deleteCaseById`, 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) {
|
Message.success({
|
content: (
|
<div className="myMessageBox">
|
<div className="messageTop">受理成功</div>
|
<div className="messageBottom">请及时跟进办理</div>
|
</div>
|
),
|
showIcon: true,
|
className: 'acro-myMessage',
|
position: 'bottom',
|
});
|
navigate(`/mediate/visit/handleFeedback?caseTaskId=${res.data}&caseId=${props.caseId}&moutedTab=sxbl`);
|
}
|
},
|
});
|
},
|
key: 'sl',
|
},
|
{
|
label: '自行受理',
|
type: 'primary',
|
click: () => {
|
Modal.confirm({
|
title: '自行受理确认',
|
content: '确定自行受理吗？',
|
onOk: () => {
|
handleSelfAccet();
|
},
|
});
|
},
|
key: 'zxsl',
|
},
|
{
|
label: '交办',
|
type: 'outline',
|
click: () => setAssignedVisible(true),
|
key: 'jb',
|
},
|
{
|
label: '上报',
|
type: 'outline',
|
click: () => setEscalationVisible(true),
|
key: 'sb',
|
},
|
{
|
label: '回退',
|
type: 'outline',
|
click: () => setBackVisible(true),
|
key: 'ht',
|
status: 'danger',
|
},
|
{
|
label: '不予受理',
|
type: 'outline',
|
click: () => {
|
// if (detailData?.canal === '22_00001-4') {
|
// Message.warning('该案件不能不予受理');
|
// return;
|
// }
|
setNotVisible(true);
|
},
|
key: 'bysl',
|
status: 'danger',
|
},
|
{
|
label: '处理',
|
type: 'primary',
|
click: () => {
|
navigate(`/mediate/visit/eventFlow?caseTaskId=${props.caseTaskId}&caseId=${props.caseId}`);
|
},
|
key: 'xqcl',
|
},
|
{
|
label: '处理',
|
type: 'primary',
|
click: () => {
|
switch (props.moutedTab) {
|
case 'sxbl':
|
navigate(`/mediate/visit/handleFeedback?caseTaskId=${props.caseTaskId}&caseId=${props.caseId}&moutedTab=sxbl`);
|
break;
|
case 'htsh':
|
navigate(`/mediate/visit/eventFlow?caseTaskId=${props.caseTaskId}&caseId=${props.caseId}&moutedTab=htsh`);
|
break;
|
case 'sbsh':
|
navigate(`/mediate/visit/eventFlow?caseTaskId=${props.caseTaskId}&caseId=${props.caseId}&moutedTab=sbsh`);
|
break;
|
case 'jash':
|
navigate(`/mediate/visit/closingReview?caseTaskId=${props.caseTaskId}&caseId=${props.caseId}&moutedTab=jash`);
|
break;
|
case 'lhczsh':
|
navigate(`/mediate/visit/handleFeedback?caseTaskId=${props.caseTaskId}&caseId=${props.caseId}&moutedTab=lhczsh`);
|
break;
|
default:
|
break;
|
}
|
},
|
key: 'tabcl',
|
},
|
{
|
label: '拒收',
|
type: 'outline',
|
click: () => {
|
Modal.confirm({
|
title: '拒收确认',
|
content: '确定拒收吗？',
|
onOk: () => {
|
handleCaseCancel();
|
},
|
});
|
},
|
key: 'js',
|
status: 'danger',
|
},
|
];
|
|
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({});
|
const [notVisible, setNotVisible] = useState(false); //不予受理弹窗控制
|
const [detailData, setDetailData] = 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;
|
})
|
.map((item) => {
|
const data = buttonList.find((res) => res.id == item.key);
|
return {
|
...item,
|
label: data.name,
|
};
|
})
|
);
|
}
|
}, [props.authorData, detailData]);
|
|
useEffect(() => {
|
getData();
|
getCaseInfo(props.caseId);
|
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);
|
}
|
};
|
|
//获取详情数据
|
const getCaseInfo = async (id) => {
|
const res = await getCaseInfoApi(id);
|
if (res.type) {
|
setDetailData(res.data);
|
}
|
};
|
|
//自行受理
|
const handleSelfAccet = async () => {
|
const res = await submitDispute({
|
...detailData,
|
isSelfAccept: 1,
|
isDraft: 0,
|
operateType: 0,
|
});
|
if (res.type) {
|
navigate(`/mediate/visit/handleFeedback?caseTaskId=${res.data}&caseId=${props.caseId}&moutedTab=sxbl`);
|
}
|
};
|
|
//拒收案件
|
const handleCaseCancel = async () => {
|
const res = await submitCaseCancel({
|
ids: [props.caseId],
|
userId: $$.getSessionStorage('customerSystemUser')?.userId,
|
});
|
console.log('res', res);
|
if (res.type) {
|
const deleteRes = await deleteCaseInfoByIdApi({ id: props.caseId });
|
if (deleteRes.type) {
|
Message.success('拒收成功');
|
navigate(`/mediate/visit/handleFeedback?caseTaskId=${res.data}&caseId=${props.caseId}&moutedTab=sxbl`);
|
}
|
}
|
};
|
|
return (
|
<Fragment>
|
<div className="dataSync">
|
<Scrollbars style={{ height: height }} ref={scrollRef} autoHide>
|
{props.authorType != 'sxxq' && (
|
<div style={{ backgroundColor: '#fff', margin: '0 16px 8px 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>
|
)}
|
|
<MatterDetail listFeedback={props.listFeedback} caseId={props.caseId} detailData={detailData} windowDetail={props.windowDetail} gridDetail={props.gridDetail} />
|
|
{props.authorType != 'sxxq' && (
|
<div className="dataSync-hasTabPage" style={{ marginTop: '-8px' }}>
|
<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 caseId={props.caseId} />
|
</div>
|
</TabPane>
|
</Tabs>
|
</div>
|
)}
|
<div style={{ height: '64px', marginTop: '-16px' }}></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>
|
<Modal
|
title={detailData.canalSecond === '22_00003-1' ? '回退' : '不予受理'}
|
visible={notVisible}
|
onOk={() => setNotVisible(false)}
|
onCancel={() => {
|
setNotVisible(false);
|
}}
|
footer={null}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<NotEntertained
|
caseId={props.caseId}
|
caseTaskId={props.caseTaskId}
|
canalSecond={detailData.canalSecond}
|
onCancel={() => {
|
setNotVisible(false);
|
}}
|
/>
|
</Modal>
|
{(!props?.windowDetail && !props?.gridDetail) && (
|
<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>
|
);
|
}
|
