/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-08-10 15:03:57
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @LastEditTime: 2024-08-12 14:45:28
|
* @FilePath: \gzDyh\gz-customerSystem\src\components\personCard\index.jsx
|
* @Description: 来访登记当事人卡片
|
*/
|
import React from 'react';
|
import PropTypes from 'prop-types';
|
import { Typography, Row, Col, Space } from 'antd';
|
import { del } from '../../assets/images';
|
|
const { Link, Text } = Typography;
|
/**
|
* isCheck, // 是否无操作
|
* partyType, // applicant:申请人, respondent:被申请人
|
* data, // 当事人数据
|
* handleCheckParty, // 点击查看详情
|
* handleDeleteParty, // 删除当事人
|
*/
|
const PersonCard = ({ isCheck, partyType, data, handleCheckParty, handleDeleteParty }) => {
|
const remark = [{ label: '精神障碍', color: '#C64FBE' }, { label: '吸毒', color: '#D8A247' }, { label: '社区矫正', color: '#B82F6E' }, { label: '刑满释放', color: '#199C8F' }, { label: '流浪', color: '#3ECB7A' }, { label: '重点青少年', color: '#117AC1' }, { label: '涉稳涉访', color: '#6865D7' }, { label: '潜在风险', color: '#2661CE' }]
|
|
return (
|
<Row gutter={[24, 16]}>
|
{data.map((x, t) => (
|
<Col span={8} key={t}>
|
<div className="public-personCard" style={{ cursor: 'pointer' }}>
|
<div
|
className={`public-personCard-card public-personCard-card-${partyType === 'applicant' ? 'blue' : 'orange'}`}
|
onClick={() => handleCheckParty({ type: partyType, editType: 'check', values: x })}
|
>
|
{x.trueName.substr(0, 1)}
|
<div className="public-personCard-card-check">查看</div>
|
<img src={del} alt='' style={{ width: '16px', height: '16px', position: 'absolute', top: '-8px', left: '56px' }} />
|
</div>
|
<div className="public-personCard-content">
|
<div className="public-personCard-title">
|
<Text style={{ maxWidth: '80%', paddingRight: '8px' }} ellipsis={{ tooltip: x.trueName }}>
|
{x.trueName}
|
</Text>
|
<div className={`public-personCard-tag public-personCard-tag-${partyType === 'applicant' ? 'blue' : 'orange'}`}>
|
{x.perClassName}
|
</div>
|
</div>
|
{
|
x.person &&
|
<>
|
<div>证件号码：{x.mobile}</div>
|
<div>联系方式：{x.agentStatus === '2' ? '有' : '无'}</div>
|
</>
|
}
|
{x.company &&
|
<>
|
<div>统一社会信用代码：{x.mobile}</div>
|
<div>法定代表人：{x.agentStatus === '2' ? '有' : '无'}</div>
|
</>
|
}
|
{x.Respondent &&
|
<Space style={{ display: 'flex', flexWrap: 'wrap' }}>
|
{remark.map((item, index) => (
|
<div key={index} style={{ lineHeight: '22px', padding: '0px 8px', backgroundColor: `${item.color}`, width: 'fit-content', borderRadius: '4px', marginTop: '4px' }}>{item.label}</div>
|
))}
|
</Space>
|
}
|
|
|
</div>
|
</div>
|
</Col>
|
))}
|
</Row>
|
);
|
};
|
|
PersonCard.propTypes = {
|
isCheck: PropTypes.bool,
|
partyType: PropTypes.string,
|
data: PropTypes.array,
|
handleCheckParty: PropTypes.func,
|
handleDeleteParty: PropTypes.func,
|
};
|
|
export default PersonCard;
|
