import React, { useState, useEffect } from 'react';
|
import NavBarPage from '../../../components/NavBarPage';
|
import ProcessFlow from '../components/ProcessFlow';
|
import { WriteNoteOutlined, ApplyOutlined } from 'dd-icons';
|
import * as $$ from '../../../utils/utility';
|
import './index.less';
|
import { useHistory } from 'react-router-dom';
|
import { Form, Button, Toast, Modal } from 'dingtalk-design-mobile';
|
import { general_user_add_blue, lettersVisits_1 } from '../../../assets/img';
|
const NaturePersonNone = () => {
|
const [currentForm, setCurrentForm] = useState('dispute'); // 直接设置初始表单为描述纠纷
|
const [guideVisible, setGuideVisible] = useState(false); // 添加指引弹窗可见状态
|
const [personAdded, setPersonAdded] = useState(false);
|
const [visible, setVisible] = useState(false);
|
const [cachedForms, setCachedForms] = useState([]); // 存储缓存的表单数据
|
const [hasPersonnel, setHasPersonnel] = useState(false); // 是否有人员信息的标志
|
const history = useHistory();
|
|
const [tooltipText, setTooltipText] = useState('');
|
const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
|
|
// // 加载所有缓存的人员信息
|
useEffect(() => {
|
let cachedData = $$.getLocal('case_personnel_cacheList') || [];
|
if (cachedData.length > 0) {
|
setCachedForms(cachedData);
|
setHasPersonnel(cachedData.length > 0);
|
$$.clearLocal('case_personnel_cacheList');
|
}
|
}, [$$.getLocal('case_personnel_cacheList')]);
|
|
const handleAddPerson = () => {
|
setVisible(true);
|
};
|
|
const handleClose = () => {
|
setVisible(false);
|
};
|
|
const handleSaveDraft = () => {
|
Toast.show('保存草稿');
|
};
|
|
// 跳转到描述纠纷页面
|
const navigateToCaseDes = () => {
|
if (cachedForms.length > 0) {
|
$$.setSessionStorage('saveData', { personList: cachedForms });
|
history.push('/gzdyh/caseDes');
|
} else {
|
Toast.fail('请先添加人员信息');
|
}
|
};
|
|
// 按照角色类型排序功能
|
const sortCachedFormsByRole = (forms) => {
|
// 排序顺序: 申请方当事人，申请方代理人，被申请方当事人，被申请方代理人
|
const roleOrder = {
|
'applicant': 1,
|
'applicantAgent': 2,
|
'respondent': 3,
|
'respondentAgent': 4,
|
};
|
|
return [...forms].sort((a, b) => {
|
return (roleOrder[a.role] || 99) - (roleOrder[b.role] || 99);
|
});
|
};
|
|
// 定义节点状态：0-未开始，1-进行中，2-已完成
|
const [nodeStatus, setNodeStatus] = useState([1, 0, 0]);
|
|
// 节点配置
|
const nodes = [
|
{ id: 0, label: '填写人员' },
|
{ id: 1, label: '描述纠纷' },
|
{ id: 2, label: '上报矛盾' },
|
];
|
|
// 渲染缓存的表单数据
|
const renderCachedForms = () => {
|
// 对人员数据按角色排序
|
const sortedForms = sortCachedFormsByRole(cachedForms);
|
return (
|
<div>
|
{sortedForms.map((cachedForm, index) => {
|
let personType = '';
|
let idCardNumber = '';
|
let agentObjectInfo = null;
|
|
if (cachedForm.perClass === '09_01001-1') {
|
personType = '自然人';
|
} else if (cachedForm.perClass === '09_01001-2') {
|
personType = '法人';
|
} else if (cachedForm.perClass === '09_01001-3') {
|
personType = '非法人组织';
|
}
|
|
return (
|
<React.Fragment key={index}>
|
<div className="card-container">
|
<div
|
className="cached-form-card"
|
onClick={() => {
|
// 跳转到readperson页面查看详情
|
// history.push(`/gzdyh/readperson?id=${cachedForm.timestamp}`);
|
}}
|
>
|
{/* 删除图标 */}
|
<div className="delete-icons">
|
<div
|
className="delete-icon-wrapper"
|
onClick={(e) => {
|
$$.confirmModal({
|
title: '删除确认',
|
subtitle: (
|
<span>
|
确定删除当前<span style={{ color: 'var(--theme_primary1_color)' }}>{cachedForm?.trueName}</span>吗？
|
</span>
|
),
|
onOk: () => {
|
// 将当前当事人从缓存中删除
|
const updatedForms = cachedForms.filter((form) => form.id !== cachedForm.id);
|
setCachedForms(updatedForms);
|
// 更新状态
|
setHasPersonnel(updatedForms.length > 0);
|
setPersonAdded(updatedForms.length > 0);
|
},
|
});
|
}}
|
>
|
<img src={require('../../../assets/img/Rectangle 812.png')} alt="删除" className="delete-icon" />
|
<img src={require('../../../assets/img/remove_1.png')} alt="删除图标" className="delete-icon-overlay" />
|
</div>
|
</div>
|
{cachedForm?.perType === '15_020008-1' && (
|
<div className="applicant-badge">
|
<span className="applicant-text">申请方</span>
|
</div>
|
)}
|
{cachedForm?.perType === '15_020008-2' && (
|
<div className="respondent-badge">
|
<span className="respondent-text">被申</span>
|
<span className="respondent-text">请方</span>
|
</div>
|
)}
|
<div className="content-wrapper">
|
<div className="cached-form-content">
|
<div className="cached-form-name-phone">
|
<span className="cached-form-name">{cachedForm?.trueName || '-'}</span>
|
{cachedForm?.mobile && <span className="cached-form-phone">{cachedForm?.mobile || '-'}</span>}
|
</div>
|
</div>
|
<div className="cached-form-header">
|
<div className="cached-form-type">
|
{cachedForm?.perType === '24_00006-1' || cachedForm?.perType === '24_00006-2' ? (
|
<>
|
代理对象：
|
<span style={{ marginLeft: '2px', color: '#86909C', fontSize: '12px' }}>{agentObjectInfo?.name || '未知对象'}</span>
|
</>
|
) : (
|
<>
|
<span
|
style={{
|
display: 'inline-flex',
|
alignItems: 'center',
|
height: '20px',
|
marginLeft: '0px',
|
}}
|
>
|
<span
|
style={{
|
fontSize: '12px',
|
lineHeight: '20px',
|
color: ' rgba(23,26,29,0.60)',
|
marginLeft: '0px',
|
}}
|
>
|
自然人
|
</span>
|
<span
|
style={{
|
color: ' rgba(23,26,29,0.60)',
|
fontSize: '11px',
|
lineHeight: '12px',
|
marginLeft: '4px',
|
}}
|
>
|
|
|
</span>
|
<span
|
style={{
|
color: 'rgba(23,26,29,0.60)',
|
fontSize: '12px',
|
lineHeight: '20px',
|
}}
|
>
|
{cachedForm.certiNo || '-'}
|
</span>
|
</span>
|
</>
|
)}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
{index < sortedForms.length - 1 && <div className="card-separator"></div>}
|
</React.Fragment>
|
);
|
})}
|
</div>
|
);
|
};
|
|
// 渲染人员表单
|
const renderPersonnelForm = () => {
|
return (
|
<div className="case-info-block case-personnel">
|
<div className="block-content">
|
{/* 显示缓存的人员表单数据 */}
|
{renderCachedForms()}
|
|
<div className="add-personnel-container">
|
<div
|
className="add-personnel-btn1"
|
onClick={() => {
|
console.log('添加人员信息');
|
// 显示弹窗
|
setVisible(true);
|
}}
|
>
|
<img src={general_user_add_blue} alt="用户图标" style={{ marginRight: '8px' }} />
|
<span>添加人员信息</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
// 有人员时的渲染显示
|
const renderPersonPage = () => (
|
<div>
|
<NavBarPage
|
leftContentVisible={true}
|
title="登记"
|
rightContentFunc={handleSaveDraft}
|
rightChildren={
|
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
<img style={{ width: '14px', height: '14px' }} src={lettersVisits_1} alt="保存草稿" />
|
保存草稿
|
</div>
|
}
|
>
|
<div className="case-info-put-container">
|
{renderPersonnelForm()}
|
<div className="bottom-button-area">
|
<Button className="save-button" type="primary" onClick={navigateToCaseDes}>
|
<p className="save-button-text">下一步</p>
|
</Button>
|
</div>
|
</div>
|
</NavBarPage>
|
{/* 导航弹窗 */}
|
<div className="case-process-container">
|
<ProcessFlow nodes={nodes} nodeStatus={nodeStatus} />
|
</div>
|
</div>
|
);
|
|
// 渲染没有人员时的初始页面
|
const renderEmptyPersonnelPage = () => (
|
<div className="first">
|
<NavBarPage
|
leftContentVisible={true}
|
title="登记"
|
rightContentFunc={handleSaveDraft}
|
rightContentText="保存草稿"
|
rightIcon={<WriteNoteOutlined />}
|
>
|
<div className="self-inspection-container">
|
<div className="person-placeholder">
|
<div className="person-image">
|
<img src={require('../../../assets/img/Group.png')} alt="人员占位图" />
|
</div>
|
<p className="add-person-text">请先添加当事人</p>
|
<div className="add-person-btn" onClick={handleAddPerson}>
|
<img src={require('../../../assets/img/general_user-add.png')} alt="用户图标" />
|
<span>添加人员信息</span>
|
</div>
|
</div>
|
</div>
|
</NavBarPage>
|
</div>
|
);
|
|
return (
|
<>
|
{hasPersonnel ? renderPersonPage() : renderEmptyPersonnelPage()}
|
|
{/* 添加人员弹窗 */}
|
<Modal visible={visible} title="添加人员" onClose={handleClose} className="person-modal">
|
<div className="modal-wrapper">
|
<div className="person-modal-content">
|
<div className="person-modal-wrapper">
|
<div className="modal-main-content">
|
<div className="modal-option-item blue-bg">
|
<div className="option-content">
|
<div className="content-item-a">
|
<span className="item-title">申请方当事人</span>
|
</div>
|
<div className="content-item-b">
|
<span className="item-desc">主动提出纠纷诉求的一方</span>
|
</div>
|
<div className="content-item-c">
|
<Button
|
className="item-button"
|
onClick={() => {
|
setVisible(false);
|
// 需要将cachedForms放入缓存
|
$$.setLocal('case_personnel_cache', cachedForms);
|
history.push('/gzdyh/legalPerson?perType=15_020008-1&perTypeName=申请方当事人&edit=false');
|
}}
|
>
|
添加
|
</Button>
|
</div>
|
</div>
|
<img src={require('../../../assets/img/zxperson1.png')} alt="选项图标" className="option-image" />
|
</div>
|
<div className="modal-option-item blue-bg">
|
<div className="option-content">
|
<div className="content-item-a">
|
<span className="item-title">申请方代理人</span>
|
</div>
|
<div className="content-item-b">
|
<span className="item-desc">代表申请方处理纠纷的人</span>
|
</div>
|
<div className="content-item-c">
|
<Button
|
className="item-button"
|
onClick={(e) => {
|
// 检查是否已存在申请方当事人
|
const applicantExists = cachedForms.some((form) => form.perType === '15_020008-1');
|
if (!applicantExists) {
|
$$.showToast({
|
type: 'fail',
|
mask: true,
|
icon: <ApplyOutlined />,
|
content: '请先添加申请方当事人',
|
});
|
return;
|
}
|
// 使用URL参数传递角色和来源信息
|
setVisible(false);
|
setPersonAdded(true);
|
// 需要将cachedForms放入缓存
|
$$.setLocal('case_personnel_cache', cachedForms);
|
history.push('/gzdyh/Agentperson?perType=24_00006-1&perTypeName=申请方代理人&edit=false'); // 使用URL参数传递角色信息
|
}}
|
>
|
添加
|
</Button>
|
</div>
|
</div>
|
<img src={require('../../../assets/img/zxperson2.png')} alt="选项图标" className="option-image" />
|
</div>
|
<div className="modal-option-item orange-bg">
|
<div className="option-content">
|
<div className="content-item-a">
|
<span className="item-title">被申请方当事人</span>
|
</div>
|
<div className="content-item-b">
|
<span className="item-desc">被动应对纠纷诉求的一方</span>
|
</div>
|
<div className="content-item-c">
|
<Button
|
className="item-button"
|
onClick={() => {
|
setVisible(false);
|
// 需要将cachedForms放入缓存
|
$$.setLocal('case_personnel_cache', cachedForms);
|
history.push('/gzdyh/legalPerson?perType=15_020008-2&perTypeName=被申请方当事人&edit=false');
|
}}
|
>
|
添加
|
</Button>
|
</div>
|
</div>
|
<img src={require('../../../assets/img/zxperson3.png')} alt="选项图标" className="option-image" />
|
</div>
|
<div className="modal-option-item orange-bg">
|
<div className="option-content">
|
<div className="content-item-a">
|
<span className="item-title">被申请方代理人</span>
|
</div>
|
<div className="content-item-b">
|
<span className="item-desc">代表被申请方处理纠纷的人</span>
|
</div>
|
<div className="content-item-c">
|
<Button
|
className="item-button"
|
onClick={(e) => {
|
// 检查是否已存在申请方当事人
|
const applicantExists = cachedForms.some((form) => form.perType === '15_020008-2');
|
if (!applicantExists) {
|
$$.showToast({
|
type: 'fail',
|
content: '请先添加被申请方当事人',
|
});
|
return;
|
}
|
setVisible(false);
|
setPersonAdded(true);
|
// 需要将cachedForms放入缓存
|
$$.setLocal('case_personnel_cache', cachedForms);
|
history.push('/gzdyh/Agentperson?perType=24_00006-2&perTypeName=被申请方代理人&edit=false'); // 使用URL参数传递角色信息
|
}}
|
>
|
添加
|
</Button>
|
</div>
|
</div>
|
<img src={require('../../../assets/img/zxperson4.png')} alt="选项图标" className="option-image" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
className="cancel-button"
|
onClick={() => {
|
handleClose();
|
}}
|
>
|
<span className="cancel-icon">×</span>
|
</div>
|
</Modal>
|
</>
|
);
|
};
|
|
export default NaturePersonNone;
|
