Merge branch 'develop' of http://git.zanxiangnet.com/wjx/ad-manage

src/pages/launchSystemV3/material/cloudNew/selectCloudNew.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Checkbox, Divider, Empty, Form, message, Modal, Pagination, Popover, Radio, Select, Space, Spin, Typography } from "antd"
+import { Button, Card, Checkbox, Divider, Empty, Form, message, Modal, Pagination, Popover, Radio, Select, Space, Spin, Tooltip, Typography } from "antd"
 import React, { useEffect, useRef, useState } from "react"
 import { useAjax } from "@/Hook/useAjax"
 import { getMaterialDataListApi } from "@/services/adqV3/cloudNew"
@@ -45,6 +45,7 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
     const [showField, setShowField] = useLocalStorageState<string[]>('show-field', ['material.create_time', 'material_data_day.cost', 'material_data_day.ctr', 'material_data_day.conversions_rate', 'material_data_day.dynamic_creative_count']);
     const [sortData, setSortData] = useLocalStorageState<{ sortField: string | undefined, sortType: boolean }>('sort-data', { sortField: undefined, sortType: false });
     const [active, setActive] = useState<number>()
+    const [isShowAll, setIsShowAll] = useState<boolean>(false)
 
     const getMaterialDataList = useAjax((params) => getMaterialDataListApi(params))
     /************************************/
@@ -60,8 +61,18 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
         if (sortData?.sortField) {
             params = { ...params, ...sortData }
         }
+        if (params?.sizeList?.length) {
+            params.sizeQueries = params.sizeList.map(item => {
+                const [width, height, relation] = item.split('*')
+                return { width: Number(width), height: Number(height), relation: relation || '=' }
+            })
+        }
+        delete params?.sizeList
+        if (isShowAll) {
+            delete params?.sizeQueries
+        }
         getMaterialDataList.run(params)
-    }, [queryParams, defaultParams, searchParams, sortData, showField])
+    }, [queryParams, defaultParams, searchParams, sortData, showField, isShowAll])
 
     // 根据内容宽度计算列数
     useEffect(() => {
@@ -171,7 +182,11 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
         {SCKType === '1' ? <div className={style.select_cloudNew_layout}>
             {/* 搜索 */}
             <SelectSearch
-                onSearch={(value) => { setSearchParams(value) }}
+                sizeQueries={defaultParams?.sizeQueries}
+                onSearch={(value) => {
+                    ref.current?.scrollTo(0, 0)
+                    setSearchParams(value)
+                }}
             />
 
             <Card
@@ -208,7 +223,7 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
                                         }
                                         setCheckedFolderList(newCheckedFolderList)
                                     }}
-                                    disabled={checkedFolderList?.length >= num || !!active || active === 0}
+                                    disabled={checkedFolderList?.length >= num || !!active || active === 0 || isShowAll}
                                     indeterminate={indeterminateFolder}
                                     checked={checkFolderAll}
                                 >全选</Checkbox>
@@ -217,6 +232,11 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
                                 {sortData?.sortField && <Text>「排序-{showFieldList.find(item => item.value === sortData.sortField)?.label}-{sortData.sortType ? '正序' : '倒序'}」</Text>}
                             </div>
                             <div className={style.left_bts}>
+                                <Checkbox onChange={(e) => setIsShowAll(e.target.checked)} checked={isShowAll}>
+                                    <Tooltip title="勾选只展示，不支持选择投放">
+                                        <span style={{ fontSize: 12 }}>显示所有{defaultParams?.materialType === 'video' ? '视频' : '图片'}素材</span>
+                                    </Tooltip>
+                                </Checkbox>
                                 <Popover
                                     content={<div style={{ width: 320 }}>
                                         <Form
@@ -288,7 +308,7 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
                                         <div className={style.content_scroll_div}>
                                             {getMaterialDataList?.data?.records.map((item: any) => {
                                                 const isSelect = checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id).includes(item.id)
-                                                const disabled = (active || active === 0) ? false : (checkedFolderList.length >= num && !isSelect)
+                                                const disabled = ((active || active === 0) ? false : (checkedFolderList.length >= num && !isSelect)) || isShowAll
                                                 return <div key={item.id} className={style.content_row} style={{ width: rowNum ? (1 / rowNum * 100) + '%' : 200 }}>
                                                     <Card
                                                         hoverable
@@ -358,6 +378,7 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
                                 pageSize={getMaterialDataList?.data?.size || 20}
                                 current={getMaterialDataList?.data?.current || 1}
                                 onChange={(page: number, pageSize: number) => {
+                                    ref.current?.scrollTo(0, 0)
                                     setQueryParams({ ...queryParams, pageNum: page, pageSize })
                                 }}
                                 pageSizeOptions={[10, 15, 20, 50, 100]}

src/pages/launchSystemV3/material/cloudNew/selectGroupCloudNew.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useRef } from "react"
 import style from './index.less'
-import { Button, Card, Checkbox, Divider, Empty, Form, message, Pagination, Popover, Radio, Result, Select, Space, Spin, Typography, Image } from "antd"
+import { Button, Card, Checkbox, Divider, Empty, Form, message, Pagination, Popover, Radio, Result, Select, Space, Spin, Typography, Image, Tooltip } from "antd"
 import { useAjax } from "@/Hook/useAjax"
 import { getPageRemoteImageDataListApi } from "@/services/adqV3/cloudNew"
 import { formatBytes, formatSecondsToTime, groupBy } from "@/utils/utils"
@@ -26,6 +26,7 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
 
     /*****************************************/
     const [rowNum, setRowNum] = useState<number>(0)
+    const refScllor = useRef<HTMLDivElement>(null)
 
     const [checkFolderAll, setCheckFolderAll] = useState<boolean>(false);
     const [indeterminateFolder, setIndeterminateFolder] = useState<boolean>(false);
@@ -36,6 +37,7 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
     const [previewData, setPreviewData] = useState<{ visible: boolean, url?: string }>({ visible: false })
     const [sortData, setSortData] = useLocalStorageState<{ sortField: string | undefined, sortType: boolean }>('sort-data-group', { sortField: undefined, sortType: false });
     const [showField, setShowField] = useLocalStorageState<string[]>('show-field-group', ['material.create_time', 'material_data_day.cost', 'material_data_day.ctr', 'material_data_day.conversions_rate', 'material_data_day.dynamic_creative_count']);
+    const [isShowAll, setIsShowAll] = useState<boolean>(false)
 
     const getPageRemoteImageDataList = useAjax((params) => getPageRemoteImageDataListApi(params))
     const getUserAccountList = useAjax((params) => getUserAccountListApi(params))
@@ -108,9 +110,19 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
             if (sortData?.sortField) {
                 params = { ...params, ...sortData }
             }
+            if (params?.sizeList?.length) {
+                params.sizeQueries = params.sizeList.map(item => {
+                    const [width, height, relation] = item.split('*')
+                    return { width: Number(width), height: Number(height), relation: relation || '=' }
+                })
+            }
+            delete params?.sizeList
+            if (isShowAll) {
+                delete params?.sizeQueries
+            }
             getPageRemoteImageDataList.run(params)
         }
-    }, [queryParams, defaultParams, searchParams, sortData, showField, ownerAccountId])
+    }, [queryParams, defaultParams, searchParams, sortData, showField, ownerAccountId, isShowAll])
 
     // 选择
     const onCheckboxChange = (checked: boolean, item: any) => {
@@ -139,7 +151,11 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                 {/* 搜索 */}
                 <SelectGroupSearch
                     type={defaultParams.materialType}
-                    onSearch={(value) => { setSearchParams(value) }}
+                    sizeQueries={defaultParams.sizeQueries}
+                    onSearch={(value) => {
+                        refScllor.current?.scrollTo(0, 0)
+                        setSearchParams(value)
+                    }}
                 />
                 <Card
                     style={{ height: '100%', flex: '1 0', overflow: 'hidden' }}
@@ -176,7 +192,7 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                                             }
                                             setCheckedFolderList(newCheckedFolderList)
                                         }}
-                                        disabled={checkedFolderList?.length >= num || !!active || active === 0}
+                                        disabled={checkedFolderList?.length >= num || !!active || active === 0 || isShowAll}
                                         indeterminate={indeterminateFolder}
                                         checked={checkFolderAll}
                                     >全选</Checkbox>
@@ -189,6 +205,11 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                                     />
                                 </div>
                                 <div className={style.left_bts}>
+                                    <Checkbox onChange={(e) => setIsShowAll(e.target.checked)} checked={isShowAll}>
+                                        <Tooltip title="勾选只展示，不支持选择投放">
+                                            <span style={{ fontSize: 12 }}>显示所有{defaultParams?.materialType === 'video' ? '视频' : '图片'}素材</span>
+                                        </Tooltip>
+                                    </Checkbox>
                                     <Popover
                                         content={<div style={{ width: 320 }}>
                                             <Form
@@ -254,13 +275,13 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                             </div>
                             <div className={`${style.content} content_global`}>
                                 <Spin spinning={getPageRemoteImageDataList.loading}>
-                                    <div className={`${style.content_scroll} scroll`}>
+                                    <div className={`${style.content_scroll} scroll`} ref={refScllor}>
                                         {getPageRemoteImageDataList?.data?.records?.length > 0 ? <Checkbox.Group value={checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id)} style={{ width: '100%' }}>
                                             <div className={style.content_scroll_div}>
                                                 {getPageRemoteImageDataList?.data?.records.map((item: any) => {
                                                     let id = defaultParams.materialType === 'image' ? item.image_id : item.video_id
                                                     const isSelect = checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id).includes(id)
-                                                    const disabled = (active || active === 0) ? false : (checkedFolderList.length >= num && !isSelect)
+                                                    const disabled = ((active || active === 0) ? false : (checkedFolderList.length >= num && !isSelect)) || isShowAll
                                                     return <div key={id} className={style.content_row} style={{ width: rowNum ? (1 / rowNum * 100) + '%' : 220 }}>
                                                         <Card
                                                             hoverable
@@ -340,6 +361,7 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                                     pageSize={getPageRemoteImageDataList?.data?.size || 20}
                                     current={getPageRemoteImageDataList?.data?.current || 1}
                                     onChange={(page: number, pageSize: number) => {
+                                        refScllor.current?.scrollTo(0, 0)
                                         setQueryParams({ ...queryParams, pageNum: page, pageSize })
                                     }}
                                     pageSizeOptions={[10, 15, 20, 50, 100]}

src/pages/launchSystemV3/material/cloudNew/selectGroupSearch.tsx

@@ -8,11 +8,12 @@ import { SOURCE_TYPE_IMAGE_ENUM, SOURCE_TYPE_VIDEO_ENUM } from "../../tencentAdP
 
 interface Props {
     type: 'image' | 'video'
+    sizeQueries?: CLOUDNEW.SizeQueriesProps[]
     onSearch?: (value: Partial<CLOUDNEW.GetMaterialListProps>) => void
 }
 
 // 选择素材搜索
-const SelectGroupSearch: React.FC<Props> = ({ type, onSearch }) => {
+const SelectGroupSearch: React.FC<Props> = ({ type, sizeQueries = [], onSearch }) => {
 
     /**********************************/
     const [form] = Form.useForm();
@@ -73,7 +74,7 @@ const SelectGroupSearch: React.FC<Props> = ({ type, onSearch }) => {
                         filterOption={(input, option) =>
                             ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                         }
-                        style={{ width: 190 }}
+                        style={{ width: 120 }}
                         maxTagCount={1}
                         mode="multiple"
                         allowClear
@@ -81,7 +82,7 @@ const SelectGroupSearch: React.FC<Props> = ({ type, onSearch }) => {
                     />
                 </Form.Item></Col>
                 <Col><Form.Item name={'minCost'}>
-                    <InputNumber style={{ width: 80 }} placeholder="最小消耗" />
+                    <InputNumber style={{ width: 120 }} placeholder="最小消耗" />
                 </Form.Item></Col>
                 {/* <Col><Form.Item name={'accountIds'}>
                     <Input.TextArea rows={1} style={{ width: 190 }} allowClear placeholder="广告账号（多个逗号、换行等隔开）" />
@@ -101,7 +102,7 @@ const SelectGroupSearch: React.FC<Props> = ({ type, onSearch }) => {
                         filterOption={(input, option) =>
                             ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                         }
-                        style={{ width: 100 }}
+                        style={{ width: 120 }}
                         allowClear
                         options={[{ label: '未使用', value: 0 }, { label: '无消耗', value: 1 }, { label: '有消耗', value: 2 }]}
                     />
@@ -112,7 +113,7 @@ const SelectGroupSearch: React.FC<Props> = ({ type, onSearch }) => {
                         filterOption={(input, option) =>
                             ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                         }
-                        style={{ width: 100 }}
+                        style={{ width: 120 }}
                         allowClear
                         options={[{ label: '横板', value: 1 }, { label: '竖版', value: 2 }, { label: '方图', value: 3 }]}
                     />
@@ -123,12 +124,25 @@ const SelectGroupSearch: React.FC<Props> = ({ type, onSearch }) => {
                         filterOption={(input, option) =>
                             ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                         }
-                        style={{ width: 100 }}
+                        style={{ width: 120 }}
                         allowClear
                         dropdownMatchSelectWidth={false}
                         options={type === 'image' ? Object.keys(SOURCE_TYPE_IMAGE_ENUM).map(key => ({ label: SOURCE_TYPE_IMAGE_ENUM[key as keyof typeof SOURCE_TYPE_IMAGE_ENUM], value: key })) : Object.keys(SOURCE_TYPE_VIDEO_ENUM).map(key => ({ label: SOURCE_TYPE_VIDEO_ENUM[key as keyof typeof SOURCE_TYPE_VIDEO_ENUM], value: key })) as any}
                     />
                 </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>

src/pages/launchSystemV3/material/cloudNew/selectGroupUnitNew.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useRef } from "react"
 import style from './index.less'
-import { Button, Card, Checkbox, Divider, Empty, Form, message, Pagination, Popover, Radio, Result, Select, Space, Spin, Typography, Image } from "antd"
+import { Button, Card, Checkbox, Divider, Empty, Form, message, Pagination, Popover, Radio, Result, Select, Space, Spin, Typography, Image, Tooltip } from "antd"
 import { useAjax } from "@/Hook/useAjax"
 import { getPageRemoteImageDataListApi } from "@/services/adqV3/cloudNew"
-import { formatBytes, formatSecondsToTime, groupBy } from "@/utils/utils"
+import { formatBytes, formatSecondsToTime } from "@/utils/utils"
 import SelectGroupSearch from "./selectGroupSearch"
 import './global.less'
 import '../../tencentAdPutIn/index.less'
@@ -13,7 +13,7 @@ import PlayVideo from "./playVideo"
 import Lazyimg from "react-lazyimg-component"
 import { useLocalStorageState } from "ahooks"
 import SyncCloudSc from "./syncCloudSc"
-import { checkAccountUnitApi, getUserAccountListApi } from "@/services/launchAdq/adAuthorize"
+import { checkAccountUnitApi } from "@/services/launchAdq/adAuthorize"
 
 const { Text, Paragraph } = Typography;
 
@@ -26,6 +26,7 @@ const SelectGroupUnitNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
 
     /*****************************************/
     const [rowNum, setRowNum] = useState<number>(0)
+    const refScllor = useRef<HTMLDivElement>(null)
 
     const [checkFolderAll, setCheckFolderAll] = useState<boolean>(false);
     const [indeterminateFolder, setIndeterminateFolder] = useState<boolean>(false);
@@ -36,6 +37,7 @@ const SelectGroupUnitNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
     const [previewData, setPreviewData] = useState<{ visible: boolean, url?: string }>({ visible: false })
     const [sortData, setSortData] = useLocalStorageState<{ sortField: string | undefined, sortType: boolean }>('sort-data-unit', { sortField: undefined, sortType: false });
     const [showField, setShowField] = useLocalStorageState<string[]>('show-field-unit', ['material.create_time', 'material_data_day.cost', 'material_data_day.ctr', 'material_data_day.conversions_rate', 'material_data_day.dynamic_creative_count']);
+    const [isShowAll, setIsShowAll] = useState<boolean>(false)
 
     const getPageRemoteImageDataList = useAjax((params) => getPageRemoteImageDataListApi(params))
     const checkAccountUnit = useAjax((params) => checkAccountUnitApi(params))
@@ -81,9 +83,19 @@ const SelectGroupUnitNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
             if (sortData?.sortField) {
                 params = { ...params, ...sortData }
             }
+            if (params?.sizeList?.length) {
+                params.sizeQueries = params.sizeList.map(item => {
+                    const [width, height, relation] = item.split('*')
+                    return { width: Number(width), height: Number(height), relation: relation || '=' }
+                })
+            }
+            delete params?.sizeList
+            if (isShowAll) {
+                delete params?.sizeQueries
+            }
             getPageRemoteImageDataList.run(params)
         }
-    }, [queryParams, defaultParams, searchParams, sortData, showField, unitAccountId])
+    }, [queryParams, defaultParams, searchParams, sortData, showField, unitAccountId, isShowAll])
 
     // 选择
     const onCheckboxChange = (checked: boolean, item: any) => {
@@ -112,7 +124,11 @@ const SelectGroupUnitNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                 {/* 搜索 */}
                 <SelectGroupSearch
                     type={defaultParams.materialType}
-                    onSearch={(value) => { setSearchParams(value) }}
+                    sizeQueries={defaultParams.sizeQueries}
+                    onSearch={(value) => {
+                        refScllor.current?.scrollTo(0, 0)
+                        setSearchParams(value)
+                    }}
                 />
                 <Card
                     style={{ height: '100%', flex: '1 0', overflow: 'hidden' }}
@@ -149,7 +165,7 @@ const SelectGroupUnitNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                                             }
                                             setCheckedFolderList(newCheckedFolderList)
                                         }}
-                                        disabled={checkedFolderList?.length >= num || !!active || active === 0}
+                                        disabled={checkedFolderList?.length >= num || !!active || active === 0 || isShowAll}
                                         indeterminate={indeterminateFolder}
                                         checked={checkFolderAll}
                                     >全选</Checkbox>
@@ -162,6 +178,11 @@ const SelectGroupUnitNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                                     />
                                 </div>
                                 <div className={style.left_bts}>
+                                    <Checkbox onChange={(e) => setIsShowAll(e.target.checked)} checked={isShowAll}>
+                                        <Tooltip title="勾选只展示，不支持选择投放">
+                                            <span style={{ fontSize: 12 }}>显示所有{defaultParams?.materialType === 'video' ? '视频' : '图片'}素材</span>
+                                        </Tooltip>
+                                    </Checkbox>
                                     <Popover
                                         content={<div style={{ width: 320 }}>
                                             <Form
@@ -227,13 +248,13 @@ const SelectGroupUnitNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                             </div>
                             <div className={`${style.content} content_global`}>
                                 <Spin spinning={getPageRemoteImageDataList.loading}>
-                                    <div className={`${style.content_scroll} scroll`}>
+                                    <div className={`${style.content_scroll} scroll`} ref={refScllor}>
                                         {getPageRemoteImageDataList?.data?.records?.length > 0 ? <Checkbox.Group value={checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id)} style={{ width: '100%' }}>
                                             <div className={style.content_scroll_div}>
                                                 {getPageRemoteImageDataList?.data?.records.map((item: any) => {
                                                     let id = defaultParams.materialType === 'image' ? item.image_id : item.video_id
                                                     const isSelect = checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id).includes(id)
-                                                    const disabled = (active || active === 0) ? false : (checkedFolderList.length >= num && !isSelect)
+                                                    const disabled = ((active || active === 0) ? false : (checkedFolderList.length >= num && !isSelect)) || isShowAll
                                                     return <div key={id} className={style.content_row} style={{ width: rowNum ? (1 / rowNum * 100) + '%' : 220 }}>
                                                         <Card
                                                             hoverable
@@ -313,6 +334,7 @@ const SelectGroupUnitNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                                     pageSize={getPageRemoteImageDataList?.data?.size || 20}
                                     current={getPageRemoteImageDataList?.data?.current || 1}
                                     onChange={(page: number, pageSize: number) => {
+                                        refScllor.current?.scrollTo(0, 0)
                                         setQueryParams({ ...queryParams, pageNum: page, pageSize })
                                     }}
                                     pageSizeOptions={[10, 15, 20, 50, 100]}

src/pages/launchSystemV3/material/cloudNew/selectSearch.tsx

@@ -6,11 +6,12 @@ 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> = ({ onSearch }) => {
+const SelectSearch: React.FC<Props> = ({ sizeQueries = [], onSearch }) => {
 
     /**********************************/
     const [form] = Form.useForm();
@@ -68,7 +69,7 @@ const SelectSearch: React.FC<Props> = ({ onSearch }) => {
                         filterOption={(input, option) =>
                             ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                         }
-                        style={{ width: 190 }}
+                        style={{ width: 120 }}
                         maxTagCount={1}
                         mode="multiple"
                         allowClear
@@ -81,7 +82,7 @@ const SelectSearch: React.FC<Props> = ({ onSearch }) => {
                         filterOption={(input, option) =>
                             ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                         }
-                        style={{ width: 190 }}
+                        style={{ width: 120 }}
                         maxTagCount={1}
                         mode="multiple"
                         allowClear
@@ -89,7 +90,18 @@ const SelectSearch: React.FC<Props> = ({ onSearch }) => {
                     />
                 </Form.Item></Col>
                 <Col><Form.Item name={'minCost'}>
-                    <InputNumber style={{ width: 80 }} placeholder="最小消耗" />
+                    <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="广告账号（多个逗号、换行等隔开）" />
@@ -103,15 +115,17 @@ const SelectSearch: React.FC<Props> = ({ onSearch }) => {
                 <Col><Form.Item name={'tencentMaterialId'}>
                     <Input.TextArea rows={1} style={{ width: 190 }} allowClear placeholder="腾讯素材ID（多个逗号、换行等隔开）" />
                 </Form.Item></Col>
-                <Col><Form.Item name={'useStatus'}>
+                <Col><Form.Item name={'sizeList'}>
                     <Select
-                        placeholder="使用情况"
+                        placeholder="素材尺寸"
                         filterOption={(input, option) =>
                             ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                         }
-                        style={{ minWidth: 120 }}
+                        style={{ minWidth: 140 }}
+                        maxTagCount={1}
+                        mode="multiple"
                         allowClear
-                        options={[{ label: '未使用', value: 0 }, { label: '无消耗', value: 1 }, { label: '有消耗', value: 2 }]}
+                        options={sizeQueries?.map(item => ({ label: `${item.width}*${item.height}`, value: `${item.width}*${item.height}*${item.relation}` }))}
                     />
                 </Form.Item></Col>
                 <Col><Form.Item name={'uploadTime'}>

src/pages/launchSystemV3/material/typings.d.ts

@@ -79,6 +79,7 @@ declare namespace CLOUDNEW {
         uploadTimeMax?: string
         useStatus?: number            // 使用情况（0未使用 1无消耗 2有消耗）
         fileSize?: number
+        sizeList?: string[]
     }
     interface GetPageRemoteImageDataListProps {
         materialType: 'image' | 'video'   // 素材类型
@@ -100,6 +101,7 @@ declare namespace CLOUDNEW {
         useStatus?: number            // 使用情况（0未使用 1无消耗 2有消耗）
         fileSize?: number
         fileFormat?: '1' | '2'   // 文件版式 1横版(宽大于高)  2竖版(高大于宽) 3方图(高等于宽)")
+        sizeList?: string[]
     }
     interface AddMaterialProps {
         designerId?: number,    // 设计师
@@ -135,12 +137,13 @@ declare namespace CLOUDNEW {
         sortField?: string,
         sortType?: boolean
     }
+    type SizeQueriesProps = {
+        width?: number,
+        height?: number,
+        relation: string
+    }
     type DefaultParams = {
-        sizeQueries?: {
-            width?: number,
-            height?: number,
-            relation: string
-        }[],
+        sizeQueries?: SizeQueriesProps[],
         materialType: 'image' | 'video'
         fileSize: number
     }

src/pages/launchSystemV3/tencentAdPutIn/index.less

@@ -47,7 +47,9 @@
     .ant-picker,
     .ant-input,
     .ant-select-selector,
-    .ant-input-affix-wrapper {
+    .ant-input-affix-wrapper,
+    .ant-input-number-input,
+    .ant-input-number {
         border-radius: var(--boder) !important;
     }