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

import { Input, Typography } from "antd";
import { TIME_TYPE } from "../../businessPlan/create/const";
import ShowContentTable from "../../businessPlan/create/components/massSending/showContentTable";
import SelectBookLinkButton from "../../bookLink/SelectBookLinkButton";
import { ColumnsType } from "antd/es/table";
import { AnyObject } from "antd/es/_util/type";

const { Title, Text, Paragraph } = Typography;
/** 朋友圈 */
export const monmentsColumns = (
    bookPlatForm: TASK_CREATE.BookPlatFormProps[],
    bookList: TASK_CREATE.BookListProps[],
    platform: string,
    previewContent: { [x: string]: any },
    setPreviewContent: React.Dispatch<React.SetStateAction<{
        [x: string]: any;
    }>>
): ColumnsType<AnyObject> => {
    return [
        {
            title: '账号',
            dataIndex: 'corpUserGroupName',
            key: 'corpUserGroupName',
            width: 150,
            render(value, record) {
                return <>
                    <Title level={5} style={{ margin: 0 }}>{value}</Title>
                    <Paragraph style={{ margin: 0 }}>公众号：{record?.corpUsers?.[0]?.mpAccountName || '--'}</Paragraph>
                    <Paragraph style={{ margin: 0 }}>客服号：{record?.corpUsers?.map(i => i.name).join('、')}</Paragraph>
                </>
            },
            onCell: (record) => {
                return { rowSpan: record.groupRowSpan }
            }
        },
        {
            title: '朋友圈信息',
            dataIndex: 'taskName',
            key: 'taskName',
            width: 130,
            render(value, record) {
                return <>
                    <Title level={5} style={{ margin: 0 }}>标题：{value}</Title>
                    {record?.bizType && <Paragraph style={{ margin: 0 }}>业务类型：{record?.bizType === 'novel' ? '小说' : record?.bizType === 'game' ? '游戏' : '<空>'}</Paragraph>}
                    {record?.platform && <Paragraph style={{ margin: 0 }}>书城：{record?.platform ? bookPlatForm?.find(item => item.id === record?.platform)?.platformName : '<空>'}</Paragraph>}
                    {record?.templateProductId && <Paragraph style={{ margin: 0 }}>适用产品：{record?.templateProductId ? bookList?.find(item => item.id === record?.templateProductId)?.bookName : '<空>'}</Paragraph>}
                </>
            },
            onCell: (record) => {
                return { rowSpan: record.groupRowSpan }
            }
        },
        {
            title: '策略信息',
            dataIndex: 'strategyData',
            key: 'strategyData',
            width: 200,
            render(value, record) {
                return <>
                    <Title level={5} style={{ margin: 0 }}>策略{record.strategyIndex + 1}</Title>
                    <Paragraph style={{ margin: 0 }}>名称：{value?.strategyName || '<空>'}</Paragraph>
                    <Paragraph style={{ margin: 0 }}>执行类型：{TIME_TYPE[value?.timeRepeatType]}</Paragraph>
                    {value?.sendDay && <Paragraph style={{ margin: 0 }}>执行时间：{value?.sendDay}</Paragraph>}
                    {value?.startTime && <Paragraph style={{ margin: 0 }}>执行日期：{value?.startTime}~{value?.endTime ? value?.endTime : '长期执行'}</Paragraph>}
                    {value?.sendTime && <Paragraph style={{ margin: 0 }}>执行时间：{value?.sendTime}</Paragraph>}
                    {value?.repeatArray && <Paragraph style={{ margin: 0 }}>执行天数：{value?.repeatArray.join('、')}</Paragraph>}
                </>
            },
            onCell: (record) => {
                return { rowSpan: record.strategyRowSpan }
            }
        },
        {
            title: '发送内容',
            dataIndex: 'content',
            key: 'content',
            width: 200,
            render(_, record) {
                return <>
                    <ShowContentTable
                        data={record?.content}
                        name={<><span>内容{record.contentIndex + 1}：</span><span dangerouslySetInnerHTML={{ __html: record.contentReactNode?.map((item) => item).join('、') }}></span></>}
                    />
                </>
            },
        },
        {
            title: '图文链接',
            dataIndex: 'linkUrl',
            key: 'linkUrl',
            width: 250,
            render(_, record) {
                const linkUrl = previewContent?.[record?.id]?.linkUrl
                return record?.linkData?.length > 0 ? <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end' }}>
                    <Input.TextArea
                        placeholder="请输入链接"
                        allowClear
                        value={linkUrl}
                        onChange={e => {
                            const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                            const c = previewContent?.[record.id] || {}
                            newPreviewContent[record.id] = { ...c, linkUrl: e.target.value }
                            setPreviewContent(newPreviewContent)
                        }}
                    />
                    <SelectBookLinkButton
                        bookPlatForm={bookPlatForm}
                        platform={platform}
                        mpAccountId={record?.mpAccountId}
                        linkData={record.linkData}
                        linkList={linkUrl ? {
                            type: 'link',
                            data: linkUrl.split(',')
                        } : undefined}
                        onChange={(linkStr, miniprogramAppid, miniprogramPage) => {
                            const msg: { [x: string]: string } = { linkUrl: linkStr }
                            if (miniprogramAppid && miniprogramPage && record?.miniProgramData?.length > 0 && !previewContent?.[record.id]?.miniprogramAppid && !previewContent?.[record.id]?.miniprogramPage) {
                                msg.miniprogramAppid = miniprogramAppid
                                msg.miniprogramPage = miniprogramPage
                            }
                            const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                            const c = previewContent?.[record.id] || {}
                            newPreviewContent[record.id] = { ...c, ...msg }
                            setPreviewContent(newPreviewContent)
                        }}
                    />
                </div> : '--'
            },
        },
        {
            title: '小程序APPID',
            dataIndex: 'miniprogramAppid',
            key: 'miniprogramAppid',
            width: 200,
            render(_, record) {
                return record?.miniProgramData?.length > 0 ? <Input.TextArea
                    placeholder="请输入小程序APPID"
                    allowClear
                    value={previewContent?.[record.id]?.miniprogramAppid}
                    onChange={e => {
                        const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                        const c = previewContent?.[record.id] || {}
                        newPreviewContent[record.id] = { ...c, miniprogramAppid: e.target.value }
                        setPreviewContent(newPreviewContent)
                    }}
                /> : '--'
            },
        },
        {
            title: '小程序路径',
            dataIndex: 'miniprogramPage',
            key: 'miniprogramPage',
            width: 250,
            render(_, record) {
                const miniprogramAppid = previewContent?.[record.id]?.miniprogramAppid
                const miniprogramPage = previewContent?.[record.id]?.miniprogramPage
                let linkList: {
                    type: 'link' | 'miniprogram',
                    data: any[]
                } = undefined
                if (miniprogramAppid && miniprogramPage) {
                    linkList = { type: 'miniprogram', data: [] }
                    const miniprogramPages = miniprogramPage.split(',')
                    miniprogramAppid.split(',').map((item, index) => {
                        linkList.data.push({
                            miniappId: item,
                            miniappPagePath: miniprogramPages?.[index]
                        })
                    })
                }
                return record?.miniProgramData?.length > 0 ? <div style={{ display: 'flex', gap: 4, alignItems: 'flex-end' }}>
                    <Input.TextArea
                        placeholder="请输入小程序路径"
                        allowClear
                        value={previewContent?.[record.id]?.miniprogramPage}
                        onChange={e => {
                            const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                            const c = previewContent?.[record.id] || {}
                            newPreviewContent[record.id] = { ...c, miniprogramPage: e.target.value }
                            setPreviewContent(newPreviewContent)
                        }}
                    />
                    <SelectBookLinkButton
                        bookPlatForm={bookPlatForm}
                        platform={platform}
                        mpAccountId={record?.mpAccountId}
                        linkList={linkList}
                        linkData={record.miniProgramData.map(item => ({
                            msgType: "TASK_CONTENT_LINK",
                            link: {
                                title: item?.miniprogram?.title,
                                picUrl: item?.miniprogram?.picUrl,
                                desc: ''
                            }
                        }))}
                        onChange={(_, miniprogramAppid, miniprogramPage) => {
                            const msg: { [x: string]: string } = {}
                            if (miniprogramAppid && miniprogramPage) {
                                msg.miniprogramAppid = miniprogramAppid
                                msg.miniprogramPage = miniprogramPage
                                const newPreviewContent = JSON.parse(JSON.stringify(previewContent))
                                const c = previewContent?.[record.id] || {}
                                newPreviewContent[record.id] = { ...c, ...msg }
                                setPreviewContent(newPreviewContent)
                            }
                        }}
                    />
                </div> : '--'
            }
        }
    ]
}