feat： 查看当事人详情

zhangyongtian

2024-08-30 ca6f90dcc968c4dd83e0664aaab0ea724b7892a4

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

@@ -1,69 +1,78 @@
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import KeyVisits from "./keyVisits";
import { link } from '../../../../assets/images'
import { link } from '@/assets/images'

export default function DetailDialog(props) {
  const nuturalList = [
    [
      {
        label: '姓名',
        perClass: '自然人',
        width: '120',
        value: '李晓明',
        perClass: '',
        value: '',
        isName: true,//判断是否是姓名标签
        field: 'trueName',
      },
      {
        label: '联系方式',
        width: '120',
        value: '13380313411',
        value: '',
        field: 'mobile',
      },
    ],
    [
      {
        label: '证件类型',
        value: '居民身份证',
        value: '',
        field: 'certiTypeName',
      },
      {
        label: '证件号码',
        value: '440981199999999999',
        value: '',
        field: 'certiNo',
      },
    ],
    [
      {
        label: '联系地址',
        value: '居民身份证',
        value: '',
        field: 'addr',
      },
      {
        label: '户籍地址',
        value: '广州市天河区棠下街20号',
        value: '',
        field: 'placeAddr',
      },
    ],
    [
      {
        label: '工作单位',
        value: '好又多',
        value: '',
        field: 'workUnit',
      },
      {
        label: '民族',
        value: '汉',
        value: '',
        field: 'nationName',
      },
    ],
    [
      {
        label: '性别',
        value: '男',
        value: '',
        field: 'sexName',
      },
      {
        label: '是否有个人极端倾向',
        value: '否',
        value: '',
        field: 'extreme',
      },
    ],
    [
      {
        label: '身份证新材料',
        label: '身份证明材料',
        value: <a href="your-link-here.html" target="_blank">
          <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf
        </a>,
        isFile: true
      },
    ],
  ]
@@ -71,41 +80,46 @@
    [
      {
        label: '企业名称',
        perClass: '法人',
        width: '120',
        value: '李晓明',
        perClass: '',
        value: '',
        isName: true,//判断是否是姓名标签
        field: 'trueName',
      },
      {
        label: '联系方式',
        width: '120',
        value: '13380313411',
        value: '',
        field: 'mobile',
      },
    ],
    [
      {
        label: '企业所在地',
        value: '广州市天河区棠下街120号',
        value: '',
        field: 'addr',
      },
      {
        label: '统一社会信用代码',
        value: '440981199999999999',
        value: '',
        field: 'orgaCode',
      },
    ],
    [
      {
        label: '法定代表人',
        value: '蒋照月',
        value: '',
        field: 'deputy',
      },
      {
        label: '企业类型',
        value: '餐饮服务',
        value: '',
        field: 'orgaTypeName',
      },
    ],
    [
      {
        label: '住所',
        value: '广州市天河区棠下街120号',
        value: '',
        field: 'placeAddr',
      },
    ],
    [
@@ -114,12 +128,14 @@
        value: <a href="your-link-here.html" target="_blank">
          <img src={link} alt="" className="title-file" />广东好又多餐饮有限公司营业执照.pdf
        </a>,
        isFile: true
      },
      {
        label: '法定代表人身份证明材料',
        value: <a href="your-link-here.html" target="_blank">
          <img src={link} alt="" className="title-file" />江照月个人身份.pdf
        </a>,
        isFile: true
      },
    ],
  ]
@@ -127,41 +143,46 @@
    [
      {
        label: '机构名称',
        perClass: '非法人组织',
        width: '120',
        value: '李晓明',
        perClass: '',
        value: '',
        isName: true,//判断是否是姓名标签
        field: 'trueName',
      },
      {
        label: '联系方式',
        width: '120',
        value: '13380313411',
        value: '',
        field: 'mobile',
      },
    ],
    [
      {
        label: '机构所在地',
        value: '广州市天河区棠下街120号',
        value: '',
        field: 'addr',
      },
      {
        label: '机构组织代码',
        value: '440981199999999999',
        value: '',
        field: 'orgaCode',
      },
    ],
    [
      {
        label: '机构代表人',
        value: '蒋照月',
        value: '',
        field: 'deputy',
      },
      {
        label: '机构类型',
        value: '餐饮服务',
        value: '',
        field: 'orgaTypeName',
      },
    ],
    [
      {
        label: '住所',
        value: '广州市天河区棠下街120号',
        value: '',
        field: 'placeAddr',
      },
    ],
    [
@@ -170,12 +191,14 @@
        value: <a href="your-link-here.html" target="_blank">
          <img src={link} alt="" className="title-file" />广东好又多餐饮有限公司营业执照.pdf
        </a>,
        isFile: true
      },
      {
        label: '机构代表人身份证明材料',
        value: <a href="your-link-here.html" target="_blank">
          <img src={link} alt="" className="title-file" />江照月个人身份.pdf
        </a>,
        isFile: true
      },
    ],
  ]
@@ -183,71 +206,82 @@
    [
      {
        label: '姓名',
        perClass: '代理人',
        width: '120',
        value: '李晓明',
        perClass: '',
        value: '',
        isName: true,//判断是否是姓名标签
        field: 'trueName',
      },
      {
        label: '联系方式',
        width: '120',
        value: '13380313411',
        value: '',
        field: 'mobile',
      },
    ],
    [
      {
        label: '证件类型',
        value: '居民身份证',
        value: '',
        field: 'certiTypeName',
      },
      {
        label: '证件号码',
        value: '440981199999999999',
        value: '',
        field: 'certiNo',
      },
    ],
    [
      {
        label: '联系地址',
        value: '居民身份证',
        value: '',
        field: 'addr',
      },
      {
        label: '户籍地址',
        value: '广州市天河区棠下街20号',
        value: '',
        field: 'placeAddr',
      },
    ],
    [
      {
        label: '工作单位',
        value: '好又多',
        value: '',
        field: 'workUnit',
      },
      {
        label: '民族',
        value: '汉',
        value: '',
        field: 'nationName',
      },
    ],
    [
      {
        label: '性别',
        value: '男',
        value: '',
        field: 'sexName',
      },
      {
        label: '是否有个人极端倾向',
        value: '否',
        value: '',
        field: 'extreme',
      },
    ],
    [
      {
        label: '委托关系',
        value: '亲属',
        value: '',
        field: 'agentRelateName',
      },
      {
        label: '委托类型',
        value: '一般授权代理',
        value: '',
        field: 'agentTypeName',
      },
    ],
    [
      {
        label: '代理对象',
        value: '广东好又多贸易公司',
        value: '',
        field: 'personList',
      },
    ],
    [
@@ -256,29 +290,76 @@
        value: <a href="your-link-here.html" target="_blank">
          <img src={link} alt="" className="title-file" />广东好又多餐饮有限公司营业执照.pdf
        </a>,
        isFile: true,
      },
      {
        label: '代理人授权委托书',
        value: <a href="your-link-here.html" target="_blank">
          <img src={link} alt="" className="title-file" />江照月个人身份.pdf
        </a>,
        isFile: true,
      },
    ],
  ]
  const tableList = agentList

  const [tableList, setTableList] = useState([])

  useEffect(() => {
    console.log(props.editData);
    const data = props.editData
    let newList
    let mapList = []
    if (data.perClass === "09_01001-1") {
      //自然人
      mapList = nuturalList
    }
    if (data.perClass === "09_01001-2") {
      //法人组织
      mapList = legalList
    }
    if (data.perClass === "09_01001-3") {
      //非法人组织
      mapList = organizationList
    }
    if (data.perType === "24_00006-1" || data.perType === "24_00006-1") {
      //代理人
      mapList = agentList
    }
    newList = mapList.map(item => {
      return item.map(res => {
        if (res.isFile) {
          return res
        }
        if (res.isName) {
          return {
            ...res,
            value: data[res.field],
            perClass: data.perClassName || data.perTypeName
          }
        } else {
          return {
            ...res,
            value: res.field === 'personList' ? data[res.field].join('，') : data[res.field]
          }
        }
      })
    })

    setTableList(newList)
  }, [])

  return (
    <div style={{maxHeight: '590px', overflowY: 'scroll'}}>
      <table border="1" align="center" cellpadding="8" className="table" style={{marginBottom: '20px'}}>
    <div style={{ maxHeight: '590px', overflowY: 'scroll' }}>
      <table border="1" align="center" cellpadding="8" className="table" style={{ marginBottom: '20px' }}>
        {
          tableList?.map((item, index) => {
            return <tr key={index}>
              {
                item?.map(res => {
                  return <>
                    <th bgcolor="#F7F8FA" className="table-title" width={res.width ? res.width : ''}>{res.label}</th>
                    <td width='380'>
                      <div style={{ display: 'flex' }}>
                    <th bgcolor="#F7F8FA" className="table-title" width='120'>{res.label}</th>
                    <td width={380}>
                      <div style={{ display: 'flex', minHeight: '22px' }}>
                        <div>{res.value}</div>
                        {res.isName && <div className="title-personRemark">{res.perClass}</div>}
                      </div>
@@ -289,35 +370,6 @@
            </tr>
          })
        }
        {/* <tr>
          <th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
          <td width='380'><div style={{ display: 'flex' }}><div>李晓明</div><div className="title-personRemark">自然人</div></div></td>
          <th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th>
          <td width='380'>19</td>
          <th bgcolor="#F7F8FA" className="table-title" width='140'>性别</th>
          <td>汉</td>
        </tr>
        <tr>
          <th bgcolor="#F7F8FA" className="table-title">证件类型</th>
          <td>19970000</td>
          <th bgcolor="#F7F8FA" className="table-title">证件号码</th>
          <td>团员</td>
          <th bgcolor="#F7F8FA" className="table-title">民族</th>
          <td>本科</td>
        </tr>
        <tr>
          <th bgcolor="#F7F8FA" className="table-title">联系地址</th>
          <td>网络工程</td>
          <th bgcolor="#F7F8FA" className="table-title">户籍地址</th>
          <td>淮南师范学院</td>
          <th bgcolor="#F7F8FA" className="table-title" rowspan="2" >是否有个人极端倾向</th>
          <td rowspan="2" >237483</td>
        </tr>
        <tr>
          <th bgcolor="#F7F8FA" className="table-title">工作单位</th>
          <td>玩，拆，装</td>
          <th bgcolor="#F7F8FA" className="table-title">身份证明材料</th>
        </tr> */}
      </table>
      {/* 重复来访重点人员 */}
      <div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}>