import React, { useState, useEffect } from 'react';
|
import NavBarPage from '../../../components/NavBarPage';
|
|
import { Radio, Message, Tag } from '@arco-design/web-react';
|
import { DocsOutlined, SettingOutlined } from 'dd-icons';
|
import { ax, setLocal, getLocal, clearLocal } from '../../../utils/utility';
|
import { idCardphoto } from '../../../assets/img/idcard.png';
|
import './index.less';
|
import { Checkbox, Space } from 'dingtalk-design-mobile';
|
import { useHistory, useLocation } from 'react-router-dom';
|
import fileUploadIcon from '../../../assets/img/file_upload.png';
|
import fileDeleteIcon from '../../../assets/img/file_delete.png';
|
|
import {
|
List,
|
Form,
|
InputItem,
|
Button,
|
TextareaItem,
|
DatePicker,
|
Rate,
|
Slider,
|
Stepper,
|
Switch,
|
Select,
|
Upload,
|
Toast,
|
} from 'dingtalk-design-mobile';
|
|
const COLORS = ['red', 'orangered', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'arcoblue', 'purple', 'pinkpurple', 'magenta', 'gray'];
|
|
const COLORS_CUSTOM = [
|
'#f53f3f',
|
'#7816ff',
|
'#00b42a',
|
'#165dff',
|
'#ff7d00',
|
'#eb0aa4',
|
'#7bc616',
|
'#86909c',
|
'#b71de8',
|
'#0fc6c2',
|
'#ffb400',
|
'#168cff',
|
'#ff5722',
|
];
|
|
const Agentperson = () => {
|
const [form] = Form.useForm(); // 使用 Form.useForm 创建表单实例
|
const history = useHistory();
|
const location = useLocation(); // 获取location对象以解析URL参数
|
const [currentRole, setCurrentRole] = useState('applicantAgent'); // 默认为申请方代理人
|
const [isFromCaseDesClick, setIsFromCaseDesClick] = useState(false); // 记录是否从caseDes弹窗点击进入
|
const [agentObjects, setAgentObjects] = useState([]); // 用于存储代理对象列表
|
const [defaultAgentObject, setDefaultAgentObject] = useState(''); // 默认选中的代理对象
|
const [nameValue, setNameValue] = useState(''); // 添加state来跟踪姓名字段
|
const [idCardFiles, setIdCardFiles] = useState([]); // 存储身份证明材料文件
|
const [authorizationFiles, setAuthorizationFiles] = useState([]); // 存储授权委托书文件
|
|
// 在组件加载时从URL参数获取当前角色和代理对象数据
|
useEffect(() => {
|
try {
|
// 解析URL参数
|
const queryParams = new URLSearchParams(location.search);
|
const role = queryParams.get('role');
|
const from = queryParams.get('from');
|
|
// 设置角色信息
|
if (role) {
|
setCurrentRole(role);
|
|
// 检查是否是从caseDes弹窗点击进入的
|
if (from === 'casedes') {
|
setIsFromCaseDesClick(true);
|
|
// 只有当是从caseDes弹窗点击进入时才重置表单
|
form.resetFields();
|
}
|
}
|
|
// 从缓存中获取可用的代理对象列表
|
// 这里我们需要获取对应角色的当事人作为代理对象
|
const personCacheKey = 'case_personnel_cache';
|
const cachedPersons = getLocal(personCacheKey) || [];
|
|
// 过滤出当事人（applicant或respondent），确保排除代理人角色
|
const filteredObjects = cachedPersons.filter((person) => {
|
// 确保只显示当事人，排除所有代理人
|
const isAgent = person.role === 'applicantAgent' || person.role === 'respondentAgent';
|
if (isAgent) return false;
|
|
// 如果当前角色是申请方代理人，则只显示申请方当事人
|
const currentRoleValue = role || currentRole;
|
if (currentRoleValue === 'applicantAgent') {
|
return person.role === 'applicant';
|
}
|
// 如果当前角色是被申请方代理人，则只显示被申请方当事人
|
else if (currentRoleValue === 'respondentAgent') {
|
return person.role === 'respondent';
|
}
|
return false;
|
});
|
|
// 转换为Radio组件可用的格式
|
const objects = filteredObjects.map((person) => {
|
let displayName = '';
|
if (person.selectedType === 'natural' && person.formData) {
|
displayName = person.formData.trueName || person.formData.name || '未命名自然人';
|
} else if ((person.selectedType === 'legal' || person.selectedType === 'nonlegal') && person.formData) {
|
displayName = person.formData.companyName || '未命名组织';
|
}
|
|
return {
|
value: person.timestamp.toString(), // 使用时间戳作为唯一标识
|
label: displayName,
|
data: person, // 存储完整数据以便后续使用
|
};
|
});
|
|
setAgentObjects(objects);
|
|
// 如果有代理对象，则设置第一个为默认选中
|
if (objects.length > 0) {
|
setDefaultAgentObject(objects[0].value);
|
form.setFieldsValue({
|
agentObject: objects[0].value,
|
});
|
}
|
|
// 设置表单初始值
|
form.setFieldsValue({
|
card: '身份证',
|
nation: 'han',
|
gender: 'male',
|
risk: 'no',
|
agent_relationship: 'qinshu',
|
agent_type: 'yiban',
|
});
|
} catch (error) {
|
console.error('读取角色信息或代理对象数据失败:', error);
|
}
|
}, [form, currentRole, location]);
|
|
const onFinish = (values) => {
|
console.log('表单提交:', values);
|
|
try {
|
// 获取整个表单的值并打印
|
const formValues = form.getFieldsValue(true);
|
console.log('整个表单的值:', formValues);
|
console.log('姓名字段值:', formValues.name);
|
|
// 检查name字段是否存在于formValues中
|
if (!formValues.hasOwnProperty('name')) {
|
console.error('表单中没有name字段');
|
Toast.fail({
|
content: '表单数据缺失，请重新填写姓名',
|
duration: 1.5,
|
});
|
return;
|
}
|
|
// 合并所有表单数
|
const allFormData = {
|
...formValues, // 获取主表单所有字段值
|
...values, // 合并当前提交的表单数据
|
};
|
|
// 获取选中的代理对象信息
|
const selectedAgentObject = agentObjects.find((obj) => obj.value === allFormData.agentObject);
|
let agentObjectInfo = null;
|
if (selectedAgentObject) {
|
agentObjectInfo = {
|
name: selectedAgentObject.label,
|
id: selectedAgentObject.value,
|
type: selectedAgentObject.data.selectedType,
|
role: selectedAgentObject.data.role,
|
};
|
}
|
|
// 准备文件信息数据，只保存必要的信息以便缓存
|
const idCardFileInfos = idCardFiles.map((file) => ({
|
name: file.name,
|
size: file.size,
|
uid: file.uid,
|
type: file.type,
|
lastModified: file.lastModified,
|
}));
|
|
const authorizationFileInfos = authorizationFiles.map((file) => ({
|
name: file.name,
|
size: file.size,
|
uid: file.uid,
|
type: file.type,
|
lastModified: file.lastModified,
|
}));
|
|
// 将文件信息添加到表单数据中
|
const formDataWithFiles = {
|
...allFormData,
|
agentObjectInfo, // 添加代理对象的详细信息
|
idCardFilesInfo: idCardFileInfos,
|
authorizationFilesInfo: authorizationFileInfos,
|
};
|
|
// 保存当前表单数据
|
const formDataToCache = {
|
selectedType: 'natural', // 代理人都是自然人类型
|
formData: formDataWithFiles,
|
timestamp: new Date().getTime(), // 添加时间戳，便于排序和显示
|
role: currentRole, // 添加角色信息
|
};
|
|
// 记录日志，便于排查问题
|
console.log('保存到缓存的数据:', formDataToCache);
|
console.log('代理人姓名:', formDataToCache.formData.name);
|
|
// 保存到临时键
|
setLocal('agent_info_form_data', formDataToCache);
|
|
// 同时更新人员缓存列表
|
const personCacheKey = 'case_personnel_cache';
|
const currentCachedPersons = getLocal(personCacheKey) || [];
|
|
// 添加新记录到缓存列表中
|
currentCachedPersons.push(formDataToCache);
|
|
// 保存更新后的缓存列表
|
setLocal(personCacheKey, currentCachedPersons);
|
|
// 设置一个标志，表示数据已更新，需要caseDes页面刷新
|
setLocal('case_personnel_updated', true);
|
|
Toast.success({
|
content: '保存成功',
|
duration: 1,
|
});
|
|
// 清空文件列表
|
setIdCardFiles([]);
|
setAuthorizationFiles([]);
|
|
// 保存成功后跳转到caseDes页面
|
console.log('准备跳转到NaturePersonNone页面');
|
setTimeout(() => {
|
history.push('/gzdyh/NaturePersonNone');
|
}, 500); // 添加短暂延迟确保跳转成功
|
} catch (error) {
|
console.error('保存失败:', error);
|
Toast.fail({
|
content: '保存失败',
|
duration: 1,
|
});
|
}
|
};
|
|
// 处理身份证识别结果
|
const handleIdCardSuccess = (result) => {
|
console.log('身份证识别结果:', result);
|
form.setFieldsValue({
|
name: result.name,
|
cardNumber: result.idNumber,
|
address: result.address,
|
gender: result.gender === '男' ? 'male' : 'female',
|
nation: result.nation,
|
});
|
Toast.show('身份证信息识别成功');
|
};
|
const RadioGroup = Radio.Group;
|
|
// 根据角色获取标题
|
const getTitle = () => {
|
switch (currentRole) {
|
case 'applicantAgent':
|
return '添加申请方代理人';
|
case 'respondentAgent':
|
return '添加被申请方代理人';
|
default:
|
return '添加申请方代理人';
|
}
|
};
|
|
// 渲染代理对象列表
|
const renderAgentObjectsList = () => {
|
if (agentObjects.length === 0) {
|
return (
|
<div className="agent-form__empty-tip">
|
<p className="agent-form__empty-text">
|
{currentRole === 'applicantAgent' ? '没有找到申请方当事人，请先添加申请方当事人' : '没有找到被申请方当事人，请先添加被申请方当事人'}
|
</p>
|
</div>
|
);
|
}
|
|
return (
|
<Radio.Group
|
defaultValue={defaultAgentObject}
|
className="agent-form__radio-group"
|
onChange={(value) => {
|
console.log('选择的代理对象:', value);
|
form.setFieldsValue({ agentObject: value });
|
}}
|
>
|
{agentObjects.map((object) => (
|
<div className="agent-form__radio-item" key={object.value}>
|
<Radio value={object.value} className="agent-form__radio" />
|
<span className="agent-form__radio-label">{object.label}</span>
|
</div>
|
))}
|
</Radio.Group>
|
);
|
};
|
|
// 处理身份证明材料上传
|
const handleIdCardUpload = (files) => {
|
console.log('身份证明材料上传:', files);
|
// 钉钉上传组件可能会触发多次onChange，我们只取最新的文件
|
if (files && files.file) {
|
// 处理单个文件上传
|
const newFile = files.file;
|
// 检查文件是否已存在
|
const isExist = idCardFiles.some((f) => f.uid === newFile.uid);
|
if (!isExist) {
|
setIdCardFiles([...idCardFiles, newFile]);
|
}
|
}
|
};
|
|
// 处理授权委托书上传
|
const handleAuthorizationUpload = (files) => {
|
console.log('代理人授权委托书上传:', files);
|
// 钉钉上传组件可能会触发多次onChange，我们只取最新的文件
|
if (files && files.file) {
|
// 处理单个文件上传
|
const newFile = files.file;
|
// 检查文件是否已存在
|
const isExist = authorizationFiles.some((f) => f.uid === newFile.uid);
|
if (!isExist) {
|
setAuthorizationFiles([...authorizationFiles, newFile]);
|
}
|
}
|
};
|
|
// 处理文件预览
|
const handlePreview = (file) => {
|
console.log('预览文件:', file);
|
// 这里添加文件预览逻辑
|
};
|
|
// 处理文件删除
|
const handleDelete = (file, type) => {
|
if (type === 'idCard') {
|
setIdCardFiles(idCardFiles.filter((f) => f !== file));
|
} else if (type === 'authorization') {
|
setAuthorizationFiles(authorizationFiles.filter((f) => f !== file));
|
}
|
};
|
|
// 渲染文件列表
|
const renderFileList = (files, type) => {
|
if (!Array.isArray(files) || files.length === 0) return null;
|
return (
|
<div className="agent-form__file-list">
|
{files.map((file, index) => (
|
<div key={index} className="agent-form__file-item">
|
<img src={fileUploadIcon} alt="file" className="agent-form__file-icon" />
|
<div className="agent-form__file-info">
|
<div className="agent-form__file-name">{file.name}</div>
|
<div className="agent-form__file-meta">
|
<span className="agent-form__file-size">{(file.size / 1024).toFixed(1)}K</span>
|
</div>
|
</div>
|
<div className="agent-form__file-actions">
|
<span className="agent-form__delete-btn" onClick={() => handleDelete(file, type)}>
|
<img src={fileDeleteIcon} alt="删除" className="agent-form__delete-icon" />
|
</span>
|
</div>
|
</div>
|
))}
|
</div>
|
);
|
};
|
|
return (
|
<NavBarPage leftContentVisible={true} title={getTitle()}>
|
<div className="agent-form__section">
|
<Form form={form} className="agent-form" onFinish={onFinish}>
|
<Form.Item
|
name="agentObject"
|
label="代理对象"
|
layout="vertical"
|
rules={[{ required: true, message: '请选择代理对象' }]}
|
className="agent-form__object-item"
|
>
|
<div className="agent-form__select-container">{renderAgentObjectsList()}</div>
|
</Form.Item>
|
|
<Form.Item
|
name="agent_relationship"
|
label="委托关系"
|
layout="horizontal"
|
rules={[{ message: '请选择委托关系', required: true }]}
|
className="agent-form__relationship-item"
|
>
|
<div className="agent-form__select-container">
|
<Select
|
mode="single"
|
placeholder="请选择委托关系"
|
defaultValue="qinshu"
|
onChange={console.log}
|
options={[
|
{ label: '亲属', value: 'qinshu' },
|
{ label: '监护人', value: 'jianhu' },
|
{ label: '律师', value: 'lvshi' },
|
{ label: '社会团体推荐的公民', value: 'shehui' },
|
{ label: '所在单位推荐的人', value: 'danwei' },
|
{ label: '法律工作者', value: 'falu' },
|
]}
|
/>
|
</div>
|
</Form.Item>
|
|
<Form.Item
|
name="agent_type"
|
label="委托类型"
|
layout="horizontal"
|
rules={[{ message: '请选择委托类型', required: true }]}
|
className="agent-form__type-item"
|
>
|
<div className="agent-form__select-container">
|
<Select
|
mode="single"
|
placeholder="请选择委托类型"
|
defaultValue="yiban"
|
onChange={console.log}
|
options={[
|
{ label: '一般授权代理', value: 'yiban' },
|
{ label: '特别授权代理', value: 'tebie' },
|
{ label: '共同授权代理', value: 'gongtong' },
|
{ label: '转委托代理', value: 'zhuanwei' },
|
]}
|
/>
|
</div>
|
</Form.Item>
|
|
<div className="agent-form__divider"></div>
|
|
<div className="agent-form__two-column">
|
<div className="agent-form__left-column" layout="vertical">
|
<div className="agent-form__field-wrapper">
|
<Form.Item
|
name="name"
|
label="代理人姓名"
|
className="agent-form__name-item"
|
required={true}
|
layout="vertical"
|
rules={[{ required: true, message: '请填写代理人姓名' }]}
|
>
|
<div className="agent-form__input-wrapper">
|
<InputItem
|
placeholder="请填写"
|
value={nameValue}
|
onChange={(value) => {
|
console.log('Input onChange 事件触发, 值:', value);
|
// 手动更新name值
|
setNameValue(value);
|
// 如果输入内容不为空，设置表单字段值
|
if (value && value.trim() !== '') {
|
form.setFieldsValue({ name: value });
|
console.log('已更新表单name字段:', value);
|
}
|
}}
|
/>
|
</div>
|
</Form.Item>
|
</div>
|
<div className="agent-form__field-wrapper">
|
<Form.Item name="phone" label="联系方式" required={true} layout="vertical">
|
<div className="agent-form__textarea-wrapper">
|
<TextareaItem placeholder="请填写手机号码" count={11} />
|
</div>
|
</Form.Item>
|
</div>
|
</div>
|
</div>
|
|
<div className="agent-form__divider"></div>
|
|
<Form.Item name="card" label="证件类型" layout="horizontal" rules={[{ message: '请选择证件类型' }]}>
|
<div className="agent-form__select-container">
|
<Select
|
mode="single"
|
placeholder="身份证"
|
defaultValue="idcard"
|
onChange={console.log}
|
options={[
|
{ label: '身份证', value: 'idcard' },
|
{ label: '户口本', value: 'hukou' },
|
{ label: '护照', value: 'passport' },
|
{ label: '港澳通行证', value: 'gangao' },
|
{ label: '台胞证', value: 'taibao' },
|
{ label: '军官证', value: 'jun' },
|
]}
|
/>
|
</div>
|
</Form.Item>
|
|
<div className="agent-form__field-wrapper">
|
<Form.Item name="cardNumber" label="证件号码" layout="vertical" rules={[{ message: '请填写证件号码' }]}>
|
<div className="agent-form__textarea-wrapper">
|
<TextareaItem placeholder="请填写完整证件号码" count={24} />
|
</div>
|
</Form.Item>
|
</div>
|
|
<div className="agent-form__field-wrapper">
|
<Form.Item name="address" label="户籍地址" layout="vertical" rules={[{ message: '请填写详细地址' }]}>
|
<div className="agent-form__textarea-wrapper">
|
<TextareaItem placeholder="请填写详细地址" />
|
</div>
|
</Form.Item>
|
</div>
|
|
<div className="agent-form__field-wrapper">
|
<Form.Item name="workAddress" label="工作单位" layout="vertical" rules={[{ message: '请填写单位全名' }]}>
|
<div className="agent-form__textarea-wrapper">
|
<TextareaItem placeholder="请填写单位全名" />
|
</div>
|
</Form.Item>
|
</div>
|
|
<Form.Item name="nation" label="民族" layout="horizontal" rules={[{ message: '汉族' }]}>
|
<div className="agent-form__select-container">
|
<Select
|
mode="single"
|
placeholder="汉族"
|
defaultValue="han"
|
onChange={console.log}
|
options={[
|
{ label: '汉族', value: 'han' },
|
{ label: '蒙古族', value: 'menggu' },
|
{ label: '回族', value: 'hui' },
|
{ label: '藏族', value: 'zang' },
|
{ label: '维吾尔族', value: 'weiwuer' },
|
{ label: '苗族', value: 'miao' },
|
{ label: '彝族', value: 'yizu' },
|
{ label: '壮族', value: 'zhuang' },
|
{ label: '布依族', value: 'buyi' },
|
{ label: '朝鲜族', value: 'chaoxian' },
|
{ label: '满族', value: 'man' },
|
{ label: '侗族', value: 'dong' },
|
{ label: '瑶族', value: 'yao' },
|
{ label: '白族', value: 'bai' },
|
{ label: '土家族', value: 'tujia' },
|
{ label: '哈尼族', value: 'hani' },
|
{ label: '哈萨克族', value: 'hasake' },
|
{ label: '傣族', value: 'dai' },
|
{ label: '黎族', value: 'li' },
|
{ label: '傈僳族', value: 'lisu' },
|
{ label: '佤族', value: 'wa' },
|
{ label: '畲族', value: 'she' },
|
{ label: '高山族', value: 'gaoshan' },
|
{ label: '拉祜族', value: 'lahu' },
|
{ label: '水族', value: 'shui' },
|
{ label: '东乡族', value: 'dongxiang' },
|
{ label: '纳西族', value: 'naxi' },
|
{ label: '景颇族', value: 'jingpo' },
|
{ label: '柯尔克孜族', value: 'keerkezi' },
|
{ label: '土族', value: 'tu' },
|
{ label: '达斡尔族', value: 'dawoer' },
|
{ label: '仫佬族', value: 'mulao' },
|
{ label: '羌族', value: 'qiang' },
|
{ label: '布朗族', value: 'bulang' },
|
{ label: '撒拉族', value: 'sala' },
|
{ label: '毛南族', value: 'maonan' },
|
{ label: '仡佬族', value: 'yilao' },
|
{ label: '锡伯族', value: 'xibo' },
|
{ label: '阿昌族', value: 'achang' },
|
{ label: '普米族', value: 'pumi' },
|
{ label: '塔吉克族', value: 'tajike' },
|
{ label: '怒族', value: 'nu' },
|
{ label: '乌孜别克族', value: 'wuzibieke' },
|
{ label: '俄罗斯族', value: 'eluo' },
|
{ label: '鄂温克族', value: 'wengke' },
|
{ label: '德昂族', value: 'dengang' },
|
{ label: '保安族', value: 'baoan' },
|
{ label: '裕固族', value: 'yugong' },
|
{ label: '京族', value: 'jing' },
|
{ label: '塔塔尔族', value: 'tatala' },
|
{ label: '独龙族', value: 'dulong' },
|
{ label: '鄂伦春族', value: 'elunchun' },
|
{ label: '赫哲族', value: 'hezhe' },
|
{ label: '门巴族', value: 'menba' },
|
{ label: '珞巴族', value: 'luoba' },
|
{ label: '基诺族', value: 'jinuo' },
|
]}
|
/>
|
</div>
|
</Form.Item>
|
|
<Form.Item name="gender" label="性别" layout="horizontal" rules={[{ message: '请选择性别' }]}>
|
<div className="agent-form__select-container">
|
<Radio.Group defaultValue="male" className="agent-form__radio-group">
|
<Radio value="female"></Radio>
|
<span>女</span>
|
<Radio value="male"></Radio>
|
<span>男</span>
|
</Radio.Group>
|
</div>
|
</Form.Item>
|
|
<div className="agent-form__divider"></div>
|
|
<Form.Item
|
name="risk"
|
label={
|
<span className="agent-form__risk-label">
|
<img
|
src={require('../../../assets/img/riskMask.png')}
|
alt="警告"
|
className="agent-form__risk-icon"
|
/>
|
是否有个人极端倾向
|
</span>
|
}
|
layout="horizontal"
|
className="agent-form__risk-item"
|
rules={[{ message: '请选择是否有极端倾向' }]}
|
>
|
<div className="agent-form__select-container">
|
<Radio.Group layout="horizontal" defaultValue="no" className="agent-form__radio-group">
|
<Radio value="yes"></Radio>
|
<span>是</span>
|
<Radio value="no"></Radio>
|
<span>否</span>
|
</Radio.Group>
|
</div>
|
</Form.Item>
|
|
<div className="agent-form__divider"></div>
|
|
<Form.Item name="idCardMaterials" label="身份证明材料" className="agent-form__upload-item">
|
<div className="agent-form__upload-wrapper">
|
<div className="agent-form__upload-button-wrapper">
|
<Upload
|
listType="picture"
|
accept="image/*"
|
type="form-upload"
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
className="agent-form__upload-button agent-form__idcard-upload"
|
onChange={handleIdCardUpload}
|
showUploadList={false}
|
/>
|
</div>
|
</div>
|
</Form.Item>
|
|
{/* 身份证明材料文件列表 */}
|
{renderFileList(idCardFiles, 'idCard')}
|
|
<div className="agent-form__divider"></div>
|
|
<Form.Item name="authorizationDoc" label="代理人授权委托书" className="agent-form__upload-item agent-form__auth-upload-item">
|
<div className="agent-form__upload-wrapper">
|
<div className="agent-form__upload-button-wrapper">
|
<Upload
|
listType="picture"
|
accept="image/*"
|
type="form-upload"
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
className="agent-form__upload-button agent-form__auth-upload"
|
onChange={handleAuthorizationUpload}
|
showUploadList={false}
|
/>
|
</div>
|
</div>
|
</Form.Item>
|
|
{/* 授权委托书文件列表 */}
|
{renderFileList(authorizationFiles, 'authorization')}
|
|
<div className="agent-form__divider"></div>
|
|
<div className="agent-form__button-wrapper">
|
<Button
|
htmlType="submit"
|
type="primary"
|
size="large"
|
className="agent-form__submit-button"
|
onClick={(e) => {
|
console.log('保存按钮被点击');
|
|
// 手动更新name字段值
|
if (nameValue && nameValue.trim() !== '') {
|
form.setFieldsValue({ name: nameValue });
|
console.log('在提交前设置name字段:', nameValue);
|
}
|
|
// 直接调用表单提交，使用表单原生提交机制
|
form.submit();
|
}}
|
>
|
保存
|
</Button>
|
</div>
|
</Form>
|
</div>
|
</NavBarPage>
|
);
|
};
|
|
export default Agentperson;
|
