/*
|
* @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, { Fragment, useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Typography, Row, Col, Space, Tooltip } from 'antd';
|
import { Modal } from '@arco-design/web-react';
|
import { del, add } from '../../assets/images';
|
import DetailDialog from "./DetailDialog";
|
|
const { Link, Text } = Typography;
|
/**
|
* isCheck, // 是否无操作
|
* data, // 当事人数据
|
* handleDeleteParty, // 删除当事人
|
*/
|
const PersonCard = ({ isCheck, data, handleDeleteParty, handleAdd, handleEdit }) => {
|
const [editData, setEditData] = useState(null);
|
const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制
|
const [dialogType, setDialogType] = useState(0);//添加当事人的类型
|
|
const peopleMap = {
|
'15_020008-1': '申请方',
|
'15_020008-2': '被申请方',
|
'24_00006-1': '申请方代理人',
|
'24_00006-2': '被申请方代理人'
|
}
|
let isAgent = false
|
let isAgentFor = false
|
const typeList = data?.map(item => {
|
return item.perType
|
})//获取有多少申请人和被申请人
|
if (typeList?.indexOf('15_020008-1') != -1) {
|
isAgent = true
|
}
|
if (typeList?.indexOf('15_020008-2') != -1) {
|
isAgentFor = true
|
}
|
|
const handleCheckParty = (value) => {
|
setDialogType(value.perType)
|
setEditData(value)
|
setDetailVisabled(true)
|
}
|
|
return (
|
<Fragment>
|
<Row gutter={[24, 16]}>
|
{data?.map((x, t) => (
|
<Col span={7} key={t}>
|
<div className="public-personCard" style={{ cursor: 'pointer' }}>
|
<div
|
className={`public-personCard-card public-personCard-card-${(x.perType === '15_020008-1' || x.perType === '24_00006-1') ? 'blue' : 'orange'}`}
|
onClick={() => handleCheckParty(x)}
|
>
|
{x.trueName.substr(0, 1)}
|
<div className="public-personCard-card-check">查看</div>
|
{isCheck && <img
|
src={del}
|
alt=''
|
style={{ width: '16px', height: '16px', position: 'absolute', top: '-8px', left: '56px' }}
|
onClick={(event) => { handleDeleteParty(event, x) }}
|
/>}
|
</div>
|
<div className="public-personCard-content">
|
<div className="public-personCard-title">
|
<Text style={{ maxWidth: '80%', paddingRight: '8px' }} ellipsis={{ tooltip: x.trueName }}>
|
{x.trueName}
|
</Text>
|
<Text onClick={() => { handleEdit(x) }} ellipsis={{ tooltip: x.perTypeName }} className={`public-personCard-tag public-personCard-tag-${(x.perType === '15_020008-1' || x.perType === '24_00006-1') ? 'blue' : 'orange'}`}>
|
{x.perTypeName}
|
</Text>
|
</div>
|
{
|
(x.perClass === '09_01001-1' || !x.perClass) &&
|
<>
|
<div>证件号码：{x.certiNo}</div>
|
<div>联系方式：{x.mobile}</div>
|
</>
|
}
|
{
|
x.perClass === '09_01001-2' &&
|
<>
|
<div>统一社会信用代码：{x.orgaCode}</div>
|
<div>法定代表人：{x.deputy}</div>
|
</>
|
}
|
{
|
x.perClass === '09_01001-3' &&
|
<>
|
<div>组织机构代码：{x.orgaCode}</div>
|
<div>机构代表人：{x.deputy}</div>
|
</>
|
}
|
<Space style={{ display: 'flex', flexWrap: 'wrap' }}>
|
{x.remark?.map((item, index) => (
|
<div key={index} style={{ lineHeight: '22px', padding: '0px 8px', backgroundColor: `${item.color}`, width: 'fit-content', borderRadius: '4px', marginTop: '4px', color: '#fff' }}>{item.label}</div>
|
))}
|
</Space>
|
</div>
|
</div>
|
</Col>
|
))}
|
{isCheck &&
|
<Col span={3}>
|
<div className="dataSync-addBtn">
|
<Tooltip
|
title={(<Space direction='vertical '>
|
<div className="dataSync-btnApply" style={{ backgroundColor: '#1A6FB8' }} onClick={() => { handleAdd('15_020008-1') }}>申请方当事人</div>
|
{isAgent && <div className="dataSync-btnApply" style={{ backgroundColor: '#3491FA' }} onClick={() => { handleAdd('24_00006-1') }}>申请方代理人</div>}
|
<div className="dataSync-btnApply" style={{ backgroundColor: '#EF6C24' }} onClick={() => { handleAdd('15_020008-2') }}>被申请方当事人</div>
|
{isAgentFor && <div className="dataSync-btnApply" style={{ backgroundColor: '#FA8C16' }} onClick={() => { handleAdd('24_00006-2') }}>被申请方代理人</div>}
|
</Space>)}
|
placement={data.length !== 0 && 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>
|
<Modal
|
title={'查看' + peopleMap[dialogType]}
|
visible={detailVisabled}
|
onOk={() => setDetailVisabled(false)}
|
onCancel={() => {
|
setDetailVisabled(false)
|
setEditData(null)
|
}}
|
autoFocus={false}
|
focusLock={true}
|
footer={null}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<DetailDialog editData={editData} personData={data} />
|
</Modal>
|
</Fragment>
|
);
|
};
|
|
PersonCard.propTypes = {
|
isCheck: PropTypes.bool,
|
data: PropTypes.array,
|
handleCheckParty: PropTypes.func,
|
handleDeleteParty: PropTypes.func,
|
};
|
|
export default PersonCard;
|
