/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-22 17:02:07
|
* @LastEditTime: 2023-12-14 16:05:13
|
* @LastEditors: lwh
|
* @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 { ai_1, ai_2, ai_3, ai_4 } from '../../../assets/images/AIImg';
|
import { MediateStart, MediationCode, OrderMediation, DocumentMaking, ResultFeedback, MediateSetting, MediateRatio, CreateAgreement } from './index';
|
import FilesCheck from '../../filesCheck';
|
import { DisputeMsg } from '../../caseDetail/components';
|
import CasePerfection from '../../disputeRegistration/casePerfection';
|
|
/**
|
* visible, // 显隐
|
* actionType, // 操作区别
|
* onClose, // 关闭modal
|
* onStartMediation, // 开始调解回调
|
* getDisputeData, // 获取案件信息回调
|
*/
|
const ActionModal = ({ caseId, taskId, guideInfoId, guideId, 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-301') {
|
str = '调解笔录';
|
} else {
|
str = '调解协议书';
|
}
|
} else if (actionType === 'mediationOver') {
|
str = '提交调解结果';
|
} else if (actionType === 'materialCheck') {
|
str = '材料查看';
|
} else if (actionType === 'caseCheck') {
|
str = '案件信息';
|
} else if (actionType === 'caseChange') {
|
str = '案件修改';
|
} else if (actionType === 'ratio') {
|
str = '案例对比';
|
} else if (actionType === 'createAgreement') {
|
str = '调解协议书';
|
} else if (actionType === 'setting') {
|
if (tabActive === '1') {
|
str = '调解任务退回';
|
}
|
if (tabActive === '2') {
|
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-301', label: '调解笔录' },
|
{ value: '22_00018-302', label: '调解协议书' },
|
];
|
} else if (actionType === 'createAgreement') {
|
arr = [
|
{ value: '22_00018-301', label: '调解笔录' },
|
{ value: '22_00018-302', 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-301');
|
} else if (actionType === 'createAgreement') {
|
setTabActive('22_00018-302');
|
}
|
else if (actionType === 'setting') {
|
setTabActive('1');
|
}
|
}, [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">
|
{actionType === 'ratio' ?
|
<div style={{ borderBottom: 'none', margin: '0 16px' }} className="mediationWindow-modal-header">
|
<Space align="center">
|
<div style={{ width: '16px', height: '16px', display: 'flex', alignItems: 'center' }}><img style={{ width: '100%', height: '100%' }} src={ai_1} alt="" srcset="" /></div>
|
<h4>{title}</h4>
|
</Space>
|
</div> :
|
<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
|
caseId={caseId}
|
onStartMediation={() => {
|
onStartMediation();
|
onClose();
|
}}
|
/>
|
)}
|
{/* 预约调解 */}
|
{actionType === 'orderMediation' && (
|
<OrderMediation caseId={caseId} tabActive={tabActive} onChangeTab={handleChangeTab} getDisputeData={() => getDisputeData('isNoLoading')} />
|
)}
|
{/* 文书制作 */}
|
{actionType === 'documentMaking' && <DocumentMaking caseId={caseId} tabActive={tabActive} />}
|
|
{actionType === 'createAgreement' && <CreateAgreement caseId={caseId} tabActive={tabActive} />}
|
|
{/* 调解结束 */}
|
{actionType === 'mediationOver' && <ResultFeedback caseId={caseId} taskId={taskId} disputeData={disputeData} />}
|
{/* 调解邀请码 */}
|
{actionType === 'qrCode' && <MediationCode caseId={caseId} disputeData={disputeData} />}
|
{/* 案件材料查看 */}
|
{actionType === 'materialCheck' && (
|
<div className="mediationWindow-modal-main" style={{ display: 'flex' }}>
|
<FilesCheck caseId={caseId} />
|
</div>
|
)}
|
{/* 案件信息查看 */}
|
{actionType === 'caseCheck' && (
|
<div className="mediationWindow-modal-main">
|
<DisputeMsg caseId={caseId} />
|
</div>
|
)}
|
{/* 案件信息修改 / 补充材料 */}
|
{actionType === 'caseChange' && (
|
<div className="mediationWindow-modal-main" style={{ padding: 0 }}>
|
<CasePerfection
|
isMediationWindow
|
onSuccessSubmit={() => {
|
getDisputeData('isNoLoading');
|
onClose();
|
}}
|
/>
|
</div>
|
)}
|
|
{/* 案例对比 */}
|
{actionType === 'ratio' && <MediateRatio caseId={caseId} guideInfoId={guideInfoId} guideId={guideId} />}
|
{/* 其他功能 */}
|
{actionType === 'setting' && <MediateSetting tabActive={tabActive} caseId={caseId} taskId={taskId} disputeData={disputeData} />}
|
</div>
|
</div>
|
);
|
};
|
|
ActionModal.propTypes = {
|
caseId: PropTypes.string,
|
disputeData: PropTypes.object,
|
visible: PropTypes.bool,
|
actionType: PropTypes.string,
|
getDisputeData: PropTypes.func,
|
onClose: PropTypes.func,
|
onStartMediation: PropTypes.func,
|
};
|
|
export default ActionModal;
|
