Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh ...

liuwh

2024-09-14 221546808c11df777199def992e4abbf1fc31b5a

 gz-customerSystem/src/views/register/visit/component/previewTable.jsx

@@ -1,53 +1,71 @@
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 (
    <>
      {
        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.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,104 +80,160 @@
}

const AgentDialog = ({ agentDialog }) => {
  console.log(agentDialog, 'agentDialog');
  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.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}) => {
const Respondent = ({ respondent }) => {
  console.log(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.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>
@@ -171,4 +245,79 @@

}

export { ApplyDialog, AgentDialog,Respondent };
const Company = ({ company }) => {
  console.log(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.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.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>

      ))
      }
    </>
  )

}

export { ApplyDialog, AgentDialog, Respondent, Company };