/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-07 15:01:47
|
* @LastEditTime: 2023-05-12 20:23:33
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 当事人新增，修改
|
*/
|
import React, { useEffect, useState, useImperativeHandle } from 'react';
|
import PropTypes from 'prop-types';
|
import { Button, Form, Row, Col, Select, Input, Radio, InputNumber, Typography, Switch, Space, Upload } from 'antd';
|
import {
|
DownOutlined,
|
IdcardOutlined,
|
CheckOutlined,
|
SelectOutlined,
|
UserOutlined,
|
PhoneOutlined,
|
EnvironmentOutlined,
|
BankOutlined,
|
} from '@ant-design/icons';
|
import './index.less';
|
import {
|
caseperfection_person,
|
caseperfection_person_active,
|
caseperfection_legal,
|
caseperfection_legal_active,
|
caseperfection_organize,
|
caseperfection_organize_active,
|
} from '../../assets/images/icon';
|
import * as $$ from '../../utils/utility';
|
import FilesTable from '../FilesTable';
|
import MyUpload from '../MyUpload';
|
import MyModal from '../MyModal';
|
import TableView from '../TableView';
|
|
const { Option } = Select;
|
|
const { Search } = Input;
|
|
// 获取历史申请人数据
|
function getPartyHistoryDataApi() {
|
return $$.ax.request({ url: 'caseInfo/pcCasePerson', type: 'get', service: 'mediate' });
|
}
|
|
/**
|
* partyType, // applicant: 申请人; respondent: 被申请人
|
* editType, // 'add': 新增; 'change': 修改
|
* partyEditRef, 组件ref用于将子组件的方法提供给父组件调用，此处父组件调用子组件的表单保存方法
|
* data, // 当事人数据
|
* handleSetPartyData, // 表单数据提交
|
* handleDeleteParty, // 删除当事人
|
*/
|
const PartyEdit = ({ partyType, editType, partyEditRef = null, data, handleSetPartyData, handleDeleteParty }) => {
|
const [form] = Form.useForm();
|
|
const [agentForm] = Form.useForm();
|
|
// formData
|
const [formData, setFormData] = useState({});
|
|
// 更多信息
|
const [moreMsg, setMoreMsg] = useState(true);
|
|
const [moreMsgAgent, setMoreMsgAgent] = useState(true);
|
|
// 历史申请人
|
const [partyModal, setPartyModal] = useState({ visible: false });
|
|
const columns = [
|
{
|
title: '类型',
|
dataIndex: 'perClassName',
|
},
|
{
|
title: '姓名/企业、机构名称',
|
dataIndex: 'trueName',
|
},
|
{
|
title: '证件号码',
|
dataIndex: 'certiNo',
|
render: (text) => (text ? `${text?.substring(0, 6)}********${text?.substring(14)}` : '-'),
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
align: 'center',
|
width: 50,
|
render: (_, record) => <Typography.Link onClick={() => choosePartyHistory(record)}>选择</Typography.Link>,
|
},
|
];
|
|
// 开启or关闭历史申请人选择
|
async function handlePartyModal(type, personType) {
|
if (type === 'open') {
|
setPartyModal({ visible: true });
|
global.setSpinning(true);
|
const res = await getPartyHistoryDataApi();
|
global.setSpinning(false);
|
if (res.type) {
|
setPartyModal({ visible: true, data: res.data || [], copyData: res.data || [], personType });
|
} else {
|
setPartyModal({ visible: true });
|
}
|
} else {
|
setPartyModal({ visible: false });
|
}
|
}
|
|
// 搜索历史申请人
|
function handleSearch(value) {
|
let result = partyModal.copyData.filter((item) => item.trueName.indexOf(value) !== -1);
|
setPartyModal({ ...partyModal, data: result });
|
}
|
|
// 选择历史申请人
|
function choosePartyHistory(value) {
|
let formDataCopy = JSON.parse(JSON.stringify(formData)),
|
data = partyModal.personType === 'agent' ? formDataCopy.agent : formDataCopy,
|
valueType = value.type === '1' ? 'party' : 'agent';
|
if (partyModal.personType !== valueType) {
|
// 代理人与申请人共用同一字段但内容不一，此做处理
|
value.perClass = partyModal.personType === 'party' ? $$.options.personClass[0].value : undefined;
|
value.perClassName = partyModal.personType === 'party' ? $$.options.personClass[0].label : undefined;
|
}
|
data = {
|
...data,
|
certiNo: value.certiNo,
|
certiType: value.certiType,
|
certiTypeName: value.certiTypeName,
|
fileInfoList: value.files,
|
mobile: value.mobile,
|
perClass: value.perClass,
|
perClassName: value.perClassName,
|
trueName: value.trueName,
|
deputy: value.deputy,
|
};
|
if (partyModal.personType === 'party') {
|
form.setFieldsValue(data);
|
} else {
|
agentForm.setFieldsValue(data);
|
}
|
setFormData(partyModal.personType === 'agent' ? { ...formDataCopy, agent: data } : data);
|
setPartyModal({ visible: false });
|
}
|
|
// 身份证识别ocr
|
const draggerProps = (type) => {
|
return {
|
name: 'file',
|
accept: '.png,.jpg,.jpeg',
|
action: `${$$.appUrl.fileUrl}/${$$.appUrl.sys}/api/v1/fileInfo/recognition`,
|
headers: { Authorization: $$.getSessionStorage('customerSystemToken') },
|
showUploadList: false,
|
onChange: (info) => {
|
let { response, status, percent } = info.file;
|
if (status === 'uploading' && percent === 0) $$.info({ type: 'loading', content: '识别中...', duration: 0 });
|
if (status === 'error') $$.info({ type: 'error', content: '抱歉，网络错误附件上传失败，请稍后重试' });
|
if (status === 'done') {
|
if (response.code === 0 || response === '0') {
|
// 返回附件成功上传的回调
|
let ocrResult = response.data.ocrResult;
|
let formDataCopy = JSON.parse(JSON.stringify(formData));
|
let data = type === 'agent' ? formDataCopy.agent : formDataCopy;
|
if (type === 'party' && data.perClassName !== '自然人') {
|
data.deputy = ocrResult.trueName;
|
} else {
|
data.trueName = ocrResult.trueName;
|
}
|
data.certiNo = ocrResult.certificateNumber;
|
data.certiType = ocrResult.certificateType;
|
data.certiTypeName = ocrResult.certificateTypeName;
|
data.addr = ocrResult.sendAddress;
|
data.sexName = ocrResult.sex;
|
data.sex = ocrResult.sex === '男' ? '09_00003-1' : '09_00003-2';
|
if (type === 'party') {
|
data.nationName = ocrResult.nation;
|
for (let i = 0; i <= $$.options.nation.length; i++) {
|
if ($$.options.nation[i].label === ocrResult.nation) {
|
data.nation = $$.options.nation[i].value;
|
break;
|
}
|
}
|
form.setFieldsValue({ ...data });
|
} else {
|
agentForm.setFieldsValue({ ...data });
|
}
|
setFormData(formDataCopy);
|
$$.infoSuccess({ content: '身份证识别成功' });
|
} else {
|
$$.info({ type: 'error', content: response.msg });
|
}
|
}
|
},
|
};
|
};
|
|
// 删除附件
|
function handleDeleteFile(data, index, key) {
|
data.splice(index, 1);
|
handleChangeInput('fileInfoList', { key, files: data });
|
}
|
|
// 表单修改
|
function handleChangeInput(key, value, type) {
|
let formDataCopy = JSON.parse(JSON.stringify(formData));
|
if (type === 'agent') {
|
if (key === 'fileInfoList') {
|
formDataCopy.agent.fileInfoList = formDataCopy.agent.fileInfoList || [];
|
setFormDataFiles(formDataCopy.agent.fileInfoList, value);
|
} else {
|
formDataCopy.agent[key] = value;
|
}
|
setFormData(formDataCopy);
|
} else {
|
if (key === 'fileInfoList') {
|
formDataCopy.fileInfoList = formDataCopy.fileInfoList || [];
|
setFormDataFiles(formDataCopy.fileInfoList, value);
|
} else if (key === 'perClassName') {
|
// 切换当事人类型
|
if (editType === 'change') {
|
$$.info({ type: 'warning', content: '不支持修改类型' });
|
return;
|
}
|
formDataCopy.perClass = value.value;
|
formDataCopy.perClassName = value.label;
|
formDataCopy.deputy = '';
|
form.setFieldsValue({ trueName: '', deputy: '' });
|
} else {
|
formDataCopy[key] = value;
|
if (key === 'agentStatus') {
|
// 选择代理人时
|
agentForm.resetFields();
|
agentForm.setFieldsValue({
|
...formDataCopy.agent,
|
sex: formDataCopy.agent.sex || $$.options.sex[0].value,
|
certiType: formDataCopy.agent.certiType || $$.options.cardType[0].value,
|
agentType: formDataCopy.agent.agentType || $$.options.agentType[0].value,
|
});
|
formDataCopy.agent = {
|
...formDataCopy.agent,
|
sexName: formDataCopy.agent.sexName || $$.options.sex[0].label,
|
certiTypeName: formDataCopy.agent.certiTypeName || $$.options.cardType[0].label,
|
agentTypeName: formDataCopy.agent.agentTypeName || $$.options.agentType[0].label,
|
};
|
}
|
}
|
setFormData(formDataCopy);
|
}
|
}
|
|
// 填充附件
|
function setFormDataFiles(values, value) {
|
if (values.length === 0) {
|
values.push({ ownerType: value.key, fileList: value.files });
|
} else {
|
let isHave = false;
|
values.forEach((x) => {
|
if (x.ownerType === value.key) {
|
x.fileList = value.files;
|
isHave = true;
|
}
|
});
|
if (!isHave) {
|
values.push({ ownerType: value.key, fileList: value.files });
|
}
|
}
|
}
|
|
// 点击保存提交form
|
function handleClickPartySave() {
|
form.submit();
|
}
|
|
useImperativeHandle(partyEditRef, () => {
|
return {
|
handleClickPartySave: handleClickPartySave,
|
formData: formData,
|
};
|
});
|
|
// 初始化
|
useEffect(() => {
|
form.resetFields();
|
let normalObj = {
|
certiType: data.certiType || $$.options.cardType[0].value,
|
certiTypeName: data.certiTypeName || $$.options.cardType[0].label,
|
sex: data.sex || $$.options.sex[0].value,
|
sexName: data.sexName || $$.options.sex[0].label,
|
};
|
form.setFieldsValue({ ...data, ...normalObj, nation: data.nation || $$.options.nation[0].value });
|
let obj = {
|
agentStatus: '1',
|
...data,
|
...normalObj,
|
perClass: data.perClass || $$.options.personClass[0].value,
|
perClassName: data.perClassName || $$.options.personClass[0].label,
|
nationName: data.nationName || $$.options.nation[0].label,
|
};
|
if (!obj.agent) obj.agent = { id: $$.getBusinessId() };
|
if (obj.agentStatus === '2') {
|
agentForm.setFieldsValue({ ...obj.agent, ...normalObj, agentType: obj.agent.agentType || $$.options.agentType[0].value });
|
obj.agent = { ...obj.agent, ...normalObj, agentTypeName: obj.agent.agentTypeName || $$.options.agentType[0].label };
|
}
|
setFormData(obj);
|
}, [data, form, agentForm]);
|
|
// 类型icon
|
const personIconType = (type) => {
|
if (type === '09_01001-1') {
|
return [caseperfection_person, caseperfection_person_active];
|
} else if (type === '09_01001-2') {
|
return [caseperfection_legal, caseperfection_legal_active];
|
} else {
|
return [caseperfection_organize, caseperfection_organize_active];
|
}
|
};
|
|
// 填写内容区分 自然人 法人 非法人组织
|
const formType = (type) => {
|
const personFiles = formData.fileInfoList?.filter((item) => item.ownerType === '22_00018-202')[0]?.fileList || [];
|
|
const orangeOne = formData.fileInfoList?.filter((item) => item.ownerType === '22_00018-204')[0]?.fileList || [];
|
|
const orangeTwo = formData.fileInfoList?.filter((item) => item.ownerType === '22_00018-203')[0]?.fileList || [];
|
|
if (type === '09_01001-1') {
|
return (
|
<>
|
<Col span={24} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
<Form.Item
|
label={
|
<span>
|
当事人信息<span className="leftRequired">*</span>
|
</span>
|
}
|
name="trueName"
|
rules={[{ required: true, message: '请输入当事人信息' }]}
|
style={{ marginRight: '16px', width: 120 }}
|
>
|
<Input placeholder="当事人姓名" prefix={<UserOutlined />} />
|
</Form.Item>
|
<Form.Item
|
className="partyEdit-right"
|
label={
|
<Button onClick={() => handlePartyModal('open', 'party')} type="link" size="small">
|
选择历史
|
</Button>
|
}
|
name="mobile"
|
rules={[{ required: false, pattern: $$.mobileRegExp, message: '请输入正确的手机号码' }]}
|
style={{ flex: 1 }}
|
>
|
<Input placeholder="请输入联系电话" allowClear prefix={<PhoneOutlined style={{ transform: 'rotate(90deg)' }} />} />
|
</Form.Item>
|
</Col>
|
<Col span={24} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
<Form.Item
|
label={<span>证件信息{partyType === 'applicant' && <span className="leftRequired">*</span>}</span>}
|
name="certiType"
|
style={{ marginRight: '16px' }}
|
>
|
<Select
|
placeholder="请选择"
|
allowClear
|
onChange={(_, option) => handleChangeInput('certiTypeName', option?.children)}
|
style={{ width: 120 }}
|
>
|
{$$.options.cardType.map((x, t) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
<Form.Item
|
className="partyEdit-right"
|
label={
|
<Upload {...draggerProps('party')}>
|
<Button type="link" size="small">
|
上传证件识别
|
</Button>
|
</Upload>
|
}
|
name="certiNo"
|
rules={[{ required: partyType != 'applicant' ? false : data.certiType == '09_00015-17' ? true : false, message: '请输入完整有效的证件号码' }]}
|
style={{ flex: 1 }}
|
>
|
<Input placeholder="请输入完整有效的证件号码" allowClear prefix={<IdcardOutlined />} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Typography.Link onClick={() => setMoreMsg(!moreMsg)}>
|
<DownOutlined style={{ fontSize: 12, marginRight: 4, transform: moreMsg ? 'rotate(-180deg)' : '' }} />
|
<span>{moreMsg ? '折叠' : '展开'}更多信息</span>
|
</Typography.Link>
|
</Col>
|
{moreMsg && (
|
<>
|
<Col span={12}>
|
<Form.Item label="职业" name="job">
|
<Select placeholder="请选择" allowClear onChange={(_, option) => handleChangeInput('jobName', option?.children)}>
|
{$$.options.job.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="民族" name="nation">
|
<Select placeholder="请选择" showSearch allowClear onChange={(_, option) => handleChangeInput('nationName', option?.children)}>
|
{$$.options.nation.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="年龄" name="age">
|
<InputNumber placeholder="请输入" addonAfter={<span>岁</span>} min={1} />
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="性别" name="sex">
|
<Radio.Group onChange={(e) => handleChangeInput('sexName', e.target.value === '09_00003-1' ? '男' : '女')}>
|
{$$.options.sex.map((x, t) => (
|
<Radio value={x.value} key={t}>
|
{x.label}
|
</Radio>
|
))}
|
</Radio.Group>
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="现住址" name="addr">
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
</>
|
)}
|
<Col span={24}>
|
<h5>身份证明材料</h5>
|
<FilesTable
|
isList={true}
|
isCheck={false}
|
data={personFiles}
|
description={'尚未上传身份证明材料'}
|
handleSuccessDelFile={(_, index) => handleDeleteFile(personFiles, index, '22_00018-202')}
|
/>
|
<div style={{ marginTop: '12px' }}>
|
<MyUpload
|
fileId={formData.id}
|
fileType="22_00018-202"
|
showFileList={false}
|
fileList={personFiles}
|
handleChangeFile={(_, info) => handleChangeInput('fileInfoList', { key: '22_00018-202', files: info.fileList })}
|
/>
|
</div>
|
</Col>
|
</>
|
);
|
} else {
|
let str = type === '09_01001-2' ? ['法人', '法定代表人', '企业'] : ['机构代表人', '机构代表人', '机构'];
|
return (
|
<>
|
<Col span={24} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
<Form.Item
|
label={
|
<span>
|
当事人信息<span className="leftRequired">*</span>
|
</span>
|
}
|
name="trueName"
|
rules={[{ required: true, message: '请输入当事人信息' }]}
|
style={{ marginRight: '16px', flex: 1 }}
|
>
|
<Input placeholder={str[2] + '名称'} prefix={<BankOutlined />} />
|
</Form.Item>
|
<Form.Item
|
className="partyEdit-right"
|
label={
|
<Button onClick={() => handlePartyModal('open', 'party')} type="link" size="small" >
|
选择历史
|
</Button>
|
}
|
name="addr"
|
style={{ flex: 1 }}
|
>
|
<Input placeholder="请输入经营地址" allowClear prefix={<EnvironmentOutlined />} />
|
</Form.Item>
|
</Col>
|
<Col span={24} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
<Form.Item
|
label={
|
<span>
|
{str[0]}信息<span className="leftRequired">*</span>
|
</span>
|
}
|
name="deputy"
|
rules={[{ required: true, message: '请输入' + str[1] + '姓名' }]}
|
style={{ marginRight: '16px', flex: 1 }}
|
>
|
<Input placeholder={str[1] + '姓名'} allowClear prefix={<UserOutlined />} />
|
</Form.Item>
|
<Form.Item
|
label=" "
|
name="mobile"
|
rules={[{ required: false, pattern: $$.mobileRegExp, message: '请输入正确的手机号码' }]}
|
style={{ flex: 1 }}
|
>
|
<Input placeholder={str[1] + '联系电话'} allowClear prefix={<PhoneOutlined style={{ transform: 'rotate(90deg)' }} />} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Typography.Link onClick={() => setMoreMsg(!moreMsg)}>
|
<DownOutlined style={{ fontSize: 12, marginRight: 4, transform: moreMsg ? 'rotate(-180deg)' : '' }} />
|
<span>{moreMsg ? '折叠' : '展开'}更多信息</span>
|
</Typography.Link>
|
</Col>
|
{moreMsg && (
|
<>
|
<Col span={24} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
<Form.Item
|
label={str[0] + '证件信息'}
|
name="certiType"
|
onChange={(value, option) => handleChangeInput('certiTypeName', option?.children)}
|
style={{ marginRight: '16px', flex: 1 }}
|
>
|
<Select placeholder="请选择" allowClear>
|
{$$.options.cardType.map((x, t) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
<Form.Item
|
label={
|
<Upload {...draggerProps('party')}>
|
<Button type="link" size="small">
|
上传证件识别
|
</Button>
|
</Upload>
|
}
|
name="certiNo"
|
className="partyEdit-right"
|
style={{ flex: 1 }}
|
>
|
<Input placeholder="请输入完整有效的证件号码" allowClear prefix={<IdcardOutlined />} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="组织机构代码/统一社会信用代码" name="orgaCode">
|
<Input placeholder="请输入" allowClear />
|
</Form.Item>
|
</Col>
|
</>
|
)}
|
<Col span={24}>
|
<h5>{str[2]}登记材料</h5>
|
<FilesTable
|
isList={true}
|
isCheck={false}
|
data={orangeOne}
|
description={'尚未上传' + str[2] + '登记材料'}
|
handleSuccessDelFile={(_, index) => handleDeleteFile(orangeOne, index, '22_00018-204')}
|
/>
|
<div style={{ marginTop: '12px' }}>
|
<MyUpload
|
fileId={formData.id}
|
fileType="22_00018-204"
|
showFileList={false}
|
fileList={orangeOne}
|
handleChangeFile={(_, info) => handleChangeInput('fileInfoList', { key: '22_00018-204', files: info.fileList })}
|
/>
|
</div>
|
</Col>
|
<Col span={24}>
|
<h5>{str[1]}身份证明材料</h5>
|
<FilesTable
|
isList={true}
|
isCheck={false}
|
data={orangeTwo}
|
description={'尚未上传' + str[1] + '身份证明材料'}
|
handleSuccessDelFile={(_, index) => handleDeleteFile(orangeTwo, index, '22_00018-203')}
|
/>
|
<div style={{ marginTop: '12px' }}>
|
<MyUpload
|
fileId={formData.id}
|
fileType="22_00018-203"
|
showFileList={false}
|
fileList={orangeTwo}
|
handleChangeFile={(_, info) => handleChangeInput('fileInfoList', { key: '22_00018-203', files: info.fileList })}
|
/>
|
</div>
|
</Col>
|
</>
|
);
|
}
|
};
|
|
// 代理人
|
const formAgent = () => {
|
const agentFileOne = formData.agent?.fileInfoList?.filter((item) => item.ownerType === '22_00018-205')[0]?.fileList || [];
|
|
const agentFileTwo = formData.agent?.fileInfoList?.filter((item) => item.ownerType === '22_00018-207')[0]?.fileList || [];
|
|
return (
|
<Form
|
form={agentForm}
|
layout="vertical"
|
onFinish={(values) => {
|
let formSubmitData = form.getFieldsValue();
|
let submitData = { ...formData, ...formSubmitData, agent: { ...formData.agent, ...values } };
|
handleSetPartyData(submitData);
|
}}
|
onFinishFailed={({ errorFields }) => $$.info({ type: 'error', content: errorFields[0].errors })}
|
requiredMark={false}
|
>
|
<Row gutter={[48, 16]}>
|
<Col span={24} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
<Form.Item
|
label={
|
<span>
|
代理人信息<span className="leftRequired">*</span>
|
</span>
|
}
|
name="trueName"
|
rules={[{ required: true, message: '请输入代理人信息' }]}
|
style={{ marginRight: '16px', width: 120 }}
|
>
|
<Input placeholder="代理人姓名" allowClear prefix={<UserOutlined />} />
|
</Form.Item>
|
<Form.Item
|
className="partyEdit-right"
|
label={
|
<Button onClick={() => handlePartyModal('open', 'agent')} type="link" size="small">
|
选择历史
|
</Button>
|
}
|
name="mobile"
|
rules={[{ required: false, pattern: $$.mobileRegExp, message: '请输入正确的手机号码' }]}
|
style={{ flex: 1 }}
|
>
|
<Input placeholder="请输入联系电话" allowClear prefix={<PhoneOutlined style={{ transform: 'rotate(90deg)' }} />} />
|
</Form.Item>
|
</Col>
|
<Col span={24} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
<Form.Item
|
label={
|
<span>
|
委托关系<span className="leftRequired">*</span>
|
</span>
|
}
|
name="perClass"
|
rules={[{ required: true, message: '请输入委托关系' }]}
|
style={{ marginRight: '16px', width: 120 }}
|
>
|
<Select placeholder="代理人类型" onChange={(_, option) => handleChangeInput('perClassName', option.children, 'agent')}>
|
{$$.options.agentClass.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
<Form.Item label=" " name="agentType" style={{ flex: 1 }}>
|
<Select placeholder="委托类型" allowClear onChange={(_, option) => handleChangeInput('agentTypeName', option?.children, 'agent')}>
|
{$$.options.agentType.map((x) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
</Col>
|
<Col span={24} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
<Form.Item label="证件信息" name="certiType" style={{ marginRight: '16px', width: 120 }}>
|
<Select placeholder="请选择" allowClear onChange={(_, option) => handleChangeInput('certiTypeName', option?.children, 'agent')}>
|
{$$.options.cardType.map((x, t) => (
|
<Option key={x.value}>{x.label}</Option>
|
))}
|
</Select>
|
</Form.Item>
|
<Form.Item
|
className="partyEdit-right"
|
label={
|
<Upload {...draggerProps('agent')}>
|
<Button type="link" size="small">
|
上传证件识别
|
</Button>
|
</Upload>
|
}
|
name="certiNo"
|
style={{ flex: 1 }}
|
>
|
<Input placeholder="请输入完整有效的证件号码" allowClear prefix={<IdcardOutlined />} />
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Typography.Link onClick={() => setMoreMsgAgent(!moreMsgAgent)}>
|
<DownOutlined style={{ fontSize: 12, marginRight: 4, transform: moreMsgAgent ? 'rotate(-180deg)' : '' }} />
|
<span>{moreMsgAgent ? '折叠' : '展开'}更多信息</span>
|
</Typography.Link>
|
</Col>
|
{moreMsgAgent && (
|
<Col span={24} style={{ display: 'flex', alignItems: 'flex-end' }}>
|
<Form.Item label="性别" name="sex" style={{ marginRight: '16px', width: 120 }}>
|
<Radio.Group onChange={(e) => handleChangeInput('sexName', e.target.value === '09_00003-1' ? '男' : '女', 'agent')}>
|
{$$.options.sex.map((x, t) => (
|
<Radio value={x.value} key={t}>
|
{x.label}
|
</Radio>
|
))}
|
</Radio.Group>
|
</Form.Item>
|
<Form.Item label="现住址" name="addr" style={{ flex: 1 }}>
|
<Input placeholder="目前的居住地址" allowClear />
|
</Form.Item>
|
</Col>
|
)}
|
<Col span={24}>
|
<h5>身份证明材料</h5>
|
<FilesTable
|
isList={true}
|
isCheck={false}
|
data={agentFileOne}
|
description={'尚未上传身份证明材料'}
|
handleSuccessDelFile={(_, index) => handleDeleteFile(agentFileOne, index, '22_00018-205')}
|
/>
|
<div style={{ marginTop: '12px' }}>
|
<MyUpload
|
fileId={formData.agent?.id}
|
fileType="22_00018-205"
|
showFileList={false}
|
fileList={agentFileOne}
|
handleChangeFile={(_, info) => handleChangeInput('fileInfoList', { key: '22_00018-205', files: info.fileList }, 'agent')}
|
/>
|
</div>
|
</Col>
|
<Col span={24}>
|
<h5>代理人授权委托书</h5>
|
<FilesTable
|
isList={true}
|
isCheck={false}
|
data={agentFileTwo}
|
description={'代理人授权委托书'}
|
handleSuccessDelFile={(_, index) => handleDeleteFile(agentFileTwo, index, '22_00018-207')}
|
/>
|
<div style={{ marginTop: '12px' }}>
|
<MyUpload
|
fileId={formData.agent?.id}
|
fileType="22_00018-207"
|
showFileList={false}
|
fileList={agentFileTwo}
|
handleChangeFile={(_, info) => handleChangeInput('fileInfoList', { key: '22_00018-207', files: info.fileList }, 'agent')}
|
/>
|
</div>
|
</Col>
|
</Row>
|
</Form>
|
);
|
};
|
|
return (
|
<>
|
<div className="partyEdit">
|
<Row gutter={[16, 16]}>
|
{$$.options.personClass.map((x, t) => {
|
return (
|
<Col span={8} key={t}>
|
<div
|
onClick={() => handleChangeInput('perClassName', x)}
|
className={`casePerfection-cardTab-tab ${x.value === formData.perClass && 'casePerfection-cardTab-tabActive'}`}
|
>
|
<img src={x.value === formData.perClass ? personIconType(x.value)[1] : personIconType(x.value)[0]} alt="" />
|
<div className="casePerfection-cardTab-tab-name">{x.label}</div>
|
{x.value === formData.perClass && (
|
<>
|
<div className="casePerfection-cardTab-tab-triangle" />
|
<CheckOutlined className="casePerfection-cardTab-tab-check" />
|
</>
|
)}
|
</div>
|
</Col>
|
);
|
})}
|
<Col span={24}>
|
<Form
|
form={form}
|
layout="vertical"
|
requiredMark={false}
|
onFinish={(values) => {
|
if (formData.agentStatus === '2') {
|
agentForm.submit();
|
} else {
|
let submitData = { ...formData, ...values, agent: null };
|
handleSetPartyData(submitData);
|
}
|
}}
|
onFinishFailed={({ errorFields }) => $$.info({ type: 'error', content: errorFields[0].errors })}
|
>
|
<Row gutter={[48, 16]}>{formType(formData.perClass)}</Row>
|
</Form>
|
</Col>
|
<Col span={24}>
|
<h5>
|
代理人
|
<Switch
|
size="small"
|
style={{ marginLeft: '8px' }}
|
checked={formData.agentStatus === '1' ? false : true}
|
onClick={(checked) => handleChangeInput('agentStatus', checked ? '2' : '1')}
|
/>
|
</h5>
|
{formData.agentStatus === '1' && <div className="partyEdit-subText">该当事人无代理人</div>}
|
{formData.agentStatus === '2' && formAgent()}
|
</Col>
|
</Row>
|
</div>
|
<div>
|
<Space size="large" style={{ marginTop: '16px' }}>
|
<Button type="primary" onClick={handleClickPartySave}>
|
保存信息
|
</Button>
|
{editType === 'change' && (
|
<Button
|
danger
|
onClick={() =>
|
$$.modalInfo({
|
title: '申请人信息删除确认',
|
content: `确定删除申请人「${formData.trueName}」的相关信息吗？`,
|
okText: '确定删除',
|
cancelText: '我再想想',
|
onOk: () => handleDeleteParty(partyType),
|
})
|
}
|
>
|
删除信息
|
</Button>
|
)}
|
</Space>
|
</div>
|
<MyModal visible={partyModal.visible} onCancel={() => setPartyModal({ visible: false })} width={766}>
|
<TableView
|
showHeader
|
title="选择历史申请人"
|
buttonAction={[<Search placeholder="查询申请人、被申请人" onSearch={handleSearch} style={{ width: 232 }} />]}
|
columns={columns}
|
dataSource={partyModal.data || []}
|
pagination={{ showSizeChanger: false }}
|
style={{ marginBottom: '-16px' }}
|
/>
|
</MyModal>
|
</>
|
);
|
};
|
|
PartyEdit.propTypes = {
|
partyType: PropTypes.string,
|
editType: PropTypes.string,
|
partyEditRef: PropTypes.any,
|
data: PropTypes.object,
|
handleSetPartyData: PropTypes.func,
|
handleDeleteParty: PropTypes.func,
|
};
|
|
export default PartyEdit;
|
