/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-15 16:39:25
|
* @LastEditTime: 2022-11-03 09:26:13
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 姓名卡片
|
*/
|
import React, { useState, useEffect } from 'react';
|
import PropTypes from 'prop-types';
|
import { Popover, Space, Spin, Typography } from 'antd';
|
import { UserOutlined, ApartmentOutlined, HistoryOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
|
const { Text } = Typography;
|
|
// 获取数据
|
function getDataApi(submitData) {
|
return $$.ax.request({ url: `ctUser/getByIdRole?id=${submitData}`, type: 'get', service: 'cust' });
|
}
|
|
const NameCard = ({ name, userId }) => {
|
const [popoverVisible, setPopoverVisible] = useState(false);
|
|
const [data, setData] = useState();
|
|
const [spin, setSpin] = useState(false);
|
|
useEffect(() => {
|
// 获取数据
|
async function getData() {
|
if (!userId) return;
|
setSpin(true);
|
const res = await getDataApi(userId);
|
setSpin(false);
|
if (res.type) setData(res.data || {});
|
}
|
if (popoverVisible && !data) getData();
|
}, [popoverVisible, data, userId]);
|
|
const content = userId ? (
|
<Spin spinning={spin}>
|
<div className="nameCard-content">
|
<Space direction="vertical">
|
<Space>
|
<UserOutlined />
|
<span>
|
<span>{data?.trueName || '-'}</span>
|
<span className="public-rightBorder">{data?.mobile || '-'}</span>
|
</span>
|
</Space>
|
<Space>
|
<ApartmentOutlined />
|
<span>
|
<span>
|
{data?.unitName || '-'} {data?.deptName || '-'}
|
</span>
|
<span className="public-rightBorder">{data?.userRoles || '-'}</span>
|
</span>
|
</Space>
|
<Space>
|
<HistoryOutlined />
|
<span>最近一次登录：{$$.dateFormat(data?.loginTime)}</span>
|
</Space>
|
</Space>
|
</div>
|
</Spin>
|
) : (
|
'无详情内容'
|
);
|
|
return !!userId ? (
|
<Popover
|
overlayClassName="nameCard"
|
placement="right"
|
visible={popoverVisible}
|
title={null}
|
content={content}
|
trigger="click"
|
onVisibleChange={(visible) => setPopoverVisible(visible)}
|
>
|
<span className={`${popoverVisible && 'nameCard-name-active'} nameCard-name`} onClick={() => setPopoverVisible(true)}>
|
<span>{name}</span>
|
</span>
|
</Popover>
|
) : (
|
<Text style={{ maxWidth: '200px' }} ellipsis={{ tooltip: name }}>
|
{name}
|
</Text>
|
);
|
};
|
|
NameCard.propTypes = {
|
name: PropTypes.any,
|
userId: PropTypes.string,
|
};
|
|
export default NameCard;
|
