/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-07-11 14:19:03
|
* @LastEditTime: 2025-04-10 17:09:55
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 展示人员的tag和底部抽屉人员详情
|
*/
|
import React, { useEffect, useState } from 'react';
|
import { CloseOutlined } from 'dd-icons';
|
import { Drawer } from 'dingtalk-design-mobile';
|
import { Scrollbars } from 'react-custom-scrollbars';
|
import './index.less';
|
|
import * as $$ from '../../utils/utility';
|
|
// 获取数据
|
function getDataApi(submitData) {
|
return $$.ax.request({ url: `ctUser/getByIdRole?id=${submitData}`, type: 'get', service: 'cust' });
|
}
|
|
const UserTag = ({ name, value, onClose, color = 'green', viewBtn = true }) => {
|
const [data, setData] = useState({});
|
const [visible, setVisible] = useState(false);
|
|
// 获取数据
|
async function getData() {
|
if (!value) return;
|
global.setSpinning(true);
|
const res = await getDataApi(value);
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data || {});
|
setVisible(true);
|
}
|
}
|
|
const handleView = () => {
|
getData();
|
};
|
|
const handleClose = () => {
|
setVisible(false);
|
};
|
|
return (
|
<div>
|
<div className="UserTag">
|
<span className="UserTag-name">{name}</span>
|
{/* 查看 */}
|
{viewBtn && (
|
<div style={{ margin: '0 4px 0 2px' }} onClick={handleView} className="public-color">
|
查看
|
</div>
|
)}
|
<CloseOutlined className="UserTag-close" onClick={onClose} />
|
</div>
|
|
<Drawer visible={visible} onClose={handleClose} position="bottom" className="user-detail-drawer">
|
<div className="user-detail">
|
<div className="user-detail-title">查看经办人</div>
|
<Scrollbars style={{ height: '45vh' }}>
|
<div className="user-detail-item">
|
<div className="user-detail-label">姓名</div>
|
<div className="user-detail-value">{data.trueName || '-'}</div>
|
</div>
|
|
<div className="user-detail-item">
|
<div className="user-detail-label">所属部门</div>
|
<div className="user-detail-value">{data.unitName || '-'}</div>
|
</div>
|
|
<div className="user-detail-item">
|
<div className="user-detail-label">职务</div>
|
<div className="user-detail-value">{data.userRoles || '-'}</div>
|
</div>
|
|
<div className="user-detail-item">
|
<div className="user-detail-label">手机号码</div>
|
<div className="user-detail-value">{data.mobile || '-'}</div>
|
</div>
|
|
<div className="user-detail-item">
|
<div className="user-detail-label">工作电话</div>
|
<div className="user-detail-value">{'-'}</div>
|
</div>
|
|
<div className="user-detail-item">
|
<div className="user-detail-label">登录账号</div>
|
<div className="user-detail-value">{data.acc}</div>
|
</div>
|
</Scrollbars>
|
<div className="user-detail-footer">
|
<div className="user-detail-btn" onClick={handleClose}>
|
关闭
|
</div>
|
</div>
|
</div>
|
</Drawer>
|
</div>
|
);
|
};
|
|
export default UserTag;
|
