Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh ...

liuwh

2024-09-14 221546808c11df777199def992e4abbf1fc31b5a

 gz-customerSystem/src/components/personCard/index.jsx

@@ -6,108 +6,145 @@
 * @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 => {
  const typeList = data?.map(item => {
    return item.perType
  })//获取有多少申请人和被申请人
  if (typeList.indexOf('15_020008-1') != -1) {
  if (typeList?.indexOf('15_020008-1') != -1) {
    isAgent = true
  }
  if (typeList.indexOf('15_020008-2') != -1) {
  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} personData={data} />
      </Modal>
    </Fragment>
  );
};