| | |
| | | */ |
| | | import React from 'react'; |
| | | import PropTypes from 'prop-types'; |
| | | import { Typography, Row, Col, Space } from 'antd'; |
| | | import { del } from '../../assets/images'; |
| | | import { Typography, Row, Col, Space, Tooltip } from 'antd'; |
| | | import { del, add } 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' }] |
| | | const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty }) => { |
| | | |
| | | return ( |
| | | <Row gutter={[24, 16]}> |
| | | {data.map((x, t) => ( |
| | | <Col span={8} key={t}> |
| | | <Col span={7} 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 })} |
| | | className={`public-personCard-card public-personCard-card-${x.partyType === 'applicant' ? 'blue' : 'orange'}`} |
| | | onClick={() => handleCheckParty({ type: x.partyType, editType: 'check', values: x })} |
| | | > |
| | | {x.trueName.substr(0, 1)} |
| | | <div className="public-personCard-card-check">查看</div> |
| | |
| | | <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'}`}> |
| | | <Text ellipsis={{ tooltip: x.perClassName }} className={`public-personCard-tag public-personCard-tag-${x.partyType === 'applicant' ? 'blue' : 'orange'}`}> |
| | | {x.perClassName} |
| | | </div> |
| | | </Text> |
| | | </div> |
| | | { |
| | | x.person && |
| | | <> |
| | | <div>证件号码:{x.mobile}</div> |
| | | <div>联系方式:{x.agentStatus === '2' ? '有' : '无'}</div> |
| | | <div>联系方式:{x.personNumber}</div> |
| | | </> |
| | | } |
| | | {x.company && |
| | | <> |
| | | <div>统一社会信用代码:{x.mobile}</div> |
| | | <div>法定代表人:{x.agentStatus === '2' ? '有' : '无'}</div> |
| | | <div>法定代表人:{x.companyName}</div> |
| | | </> |
| | | } |
| | | {x.Respondent && |
| | | <Space style={{ display: 'flex', flexWrap: 'wrap' }}> |
| | | {remark.map((item, index) => ( |
| | | {x.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> |
| | | ))} |
| | | <Col span={3}> |
| | | <div className="dataSync-addBtn"> |
| | | <Tooltip |
| | | title={(<Space direction='vertical '> |
| | | <div className="dataSync-btnApply" style={{ backgroundColor: '#1A6FB8' }}>申请方</div> |
| | | <div className="dataSync-btnApply" style={{ backgroundColor: '#FA8C16' }}>被申请方</div> |
| | | <div className="dataSync-btnApply" style={{ backgroundColor: '#3491FA' }}>代理人</div> |
| | | </Space>)} |
| | | placement={data.length % 3 === 0 ? 'left' : "right"} |
| | | color='#ffff' |
| | | overlayStyle={{}} |
| | | > |
| | | <div style={{ backgroundColor: '#f2f3f5', borderRadius: '50%', width: '64px', height: '64px' }}> |
| | | <img src={add} alt="添加" style={{ width: '32px', margin: '16px' }} /> |
| | | </div> |
| | | </Tooltip> |
| | | </div> |
| | | </Col> |
| | | </Row> |
| | | ); |
| | | }; |
| | | |
| | | PersonCard.propTypes = { |
| | | isCheck: PropTypes.bool, |
| | | partyType: PropTypes.string, |
| | | data: PropTypes.array, |
| | | handleCheckParty: PropTypes.func, |
| | | handleDeleteParty: PropTypes.func, |