import React, { useState, useEffect } from 'react';
|
import { useHistory, useLocation } from 'react-router-dom';
|
import NavBarPage from '../../../components/NavBarPage';
|
import PartyInfo from './partyInfo';
|
import { Input, Button, Toast } from 'dingtalk-design-mobile';
|
import { SearchOutlined,WriteEditOutlined } from 'dd-icons';
|
import './index.less';
|
import * as $$ from '../../../utils/utility';
|
|
const LegalPerson = () => {
|
const history = useHistory();
|
const location = useLocation();
|
const [isSelectPage, setIsSelectPage] = useState(false);
|
const [searchValue, setSearchValue] = useState('');
|
const [selectedType, setSelectedType] = useState('natural');
|
const [isManualInput, setIsManualInput] = useState(false);
|
const [showList, setShowList] = useState(false);
|
const [selectedCompany, setSelectedCompany] = useState(null);
|
const [searchKeyword, setSearchKeyword] = useState('');
|
const [currentRole, setCurrentRole] = useState('applicant'); // 默认角色为申请方当事人
|
const [isFromCaseDesClick, setIsFromCaseDesClick] = useState(false); // 记录是否从caseDes弹窗点击进入
|
|
// 在组件加载时从URL参数获取当前角色和来源标志
|
useEffect(() => {
|
try {
|
// 解析URL参数
|
const queryParams = new URLSearchParams(location.search);
|
const role = queryParams.get('role');
|
const from = queryParams.get('from');
|
|
// 设置角色信息
|
if (role) {
|
setCurrentRole(role);
|
}
|
|
// 设置来源标志
|
if (from === 'casedes') {
|
setIsFromCaseDesClick(true);
|
}
|
|
// 如果是从caseDes弹窗点击进入，清空任何可能的选中公司
|
if (from === 'casedes') {
|
setSelectedCompany(null);
|
}
|
} catch (error) {
|
console.error('读取URL参数失败:', error);
|
}
|
}, [location]);
|
|
const handleSearch = () => {
|
setSearchKeyword(searchValue);
|
setShowList(true);
|
};
|
|
// 高亮显示搜索文本的函数
|
const highlightText = (text, keyword) => {
|
if (!keyword.trim() || !text.includes(keyword)) {
|
return <span>{text}</span>;
|
}
|
|
const parts = text.split(new RegExp(`(${keyword})`, 'gi'));
|
return (
|
<span className="text-container">
|
{parts.map((part, index) =>
|
part.toLowerCase() === keyword.toLowerCase() ?
|
<span key={index} className="highlight-text">{part}</span> :
|
<span key={index}>{part}</span>
|
)}
|
</span>
|
);
|
};
|
|
const handleBack = () => {
|
if (isManualInput) {
|
setIsManualInput(false);
|
} else {
|
history.goBack();
|
}
|
};
|
|
// 处理公司卡片点击事件
|
const handleCompanySelect = (company) => {
|
setSelectedCompany(company);
|
setIsSelectPage(false);
|
setIsManualInput(true);
|
|
// 选择公司后提示用户
|
Toast.success({
|
content: '已选择企业',
|
duration: 1,
|
});
|
};
|
|
const testSelectList = [
|
];
|
|
return (
|
<>
|
{isSelectPage ? (
|
<>
|
<NavBarPage leftContentVisible={true} title={selectedType === 'legal' ? "选择企业" : "选择组织"} leftContentFunc={setIsSelectPage} rightContentFunc={() => {
|
setIsSelectPage(false);
|
setIsManualInput(true);
|
}} rightChildren={<><WriteEditOutlined />手动填写</>}/>
|
<div className='main-container'>
|
<div className="search-container">
|
<div className='search-context'>
|
<div className="search-icon">
|
<SearchOutlined />
|
</div>
|
<Input
|
placeholder="企业名称/统一社会信用代码"
|
value={searchValue}
|
onChange={(value) => setSearchValue(value)}
|
/>
|
|
<div className='search-button' onClick={handleSearch}>
|
<p className='search-split'>|</p>
|
<p className='search-text'>查询</p>
|
</div>
|
</div>
|
</div>
|
{showList ? (
|
<div className='company-list'>
|
{testSelectList.map((item, index) => (
|
<div key={index} className='company-item'
|
onClick={() => handleCompanySelect(item)}>
|
<div className='company-title'>
|
{highlightText(item.title, searchKeyword)}
|
</div>
|
<div className='company-info'>
|
<div>
|
<span className="label">统一社会信用代码：</span>
|
<span className="value">{highlightText(item.creditCode, searchKeyword)}</span>
|
</div>
|
<div>
|
<span className="label">法定代表人：</span>
|
<span className="value">{highlightText(item.legalPerson, searchKeyword)}</span>
|
</div>
|
<div>
|
<span className="label">企业所在地：</span>
|
<span className="value">{highlightText(item.companyLocation, searchKeyword)}</span>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
) : (
|
<div className='select-none'>
|
<div className='select-icon'>
|
</div>
|
<div className='select-icon-text'>
|
暂无数据
|
</div>
|
</div>
|
)}
|
</div>
|
</>
|
) : (
|
<>
|
<NavBarPage leftContentVisible={true} title={getTitle(currentRole)} leftContentFunc={handleBack} />
|
<PartyInfo
|
setIsSelectPage={setIsSelectPage}
|
selectedType={selectedType}
|
setSelectedType={setSelectedType}
|
isManualInput={isManualInput}
|
setIsManualInput={setIsManualInput}
|
selectedCompany={selectedCompany}
|
role={currentRole} // 传递角色信息给PartyInfo组件
|
isFromCaseDes={isFromCaseDesClick} // 传递是否从caseDes点击进入的标志给PartyInfo组件
|
/>
|
</>
|
)}
|
</>
|
);
|
};
|
|
// 根据角色获取标题
|
function getTitle(role) {
|
switch (role) {
|
case 'applicant':
|
return '添加申请方当事人';
|
case 'applicantAgent':
|
return '添加申请方代理人';
|
case 'respondent':
|
return '添加被申请方当事人';
|
case 'respondentAgent':
|
return '添加被申请方代理人';
|
default:
|
return '添加申请方当事人';
|
}
|
}
|
|
export default LegalPerson;
|
