ad-manage/src/pages/launchSystemV3/tencenTasset/manageComponent/tableConfig.tsx

import { ColumnsType } from "antd/es/table";
import React from "react";
import { COMPONENT_GENERATION_TYPE_ENUM, COMPONENT_SUB_TYPE, getComponentType } from "./const";
import { Popconfirm, Tag } from "antd";
import moment from "moment";
import Image1X1 from "../../components/AdsComponent/Image1X1";
import ImageXXX from "../../components/AdsComponent/ImageXXX";

const TableConfig = (activeKey: 'IMAGE' | 'VIDEO', del: (id: number[]) => void): ColumnsType<any> => {

    const columns: ColumnsType<any> = [
        {
            title: activeKey === 'IMAGE' ? '图片' : '视频' + '组件',
            dataIndex: 'componentSubType',
            key: 'componentSubType',
            width: 380,
            fixed: 'left',
            render(value, records) {
                const type = getComponentType(value)
                if (type === 'IMAGE') {
                    return <Image1X1 imageUrl={records?.componentValue?.image?.value?.imageUrl} />
                } else if (type === 'IMAGE_LIST') {
                    return <ImageXXX imageList={records?.componentValue?.imageList?.value?.list || []} />
                } else if (type === 'VIDEO') {
                    return <Image1X1
                        imageUrl={records?.componentValue?.video?.value?.coverUrl || records?.componentValue?.shortVideo?.value?.shortVideo2Url}
                        videoUrl={records?.componentValue?.video?.value?.videoUrl || records?.componentValue?.shortVideo?.value?.shortVideo1Url}
                    />
                }
                return <div className='image-9x16'>联系技术添加</div>
            },
        },
        {
            title: '二级组件类型',
            dataIndex: 'componentSubType',
            key: 'componentSubType',
            width: 100,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{COMPONENT_SUB_TYPE.find(item => item.value === value)?.label || '--'}</span>
            },
        },
        {
            title: '组件名称',
            dataIndex: 'componentCustomName',
            key: 'componentCustomName',
            width: 180,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            },
        },
        {
            title: '组件ID',
            dataIndex: 'componentId',
            key: 'componentId',
            width: 90,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            },
        },
        {
            title: '来源',
            dataIndex: 'generationType',
            key: 'generationType',
            width: 90,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{COMPONENT_GENERATION_TYPE_ENUM['COMPONENT_GENERATION_TYPE_' + value as keyof typeof COMPONENT_GENERATION_TYPE_ENUM] || '--'}</span>
            },
        },
        {
            title: '广告账号',
            dataIndex: 'accountId',
            key: 'accountId',
            width: 90,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
            },
        },
        {
            title: '业务单元ID',
            dataIndex: 'organizationId',
            key: 'organizationId',
            width: 90,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createdTime',
            key: 'createdTime',
            width: 95,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value ? moment.unix(value).format('YYYY-MM-DD') : '--'}</span>
            },
        },
        {
            title: '最后修改时间',
            dataIndex: 'lastModifiedTime',
            key: 'lastModifiedTime',
            width: 95,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value ? moment.unix(value).format('YYYY-MM-DD') : '--'}</span>
            },
        },
        {
            title: '是否删除',
            dataIndex: 'isDeleted',
            key: 'isDeleted',
            width: 70,
            ellipsis: true,
            align: 'center',
            render(value) {
                return value ? <Tag color="error" style={{ margin: 0 }}>是</Tag> : <Tag color="success" style={{ margin: 0 }}>否</Tag>
            },
        },
        {
            title: '组件状态',
            dataIndex: 'status',
            key: 'status',
            width: 90,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
            },
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 130,
            render(_, record) {
                if (!record?.isDeleted) {
                    return <Popconfirm
                        title="确定删除?"
                        onConfirm={() => { del([record?.componentId]) }}
                    >
                        <a style={{ color: 'red', fontSize: 12 }}>删除</a>
                    </Popconfirm>
                }
                return '--'
            },
        },
    ]
    return columns
}

export default TableConfig