ad-manage/src/pages/launchSystemV3/material/cloudNew/selectSearch.tsx

import { Button, Card, Col, DatePicker, 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";

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

// 选择素材搜索
const SelectSearch: React.FC<Props> = ({ sizeQueries = [], 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 !== undefined && value !== null) {
                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 ('dataTime' === key && value?.length === 2) {
                params.dataTimeMin = moment(value?.[0]).format('YYYY-MM-DD')
                params.dataTimeMax = moment(value?.[1]).format('YYYY-MM-DD')
            } 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}
        >
            <Row gutter={[0, 6]}>
                <Col><Form.Item name={'materialName'}>
                    <Input style={{ width: 190 }} allowClear placeholder="请输入名称关键词" />
                </Form.Item></Col>
                <Col><Form.Item name={'description'}>
                    <Input style={{ width: 190 }} allowClear placeholder="请输入备注关键词" />
                </Form.Item></Col>
                <Col><Form.Item name={'designerIds'}>
                    <Select
                        placeholder="设计师"
                        filterOption={(input, option) =>
                            ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                        }
                        style={{ width: 120 }}
                        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 name={'sysUserIds'}>
                    <Select
                        placeholder="投手"
                        filterOption={(input, option) =>
                            ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                        }
                        style={{ width: 120 }}
                        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 name={'minCost'}>
                    <InputNumber style={{ width: 100 }} placeholder="最小消耗" />
                </Form.Item></Col>
                <Col><Form.Item name={'useStatus'}>
                    <Select
                        placeholder="使用情况"
                        filterOption={(input, option) =>
                            ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                        }
                        style={{ minWidth: 120 }}
                        allowClear
                        options={[{ label: '未使用', value: 0 }, { label: '无消耗', value: 1 }, { label: '有消耗', value: 2 }]}
                    />
                </Form.Item></Col>
                <Col><Form.Item name={'accountIds'}>
                    <Input.TextArea rows={1} style={{ width: 190 }} allowClear placeholder="广告账号（多个逗号、换行等隔开）" />
                </Form.Item></Col>
                <Col><Form.Item name={'adgroupIds'}>
                    <Input.TextArea rows={1} style={{ width: 190 }} allowClear placeholder="广告ID（多个逗号、换行等隔开）" />
                </Form.Item></Col>
                <Col><Form.Item name={'dynamicCreativeIds'}>
                    <Input.TextArea rows={1} style={{ width: 190 }} allowClear placeholder="创意ID（多个逗号、换行等隔开）" />
                </Form.Item></Col>
                <Col><Form.Item name={'tencentMaterialId'}>
                    <Input.TextArea rows={1} style={{ width: 190 }} allowClear placeholder="腾讯素材ID（多个逗号、换行等隔开）" />
                </Form.Item></Col>
                <Col><Form.Item name={'sizeList'}>
                    <Select
                        placeholder="素材尺寸"
                        filterOption={(input, option) =>
                            ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                        }
                        style={{ minWidth: 140 }}
                        maxTagCount={1}
                        mode="multiple"
                        allowClear
                        options={sizeQueries?.map(item => ({ label: `${item.width}*${item.height}`, value: `${item.width}*${item.height}*${item.relation}` }))}
                    />
                </Form.Item></Col>
                <Col><Form.Item name={'uploadTime'}>
                    <DatePicker.RangePicker style={{ width: 260 }} placeholder={['上传时间开始', '上传时间结束']} />
                </Form.Item></Col>
                <Col><Form.Item name={'dataTime'}>
                    <DatePicker.RangePicker style={{ width: 260 }} placeholder={['数据时间开始', '数据时间结束']} />
                </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(SelectSearch)