/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-11-10 14:54:21
|
* @LastEditTime: 2022-12-06 18:07:23
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 当事人新增or修改的modal组件
|
*/
|
import React from 'react';
|
import { Button, Input, Empty } from 'dingtalk-design-mobile';
|
import { CloseBoldOutlined, CheckOutlined } from 'dd-icons';
|
import ModalDown from '../../components/ModalDown';
|
import MyTabs from '../../components/MyTabs';
|
import { confirmModal, selectOption, showToast } from '../../utils/utility';
|
import rule from '../../utils/rules';
|
import UploadFile from '../UploadFile';
|
|
const PartyEditModal = ({ titleShow, formData, partyModal, setFormData, setPartyModal, onClose }) => {
|
// 切换当事人 or 代理人
|
function handleChangeTab(value) {
|
if (partyModal.editType === 'edit') {
|
showToast({ content: '不支持修改类型' });
|
return;
|
}
|
setPartyModal({
|
...partyModal,
|
tabActive: value,
|
partyIndex: 0,
|
perClassIndex: 0,
|
data: { ...partyModal.data, perClass: '09_01001-1', perClassName: '自然人', trueName: '', deputy: '', mobile: '', certiNo: '' },
|
});
|
}
|
|
// 切换当事人类型
|
function handleChangePartyType(value, index) {
|
if (partyModal.editType === 'edit') {
|
showToast({ content: '不支持修改类型' });
|
return;
|
}
|
partyModal.data.perClass = value.value;
|
partyModal.data.perClassName = value.label;
|
partyModal.data.trueName = '';
|
partyModal.data.deputy = '';
|
partyModal.perClassIndex = index;
|
setPartyModal({ ...partyModal });
|
}
|
|
// 表单修改
|
function handleChangeValue(key, value) {
|
partyModal.data[key] = value;
|
setPartyModal({ ...partyModal });
|
}
|
|
// 选择代理人
|
function handleSelectAgent(index) {
|
setPartyModal({ ...partyModal, partyIndex: index });
|
}
|
|
// ocr识别回填
|
function OCRsuccessCallback(value) {
|
const { ocrResult } = value;
|
setPartyModal({ ...partyModal, data: { ...partyModal.data, certiNo: ocrResult.idcard, trueName: ocrResult.name } });
|
}
|
|
// 删除申请人
|
function handleDelParty() {
|
confirmModal({
|
title: '申请人删除确认',
|
subtitle: (
|
<>
|
确定删除<span className="public-color">{partyModal.data.trueName}</span>吗？
|
</>
|
),
|
okText: '确定删除',
|
onOk: () => {
|
let type = partyModal.type;
|
let partyIndex = partyModal.partyIndex;
|
if (partyModal.tabActive === '2') {
|
formData[type][partyIndex].agent = null;
|
} else {
|
formData[type].splice(partyIndex, 1);
|
}
|
setFormData({ ...formData });
|
setPartyModal({ visible: false, data: {} });
|
},
|
});
|
}
|
|
// 保存信息
|
function handleSaveParty() {
|
let popupMsg = partyModal;
|
let data = partyModal.data;
|
|
// 信息校验
|
let msg = null;
|
let arr = formData[popupMsg.type === 'plaintiffList' ? 'defendantList' : 'plaintiffList'];
|
let arr2 = formData[popupMsg.type];
|
forEach: for (let t = 0; t < arr.length; t++) {
|
if (arr[t].certiNo === data.certiNo && rule.verifyEmpty(data.certiNo)) {
|
msg = '申请人与被申请人不能相同';
|
break forEach;
|
}
|
}
|
forEach: for (let t = 0; t < arr2.length; t++) {
|
if (arr2[t].certiNo === data.certiNo && rule.verifyEmpty(data.certiNo) && arr2[t].perClass === data.perClass && t !== popupMsg.partyIndex) {
|
msg = (popupMsg.type === 'defendantList' ? '被' : '') + '申请人不能重复';
|
break forEach;
|
}
|
}
|
// 被申请人可不需要手机号码，申请人和代理人需要
|
if (
|
(data.mobile && !rule.phone(data.mobile) && popupMsg.type === 'defendantList') ||
|
(!rule.phone(data.mobile) && popupMsg.type === 'plaintiffList') ||
|
(!rule.phone(data.mobile) && popupMsg.tabActive === '2')
|
) {
|
msg = '请输入正确的手机号码';
|
}
|
if (!rule.verifyEmpty(data.trueName) || (data.perClass !== '09_01001-1' && !rule.verifyEmpty(data.deputy))) {
|
msg = `请补充${popupMsg.type === 'defendantList' ? '被' : ''}申请人方的${popupMsg.tabActive === '1' ? '当事人' : '代理人'}信息`;
|
}
|
if (msg) {
|
showToast({ content: msg });
|
return;
|
}
|
if (popupMsg.tabActive === '2' && typeof popupMsg.partyIndex !== 'number') {
|
showToast({ content: '请选择代理对象' });
|
return;
|
}
|
if (popupMsg.tabActive === '2' && arr2[popupMsg.partyIndex]?.certiNo === data.certiNo) {
|
showToast({ content: '代理人与当事人不能相同' });
|
return;
|
}
|
|
let type = popupMsg.type;
|
if (popupMsg.tabActive === '2') {
|
formData[type][popupMsg.partyIndex] = { ...formData[type][popupMsg.partyIndex] };
|
formData[type][popupMsg.partyIndex].agent = { ...formData[type][popupMsg.partyIndex].agent, ...data };
|
} else {
|
if (popupMsg.editType === 'add') {
|
formData[type] = [...formData[type], data];
|
} else {
|
formData[type][popupMsg.partyIndex] = { ...formData[type][popupMsg.partyIndex], ...data };
|
}
|
}
|
setFormData({ ...formData });
|
setPartyModal({ visible: false, data: {} });
|
}
|
|
return (
|
<ModalDown
|
visible={partyModal.visible}
|
headContent
|
isAction={false}
|
visibleOnClick={onClose}
|
extraContent={
|
<div className={partyModal.tabActive === '1' ? 'mediateRegister-partyModal' : ''}>
|
<div className="mediateRegister-partyModal-header">
|
<div>
|
{partyModal.editType === 'add' ? '增加' : '修改'}
|
{partyModal.type === 'plaintiffList' ? '申请人' : '被申请人'}
|
</div>
|
<CloseBoldOutlined onClick={onClose} />
|
</div>
|
<div className="mediateRegister-partyModal-tabs">
|
<MyTabs
|
tabs={[
|
{ key: '1', title: '当事人' },
|
{ key: '2', title: '代理人' },
|
]}
|
activeKey={partyModal.tabActive}
|
onChange={handleChangeTab}
|
/>
|
</div>
|
{partyModal.tabActive === '1' && (
|
<div className="mediateRegister-partyModal-tabsCard">
|
{selectOption.personClass.map((x, t) => (
|
<div
|
key={x.value}
|
className={`mediateRegister-partyModal-tabsCard-item ${
|
x.value === partyModal.data.perClass ? 'mediateRegister-partyModal-tabsCard-item-active' : ''
|
}`}
|
>
|
<div
|
onClick={() => handleChangePartyType(x, t)}
|
className="mediateRegister-partyModal-tabsCard-item-bg"
|
style={{
|
borderBottomLeftRadius: t === partyModal.perClassIndex + 1 ? '10px' : '0',
|
borderBottomRightRadius: t === partyModal.perClassIndex - 1 ? '10px' : '0',
|
}}
|
>
|
{x.label}
|
</div>
|
</div>
|
))}
|
</div>
|
)}
|
<div className="mediateRegister-partyModal-form">
|
<div className="mediateRegister-formItem2">
|
<div className="mediateRegister-formTitle">{(titleShow[partyModal.data.perClass] || [])[1]}</div>
|
<div className="public-tag4">必填</div>
|
<div className="mediateRegister-formItem2-flex">
|
<Input
|
value={partyModal.data.trueName}
|
onChange={(value) => handleChangeValue('trueName', value)}
|
placeholder={`填写${(titleShow[partyModal.data.perClass] || [])[2]}`}
|
clear
|
/>
|
</div>
|
</div>
|
{partyModal.data.perClass !== '09_01001-1' && partyModal.tabActive === '1' && (
|
<div className="mediateRegister-formItem2">
|
<div className="mediateRegister-formTitle">{(titleShow[partyModal.data.perClass] || [])[3]}</div>
|
<div className="public-tag4">必填</div>
|
<div className="mediateRegister-formItem2-flex">
|
<Input value={partyModal.data.deputy} onChange={(value) => handleChangeValue('deputy', value)} placeholder="填写真实姓名" clear />
|
</div>
|
</div>
|
)}
|
<div className="mediateRegister-formItem2">
|
<div className="mediateRegister-formTitle">手机号码</div>
|
{(partyModal.type === 'plaintiffList' || partyModal.tabActive === '2') && <div className="public-tag4">必填</div>}
|
<div className="mediateRegister-formItem2-flex">
|
<Input
|
value={partyModal.data.mobile}
|
onChange={(value) => handleChangeValue('mobile', value)}
|
placeholder="填写常用手机号码"
|
inputMode="tel"
|
clear
|
/>
|
</div>
|
</div>
|
<div className="mediateRegister-formItem2">
|
<div className="mediateRegister-formTitle">身份证号码</div>
|
<div className="mediateRegister-formItem2-flex">
|
<Input
|
value={partyModal.data.certiNo}
|
onChange={(value) => handleChangeValue('certiNo', value)}
|
placeholder="调解实名规定需填写"
|
clear
|
/>
|
</div>
|
<UploadFile OCRshow capture="camera" onSuccessCallback={OCRsuccessCallback}>
|
<div className="public-rightBorder public-color">拍照填写</div>
|
</UploadFile>
|
</div>
|
{/* 代理人 - 代理对象 */}
|
{partyModal.tabActive === '2' && (
|
<div className="mediateRegister-formItem">
|
<div className="mediateRegister-formItem-label">
|
<div className="mediateRegister-formTitle">代理对象</div>
|
<div className="public-tag4">必填</div>
|
</div>
|
<div className="mediateRegister-partyModal-agent">
|
{formData[partyModal.type]?.map((x, t) => (
|
<div
|
onClick={() => handleSelectAgent(t)}
|
className={`mediateRegister-partyModal-agent-item ${
|
t === partyModal.partyIndex ? 'mediateRegister-partyModal-agent-itemActive' : ''
|
}`}
|
key={t}
|
>
|
<div>{x.trueName}</div>
|
{t === partyModal.partyIndex && <CheckOutlined />}
|
</div>
|
))}
|
{!formData[partyModal.type]?.length && (
|
<div>
|
<Empty type="noContent" title="尚未添加当事人" inline />
|
</div>
|
)}
|
</div>
|
</div>
|
)}
|
</div>
|
<div className="mediateRegister-partyModal-btn">
|
{partyModal.editType === 'edit' && (
|
<Button onClick={handleDelParty} type="danger" style={{ width: '120px', marginRight: '24px' }}>
|
删除
|
</Button>
|
)}
|
<Button onClick={handleSaveParty} type="primary" style={{ flex: 1 }}>
|
保存信息
|
</Button>
|
</div>
|
</div>
|
}
|
/>
|
);
|
};
|
|
export default PartyEditModal;
|
