ad-manage/src/pages/launchSystemNew/launchManage/localAd/ad/index.tsx

import { FnAjax, useAjax } from '@/Hook/useAjax'
import { Data, ListData, SysAdgroupsDTO } from '@/services/launchAdq'
import { PromotedObjectType } from '@/services/launchAdq/enum'
import { createSysAdgroups, getSysAdgroupsInfo, getSysAdgroupsList } from '@/services/launchAdq/localAd'
import { Col, Row, Input, Select, Button } from 'antd'
import React, { useEffect, useState, useCallback } from 'react'
import TableData from '../../../components/TableData'
import AdModal from './modal'
import tableConfig from './tableConfig'

export interface ModalConfig {
    visible: boolean;
    title?: string;
    type?:'add'|'look'|'edit',
    dataInfo?:null
}

function Ad() {
    // 变量
    const [modalConfig, setModalConfig] = useState<ModalConfig>({
        visible: false,
        type:'add'
    })
    const [oldsearchData, setOldsearchData] = useState<any>(null)
    // api方法
    const sysAdgroupsList: FnAjax<ListData<SysAdgroupsDTO> | any>  = useAjax((params) => getSysAdgroupsList(params),{formatResult:true})
    const getSysAdgroupsInfos:any = useAjax((adgroupsId) => getSysAdgroupsInfo(adgroupsId),{formatResult:true})
    const createSysAdgroup = useAjax((params) => createSysAdgroups(params))
    // 初始获取列表
    useEffect(() => {
        getList({ pageSize: 20, pageNum: 1 })
    }, [])
    // 获取列表
    const getList = useCallback((arg: { pageSize: number, pageNum: number, adgroupName?: string, promotedObjectType?: string }) => {
        Object.keys(arg).forEach(key => {
            !arg[key] && delete arg[key]
        })
        if (JSON.stringify(arg) !== JSON.stringify(oldsearchData)) {
            setOldsearchData(arg)
            sysAdgroupsList.run(arg)
        }
    }, [oldsearchData])

    // 设置变量
    const handleModalConfig = useCallback((arg: ModalConfig) => {
        setModalConfig({ ...modalConfig, ...arg })
    }, [modalConfig])
    // submit
    const submit = useCallback((arg: any) => {
        console.log(arg)
        createSysAdgroup.run(arg).then(res => {
            if (res) {
                sysAdgroupsList.refresh()
                handleModalConfig({ visible: false,dataInfo:null,type:'add' })
            }
        })
    }, [sysAdgroupsList])
    // 获取详情
    const getInfo = useCallback((adgroupsId,type)=>{
        getSysAdgroupsInfos.run(adgroupsId).then((res: any)=>{
            setModalConfig({...modalConfig,visible:true,type,dataInfo:res.data})
        })
    },[modalConfig])
    // 回调
    const callback=useCallback((data,type)=>{
        getInfo(data.id,type)

    },[])
    return <div>
        <TableData
            columns={()=>tableConfig(callback)}
            ajax={sysAdgroupsList}
            dataSource={sysAdgroupsList?.data?.data?.records}
            loading={sysAdgroupsList?.loading}
            // scroll={{ y: 600 }}
            total={sysAdgroupsList?.data?.data?.total}
            page={sysAdgroupsList?.data?.data?.current}
            pageSize={sysAdgroupsList?.data?.data?.size}
            leftChild={<>
                <Row gutter={[10, 10]}>
                    <Col span={24}><Button type='primary' onClick={() => {
                        handleModalConfig({ visible: true })
                    }}>新建广告模板</Button></Col>
                    <Col>
                        <Input
                            placeholder='广告名称'
                            allowClear
                            onBlur={(e) => {
                                let value = e.target.value
                                getList({ pageNum: 1, pageSize: 20, adgroupName: value })
                            }}
                            onKeyDownCapture={(e: any) => {
                                let key = e.key
                                if (key === 'Enter') {
                                    let value = e.target.value
                                    getList({ pageNum: 1, pageSize: 20, adgroupName: value })
                                }
                            }}
                            onChange={(e) => {
                                let value = e.target.value
                                if (!value) {
                                    getList({ pageNum: 1, pageSize: 20, adgroupName: value })
                                }
                            }}
                        />
                    </Col>
                    <Col>
                        <Select placeholder='推广目标选择' style={{ minWidth: 200 }} showSearch filterOption={(input, option) =>
                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                        } allowClear onChange={(value) => {
                            getList({ pageNum: 1, pageSize: 20, promotedObjectType: value })
                        }}>
                            {
                                Object.keys(PromotedObjectType).map(key => {
                                    // let obj = JSON.parse(PromotedObjectType[key])
                                    return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
                                })
                            }
                        </Select>
                    </Col>
                </Row>
            </>}
            onChange={(props: any) => {
                let { sortData, pagination } = props
                let { current, pageSize } = pagination
                getList({pageNum:current,pageSize})
            }}
        // config={guanggao}
        // configName={'广告模板列表'}
        />
        {modalConfig.visible && <AdModal visible={modalConfig.visible} PupFn={handleModalConfig} callback={submit} confirmLoading={createSysAdgroup.loading} type={modalConfig.type} dataInfo={modalConfig.dataInfo}/>}
    </div>
}
export default Ad