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

import { FnAjax, useAjax } from "@/Hook/useAjax"
import { ListData } from "@/services/launchAdq"
import { getsysTargetingList } from "@/services/launchAdq/targeting"
import { Col, Input, Modal, Row } from "antd"
import React, { useCallback, useEffect, useState } from "react"
import TableData from "../TableData"
import tableConfig from "./tableConfig"


/** 定向选择 */
interface Props {
    visible?: boolean,
    onClose?: () => void,
    onChange?: (data: any) => void,
    sysTargetingId?: number
}
const TargetingModal: React.FC<Props> = (props) => {

    /*****************************/
    const { visible, onClose, onChange, sysTargetingId } = props
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
    const [oldsearchData, setOldsearchData] = useState<any>(null)

    const list: FnAjax<ListData<any>> = useAjax((params) => getsysTargetingList(params))
    /*****************************/

    // 回填数据
    useEffect(() => {
        if (sysTargetingId) {
            setSelectedRowKeys([sysTargetingId])
        }
    }, [sysTargetingId])

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

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

    return <Modal title={`选择定向`} bodyStyle={{ padding: 0 }} width={1000} visible={visible} onOk={handleOk} onCancel={() => { onClose && onClose() }}>
        <TableData
            hoverable={false}
            columns={tableConfig}
            ajax={list}
            dataSource={list?.data?.records}
            loading={list?.loading}
            scroll={{ y: 600 }}
            total={list?.data?.total}
            page={list?.data?.current}
            pageSize={list?.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, targetingName: value })
                            }}
                            onKeyDownCapture={(e: any) => {
                                let key = e.key
                                if (key === 'Enter') {
                                    let value = e.target.value
                                    getList({ pageNum: 1, pageSize: 20, targetingName: value })
                                }
                            }}
                            onChange={(e) => {
                                let value = e.target.value
                                if (!value) {
                                    getList({ pageNum: 1, pageSize: 20, targetingName: value })
                                }
                            }}
                        />
                    </Col>
                </Row>
            </>}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                getList({ pageNum: current, pageSize })
            }}
        />
    </Modal>
}


export default React.memo(TargetingModal)