/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2024-12-11 15:26:38
|
* @LastEditTime: 2024-12-12 15:04:58
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:
|
*/
|
import React, { useState, useEffect } from 'react';
|
import PropTypes from 'prop-types';
|
import { Spin, Typography } from 'antd';
|
import { Modal } from '@arco-design/web-react';
|
import { register } from '@/assets/images';
|
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 [personData, setPersonData] = useState();
|
|
const [visible, setVisible] = useState(false);
|
|
const [spin, setSpin] = useState(false);
|
|
|
useEffect(() => {
|
// 获取数据
|
async function getData() {
|
if (!userId) return;
|
setSpin(true);
|
const res = await getDataApi(userId);
|
setSpin(false);
|
if (res.type) setPersonData(res.data || {});
|
}
|
if (visible && !personData) getData();
|
}, [visible, personData, userId]);
|
|
|
return !!userId ? (
|
<>
|
<Text verticalAlign='middle' onClick={() => setVisible(true)} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}><span>{name || '-'}</span><img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px' }} /></Text>
|
<Modal visible={visible} onCancel={() => { setVisible(false) }} title='工作人员信息' centered footer={null}>
|
<>
|
{userId ? (
|
<Spin spinning={spin}>
|
<table border="1" align="center" cellpadding="5" className="table">
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th>
|
<td width='380'><div style={{ display: 'flex' }}><div>{personData?.trueName}</div></div></td>
|
<th bgcolor="#F7F8FA" className="table-title" width="120">登录账号</th>
|
<td width='380'>{personData?.acc}</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">手机号码</th>
|
<td>{personData?.mobile}</td>
|
<th bgcolor="#F7F8FA" className="table-title">工作电话</th>
|
<td>-</td>
|
</tr>
|
<tr>
|
<th bgcolor="#F7F8FA" className="table-title">所属部门</th>
|
<td>{personData?.unitName}</td>
|
<th bgcolor="#F7F8FA" className="table-title">职务</th>
|
<td>{personData?.userRoles}</td>
|
</tr>
|
</table>
|
</Spin>
|
) : (
|
'无详情内容'
|
)}
|
</>
|
|
</Modal>
|
</>
|
// <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;
|
