import React, { useState, useEffect } from 'react';
|
import NavBarPage from '../../../components/NavBarPage';
|
import { useLocation, useHistory } from 'react-router-dom';
|
import { getLocal } from '../../../utils/utility';
|
import './index.less';
|
import {
|
List,
|
Form,
|
Input,
|
Button,
|
TextareaItem,
|
DatePicker,
|
Rate,
|
Slider,
|
Stepper,
|
Switch,
|
Select,
|
Upload,
|
Toast,
|
Tag,
|
} from 'dingtalk-design-mobile';
|
|
const Readperson = () => {
|
const location = useLocation();
|
const history = useHistory();
|
const [personData, setPersonData] = useState(null);
|
const [loading, setLoading] = useState(true);
|
const [personType, setPersonType] = useState('');
|
const [personRole, setPersonRole] = useState('');
|
|
useEffect(() => {
|
try {
|
// 从URL获取参数
|
const queryParams = new URLSearchParams(location.search);
|
const personId = queryParams.get('id');
|
|
if (!personId) {
|
Toast.fail('未找到人员信息');
|
setLoading(false);
|
return;
|
}
|
|
// 从缓存中获取人员信息
|
const personCacheKey = 'case_personnel_cache';
|
const cachedPersons = getLocal(personCacheKey) || [];
|
|
// 根据ID查找对应的人员数据
|
const targetPerson = cachedPersons.find(person => person.timestamp.toString() === personId);
|
|
if (!targetPerson) {
|
Toast.fail('未找到对应的人员信息');
|
setLoading(false);
|
return;
|
}
|
|
// 设置人员数据
|
setPersonData(targetPerson);
|
|
// 设置人员类型
|
switch (targetPerson.selectedType) {
|
case 'natural':
|
setPersonType('自然人');
|
break;
|
case 'legal':
|
setPersonType('法人');
|
break;
|
case 'nonlegal':
|
setPersonType('非法人组织');
|
break;
|
default:
|
setPersonType('未知类型');
|
}
|
|
// 设置角色类型
|
switch (targetPerson.role) {
|
case 'applicant':
|
setPersonRole('申请方当事人');
|
break;
|
case 'applicantAgent':
|
setPersonRole('申请方代理人');
|
break;
|
case 'respondent':
|
setPersonRole('被申请方当事人');
|
break;
|
case 'respondentAgent':
|
setPersonRole('被申请方代理人');
|
break;
|
default:
|
setPersonRole('未知角色');
|
}
|
|
setLoading(false);
|
} catch (error) {
|
console.error('加载人员信息失败:', error);
|
Toast.fail('加载人员信息失败');
|
setLoading(false);
|
}
|
}, [location]);
|
|
// 渲染自然人信息
|
const renderNaturalPerson = () => {
|
const formData = personData?.formData || {};
|
|
return (
|
<div className="person-info-container">
|
<div className="info-section">
|
<div className="info-item">
|
<span className="item-label">联系方式：</span>
|
<span className="item-value">{formData.phone || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">证件类型：</span>
|
<span className="item-value">
|
{formData.card === 'idcard' ? '身份证' :
|
formData.card === 'hukou' ? '户口本' :
|
formData.card === 'passport' ? '护照' :
|
formData.card === 'gangao' ? '港澳通行证' :
|
formData.card === 'taibao' ? '台胞证' :
|
formData.card === 'jun' ? '军官证' : '其他'}
|
</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">证件号码：</span>
|
<span className="item-value">{formData.cardNumber || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">性别：</span>
|
<span className="item-value">{formData.gender === 'male' ? '男' : '女'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">民族：</span>
|
<span className="item-value">
|
{formData.nation === 'han' ? '汉族' :
|
formData.nation ? formData.nation : '无'}
|
</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">联系地址：</span>
|
<span className="item-value">{formData.contactAddress || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">户籍地址：</span>
|
<span className="item-value">{formData.address || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">工作单位：</span>
|
<span className="item-value">{formData.workAddress || '无'}</span>
|
</div>
|
</div>
|
|
{personData.role.includes('Agent') && (
|
<div className="info-section">
|
<div className="section-title">代理信息</div>
|
<div className="info-item">
|
<span className="item-label">代理对象：</span>
|
<span className="item-value">{formData.agentObjectInfo?.name || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">委托关系：</span>
|
<span className="item-value">
|
{formData.agent_relationship === 'qinshu' ? '亲属' :
|
formData.agent_relationship === 'jianhu' ? '监护人' :
|
formData.agent_relationship === 'lvshi' ? '律师' :
|
formData.agent_relationship === 'shehui' ? '社会团体推荐的公民' :
|
formData.agent_relationship === 'danwei' ? '所在单位推荐的人' :
|
formData.agent_relationship === 'falu' ? '法律工作者' : '无'}
|
</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">委托类型：</span>
|
<span className="item-value">
|
{formData.agent_type === 'yiban' ? '一般授权代理' :
|
formData.agent_type === 'tebie' ? '特别授权代理' :
|
formData.agent_type === 'gongtong' ? '共同授权代理' :
|
formData.agent_type === 'zhuanwei' ? '转委托代理' : '无'}
|
</span>
|
</div>
|
</div>
|
)}
|
|
{formData.risk && (
|
<div className="info-section">
|
<div className="section-title risk-title">风险评估</div>
|
<div className="info-item">
|
<span className="item-label">
|
<span style={{color: '#F53F3F', display: 'inline-flex', alignItems: 'center'}}>
|
<img
|
src={require("../../../assets/img/riskMask.png")}
|
alt="警告"
|
style={{
|
width: '15px',
|
height: '15px',
|
marginRight: '4px',
|
verticalAlign: 'middle'
|
}}
|
/>
|
是否有个人极端倾向：
|
</span>
|
</span>
|
<span className="item-value risk-value" style={{ color: '#171A1D' }}>{formData.risk === 'yes' ? '是' : '否'}</span>
|
</div>
|
</div>
|
)}
|
|
{((formData.idCardFilesInfo && formData.idCardFilesInfo.length > 0) ||
|
(formData.authorizationFilesInfo && formData.authorizationFilesInfo.length > 0)) && (
|
<div className="info-section">
|
<div className="section-title">附件材料</div>
|
{formData.idCardFilesInfo && formData.idCardFilesInfo.length > 0 && (
|
<div className="info-item">
|
<span className="item-label">身份证明材料：</span>
|
<div className="files-list">
|
{formData.idCardFilesInfo.map((file, index) => (
|
<div key={index} className="file-item">
|
<div className="file-link-icon">
|
<img
|
src={require("../../../assets/img/link_picture.png")}
|
alt="链接"
|
/>
|
</div>
|
<div className="file-info">
|
<div className="file-name">{file.name}</div>
|
<div className="file-size-preview">
|
<span className="file-size">{(file.size / 1024).toFixed(1)}K</span>
|
<span className="preview-text">预览</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
)}
|
|
{formData.authorizationFilesInfo && formData.authorizationFilesInfo.length > 0 && (
|
<div className="info-item">
|
<span className="item-label">授权委托书：</span>
|
<div className="files-list">
|
{formData.authorizationFilesInfo.map((file, index) => (
|
<div key={index} className="file-item">
|
<div className="file-link-icon">
|
<img
|
src={require("../../../assets/img/link_picture.png")}
|
alt="链接"
|
/>
|
</div>
|
<div className="file-info">
|
<div className="file-name">{file.name}</div>
|
<div className="file-size-preview">
|
<span className="file-size">{(file.size / 1024).toFixed(1)}K</span>
|
<span className="preview-text">预览</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
)}
|
</div>
|
)}
|
</div>
|
);
|
};
|
|
// 渲染法人信息
|
const renderLegalPerson = () => {
|
const formData = personData?.formData || {};
|
|
return (
|
<div className="person-info-container">
|
<div className="info-section">
|
<div className="section-title">基本信息</div>
|
<div className="info-item">
|
<span className="item-label">企业名称：</span>
|
<span className="item-value">{formData.companyName || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">统一社会信用代码：</span>
|
<span className="item-value">{formData.creditCode || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">联系人：</span>
|
<span className="item-value">{formData.contactName || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">联系电话：</span>
|
<span className="item-value">{formData.contactPhone || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">地址：</span>
|
<span className="item-value">{formData.address || '无'}</span>
|
</div>
|
</div>
|
|
{formData.legalRepName && (
|
<div className="info-section">
|
<div className="section-title">法定代表人信息</div>
|
<div className="info-item">
|
<span className="item-label">姓名：</span>
|
<span className="item-value">{formData.legalRepName || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">证件号码：</span>
|
<span className="item-value">{formData.legalRepIdCard || '无'}</span>
|
</div>
|
</div>
|
)}
|
|
{formData.businessLicenseInfo && formData.businessLicenseInfo.length > 0 && (
|
<div className="info-section">
|
<div className="section-title">附件材料</div>
|
<div className="info-item">
|
<span className="item-label">营业执照：</span>
|
<div className="files-list">
|
{formData.businessLicenseInfo.map((file, index) => (
|
<div key={index} className="file-item">
|
<div className="file-link-icon">
|
<img
|
src={require("../../../assets/img/link_picture.png")}
|
alt="链接"
|
/>
|
</div>
|
<div className="file-info">
|
<div className="file-name">{file.name}</div>
|
<div className="file-size-preview">
|
<span className="file-size">{(file.size / 1024).toFixed(1)}K</span>
|
<span className="preview-text">预览</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
</div>
|
)}
|
</div>
|
);
|
};
|
|
// 渲染非法人组织信息
|
const renderNonLegalPerson = () => {
|
const formData = personData?.formData || {};
|
|
return (
|
<div className="person-info-container">
|
<div className="info-section">
|
<div className="section-title">基本信息</div>
|
<div className="info-item">
|
<span className="item-label">组织名称：</span>
|
<span className="item-value">{formData.companyName || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">组织代码：</span>
|
<span className="item-value">{formData.creditCode || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">联系人：</span>
|
<span className="item-value">{formData.contactName || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">联系电话：</span>
|
<span className="item-value">{formData.contactPhone || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">地址：</span>
|
<span className="item-value">{formData.address || '无'}</span>
|
</div>
|
</div>
|
|
{formData.responsiblePerson && (
|
<div className="info-section">
|
<div className="section-title">负责人信息</div>
|
<div className="info-item">
|
<span className="item-label">姓名：</span>
|
<span className="item-value">{formData.responsiblePerson || '无'}</span>
|
</div>
|
<div className="info-item">
|
<span className="item-label">证件号码：</span>
|
<span className="item-value">{formData.responsiblePersonId || '无'}</span>
|
</div>
|
</div>
|
)}
|
|
{formData.organizationCertInfo && formData.organizationCertInfo.length > 0 && (
|
<div className="info-section">
|
<div className="section-title">附件材料</div>
|
<div className="info-item">
|
<span className="item-label">组织证明：</span>
|
<div className="files-list">
|
{formData.organizationCertInfo.map((file, index) => (
|
<div key={index} className="file-item">
|
<div className="file-link-icon">
|
<img
|
src={require("../../../assets/img/link_picture.png")}
|
alt="链接"
|
/>
|
</div>
|
<div className="file-info">
|
<div className="file-name">{file.name}</div>
|
<div className="file-size-preview">
|
<span className="file-size">{(file.size / 1024).toFixed(1)}K</span>
|
<span className="preview-text">预览</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
</div>
|
)}
|
</div>
|
);
|
};
|
|
const renderPersonInfo = () => {
|
if (loading) {
|
return <div className="loading-info">加载人员信息中...</div>;
|
}
|
|
if (!personData) {
|
return <div className="no-data-info">未找到人员信息</div>;
|
}
|
|
// 根据人员类型渲染不同的信息
|
switch (personData.selectedType) {
|
case 'natural':
|
return renderNaturalPerson();
|
case 'legal':
|
return renderLegalPerson();
|
case 'nonlegal':
|
return renderNonLegalPerson();
|
default:
|
return <div className="no-data-info">未知人员类型</div>;
|
}
|
};
|
|
// 返回按钮处理
|
const handleBack = () => {
|
history.goBack();
|
};
|
|
return (
|
<div className="readperson-container">
|
<NavBarPage
|
title={`查看${personRole}`}
|
leftContentVisible={true}
|
leftContentFunc={handleBack}
|
>
|
<div className="person-role-type">
|
<div className="person-name">
|
{personData?.selectedType === 'natural' ? personData?.formData?.name :
|
personData?.selectedType === 'legal' || personData?.selectedType === 'nonlegal' ?
|
personData?.formData?.companyName : '未知'}
|
</div>
|
<div className="person-identity">
|
{personRole}
|
</div>
|
</div>
|
{renderPersonInfo()}
|
</NavBarPage>
|
</div>
|
);
|
};
|
|
export default Readperson;
|
