/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-22 17:02:07
|
* @LastEditTime: 2022-12-02 17:15:30
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 操作Modal
|
*/
|
import React, { useMemo, useState, useEffect } from 'react';
|
import PropTypes from 'prop-types';
|
import { Space } from 'antd';
|
import {
|
MediationWindowClose,
|
mediationWindowModalBg1,
|
mediationWindowModalBg2,
|
mediationWindowModalBg3,
|
mediationWindowModalBg4,
|
} from '../../../assets/images/icon';
|
import { MediateStart, MediationCode, OrderMediation, DocumentMaking, ResultFeedback, ApplyMsg, MediateSetting } from './index';
|
import FilesCheck from '../../filesCheck';
|
import { DisputeMsg } from '../../caseDetail/components';
|
|
/**
|
* visible, // 显隐
|
* actionType, // 操作区别
|
* onClose, // 关闭modal
|
* onStartMediation, // 开始司法确认回调
|
* getDisputeData, // 获取案件信息回调
|
*/
|
const ActionModal = ({ caseId, judicialId, taskId, disputeData, visible, actionType, getDisputeData, onClose, onStartMediation }) => {
|
const [tabActive, setTabActive] = useState();
|
|
// 设置标题
|
const title = useMemo(() => {
|
let str = '标题';
|
if (actionType === 'mediationStart') {
|
str = '开始司法确认';
|
} else if (actionType === 'qrCode') {
|
str = '司法确认邀请码';
|
} else if (actionType === 'orderMediation') {
|
if (tabActive === '1') {
|
str = '预约记录';
|
} else {
|
str = '添加预约';
|
}
|
} else if (actionType === 'documentMaking') {
|
if (tabActive === '22_00018-405') {
|
str = '民事裁定书';
|
} else if (tabActive === '22_00018-401') {
|
str = '问询笔录';
|
} else {
|
str = '送达回证';
|
}
|
} else if (actionType === 'mediationOver') {
|
str = '提交司法确认结果';
|
} else if (actionType === 'materialCheck') {
|
str = '材料查看';
|
} else if (actionType === 'caseCheck') {
|
str = '案件信息';
|
} else if (actionType === 'applyMsg') {
|
str = '司法确认申请信息';
|
} else if (actionType === 'setting') {
|
if (tabActive === '1') {
|
str = '助理/书记员设置';
|
} else {
|
str = '司法确认任务退回';
|
}
|
}
|
return str;
|
}, [actionType, tabActive]);
|
|
// 设置tabs
|
const tabs = useMemo(() => {
|
let arr = [];
|
if (actionType === 'orderMediation') {
|
arr = [
|
{ value: '1', label: '预约记录' },
|
{ value: '2', label: '添加预约' },
|
];
|
} else if (actionType === 'documentMaking') {
|
arr = [
|
{ value: '22_00018-405', label: '民事裁定书' },
|
{ value: '22_00018-401', label: '问询笔录' },
|
{ value: '22_00018-407', label: '送达回证' },
|
];
|
} else if (actionType === 'setting') {
|
arr = [
|
// { value: '1', label: '助理/书记员设置' },
|
{ value: '2', label: '司法确认任务退回' },
|
];
|
}
|
return arr;
|
}, [actionType]);
|
|
// 设置右下角背景
|
const bg = useMemo(() => {
|
let img = mediationWindowModalBg1;
|
if (actionType === 'orderMediation') {
|
img = mediationWindowModalBg2;
|
}
|
if (actionType === 'documentMaking') {
|
img = mediationWindowModalBg3;
|
}
|
if (actionType === 'setting') {
|
img = mediationWindowModalBg4;
|
}
|
return img;
|
}, [actionType]);
|
|
// 修改tab
|
function handleChangeTab(type) {
|
setTabActive(type);
|
}
|
|
useEffect(() => {
|
if (actionType === 'orderMediation') {
|
setTabActive('1');
|
} else if (actionType === 'documentMaking') {
|
setTabActive('22_00018-405');
|
} else if (actionType === 'setting') {
|
setTabActive('2');
|
}
|
}, [actionType]);
|
|
return (
|
<div
|
className={`mediationWindow-modal ${['caseCheck'].includes(actionType) ? 'mediationWindow-modal-fullScreen' : ''} animated faster ${
|
visible ? 'backInUp' : 'backOutDown'
|
}`}
|
>
|
<div className="mediationWindow-modal-close" onClick={onClose}>
|
<MediationWindowClose />
|
</div>
|
{tabs.length !== 0 && (
|
<div className="mediationWindow-modal-left">
|
{tabs.map((x, t) => (
|
<div
|
onClick={() => handleChangeTab(x.value)}
|
className={`mediationWindow-modal-left-tab ${tabActive === x.value ? 'mediationWindow-modal-left-tabActive' : ''}`}
|
key={x.value}
|
>
|
{x.label}
|
</div>
|
))}
|
</div>
|
)}
|
<div className="mediationWindow-modal-right">
|
<div className="mediationWindow-modal-header">
|
<Space align="center">
|
<div className="mediationWindow-modal-header-divider" />
|
<h4>{title}</h4>
|
</Space>
|
</div>
|
{/* 右下角背景 */}
|
<div className="mediationWindow-modal-bg">
|
<img src={bg} alt="" />
|
</div>
|
{/* 开始司法确认 */}
|
{actionType === 'mediationStart' && (
|
<MediateStart
|
onStartMediation={() => {
|
onStartMediation();
|
onClose();
|
}}
|
/>
|
)}
|
{/* 预约司法确认 */}
|
{actionType === 'orderMediation' && (
|
<OrderMediation tabActive={tabActive} onChangeTab={handleChangeTab} getDisputeData={() => getDisputeData('isNoLoading')} />
|
)}
|
{/* 文书制作 */}
|
{actionType === 'documentMaking' && <DocumentMaking tabActive={tabActive} />}
|
{/* 司法确认结束 */}
|
{actionType === 'mediationOver' && <ResultFeedback caseId={caseId} taskId={taskId} disputeData={disputeData} />}
|
{/* 司法确认邀请码 */}
|
{actionType === 'qrCode' && <MediationCode disputeData={disputeData} caseId={caseId} taskId={taskId} />}
|
{/* 案件材料查看 */}
|
{actionType === 'materialCheck' && (
|
<div className="mediationWindow-modal-main" style={{ display: 'flex' }}>
|
<FilesCheck />
|
</div>
|
)}
|
{/* 案件信息查看 */}
|
{actionType === 'caseCheck' && (
|
<div className="mediationWindow-modal-main">
|
<DisputeMsg caseId={caseId} />
|
</div>
|
)}
|
{/* 司法确认申请信息 */}
|
{actionType === 'applyMsg' && <ApplyMsg judicialId={judicialId} />}
|
{/* 其他功能 */}
|
{actionType === 'setting' && <MediateSetting taskId={taskId} disputeData={disputeData} tabActive={tabActive} />}
|
</div>
|
</div>
|
);
|
};
|
|
ActionModal.propTypes = {
|
caseId: PropTypes.string,
|
judicialId: PropTypes.string,
|
taskId: PropTypes.string,
|
disputeData: PropTypes.object,
|
visible: PropTypes.bool,
|
actionType: PropTypes.string,
|
getDisputeData: PropTypes.func,
|
onClose: PropTypes.func,
|
onStartMediation: PropTypes.func,
|
};
|
|
export default ActionModal;
|
