状态提示小组件

效果：

types.ts

export interface RecordType {
    id: string;
    errMsg: string;
}

export interface StatusParams {
    desc: string;
    className: string;
}

export interface DescType {
    name: string;
    label: string;
}

Table.ts

import {DescType, StatusParams} from '../types';

// 状态MAP配置
export const STATUS_MAPS: Record<string, StatusParams> = {
    '-1': {
        desc: '失败',
        className: 'status failed'
    },
    '0': {
        desc: '暂无',
        className: 'status disabled'
    },
    '1': {
        desc: '进行中',
        className: 'status normal'
    },
    '2': {
        desc: '成功',
        className: 'status success'
    }
};

List.tsx

{
            dataIndex: 'status',
            title: '状态',
            width: 100,
            filterMultiple: true,
            filters: Object.entries(STATUS_MAPS).map(([key, data]) => ({text: data.desc, value: key})),
            render: (key: number, detail) => (
                <div>
                    {<span className={STATUS_MAPS[key]?.className}>{STATUS_MAPS[key]?.desc}</span>}
                    {key === -1 && (
                        <Tooltip placement="top" title={detail.errMsg}>
                            <QuestionCircleOutlined className="statusIcon" />
                        </Tooltip>
                    )}
                </div>
            )
        },