import React, { useEffect, useState } from 'react';
|
import { person, majorStatus_1, visit_1 } from '@/assets/images'
|
import { person1 } from '@/assets/images/icon'
|
import PreviewImage from '@/components/PreviewImage';
|
import * as $$ from '@/utils/utility';
|
import { Tooltip, Space } from '@arco-design/web-react';
|
|
const ApplyDialog = ({ applyDialog, handleCheckPreview, modalClick }) => {
|
return (
|
<>
|
{
|
applyDialog?.map((item, index) => (
|
<div>
|
<table border="1" align="center" cellpadding="6" className="table" key={'applyDialog' + index}>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120" >姓名</th>
|
<td width='380'><div style={{ display: 'flex' }}><div>{item.trueName || '-'}</div><div onClick={() => handleCheckPreview(item)} className="public-a-color title-personRemark">自然人</div></div></td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
|
<td width='380'>{item.mobile || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title" width='140'>性别</th>
|
<td>{item.sexName || '-'}</td>
|
<td rowspan="4" width="112" height='147' style={{ padding: '0px' }}>
|
<img border="0" src={person1} alt="" style={{
|
width: '100%',
|
height: '100%',
|
// objectFit: 'cover', // 保持原始宽高比并填充整个容器
|
objectPosition: 'center', // 图片居中显示
|
padding: '25px'
|
}} />
|
</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">证件类型</th>
|
<td>{item.certiTypeName || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">证件号码</th>
|
<td>{item.certiNo || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">民族</th>
|
<td>{item.nationName || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">联系地址</th>
|
<td>{item.addr || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
|
<td>{item.placeAddr || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title" rowspan="2" ><div style={{ borderRadius: '2px', justifyContent: 'center', display: 'flex', alignItems: 'center', color: '#F53F3F', gap: '8px' }}><img src={majorStatus_1} alt="" srcset="" /><Tooltip content='是否有个人极端倾向'>{$$.ellipsis('是否有个人极端倾向', 6)}</Tooltip></div></th>
|
<td rowspan="2" >{item.extreme === 1 ? '是' : item.extreme === 0 ? '否' : '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">工作单位</th>
|
<td>{item.workUnit || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
|
<td>
|
{
|
item.file?.map((result, resIndex) => {
|
if (result.response) {
|
//新上传的，前端数据
|
const newData = result.response.data[0]
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={newData.name} src={newData.showUrl} />
|
{resIndex !== item.file?.length - 1 && <>，</>}
|
</div>
|
} else {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={result.name} src={result.showUrl} />
|
{resIndex !== item.file?.length - 1 && <>，</>}
|
</div>
|
}
|
})
|
}
|
</td>
|
</tr>
|
</table>
|
{/* 反映诉求记录、重点人员标签、重点青少年标签-穗育苗 */}
|
{
|
(item?.pagePerson?.total > 0 || item?.LabelInfo?.labelList?.length > 0) &&
|
<Space style={{ marginBottom: '12px' }}>
|
{item?.pagePerson?.total > 0 && < div onClick={() => { modalClick(item, '1') }} style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 反映诉求记录<span className='public-color'>（{item?.pagePerson?.total || 0}）</span></div>}
|
{item?.LabelInfo?.labelList?.length > 0 && <div onClick={() => { modalClick(item, '2') }} style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 重点人员标签<span className='public-color'>（{item?.LabelInfo?.labelList?.length || 0}）</span></div>}
|
{/* <div style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 重点青少年标签-穗育苗<span className='public-color'>（2）</span></div> */}
|
</Space >
|
}
|
</div >
|
))
|
}
|
|
</>
|
|
)
|
|
}
|
|
const AgentDialog = ({ agentDialog, handleCheckPreview, personData, modalClick }) => {
|
return (
|
<>
|
{agentDialog?.map((item, index) => (
|
<>
|
<table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }} key={item.id}>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
|
<td width='380'><div style={{ display: 'flex' }}><div>{item.trueName || '-'}</div><div onClick={() => handleCheckPreview(item)} className="public-a-color title-personRemark">代理人</div></div></td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
|
<td width='380'>{item.mobile || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title" width="140">性别</th>
|
<td>{item.sexName || '-'}</td>
|
<td rowspan="4" width="112" height='147' style={{ padding: '0px' }}>
|
<img border="0" src={person1} alt="" style={{ padding: '25px' }} />
|
</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">证件类型</th>
|
<td>{item.certiTypeName || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">证件号码</th>
|
<td>{item.certiNo || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">民族</th>
|
<td>{item.nationName || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">联系地址</th>
|
<td>{item.addr || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
|
<td>{item.placeAddr || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title" ><div style={{ borderRadius: '2px', justifyContent: 'center', display: 'flex', alignItems: 'center', color: '#F53F3F', gap: '8px' }}><img src={majorStatus_1} alt="" srcset="" /><Tooltip content='是否有个人极端倾向'>{$$.ellipsis('是否有个人极端倾向', 6)}</Tooltip></div></th>
|
<td>{item.extreme === 1 ? '是' : item.extreme === 0 ? '否' : '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">工作单位</th>
|
<td>{item.workUnit || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">委托关系</th>
|
<td>{item.agentRelateName || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">委托类型</th>
|
<td>{$$.options.agentType?.find(i => i.value === item.agentType)?.label || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">代理对象</th>
|
<td >{personData?.filter(i => item.personId.indexOf(i.id) != -1)?.map(i => i.trueName) || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
|
<td>
|
{
|
item.file?.map((result, resIndex) => {
|
if (result.response) {
|
//新上传的，前端数据
|
const newData = result.response.data[0]
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={newData.name} src={newData.showUrl} />
|
{resIndex !== item.file?.length - 1 && <>，</>}
|
</div>
|
} else {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={result.name} src={result.showUrl} />
|
{resIndex !== item.file?.length - 1 && <>，</>}
|
</div>
|
}
|
})
|
}
|
</td>
|
<th bgcolor="#F7F8FA" className="table-title">代理人授权委托书</th>
|
<td>
|
{
|
item.file1?.map((result, resIndex) => {
|
if (result.response) {
|
//新上传的，前端数据
|
const newData = result.response.data[0]
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={newData.name} src={newData.showUrl} />
|
{resIndex !== item.file1?.length - 1 && <>，</>}
|
</div>
|
} else {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={result.name} src={result.showUrl} />
|
{resIndex !== item.file1?.length - 1 && <>，</>}
|
</div>
|
}
|
})
|
}
|
</td>
|
</tr>
|
</table>
|
{/* 反映诉求记录、重点人员标签、重点青少年标签-穗育苗 */}
|
{
|
(item?.pagePerson?.total > 0 || item?.LabelInfo?.labelList?.length > 0) &&
|
<Space style={{ marginBottom: '12px' }}>
|
{item?.pagePerson?.total > 0 && < div onClick={() => { modalClick(item, '1') }} style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 反映诉求记录<span className='public-color'>（{item?.pagePerson?.total || 0}）</span></div>}
|
{item?.LabelInfo?.labelList?.length > 0 && < div onClick={() => { modalClick(item, '2') }} style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 重点人员标签<span className='public-color'>（{item?.LabelInfo?.labelList?.length || 0}）</span></div>}
|
{/* <div style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 重点青少年标签-穗育苗<span className='public-color'>（2）</span></div> */}
|
</Space >
|
}
|
</>
|
))}
|
</>
|
)
|
}
|
|
const Respondent = ({ respondent, handleCheckPreview, modalClick }) => {
|
return (
|
<>
|
{respondent?.map((item, index) => (
|
<>
|
<table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }} key={item.id}>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">企业名称</th>
|
<td width='20%'><div style={{ display: 'flex' }}><div style={{ maxWidth: '220px' }}>{item.trueName}</div><div onClick={() => handleCheckPreview(item)} className="public-a-color title-personRemark">{item.perClassName}</div></div></td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
|
<td width='20%'>{item.mobile || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">企业所在地</th>
|
<td width='20%'>{item.addr || '-'}</td>
|
</tr>
|
<tr style={{ width: '33%' }}>
|
<th bgcolor="#F7F8FA" className="table-title">企业类型</th>
|
<td width='20%'>{item.orgaTypeName || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">法定代表人</th>
|
<td width='20%'>{item.deputy || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">统一社会信用代码</th>
|
<td width='20%'>{item.orgaCode || '-'}</td>
|
</tr>
|
<tr style={{ width: '33%' }}>
|
<th bgcolor="#F7F8FA" className="table-title">住所</th>
|
<td width='20%'>{item.placeAddr || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">企业登记材料</th>
|
<td width='20%'>
|
{
|
item.file?.map((result, resIndex) => {
|
if (result.response) {
|
//新上传的，前端数据
|
const newData = result.response.data[0]
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={newData.name} src={newData.showUrl} />
|
{resIndex !== item.file?.length - 1 && <>，</>}
|
</div>
|
} else {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={result.name} src={result.showUrl} />
|
{resIndex !== item.file?.length - 1 && <>，</>}
|
</div>
|
}
|
})
|
}
|
</td>
|
<th bgcolor="#F7F8FA" className="table-title" >法定代表人身份证明材料</th>
|
<td width='20%'>
|
{
|
item.file1?.map((result, resIndex) => {
|
if (result.response) {
|
//新上传的，前端数据
|
const newData = result.response.data[0]
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={newData.name} src={newData.showUrl} />
|
{resIndex !== item.file1?.length - 1 && <>，</>}
|
</div>
|
} else {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={result.name} src={result.showUrl} />
|
{resIndex !== item.file1?.length - 1 && <>，</>}
|
</div>
|
}
|
})
|
}
|
</td>
|
</tr>
|
</table>
|
{/* 反映诉求记录、重点人员标签、重点青少年标签-穗育苗 */}
|
{
|
(item?.pagePerson?.total > 0 || item?.LabelInfo?.labelList?.length > 0) &&
|
<Space style={{ marginBottom: '12px' }}>
|
{item?.pagePerson?.total > 0 && < div onClick={() => { modalClick(item, '1') }} style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 反映诉求记录<span className='public-color'>（{item?.pagePerson?.total || 0}）</span></div>}
|
{item?.LabelInfo?.labelList?.length > 0 && < div onClick={() => { modalClick(item, '2') }} style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 重点人员标签<span className='public-color'>（{item?.LabelInfo?.labelList?.length || 0}）</span></div>}
|
{/* <div style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 重点青少年标签-穗育苗<span className='public-color'>（2）</span></div> */}
|
</Space >
|
}
|
</>
|
))
|
}
|
</>
|
)
|
|
}
|
|
const Company = ({ company, handleCheckPreview, modalClick }) => {
|
return (
|
<>
|
{company?.map((item, index) => (
|
<>
|
<table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }} key={item.id}>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">机构名称</th>
|
<td width='380'><div style={{ display: 'flex' }}><div>{item.trueName}</div><div onClick={() => handleCheckPreview(item)} className="public-a-color title-personRemark">{item.perClassName}</div></div></td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
|
<td width='380'>{item.mobile || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">机构所在地</th>
|
<td>{item.addr || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">机构类型</th>
|
<td>{item.orgaTypeName || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">机构代表人</th>
|
<td>{item.deputy || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">机构组织代码</th>
|
<td>{item.orgaCode || '-'}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">住所</th>
|
<td>{item.placeAddr || '-'}</td>
|
<th bgcolor="#F7F8FA" className="table-title">机构登记材料</th>
|
<td>
|
{
|
item.file?.map((result, resIndex) => {
|
if (result.response) {
|
//新上传的，前端数据
|
const newData = result.response.data[0]
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={newData.name} src={newData.showUrl} />
|
{resIndex !== item.file?.length - 1 && <>，</>}
|
</div>
|
} else {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={result.name} src={result.showUrl} />
|
{resIndex !== item.file?.length - 1 && <>，</>}
|
</div>
|
}
|
})
|
}
|
</td>
|
<th bgcolor="#F7F8FA" className="table-title" >机构代表人身份证明材料</th>
|
<td>
|
{
|
item.file1?.map((result, resIndex) => {
|
if (result.response) {
|
//新上传的，前端数据
|
const newData = result.response.data[0]
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={newData.name} src={newData.showUrl} />
|
{resIndex !== item.file1?.length - 1 && <>，</>}
|
</div>
|
} else {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={result.name} src={result.showUrl} />
|
{resIndex !== item.file1?.length - 1 && <>，</>}
|
</div>
|
}
|
})
|
}
|
</td>
|
</tr>
|
</table>
|
{/* 反映诉求记录、重点人员标签、重点青少年标签-穗育苗 */}
|
{
|
(item?.pagePerson?.total > 0 || item?.LabelInfo?.labelList?.length > 0) &&
|
<Space style={{ marginBottom: '12px' }}>
|
{item?.pagePerson?.total > 0 && < div onClick={() => { modalClick(item, '1') }} style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 反映诉求记录<span className='public-color'>（{item?.pagePerson?.total || 0}）</span></div>}
|
{item?.LabelInfo?.labelList?.length > 0 && <div onClick={() => { modalClick(item, '2') }} style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 重点人员标签<span className='public-color'>（{item?.LabelInfo?.labelList?.length || 0}）</span></div>}
|
{/* <div style={{ cursor: 'pointer' }} className='public-flex'><img src={visit_1} alt="" srcset="" /> 重点青少年标签-穗育苗<span className='public-color'>（2）</span></div> */}
|
</Space >
|
}
|
</>
|
|
))
|
}
|
</>
|
)
|
|
}
|
|
export { ApplyDialog, AgentDialog, Respondent, Company };
|
