ad-manage/src/pages/launchSystemV3/material/tencent/search.tsx

import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Space } from "antd"
import React, { useEffect } from "react"
import { getUserAllApi } from "@/services/operating/account";
import { useAjax } from "@/Hook/useAjax";
import { SearchOutlined } from "@ant-design/icons";
import moment from "moment";
import '../../tencentAdPutIn/index.less'

interface Props {
    onSearch?: (value: Partial<CLOUDNEW.GetMaterialListProps>) => void
}

/**
 * 远程素材库
 * @param param0 
 * @returns 
 */
const Search: React.FC<Props> = ({ onSearch }) => {

    /**********************************/
    const [form] = Form.useForm();

    const getUserAll = useAjax(() => getUserAllApi())
    /**********************************/

    useEffect(() => {
        getUserAll.run()
    }, [])

    const handleOk = (values: any) => {
        console.log(values)
        let params: any = []
        Object.keys(values).forEach(key => {
            let value = values[key]
            if (['accountIds', 'adgroupIds', 'dynamicCreativeIds', 'tencentMaterialId'].includes(key) && value) {
                let value1 = value.replace(/[,，\s]/g, ',')
                params[key] = value1.split(',').filter((a: any) => a)
            } else if ('uploadTime' === key && value?.length === 2) {
                params.uploadTimeMin = moment(value?.[0]).format('YYYY-MM-DD')
                params.uploadTimeMax = moment(value?.[1]).format('YYYY-MM-DD')
            } else if ('sizeQueries' === key) {
                params[key] = [value]
            } else {
                params[key] = value
            }
        })
        onSearch?.(params)
    }

    return <Card
        bodyStyle={{ padding: '5px 10px', overflow: 'auto hidden', display: 'flex', gap: 6, flexWrap: 'wrap' }}
        className="cardResetCss buttonResetCss"
        bordered
    >
        <Form
            layout="inline"
            name="basicSelectSearch"
            colon={false}
            form={form}
            onFinish={handleOk}
            initialValues={{
                sizeQueries: {
                    relation: '='
                }
            }}
        >
            <Row gutter={[0, 6]}>
                <Col><Form.Item name="materialType">
                    <Select
                        placeholder="素材类型"
                        filterOption={(input, option) =>
                            ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                        }
                        allowClear
                        style={{ width: 120 }}
                        options={[
                            { label: '图片', value: 'image' },
                            { label: '视频', value: 'video' }
                        ]}
                    />
                </Form.Item></Col>
                <Col><Form.Item name={['sizeQueries', 'width']}>
                    <InputNumber placeholder="素材宽" />
                </Form.Item></Col>
                <Col><Form.Item name={['sizeQueries', 'height']}>
                    <InputNumber placeholder="素材高" />
                </Form.Item></Col>
                <Col>
                    <Form.Item name={['sizeQueries', 'relation']}>
                        <Select
                            placeholder="运算符"
                            filterOption={(input, option) =>
                                ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                            }
                            style={{ width: 100 }}
                            options={[
                                { label: '小于', value: '<' },
                                { label: '小于等于', value: '<=' },
                                { label: '等于', value: '=' },
                                { label: '大于', value: '>' },
                                { label: '大于等于', value: '>=' },
                            ]}
                        />
                    </Form.Item>
                </Col>
                {/* <Col><Form.Item name={'sysUserIds'}>
                    <Select
                        placeholder="投手"
                        filterOption={(input, option) =>
                            ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                        }
                        style={{ width: 190 }}
                        maxTagCount={1}
                        mode="multiple"
                        allowClear
                        options={getUserAll?.data?.map((item: { nickname: any; userId: any }) => ({ label: item.nickname, value: item.userId }))}
                    />
                </Form.Item></Col> */}
                <Col><Form.Item>
                    <Space>
                        <Button onClick={() => form.resetFields()}>重置</Button>
                        <Button type="primary" htmlType="submit" icon={<SearchOutlined />} className="modalResetCss">搜索</Button>
                    </Space>
                </Form.Item></Col>
            </Row>
        </Form>
    </Card>
}

export default React.memo(Search)