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

import React from "react";
import { COMPONENT_GENERATION_TYPE_ENUM, COMPONENT_SUB_TYPE, getComponentType } from "./const";
import { Popconfirm, Space, Statistic, Tag } from "antd";
import Image1X1 from "../../components/AdsComponent/Image1X1";
import ImageXXX from "../../components/AdsComponent/ImageXXX";



function columns12(del: (id: number[], accountId: number) => void, share: (data: any) => void, shareDetails: (data: any) => void): { label: string, fieldSHow?: { label: string, saveField: string, defaultValue: any[], data: any[] }, data: any[] }[] {

    return [
        {
            label: '基础字段',
            data: [
                {
                    title: '组件详情',
                    dataIndex: 'componentSubType1',
                    key: 'componentSubType1',
                    width: 380,
                    fixed: 'left',
                    label: '基础字段',
                    default: 1,
                    render(_: any, records: any) {
                        const type = getComponentType(records?.componentSubType)
                        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: 75,
                    align: 'center',
                    label: '基础字段',
                    default: 2,
                    render(value: any) {
                        return <span style={{ fontSize: 12 }}>{COMPONENT_SUB_TYPE.find(item => item.value === value)?.label || '--'}</span>
                    },
                },
                {
                    title: '组件名称',
                    dataIndex: 'componentCustomName',
                    key: 'componentCustomName',
                    width: 180,
                    ellipsis: true,
                    label: '基础字段',
                    default: 3,
                    render(value: any) {
                        return <span style={{ fontSize: 12 }}>{value}</span>
                    },
                },
                {
                    title: '组件ID',
                    dataIndex: 'componentId',
                    key: 'componentId',
                    width: 90,
                    ellipsis: true,
                    align: 'center',
                    label: '基础字段',
                    default: 4,
                    render(value: any) {
                        return <span style={{ fontSize: 12 }}>{value}</span>
                    },
                },
                {
                    title: '来源',
                    dataIndex: 'generationType',
                    key: 'generationType',
                    width: 90,
                    ellipsis: true,
                    align: 'center',
                    label: '基础字段',
                    default: 5,
                    render(value: any) {
                        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',
                    label: '基础字段',
                    default: 6,
                    render(value: any) {
                        return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                    },
                },
                {
                    title: '组件共享类型',
                    dataIndex: 'componentSharingType',
                    key: 'componentSharingType',
                    width: 70,
                    align: 'center',
                    label: '基础字段',
                    default: 7,
                    render(value: any) {
                        return <span style={{ fontSize: 12 }}>{value === 'ORGANIZATION' ? '全部共享' : '部分共享'}</span>
                    },
                },
                {
                    title: '业务单元ID',
                    dataIndex: 'organizationId',
                    key: 'organizationId',
                    width: 90,
                    ellipsis: true,
                    align: 'center',
                    label: '基础字段',
                    default: 8,
                    render(value: any) {
                        return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                    },
                },
                {
                    title: '创建时间',
                    dataIndex: 'createdTime',
                    key: 'createdTime',
                    width: 95,
                    ellipsis: true,
                    align: 'center',
                    label: '基础字段',
                    default: 9,
                    sorter: true,
                    render(value: any) {
                        return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                    },
                },
                {
                    title: '最后修改时间',
                    dataIndex: 'lastModifiedTime',
                    key: 'lastModifiedTime',
                    width: 95,
                    ellipsis: true,
                    align: 'center',
                    label: '基础字段',
                    default: 10,
                    render(value: any) {
                        return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                    },
                },
                {
                    title: '是否删除',
                    dataIndex: 'isDeleted',
                    key: 'isDeleted',
                    width: 70,
                    ellipsis: true,
                    align: 'center',
                    label: '基础字段',
                    default: 11,
                    render(value: any) {
                        return value ? <Tag color="error" style={{ margin: 0 }}>是</Tag> : <Tag color="success" style={{ margin: 0 }}>否</Tag>
                    },
                },
                {
                    title: '组件状态',
                    dataIndex: 'status',
                    key: 'status',
                    width: 70,
                    align: 'center',
                    label: '基础字段',
                    default: 12,
                    render(value: any) {
                        return <span style={{ fontSize: 12 }}>{value || '--'}</span>
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'cz',
                    key: 'cz',
                    width: 80,
                    label: '基础字段',
                    align: 'center',
                    default: 13,
                    render(_: any, record: any) {
                        if (!record?.isDeleted) {
                            return <Space size={4}>
                                <Popconfirm
                                    title="确定删除?"
                                    onConfirm={() => { del([record?.componentId], record?.accountId) }}
                                >
                                    <a style={{ color: 'red', fontSize: 12 }}>删除</a>
                                </Popconfirm>
                                <a style={{ fontSize: 12 }} onClick={() => share(record)}>共享组件</a>
                                <a style={{ fontSize: 12 }} onClick={() => shareDetails(record)}>共享详情</a>
                            </Space>
                        }
                        return '--'
                    },
                },
            ]
        },
        {
            label: '数据指标',
            data: [
                {
                    title: '消耗', dataIndex: 'cost', label: '数据指标', width: 70, default: 14, align: 'right', sorter: true,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '一键起量消耗', dataIndex: 'acquisitionCost', label: '数据指标', width: 70, default: 15, align: 'center', sorter: true,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '千次展现均价', dataIndex: 'thousandDisplayPrice', label: '数据指标', width: 70, align: 'center', sorter: true, default: 16,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '点击率', dataIndex: 'ctr', label: '数据指标', width: 70, align: 'center', sorter: true, default: 17,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '公众号关注成本（点击归因）', dataIndex: 'fromFollowByClickCost', label: '数据指标', width: 100, align: 'center', sorter: true, default: 18,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '公众号关注人数（点击归因）', dataIndex: 'fromFollowByClickUv', label: '数据指标', width: 100, align: 'center', sorter: true, default: 19,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '公众号关注成本（平台上报）', dataIndex: 'bizFollowCost', label: '数据指标', width: 100, align: 'center', sorter: true, default: 20,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '公众号关注人数（平台上报）', dataIndex: 'bizFollowUv', label: '数据指标', width: 100, align: 'center', sorter: true, default: 21,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '加企业微信客服成本（人数）', dataIndex: 'scanFollowUserCost', label: '数据指标', width: 100, align: 'center', sorter: true, default: 22,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '加企业微信客服人数', dataIndex: 'scanFollowUserCount', label: '数据指标', width: 90, align: 'center', sorter: true, default: 23,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '下单次数（点击归因）', dataIndex: 'orderByClickCount', label: '数据指标', width: 90, align: 'center', sorter: true, default: 24,
                    render: (a: number) => <Statistic value={a || 0} />
                },
                {
                    title: '下单成本（点击归因）', dataIndex: 'orderByClickCost', label: '数据指标', width: 90, align: 'center', sorter: true, default: 25,
                    render: (a: number) => <Statistic value={a || 0} precision={2} />
                },
                {
                    title: '下单率（点击归因）', dataIndex: 'orderByClickRate', label: '数据指标', width: 90, align: 'center', sorter: true, default: 26,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '点击首日付费ROI', dataIndex: 'cheoutFdReward', label: '数据指标', width: 90, align: 'center', sorter: true, default: 27,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '点击3日付费ROI', dataIndex: 'cheoutTdReward', label: '数据指标', width: 90, align: 'center', sorter: true, default: 28,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '点击7日付费ROI', dataIndex: 'cheoutOwReward', label: '数据指标', width: 90, align: 'center', sorter: true, default: 29,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '点击14日付费ROI', dataIndex: 'cheoutTwReward', label: '数据指标', width: 90, align: 'center', sorter: true, default: 30,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
                {
                    title: '点击30日付费ROI', dataIndex: 'cheoutOmReward', label: '数据指标', width: 90, align: 'center', sorter: true, default: 31,
                    render: (a: number) => <Statistic value={a ? a * 100 : 0} precision={2} valueStyle={a >= 1 ? { color: 'red' } : { color: '#0f990f' }} suffix="%" />
                },
            ]
        }
    ]
}

export default columns12