ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/tableConfig.tsx

import { Space, TableProps, Typography } from "antd"
import React from "react"
import { OPTIMIZATIONGOAL_ENUM } from "../const";
const { Text, Title } = Typography;
import style from './index.less'

const columns = (): TableProps<any>['columns'] => {

    return [
        {
            title: '广告',
            dataIndex: 'adgroup',
            key: 'adgroup',
            align: 'center',
            children: [
                {
                    title: '广告名称',
                    dataIndex: 'adgroupName',
                    key: 'adgroupName',
                    width: 250,
                    render: (_, b) => {
                        return <Text style={{ fontSize: 12 }}>{b?.adgroupsDto?.adgroupName}</Text>
                    },
                    onCell: (record, index = 0) => ({
                        rowSpan: !(index % record.rowSpan) ? record.rowSpan : 0
                    }),
                },
                {
                    title: '营销内容',
                    dataIndex: 'productName',
                    key: 'productName',
                    width: 200,
                    render: (_, b) => {
                        if (['MARKETING_TARGET_TYPE_FICTION'].includes(b.adgroupsDto?.marketingAssetOuterSpec?.marketingTargetType)) {
                            return <Space size={0} direction="vertical">
                                <Text style={{ fontSize: 12 }}>推广产品：{b?.productDto?.marketingAssetName}(产品ID：{b?.productDto?.marketingAssetId})</Text>
                                {(b.adgroupsDto?.marketingCarrierType === 'MARKETING_CARRIER_TYPE_WECHAT_OFFICIAL_ACCOUNT' && b?.marketingCarrierDto) && <Text style={{ fontSize: 12 }}>营销载体：{b.marketingCarrierDto.map((item: { wechatOfficialAccountName: any; wechatOfficialAccountId: any; }) => `${item?.wechatOfficialAccountName}(${item?.wechatOfficialAccountId})`)?.toString()}</Text>}
                                <Text style={{ fontSize: 12 }}>转化归因：{b?.userActionSetsList ? b?.userActionSetsList.map((item: { name: any; }) => item.name).toString() : '暂未配置'}</Text>
                            </Space>
                        } else if (['MARKETING_TARGET_TYPE_WECHAT_OFFICIAL_ACCOUNT'].includes(b.adgroupsDto?.marketingAssetOuterSpec?.marketingTargetType)) {
                            return <Space size={0} direction="vertical">
                                <Text style={{ fontSize: 12 }}>推广产品：微信公众号</Text>
                                <Text style={{ fontSize: 12 }}>营销载体：微信公众号</Text>
                                <Text style={{ fontSize: 12 }}>应用：{b?.productDto?.wechatOfficialAccountName}({b?.productDto?.wechatOfficialAccountId})</Text>
                                <Text style={{ fontSize: 12 }}>转化归因：{b?.userActionSetsList ? b?.userActionSetsList.map((item: { name: any; }) => item.name).toString() : '暂未配置'}</Text>
                            </Space>
                        }
                        return 'ERROR，请联系管理员'
                    },
                    onCell: (record, index = 0) => ({
                        rowSpan: !(index % record.rowSpan) ? record.rowSpan : 0
                    }),
                },
                {
                    title: '定向',
                    dataIndex: 'targeting',
                    key: 'targeting',
                    width: 170,
                    render: (_, b) => {
                        return <Text style={{ fontSize: 12 }}>{b?.targetDto?.targetingName}</Text>
                    },
                    onCell: (record, index = 0) => ({
                        rowSpan: !(index % record.rowSpan) ? record.rowSpan : 0
                    }),
                },
                {
                    title: '预算与出价',
                    dataIndex: 'dailyBudget',
                    key: 'dailyBudget',
                    width: 170,
                    render: (_, b) => {
                        let { optimizationGoal, dailyBudget, bidAmount, bidMode } = b?.adgroupsDto
                        return <Space size={0} direction="vertical">
                            <Text style={{ fontSize: 12 }}>广告日预算：{dailyBudget ? dailyBudget + '元/天' : '不限'}</Text>
                            <Text style={{ fontSize: 12 }}>出价：{bidAmount}元/{optimizationGoal ? OPTIMIZATIONGOAL_ENUM[optimizationGoal] : ['BID_MODE_OCPM', 'BID_MODE_OCPC'].includes(bidMode) ? '千次曝光' : '点击'}</Text>
                        </Space>
                    },
                    onCell: (record, index = 0) => ({
                        rowSpan: !(index % record.rowSpan) ? record.rowSpan : 0
                    }),
                },
            ]
        },
        {
            title: '创意',
            dataIndex: 'dynamicDto',
            key: 'dynamicDto',
            align: 'center',
            children: [
                {
                    title: '创意名称',
                    dataIndex: 'dynamicCreativeName',
                    key: 'dynamicCreativeName',
                    width: 200,
                    render: (_, b) => {
                        return <Text style={{ fontSize: 12 }}>{b?.dynamicDto?.dynamicCreativeName}</Text>
                    }
                },
                {
                    title: '创意素材',
                    dataIndex: 'dynamicGroup',
                    key: 'dynamicGroup',
                    width: 200,
                    render: (_, b) => {
                        let deliveryMode = b?.dynamicDto?.deliveryMode
                        let dynamicGroup = b?.dynamicGroup
                        if (dynamicGroup && Object.keys(dynamicGroup).length) {
                            let keys = Object.keys(dynamicGroup)
                            if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
                                return <Text style={{ fontSize: 12, color: '#1890ff' }}>已选{(keys.includes('video_id') || keys.includes('short_video1')) ? '1个视频，0张图片' : keys.includes('image_id') ? '0个视频，1张图片' : (keys.includes('image_list') || keys.includes('element_story') ? '1个组图, 0个视频' : '')}</Text>
                            } else {
                                return <Text style={{ fontSize: 12 }}>开发中</Text>
                            }
                        } else {
                            return <Text style={{ fontSize: 12 }}>无需配置</Text>
                        }

                    }
                },
                {
                    title: '创意文案',
                    dataIndex: 'textDto',
                    key: 'textDto',
                    width: 200,
                    render: (value, b) => {
                        console.log('textDto-->', value)
                        let deliveryMode = b?.dynamicDto?.deliveryMode
                        if (value && Object.keys(value).length) {
                            if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
                                return <div className={style.detail_body} style={{ height: 'auto' }}>
                                    {Object.keys(value)?.map((key, index: number) => {
                                        return <div key={index}>
                                            {key === 'description' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'文案'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['description']?.toString()}</Text></div>
                                            </> : key === 'title' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'标题'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['title']?.toString()}</Text></div>
                                            </> : null}
                                        </div>
                                    })}
                                </div>
                            } else {
                                return <Text style={{ fontSize: 12 }}>开发中</Text>
                            }
                        } else {
                            return <Text style={{ fontSize: 12 }}>无需配置</Text>
                        }

                    }
                },
                {
                    title: '跳转类型',
                    dataIndex: 'pageListDto',
                    key: 'pageListDto',
                    width: 200,
                    render: (_, b) => {
                        let pageListDto = b?.pageListDto
                        return <Text style={{ fontSize: 12, wordBreak: 'break-all' }}>原生推广页：{pageListDto?.[0]?.pageName}</Text>
                    }
                }
            ]
        }
    ]
}

export default columns