import React from 'react';
import css from './style.m.css';
import { Space, Popover } from '
antd';
import { i18n } from '@src/utils/i18n';
import nls from '@src/routes/settings/userPerConfig/nls';
import { checkPointPermisson } from '@src/utils/permission';
import ConfigModal from '../ConfigModal';
import ForbiddModal from '../ForbiddModal';
import { userStatusList } from '@src/components/FormItems/FormUserStatus/datas';
import { formatText } from '@src/utils/utils';
import LogsModal from '@src/components/LogsModal';
const dict = i18n(nls);
function recommendTypeFunc(record) {
let recommendMap = new Map();
recommendMap.set(-1, dict.notRecommended);
recommendMap.set(0, dict.recommended);
recommendMap.set(1, dict.recommended);
return recommendMap.get(record?.recommendType);
}
export default function columns(props) {
const { current, size, type, setLoad, setFresh, fresh } = props;
// 序号
const colCode = {
title
: `${dict.code}`,
width
: 80,
dataIndex
: 'code',
render
: (text, record, index) => index + 1 + (current - 1) * size,
};
// 操作列 - 宽度增加，
不固定，防止换行
const operation = {
title
: `${dict.operation}`,
width
: 200,
render
: (_, record) => renderOperation({ record, type, setLoad, setFresh, fresh }),
};
// 根据类型返回
不同列配置
const options = {
HW
: [colCode, nickName, mobile, email, roleId, roleBase, desc, updateTime, userStatus, operation],
W3
: [colCode, name, id, roleId, roleBase, desc, updateTime, userStatus, operation],
Third
: [colCode, nickName, mobile, email, origin, roleId, roleBase, desc, updateTime, userStatus, operation],
};
return options[type];
}
// 渲染操作按钮组
function renderOperation(props) {
const { record, type, setLoad, setFresh, fresh } = props;
return (
<Space wrap={false} size="small">
<ForbiddModal record={record} type={type} setLoad={setLoad} setFresh={setFresh} fresh={fresh} />
<ConfigModal record={record} type={type} setLoad={setLoad} setFresh={setFresh} fresh={fresh} />
{checkPointPermisson('logList', 'userRole') && (
<LogsModal entityId={record.uid} module="4" column="user" columnType="userRole" />
)}
</Space>
);
}
// 推荐
const recommended = {
title
: `${dict.recommendedStatus}`,
dataIndex
: 'recommendType',
width
: 120,
ellipsis: true,
render
: (_, record) => recommendTypeFunc(record),
};
// 昵称
const nickName = {
title
: `${dict.nickName}`,
dataIndex
: 'name',
width
: 150,
ellipsis: true,
render
: (text) => <span title={text}>{text}</span>,
};
// 手机号码
const mobile = {
title
: `${dict.mobileNumber}`,
dataIndex
: 'mobileNumber',
width
: 130,
ellipsis: true,
render
: (text) => <span title={text}>{text}</span>,
};
// 邮箱
const email = {
title
: `${dict.email}`,
dataIndex
: 'email',
width
: 180,
ellipsis: true,
render
: (text) => <span title={text}>{text}</span>,
};
// 来源
const origin = {
title
: `${dict.origin}`,
dataIndex
: 'utype',
width
: 100,
render
: (text, record) => getOrigin(record),
};
const getOrigin = (text, record) => {
const utype = record?.utype;
if (!utype) {
return '';
}
if (utype === 'WECHAT') {
return '微信';
}
if (utype === 'APPLE') {
return 'Apple ID';
}
return 'Uniportal';
};
// 基础权限
const roleBase = {
title
: `${dict.roleBase}`,
dataIndex
: 'basicRoleDtoList',
width
: 180,
ellipsis: true,
render
: (text, record) => getNames(text, 'name', record),
};
// 权限
const getNames = (arr, name, record) => {
if (arr?.length === 0) {
return '无';
}
const roleBaseTips = record?.obtainToVip2 === 2; // 是否为关联认证权限
const names = arr
.map((item) => {
return item[name];
})
.join('、');
return (
<Popover placement="bottom" content={`${names}${roleBaseTips ? '(关联认证)'
: ''}`} trigger="hover">
<div className={css.roles}>{`${names}${roleBaseTips ? '(关联认证)'
: ''}`}</div>
</Popover>
);
};
// 关联角色权限
const roleId = {
title
: `${dict.roleId}`,
dataIndex
: 'roleDtoList',
width
: 120,
ellipsis: true,
render
: (text) => getNames(text, 'name'),
};
// 姓名
const name = {
title
: `${dict.name}`,
dataIndex
: 'name',
width
: 120,
ellipsis: true,
render
: (text) => <span title={text}>{text}</span>,
};
// 工号
const id = {
title
: `${dict.w3id}`,
dataIndex
: 'w3id',
width
: 120,
ellipsis: true,
render
: (text) => <span title={text}>{text}</span>,
};
// 描述
const desc = {
title
: `${dict.desc}`,
dataIndex
: 'description',
width
: 180,
ellipsis: true,
render
: (text) => <span title={text}>{text}</span>,
};
// 更新时间
const updateTime = {
title
: `${dict.updateTime}`,
dataIndex
: 'updateTime',
width
: 160,
render
: (text) => formatText(text, '', 'long'),
};
// 禁言状态
const userStatus = {
title
: `${dict.userStatus}`,
dataIndex
: 'userStatus',
width
: 100,
render
: (text, record) =>
userStatusList.map((v, i) => {
if (v.value === String(record.userStatus)) {
let color = '#000';
switch (record.userStatus) {
case 0
:
color = '#000';
break;
case 1
:
color = '#f59b26';
break;
case 2
:
color = '#d9001b';
break;
default
:
break;
}
return (
<span key={i} style={{ color }}>
{v.name}
</span>
);
}
return null;
}),
};
请你帮我修改权限和关联角色权限的，为什么邮箱可以省略
显示，但是这两个
不可以而是直接隐藏
本文解决Antd Table组件中使用ellipsis属性时文本未正确显示为省略号的问题，并提供了解决方案，建议使用行内元素而非块级元素。
扫一扫
1722
到【灌水乐园】发言
