From ca6f90dcc968c4dd83e0664aaab0ea724b7892a4 Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Fri, 30 Aug 2024 14:34:12 +0800 Subject: [PATCH] feat: 查看当事人详情 --- gz-customerSystem/src/views/register/visit/component/detailDialog.jsx | 224 ++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 138 insertions(+), 86 deletions(-) diff --git a/gz-customerSystem/src/views/register/visit/component/detailDialog.jsx b/gz-customerSystem/src/views/register/visit/component/detailDialog.jsx index cd9a8b9..7810b96 100644 --- a/gz-customerSystem/src/views/register/visit/component/detailDialog.jsx +++ b/gz-customerSystem/src/views/register/visit/component/detailDialog.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import KeyVisits from "./keyVisits"; import { link } from '@/assets/images' @@ -7,63 +7,72 @@ [ { 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' }}> -- Gitblit v1.8.0