ad-manage/src/pages/launchSystemNew/components/creativeModal/index.tsx

import { FnAjax, useAjax } from "@/Hook/useAjax"
import { ListData } from "@/services/launchAdq"
import { getSysAdcreativeList } from "@/services/launchAdq/creative"
import { Col, Input, Modal, Row, Select } from "antd"
import React, { useCallback, useEffect, useState } from "react"
import { adcreativeTemplate } from "../../launchManage/createAd/adcreativeCol"
import TableData from "../TableData"
import tableConfig from "./tableConfig"


interface Props {
    promotedObjectType: string,
    siteSet: string[],
    visible?: boolean,
    onClose?: () => void,
    onChange?: (data: any) => void,
    sysAdcreativeId?: number
}
/**
 * 选择创意
 * @returns 
 */
const CreativeModal: React.FC<Props> = (props) => {

    /****************************/
    const { visible, onClose, onChange, sysAdcreativeId, promotedObjectType, siteSet } = props
    const sysAdcreativeList: FnAjax<ListData<any> | any> = useAjax((params) => getSysAdcreativeList(params), { formatResult: true })
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
    const [oldsearchData, setOldsearchData] = useState<any>(null)
    /****************************/

    // 回填
    useEffect(() => {
        if (sysAdcreativeId) {
            setSelectedRowKeys([sysAdcreativeId])
        }
    }, [sysAdcreativeId])

    // 初始获取列表
    useEffect(() => {
        getList({ pageSize: 20, pageNum: 1, promotedObjectType, siteSet })
    }, [])
    // 获取列表
    const getList = useCallback((arg: { pageSize: number, pageNum: number, adcreativeName?: string, promotedObjectType?: string, siteSet?: string[], adcreativeTemplateIds?: number[] }) => {
        Object.keys(arg).forEach(key => {
            !arg[key] && delete arg[key]
        })
        if (JSON.stringify(arg) !== JSON.stringify(oldsearchData)) {
            setOldsearchData(arg)
            sysAdcreativeList.run(arg)
        }
    }, [oldsearchData])

    const handleOk = () => {
        onChange && onChange(selectedRowKeys.toString())
    }

    return <Modal title={`选择创意`} bodyStyle={{ padding: 0 }} width={1000} open={visible} onOk={handleOk} onCancel={() => { onClose && onClose() }}>
        <TableData
            hoverable={false}
            columns={tableConfig}
            ajax={sysAdcreativeList}
            dataSource={sysAdcreativeList?.data?.data?.records}
            loading={sysAdcreativeList?.loading}
            scroll={{ y: 550}}
            total={sysAdcreativeList?.data?.data?.total}
            page={sysAdcreativeList?.data?.data?.current}
            pageSize={sysAdcreativeList?.data?.data?.size}
            rowSelection={{
                type: 'radio',
                selectedRowKeys: selectedRowKeys,
                onChange: (selectedRowKeys: React.Key[]) => {
                    setSelectedRowKeys(selectedRowKeys)
                }
            }}
            leftChild={<>
                <Row gutter={[10, 10]}>
                    <Col>
                        <Input
                            placeholder='创意名称'
                            allowClear
                            onBlur={(e) => {
                                let value = e.target.value
                                getList({ pageNum: 1, pageSize: 20, adcreativeName: value, promotedObjectType, siteSet })
                            }}
                            onKeyDownCapture={(e: any) => {
                                let key = e.key
                                if (key === 'Enter') {
                                    let value = e.target.value
                                    getList({ pageNum: 1, pageSize: 20, promotedObjectType, siteSet, adcreativeName: value })
                                }
                            }}
                            onChange={(e) => {
                                let value = e.target.value
                                if (!value) {
                                    getList({ pageNum: 1, pageSize: 20, promotedObjectType, siteSet, adcreativeName: value })
                                }
                            }}
                        />
                    </Col>
                    <Col>
                        <Select style={{ minWidth: 180 }} mode='multiple' placeholder='请选择创意形式' maxTagCount={1} onChange={(e) => { getList({ pageNum: 1, pageSize: 20, promotedObjectType, siteSet, adcreativeTemplateIds: e }) }}>
                            {adcreativeTemplate?.map(item => <Select.Option value={item.adcreativeTemplateId} key={item.adcreativeTemplateId}>{item.adcreativeTemplateAppellation}</Select.Option>)}
                        </Select>
                    </Col>
                    {/* adcreativeTemplate */}
                </Row>
            </>}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                getList({ pageNum: current, pageSize, promotedObjectType, siteSet })
            }}
        />
    </Modal>
}

export default React.memo(CreativeModal)