From 42ad61a075d8a3c32949d83bf40acc53b2da25b1 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Fri, 13 Sep 2024 20:53:35 +0800
Subject: [PATCH] fix: 修改预览的文件回显bug
---
gz-customerSystem/src/views/register/visit/component/previewTable.jsx | 157 +++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 130 insertions(+), 27 deletions(-)
diff --git a/gz-customerSystem/src/views/register/visit/component/previewTable.jsx b/gz-customerSystem/src/views/register/visit/component/previewTable.jsx
index 6ab1329..36a8e61 100644
--- a/gz-customerSystem/src/views/register/visit/component/previewTable.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/previewTable.jsx
@@ -1,8 +1,12 @@
-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 }) => {
+ console.log(applyDialog, 'applyDialog');
return (
<>
{
@@ -16,10 +20,10 @@
<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={person} alt="" style={{
+ <img border="0" src={person1} alt="" style={{
width: '100%',
height: '100%',
- objectFit: 'cover', // 保持原始宽高比并填充整个容器
+ // objectFit: 'cover', // 保持原始宽高比并填充整个容器
objectPosition: 'center', // 图片居中显示
}} />
</td>
@@ -45,9 +49,23 @@
<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.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>
@@ -62,6 +80,7 @@
}
const AgentDialog = ({ agentDialog }) => {
+ console.log(agentDialog, 'agentDialog');
return (
<>
{agentDialog?.map((item, index) => (
@@ -74,7 +93,7 @@
<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={person} alt="" style={{ width: '100%', height: '100%' }} />
+ <img border="0" src={person1} alt="" style={{ width: '100%', height: '100%' }} />
</td>
</tr>
<tr>
@@ -106,26 +125,53 @@
<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.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>
- <a href="your-link-here.html" target="_blank">
- <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf
- </a>
+ {
+ 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.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>
-
))}
</>
)
}
const Respondent = ({ respondent }) => {
+ console.log(respondent, 'respondent');
return (
<>
{respondent?.map((item, index) => (
@@ -151,15 +197,43 @@
<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.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>
- <a href="your-link-here.html" target="_blank">
- <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf
- </a>
+ {
+ 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.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>
@@ -172,6 +246,7 @@
}
const Company = ({ company }) => {
+ console.log(company, 'company');
return (
<>
{company?.map((item, index) => (
@@ -197,15 +272,43 @@
<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.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>
- <a href="your-link-here.html" target="_blank">
- <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf
- </a>
+ {
+ 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.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>
--
Gitblit v1.8.0