/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-18 10:46:51
|
* @LastEditTime: 2022-12-27 14:31:33
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 到访详情 - 居民信息展示组件
|
*/
|
import React from 'react';
|
import { Space } from 'dingtalk-design-mobile';
|
import Descriptions from '../Descriptions';
|
import { dateFormat, getAgeByIdcard } from '../../utils/utility';
|
|
// contrast: [] // 对比后更改的字段集合
|
const PersonMsg = ({ data, contrast = [] }) => {
|
function setBg(key) {
|
return contrast.includes(key) ? 'personMsg-redBg' : '';
|
}
|
|
const liveData = [
|
{ label: '住所类型', value: <span className={setBg('livePlaceDesc')}>{data.livePlaceDesc || '-'}</span> },
|
{ label: '与户主的关系', value: <span className={setBg('roleofhold')}>{data.roleofhold || '-'}</span> },
|
{
|
label: '是否在住',
|
value: <span className={setBg('liveStatus')}>{data.liveStatus === '0' ? '不在住' : data.liveStatus === '1' ? '在住' : '-'}</span>,
|
},
|
{ label: '居住月份', value: <span className={setBg('stayMothDesc')}>{data.stayMothDesc || '-'}</span> },
|
{
|
label: '人口标签',
|
value: (
|
<span>
|
{data.personLabelList && data.personLabelList.length > 0
|
? data.personLabelList.length > 1
|
? data.personLabelList[0].personLabelName + '...'
|
: data.personLabelList[0].personLabelName
|
: '-'}
|
</span>
|
),
|
},
|
];
|
|
const basicData = [
|
{ label: '民族', value: <span className={setBg('nationalDesc')}>{data.nationalDesc || '-'}</span> },
|
{ label: '出生日期', value: <span className={setBg('birthdate')}>{dateFormat(data.birthdate)}</span> },
|
{ label: '籍贯', value: <span className={setBg('birthPlaceDesc')}>{data.birthPlaceDesc || '-'}</span> },
|
{ label: '登记时间', value: <span className={setBg('createTime')}>{dateFormat(data.createTime)}</span> },
|
];
|
|
const liveFeatureData = [
|
{
|
label: '是否重点人员',
|
value: <span className={setBg('isKeynote')}>{data.isKeynote == '0' ? '否' : data.isKeynote == '1' ? '是' : '-'}</span>,
|
},
|
{ label: '是否流动人员', value: <span className={setBg('isFloat')}>{data.isFloat == '0' ? '否' : data.isFloat == '1' ? '是' : '-'}</span> },
|
...(data.isFloat == '0' ? [] : [{ label: '流入原因', value: <span className={setBg('liveReasonDesc')}>{data.liveReasonDesc || '-'}</span> }]),
|
];
|
|
const unitData = [
|
{ label: '单位名称', value: <span className={setBg('unitName')}>{data.unitName || '-'}</span> },
|
{ label: '单位联系人', value: <span className={setBg('unitContacterName')}>{data.unitContacterName || '-'}</span> },
|
{ label: '单位联系人电话', value: <span className={setBg('unitContacterPhone')}>{data.unitContacterPhone || '-'}</span> },
|
{ label: '单位地址', value: <span className={setBg('unitAddress')}>{data.unitAddress || '-'}</span> },
|
{ label: '单位备注', value: <span className={setBg('unitRemark')}>{data.unitRemark || '-'}</span> },
|
];
|
|
const otherData = [
|
{ label: '曾用名', value: <span className={setBg('formerName')}>{data.formerName || '-'}</span> },
|
{ label: '政治面貌', value: <span className={setBg('polityDesc')}>{data.polityDesc || '-'}</span> },
|
{ label: '宗教信仰', value: <span className={setBg('religionDesc')}>{data.religionDesc || '-'}</span> },
|
{ label: '婚姻状况', value: <span className={setBg('maritalDesc')}>{data.maritalDesc || '-'}</span> },
|
{ label: '学历', value: <span className={setBg('educationDesc')}>{data.educationDesc || '-'}</span> },
|
{ label: '职业类别', value: <span className={setBg('jobTypeDesc')}>{data.jobTypeDesc || '-'}</span> },
|
{ label: '健康状况', value: <span className={setBg('healthConditionDesc')}>{data.healthConditionDesc || '-'}</span> },
|
{ label: '服务处所', value: <span className={setBg('servicePlace')}>{data.servicePlace || '-'}</span> },
|
{ label: '备注', value: <span className={setBg('memo')}>{data.memo || '-'}</span> },
|
];
|
|
return (
|
<>
|
<div className="personMsg-header">
|
<div>
|
<Space align="center">
|
<div className="personMsg-header-title">{data.personName}</div>
|
<div className="public-tag2 public-tag2-blue">{data.roleofhold}</div>
|
</Space>
|
</div>
|
<div className="personMsg-header-subtitle">
|
<span className={setBg('sexDesc')}>{data.sexDesc || '-'}</span>
|
<span className={`public-rightBorder ${setBg('idcard')}`}>{data.idcard ? getAgeByIdcard(data.idcard) + '岁' : '-'}</span>
|
<span className={`public-rightBorder ${setBg('contact')}`}>{data.contact || '-'}</span>
|
</div>
|
<div className="personMsg-header-tag">
|
<Space wrap>
|
<span className="public-tag2">{data.personType === '1' ? '境内人员' : data.personType === '2' ? '境外人员' : '-'}</span>
|
{data.personLabelList &&
|
data.personLabelList.map((item) => (
|
<span key={item.personLabelId} className="public-tag2">
|
{item.personLabelName}
|
</span>
|
))}
|
{data.isFloat && <span className="public-tag2">{data.isFloat === '0' ? '常驻人口' : '流动人口'}</span>}
|
{data.isKeynote && <span className="public-tag2 public-tag2-red">{data.isKeynote === '1' ? '重点人员' : null}</span>}
|
</Space>
|
</div>
|
</div>
|
<div className="personMsg-card">
|
<Descriptions data={liveData} title="居住信息" />
|
</div>
|
<div className="personMsg-card">
|
<Descriptions
|
data={basicData}
|
otherData={[
|
{
|
type: 'idcard',
|
title: <span>{data.idcard || '-'}</span>,
|
cardType: data.permitTypeDesc || '-',
|
contents: <span>{dateFormat(data.icExpiredDate)}到期</span>,
|
},
|
{
|
type: 'address',
|
title: <span>{data.censusDesc || '-'}（户籍地）</span>,
|
contents: <span>{data.censusAddress || '-'}</span>,
|
},
|
]}
|
title="证件信息"
|
columns="2"
|
/>
|
</div>
|
<div className="personMsg-card">
|
<Descriptions data={liveFeatureData} title="居民特征" />
|
</div>
|
<div className="personMsg-card">
|
<Descriptions otherData={[{ type: 'files', files: data.fileList || [] }]} title="上传附件" />
|
</div>
|
{data.personType == '2' && (
|
<div className="personMsg-card">
|
<Descriptions data={unitData} title="邀请单位信息" />
|
</div>
|
)}
|
<div className="personMsg-card">
|
<Descriptions data={otherData} title="其他信息" />
|
</div>
|
</>
|
);
|
};
|
|
export default PersonMsg;
|
