From db35bd251144da64188dfb8fca63a4fd8c0f5973 Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Fri, 30 Aug 2024 17:50:07 +0800
Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master
---
gz-customerSystem/src/components/personCard/index.jsx | 191 ++++++++++++++++++++++++++++-------------------
1 files changed, 114 insertions(+), 77 deletions(-)
diff --git a/gz-customerSystem/src/components/personCard/index.jsx b/gz-customerSystem/src/components/personCard/index.jsx
index dc1acb3..df5109e 100644
--- a/gz-customerSystem/src/components/personCard/index.jsx
+++ b/gz-customerSystem/src/components/personCard/index.jsx
@@ -6,20 +6,30 @@
* @FilePath: \gzDyh\gz-customerSystem\src\components\personCard\index.jsx
* @Description: 来访登记当事人卡片
*/
-import React from 'react';
+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 * as $$ from '@/utils/utility';
+import DetailDialog from "./DetailDialog";
const { Link, Text } = Typography;
/**
* isCheck, // 是否无操作
* data, // 当事人数据
- * handleCheckParty, // 点击查看详情
* handleDeleteParty, // 删除当事人
*/
-const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty, handleAdd, handleEdit }) => {
+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 => {
@@ -31,83 +41,110 @@
if (typeList.indexOf('15_020008-2') != -1) {
isAgentFor = true
}
+
+ const handleCheckParty = (value) => {
+ setDialogType(value.perType)
+ setEditData(value)
+ setDetailVisabled(true)
+ }
+
return (
- <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>
- <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>
+ <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>
- {
- (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 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>
- </div>
- </Col>
- ))}
- <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' }} />
+ </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>
- </Tooltip>
- </div>
- </Col>
- </Row>
+ </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} />
+ </Modal>
+ </Fragment>
);
};
--
Gitblit v1.8.0