From 621a3268a8c2cebf899e3ba824c49a1513cb619b Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Fri, 13 Sep 2024 18:32:35 +0800
Subject: [PATCH] feat: 图片
---
gz-customerSystem/src/views/register/visit/component/previewTable.jsx | 220 +++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 166 insertions(+), 54 deletions(-)
diff --git a/gz-customerSystem/src/views/register/visit/component/previewTable.jsx b/gz-customerSystem/src/views/register/visit/component/previewTable.jsx
index 1478a43..e9fcefc 100644
--- a/gz-customerSystem/src/views/register/visit/component/previewTable.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/previewTable.jsx
@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
import { person, link } from '@/assets/images'
+import { person1 } from '@/assets/images/icon'
+import PreviewImage from '@/components/PreviewImage';
+
const ApplyDialog = ({ applyDialog }) => {
@@ -7,47 +10,56 @@
<>
{
applyDialog?.map((item, index) => (
- <table border="1" align="center" cellpadding="6" className="table">
+ <table border="1" align="center" cellpadding="6" className="table" 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 className="title-personRemark">{item.perClassName}</div></div></td>
+ <td width='380'><div style={{ display: 'flex' }}><div>{item.trueName || '-'}</div><div className="title-personRemark">自然人</div></div></td>
<th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
- <td width='380'>{item.phone}</td>
+ <td width='380'>{item.mobile || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title" width='140'>性别</th>
- <td>{item.sex}</td>
+ <td>{item.sexName || '-'}</td>
<td rowspan="4" width="112" height='147' style={{ padding: '0px' }}>
- <img border="0" src={person} alt="" style={{
+ <img border="0" src={person1} alt="" style={{
width: '100%',
height: '100%',
- objectFit: 'cover', // 保持原始宽高比并填充整个容器
+ // objectFit: 'cover', // 保持原始宽高比并填充整个容器
objectPosition: 'center', // 图片居中显示
}} />
</td>
</tr>
<tr>
<th bgcolor="#F7F8FA" className="table-title">证件类型</th>
- <td>{item.certiTypeName}</td>
+ <td>{item.certiTypeName || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">证件号码</th>
- <td>{item.certiNo}</td>
+ <td>{item.certiNo || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">民族</th>
- <td>{item.nationName}</td>
+ <td>{item.nationName || '-'}</td>
</tr>
<tr>
<th bgcolor="#F7F8FA" className="table-title">联系地址</th>
- <td>{item.addr}</td>
+ <td>{item.addr || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
- <td>{item.placeAddr}</td>
+ <td>{item.placeAddr || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title" rowspan="2" >是否有个人极端倾向</th>
- <td rowspan="2" >{item.extreme}</td>
+ <td rowspan="2" >{item.extreme === 1 ? '是' : '否' || '-'}</td>
</tr>
<tr>
<th bgcolor="#F7F8FA" className="table-title">工作单位</th>
- <td>{item.workUnit}</td>
+ <td>{item.workUnit || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
<td>
- <a href="your-link-here.html" target="_blank">
- <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf
- </a>
+ {
+ item.fileInfoList?.map(res => {
+ if (res.ownerType == "22_00018-202") {
+ return res.fileList.map((result, resIndex) => {
+ return <div style={{display: 'inline-block'}}>
+ <PreviewImage name={result.name} src={result.showUrl} />
+ {resIndex !== res.fileList.length - 1 && <>，</>}
+ </div>
+ })
+ }
+ })
+ }
</td>
</tr>
</table>
@@ -65,56 +77,74 @@
return (
<>
{agentDialog?.map((item, index) => (
- <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
+ <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 className="title-personRemark">{item.perClassName}</div></div></td>
+ <td width='380'><div style={{ display: 'flex' }}><div>{item.trueName || '-'}</div><div className="title-personRemark">代理人</div></div></td>
<th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
- <td width='380'>{item.phone}</td>
+ <td width='380'>{item.mobile || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title" width="140">性别</th>
- <td>{item.sex}</td>
+ <td>{item.sexName || '-'}</td>
<td rowspan="4" width="112" height='147' style={{ padding: '0px' }}>
- <img border="0" src={person} alt="" style={{ width: '100%', height: '100%' }} />
+ <img border="0" src={person1} alt="" style={{ width: '100%', height: '100%' }} />
</td>
</tr>
<tr>
<th bgcolor="#F7F8FA" className="table-title">证件类型</th>
- <td>{item.certiTypeName}</td>
+ <td>{item.certiTypeName || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">证件号码</th>
- <td>{item.certiNo}</td>
+ <td>{item.certiNo || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">民族</th>
- <td>{item.nationName}</td>
+ <td>{item.nationName || '-'}</td>
</tr>
<tr>
<th bgcolor="#F7F8FA" className="table-title">联系地址</th>
- <td>{item.addr}</td>
+ <td>{item.addr || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
- <td>{item.placeAddr}</td>
+ <td>{item.placeAddr || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title" >是否有个人极端倾向</th>
- <td>{item.extreme}</td>
+ <td>{item.extreme || '-'}</td>
</tr>
<tr>
<th bgcolor="#F7F8FA" className="table-title">工作单位</th>
- <td>{item.workUnit}</td>
+ <td>{item.workUnit || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">委托关系</th>
- <td>{item.agentRelateName}</td>
+ <td>{item.agentRelate || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">委托类型</th>
- <td>{item.agentTypeName}</td>
+ <td>{item.agentType || '-'}</td>
</tr>
<tr>
<th bgcolor="#F7F8FA" className="table-title">代理对象</th>
- <td>{item.perTypeName}</td>
+ <td>{item.personId || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
<td>
- <a href="your-link-here.html" target="_blank">
- <img src={link} alt="" className="title-file" />李巧凤身份证明材料.pdf
- </a>
+ {
+ item.fileInfoList?.map(res => {
+ if (res.ownerType == "22_00018-202") {
+ return res.fileList?.map((result, resIndex) => {
+ return <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />{result.trueName}
+ {resIndex !== res.fileList.length - 1 && <>，</>}
+ </a>
+ })
+ }
+ })
+ }
</td>
<th bgcolor="#F7F8FA" className="table-title">代理人授权委托书</th>
<td>
- <a href="your-link-here.html" target="_blank">
- <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf
- </a>
+ {
+ item.fileInfoList?.map(res => {
+ if (res.ownerType == '22_00018-207') {
+ return res.fileList.map((result, resIndex) => {
+ return <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />{result.trueName}
+ {resIndex !== res.fileList.length - 1 && <>，</>}
+ </a>
+ })
+ }
+ })
+ }
</td>
</tr>
@@ -125,41 +155,59 @@
)
}
-const Respondent = ({ respondent}) => {
+const Respondent = ({ respondent }) => {
return (
<>
{respondent?.map((item, index) => (
- <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}>
+ <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.orgaType}</div><div className="title-personRemark">{item.perClassName}</div></div></td>
+ <td width='380'><div style={{ display: 'flex' }}><div>{item.trueName}</div><div className="title-personRemark">{item.perClassName}</div></div></td>
<th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
- <td width='380'>{item.phone}</td>
+ <td width='380'>{item.mobile || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title" width="120">企业所在地</th>
- <td>{item.address}</td>
+ <td>{item.addr || '-'}</td>
</tr>
<tr>
<th bgcolor="#F7F8FA" className="table-title">企业类型</th>
- <td>{item.companyType}</td>
+ <td>{item.orgaTypeName || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">法定代表人</th>
- <td>{item.legalPerson}</td>
+ <td>{item.deputy || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">统一社会信用代码</th>
- <td>{item.creditCode}</td>
+ <td>{item.orgaCode || '-'}</td>
</tr>
<tr>
<th bgcolor="#F7F8FA" className="table-title">住所</th>
- <td>{item.president}</td>
+ <td>{item.placeAddr || '-'}</td>
<th bgcolor="#F7F8FA" className="table-title">企业登记材料</th>
<td>
- <a href="your-link-here.html" target="_blank">
- <img src={link} alt="" className="title-file" />广东好又多贸易有限公司营业执照副本.pdf
- </a>
+ {
+ item.fileInfoList?.map(res => {
+ if (res.ownerType == '22_00018-203') {
+ return res.fileList.map((result, resIndex) => {
+ return <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />{result.trueName}
+ {resIndex !== res.fileList.length - 1 && <>，</>}
+ </a>
+ })
+ }
+ })
+ }
</td>
<th bgcolor="#F7F8FA" className="table-title" >法定代表人身份证明材料</th>
<td>
- <a href="your-link-here.html" target="_blank">
- <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf
- </a>
+ {
+ item.fileInfoList?.map(res => {
+ if (res.ownerType == '22_00018-204') {
+ return res.fileList.map((result, resIndex) => {
+ return <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />{result.trueName}
+ {resIndex !== res.fileList.length - 1 && <>，</>}
+ </a>
+ })
+ }
+ })
+ }
</td>
</tr>
</table>
@@ -171,4 +219,68 @@
}
-export { ApplyDialog, AgentDialog,Respondent };
\ No newline at end of file
+const Company = ({ company }) => {
+ 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 className="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.fileInfoList?.map(res => {
+ if (res.ownerType == '22_00018-203') {
+ return res.fileList.map((result, resIndex) => {
+ return <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />{result.trueName}
+ {resIndex !== res.fileList.length - 1 && <>，</>}
+ </a>
+ })
+ }
+ })
+ }
+ </td>
+ <th bgcolor="#F7F8FA" className="table-title" >机构代表人身份证明材料</th>
+ <td>
+ {
+ item.fileInfoList?.map(res => {
+ if (res.ownerType == '22_00018-204') {
+ return res.fileList.map((result, resIndex) => {
+ return <a href="your-link-here.html" target="_blank">
+ <img src={link} alt="" className="title-file" />{result.trueName}
+ {resIndex !== res.fileList.length - 1 && <>，</>}
+ </a>
+ })
+ }
+ })
+ }
+ </td>
+ </tr>
+ </table>
+
+ ))
+ }
+ </>
+ )
+
+}
+
+export { ApplyDialog, AgentDialog, Respondent, Company };
\ No newline at end of file
--
Gitblit v1.8.0