qc-EnterpriseWeChat-Pro/src/pages/weComTask/page/miniProgramPages/tableConfig.tsx

import { ColumnsType } from "antd/es/table"
import { Flex, Popconfirm, Image, Tag } from "antd"
import { copy } from "@/utils/utils"
import dayJs from 'dayjs';


export function TableConfig(
    handleEdit?: (d: Record<string, any>, isCopy?: boolean) => void,
    handleDel?: (data: number[]) => void,
    handleCode?: (appid: string, vid: string) => void
): ColumnsType<any> {

    const arr: ColumnsType<any> = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            width: 70,
            align: 'center'
        },
        {
            title: '落地页名称',
            dataIndex: 'name',
            key: 'name',
            width: 150,
            ellipsis: true
        },
        {
            title: '落地页类型',
            dataIndex: 'type',
            key: 'type',
            width: 85,
            align: 'center',
            render: (v: string) => v === 'LANDING_PAGE' ? <Tag color="blue">小说落地页</Tag> : v === 'VIDEO' ? <Tag color="green">视频落地页</Tag> : '--'
        },
        {
            title: 'Sign',
            dataIndex: 'sign',
            key: 'sign',
            width: 150,
            ellipsis: true
        },
        {
            title: '落地页标题',
            dataIndex: 'pageName',
            key: 'pageName',
            width: 150,
            ellipsis: true,
            render(_, record) {
                const data = JSON.parse(record?.content || '{}')
                return data?.pageName || data?.[0]?.user?.nick || '--'
            },
        },
        {
            title: '企微主体',
            dataIndex: 'corpName',
            key: 'corpName',
            width: 120,
            align: 'center',
            ellipsis: true,
            render: (v: string) => v || '--'
        },
        {
            title: '企微客服号',
            dataIndex: 'corpUserList',
            key: 'corpUserList',
            width: 160,
            align: 'center',
            ellipsis: true,
            render: (v: any[]) => v?.map(item => item.corpUserName)?.join('、') || '--'
        },
        {
            title: '书名',
            dataIndex: 'bookName',
            key: 'bookName',
            width: 150,
            align: 'center',
            ellipsis: true,
            render: (v: string) => v || '--'
        },
        {
            title: '是否开启H5访问限制',
            dataIndex: 'h5VisitSwitch',
            key: 'h5VisitSwitch',
            width: 70,
            align: 'center',
            render: (v: boolean) => v ?  <Tag color="green">开启</Tag> : <Tag color="red">关闭</Tag>
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 150,
            ellipsis: true,
            render: (v: string) => v || '--'
        },
        {
            title: '小程序AppId',
            dataIndex: 'previewAppId',
            key: 'previewAppId',
            width: 150,
            align: 'center',
            ellipsis: true,
            render: v => v || '--'
        },
        {
            title: '小程序路径',
            dataIndex: 'path',
            key: 'path',
            width: 350,
            ellipsis: true,
            render: (_, records) => {
                const eq = -Math.random()
                if (dayJs(records.createTime) > dayJs().startOf('day')) {
                    return <a onClick={() => copy(`pages/player/index?id=${records.sign}`)}>pages/player/index?id={records.sign}</a>
                }
                return <a onClick={() => copy(`pages/play/index?vid=${records.sign}&eq=${eq}`)}>pages/play/index?vid={records.sign}&eq={eq}</a>
            }
        },
        {
            title: 'H5路径',
            dataIndex: 'h5Path',
            key: 'h5Path',
            width: 350,
            ellipsis: true,
            render: (_, records) => {
                const link = `https://home.zanxiangnet.com/test.html?id=${records.sign}&appId=${records.previewAppId}`
                return <a onClick={() => copy(link)}>{link}</a>
            }
        },
        {
            title: '项目组',
            dataIndex: 'projectGroupIdList',
            key: 'projectGroupIdList',
            width: 120,
            align: 'center',
            ellipsis: true,
            render: (v: { projectGroupName: string }[]) => v?.map(item => item?.projectGroupName)?.join('、') || '--'
        },
        {
            title: '客服号二维码',
            dataIndex: 'qrCodeList',
            key: 'qrCodeList',
            width: 250,
            render: (v: { urlList: string[] }[]) => v?.map(item => item?.urlList?.map((item, i) => <Image
                key={i}
                height={20}
                alt="basic"
                src={item}
            />)) || '--'
        },
        {
            title: '悬浮客服号二维码',
            dataIndex: 'qrCodeFloatList',
            key: 'qrCodeFloatList',
            width: 250,
            render: (v: { urlList: string[] }[]) => v?.map(item => item?.urlList?.map((item, i) => <Image
                key={i}
                height={20}
                alt="basic"
                src={item}
            />)) || '--'
        },
        {
            title: '创建人',
            dataIndex: 'createBy',
            key: 'createBy',
            align: 'center',
            width: 70
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: 140,
            render: (value) => {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 250,
            fixed: 'right',
            render: (_, records) => {
                return <Flex gap={4}>
                    <a onClick={() => handleEdit?.(records, true)}>复制</a>
                    <a onClick={() => handleEdit?.(records)}>修改</a>
                    {records?.previewAppId && <a onClick={() => handleCode?.(records.previewAppId, records.sign)}>小程序预览链接</a>}
                    <Popconfirm
                        title="确定删除？"
                        onConfirm={() => { handleDel?.([records.id]) }}
                    >
                        <a style={{ color: 'red' }}>删除</a>
                    </Popconfirm>
                </Flex>
            }
        },
    ]
    return arr
}