wsj
5 days ago be8c526a454aa9081000d15f26bebdef8c183aea
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import { Button, Space, Tag } from 'antd';
import type { ProColumns } from '@ant-design/pro-components';
import type { RoleStatus, RoleType, RoleVO } from './types';
 
export const roleTypeMeta: Record<RoleType, { text: string; color: string }> = {
  PRESET: { text: '预置', color: 'blue' },
  CUSTOM: { text: '自建', color: 'cyan' },
};
 
export const statusMeta: Record<RoleStatus, { text: string; color: string }> = {
  ENABLED: { text: '启用', color: 'green' },
  DISABLED: { text: '禁用', color: 'default' },
  DELETED: { text: '已删除', color: 'red' },
};
 
/** 兼容后端返回未知或小写枚举,避免直接索引得到 undefined。 */
export const getRoleTypeMeta = (roleType?: string) => {
  const key = String(roleType ?? '').toUpperCase() as RoleType;
  return roleTypeMeta[key] ?? { text: roleType || '-', color: 'default' };
};
 
export const getRoleStatusMeta = (status?: string) => {
  const key = String(status ?? '').toUpperCase() as RoleStatus;
  return statusMeta[key] ?? { text: status || '-', color: 'default' };
};
 
export const createRoleColumns = (options: {
  onDetail: (record: RoleVO) => void;
  onToggle: (record: RoleVO) => void;
}): ProColumns<RoleVO>[] => [
  {
    title: '角色名称',
    dataIndex: 'roleName',
    width: 180,
    ellipsis: true,
    fieldProps: { placeholder: '名称 / 编码' },
  },
  {
    title: '角色编码',
    dataIndex: 'roleCode',
    width: 200,
    ellipsis: true,
    search: false,
    render: (_value, record) => <Tag bordered={false}>{record.roleCode}</Tag>,
  },
  {
    title: '描述',
    dataIndex: 'description',
    ellipsis: true,
    search: false,
    render: (_value, record) => record.description || '-',
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 110,
    valueType: 'select',
    valueEnum: {
      ENABLED: { text: '启用' },
      DISABLED: { text: '禁用' },
      DELETED: { text: '已删除' },
    },
    render: (_value, record) => {
      const meta = getRoleStatusMeta(record.status);
      return (
        <Tag color={meta.color} bordered={false}>
          {meta.text}
        </Tag>
      );
    },
  },
  {
    title: '操作',
    key: 'action',
    valueType: 'option',
    width: 140,
    render: (_value, record) => {
      const isEnabled = record.status === 'ENABLED';
 
      return (
        <Space size={0}>
          <Button type="link" size="small" onClick={() => options.onDetail(record)}>
            详情
          </Button>
          {record.roleType === 'CUSTOM' && record.status !== 'DELETED' && (
            <Button
              type="link"
              size="small"
              danger={isEnabled}
              onClick={() => options.onToggle(record)}
            >
              {isEnabled ? '禁用' : '启用'}
            </Button>
          )}
        </Space>
      );
    },
  },
];