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

import { Flex, Popconfirm, Popover, Space, Typography } from "antd";
import { AnyObject } from "antd/es/_util/type";
import { ColumnsType } from "antd/es/table";
import style from './index.less'
import { QuestionCircleFilled } from '@ant-design/icons';
import { restoreGroupData, restoreUserInheritData } from "../create/const";
import PreviewUserInherit from "../create/components/userInherit/previewUserlnherit";
import PreviewMassSendingStrategy from "../create/components/massSending/previewMassSendingStrategy";
import ShowContent from "../create/components/massSending/showContent";
import PreviewWelcome from "../create/components/welcome/previewWelcome";

const { Text, Paragraph } = Typography;
const taskListColumns = (
    bookPlatForm: any[],
    bookList: any[],
    handleLog: (data: any) => void,
    handleCopy: (data: any, isCopy: boolean, isEditSc?: boolean) => void,
    handleDel: (data: any, type: 'del' | 'cancel' | 'open') => void,
): ColumnsType<AnyObject> => {

    return [
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 210,
            render(_, record) {
                return <Space>
                    {record?.status === 1 ? <Popconfirm
                        title="确定暂停？"
                        onConfirm={() => { handleDel({ projectIds: [record.id] }, 'cancel') }}
                    >
                        <a style={{ color: 'orange' }}>暂停任务</a>
                    </Popconfirm> : record?.status === 3 ? <Popconfirm
                        title="确定启用？"
                        onConfirm={() => { handleDel({ projectIds: [record.id] }, 'open') }}
                    >
                        <a style={{ color: '#87d068' }}>启用任务</a>
                    </Popconfirm> : undefined}
                    <a onClick={() => handleCopy(record, true)}>复制</a>
                    <a onClick={() => handleCopy(record, false)}>编辑</a>
                    <a onClick={() => handleCopy(record, false, true)}>编辑素材</a>
                    <a onClick={() => handleLog(record)}>详情</a>
                    <Popconfirm
                        title="确定删除？"
                        onConfirm={() => { handleDel({ projectIds: [record.id] }, 'del') }}
                    >
                        <a style={{ color: 'red' }}>删除</a>
                    </Popconfirm>
                </Space>
            },
        },
        {
            title: '任务名称',
            dataIndex: 'projectName',
            key: 'projectName',
            width: 120,
            ellipsis: true
        },
        {
            title: '基础信息',
            dataIndex: 'bizType',
            key: 'bizType',
            width: 180,
            render: (_, record) => {
                return <Paragraph style={{ margin: 0 }} ellipsis={{ tooltip: true }}>
                    业务类型：{record?.bizType === 'novel' ? '小说' : '<空>'}-书城：{record?.platformName || '<空>'}-适用产品：{record?.templateProductName || '<空>'}
                </Paragraph>
            }
        },
        {
            title: '欢迎语配置',
            dataIndex: 'welcomeMsgTemplateDTO',
            key: 'welcomeMsgTemplateDTO',
            width: 150,
            ellipsis: true,
            render: (_, record) => {
                return record?.welcomeMsgTemplateDTO && Object.keys(record?.welcomeMsgTemplateDTO)?.length > 0 ? <div className={style.nameBox}>
                    <div>
                        <Text ellipsis>{record?.welcomeMsgTemplateDTO?.welcomeName || '<空>'}</Text>
                    </div>
                    <Popover
                        placement="left"
                        content={<div>
                            <PreviewWelcome
                                welcomeMsgTemplateDTO={record?.welcomeMsgTemplateDTO}
                                bookList={bookList}
                                bookPlatForm={bookPlatForm}
                            />
                        </div>}
                        styles={{ body: { width: 300, overflow: 'hidden', overflowY: 'auto', maxHeight: 400 } }}
                    >
                        <a><QuestionCircleFilled /></a>
                    </Popover>
                </div> : <Text type="danger">当前没有欢迎语配置</Text>
            }
        },
        {
            title: '群发配置',
            dataIndex: 'groupSendTaskAddDTO',
            key: 'groupSendTaskAddDTO',
            width: 170,
            ellipsis: true,
            render: (value) => {
                if (value && Object.keys(value)?.length > 0) {
                    const data = restoreGroupData(value)
                    return <div className={style.nameBox}>
                        <div>
                            <Text ellipsis>{value?.groupSendName || '<空>'}</Text>
                        </div>
                        <Popover
                            placement="left"
                            content={<div>
                                <PreviewMassSendingStrategy
                                    massSendingStrategy={data.massSendingStrategy}
                                />
                            </div>}
                            styles={{ body: { width: 360, overflow: 'hidden', overflowY: 'auto', maxHeight: 400 } }}
                        >
                            <a><QuestionCircleFilled /></a>
                        </Popover>
                        <Popover
                            placement="left"
                            content={<div>
                                <ShowContent
                                    strategySettings={data?.massSendingStrategy?.strategySettings}
                                    massSendingContent={data?.massSendingContent}
                                />
                            </div>}
                            styles={{ body: { width: 360, overflow: 'hidden', overflowY: 'auto', maxHeight: 400 } }}
                        >
                            <a><QuestionCircleFilled /></a>
                        </Popover>
                    </div>
                }
                return <Text type="danger">当前没有群发配置</Text>
            }
        },
        {
            title: '客户继承配置',
            dataIndex: 'externalUserTransferTasksDTO',
            key: 'externalUserTransferTasksDTO',
            width: 150,
            ellipsis: true,
            render: (value) => {
                if (value && Object.keys(value)?.length > 0) {
                    const data = restoreUserInheritData(value)
                    return <div className={style.nameBox}>
                        <div>
                            <Text ellipsis>{value?.taskName || '<空>'}</Text>
                        </div>
                        <Popover
                            placement="left"
                            content={<div>
                                <PreviewUserInherit
                                    userInherit={data}
                                />
                            </div>}
                            styles={{ body: { width: 360, overflow: 'hidden', overflowY: 'auto', maxHeight: 400 } }}
                        >
                            <a><QuestionCircleFilled /></a>
                        </Popover>
                    </div>
                }
                return <Text type="danger">当前没有客户继承配置</Text>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: 125,
            ellipsis: true
        },
        {
            title: '任务数量',
            dataIndex: 'taskCount',
            key: 'taskCount',
            width: 260,
            render(value, record) {
                return <Flex gap={6}>
                    <Text type={record.welcomeMsgCount > 0 ? 'success' : 'danger'}>欢迎语：{record.welcomeMsgCount}</Text>
                    <Text type={record.groupSendTaskCount > 0 ? 'success' : 'danger'}>群发：{record.groupSendTaskCount}</Text>
                    <Text type={record.externalUserTransferTaskCount > 0 ? 'success' : 'danger'}>客户继承：{record.externalUserTransferTaskCount}</Text>
                </Flex>
            },
        },
    ]
}


export default taskListColumns