|
@@ -1,21 +1,56 @@
|
|
|
import { Button, Card, Col, DatePicker, Form, Input, Row, Select, Space } from "antd"
|
|
|
-import React from "react"
|
|
|
-import { SearchOutlined } from "@ant-design/icons";
|
|
|
+import React, { useState } from "react"
|
|
|
+import { PlusCircleOutlined, SearchOutlined } from "@ant-design/icons";
|
|
|
import moment from "moment";
|
|
|
import { COMMON_POTENTIAL_STATUS_ENUM, COMPONENT_GENERATION_TYPE_ENUM, DEFAULT_COMPONENT_SUB_IMAGE_TYPE, DEFAULT_COMPONENT_SUB_VIDEO_TYPE } from "../../tencenTasset/manageComponent/const";
|
|
|
import { DefaultOptionType } from "antd/lib/select";
|
|
|
+import SelectCloudComponent from "./selectCloudComponent";
|
|
|
|
|
|
interface Props {
|
|
|
type: 'image' | 'video'
|
|
|
+ defaultParams: CLOUDNEW.DefaultParams
|
|
|
+ accountId: number,
|
|
|
componentSubType?: string[]
|
|
|
onSearch?: (value: Partial<CLOUDNEW.GetMaterialListProps>) => void
|
|
|
+ putInType?: 'NOVEL' | 'GAME'
|
|
|
}
|
|
|
|
|
|
// 选择素材搜索
|
|
|
-const SelectComponentsUnitSearch: React.FC<Props> = ({ type, onSearch, componentSubType }) => {
|
|
|
+const SelectComponentsUnitSearch: React.FC<Props> = ({ type, defaultParams, accountId, onSearch, componentSubType, putInType }) => {
|
|
|
|
|
|
/**********************************/
|
|
|
const [form] = Form.useForm();
|
|
|
+ // const idList = Form.useWatch('idList', form)
|
|
|
+ const [selectCloudData, setSelectCloudData] = useState<{
|
|
|
+ defaultParams: {
|
|
|
+ sizeQueries?: {
|
|
|
+ width: number,
|
|
|
+ height: number,
|
|
|
+ relation: string
|
|
|
+ }[],
|
|
|
+ materialType: 'image' | 'video'
|
|
|
+ fileSize: number
|
|
|
+ }
|
|
|
+ num: number
|
|
|
+ }>()
|
|
|
+ const [materialConfig, setMaterialConfig] = useState<{
|
|
|
+ adcreativeTemplateId?: number,
|
|
|
+ type: string,
|
|
|
+ cloudSize: { relation: string, width: number, height: number }[],
|
|
|
+ list: any[],
|
|
|
+ index: number,
|
|
|
+ max: number,
|
|
|
+ sliderImgContent: any,
|
|
|
+ isGroup?: boolean
|
|
|
+ }>({
|
|
|
+ type: '',//类型
|
|
|
+ cloudSize: [],//素材搜索条件
|
|
|
+ list: [],//素材
|
|
|
+ index: 0, // 素材组下标
|
|
|
+ max: 1,//素材数量
|
|
|
+ sliderImgContent: undefined
|
|
|
+ })//图片素材配置
|
|
|
+ const [selectVideoVisible, setSelectVideoVisible] = useState(false)
|
|
|
/**********************************/
|
|
|
|
|
|
const handleOk = (values: any) => {
|
|
@@ -54,7 +89,30 @@ const SelectComponentsUnitSearch: React.FC<Props> = ({ type, onSearch, component
|
|
|
>
|
|
|
<Row gutter={[0, 6]}>
|
|
|
<Col><Form.Item name={'idList'}>
|
|
|
- <Input.TextArea rows={1} style={{ width: 190 }} allowClear placeholder="素材ID(多个空格or换行隔开)" />
|
|
|
+ <Input
|
|
|
+ style={{ width: 220 }}
|
|
|
+ allowClear
|
|
|
+ placeholder="素材ID(多个空格or换行隔开)"
|
|
|
+ addonAfter={<PlusCircleOutlined
|
|
|
+ style={{ cursor: 'pointer' }}
|
|
|
+ onClick={() => {
|
|
|
+ setSelectCloudData({
|
|
|
+ num: 100,
|
|
|
+ defaultParams: defaultParams as any
|
|
|
+ })
|
|
|
+ setMaterialConfig({
|
|
|
+ ...materialConfig,
|
|
|
+ type: type,
|
|
|
+ max: 100,
|
|
|
+ index: 1,
|
|
|
+ isGroup: false
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ setSelectVideoVisible(true)
|
|
|
+ }, 100)
|
|
|
+ }}
|
|
|
+ />}
|
|
|
+ />
|
|
|
</Form.Item></Col>
|
|
|
<Col><Form.Item name={'componentIdSting'}>
|
|
|
<Input.TextArea rows={1} style={{ width: 190 }} allowClear placeholder="组件ID(多个空格or换行隔开)" />
|
|
@@ -73,21 +131,6 @@ const SelectComponentsUnitSearch: React.FC<Props> = ({ type, onSearch, component
|
|
|
options={(type === 'image' ? DEFAULT_COMPONENT_SUB_IMAGE_TYPE : DEFAULT_COMPONENT_SUB_VIDEO_TYPE).filter(item => componentSubType?.includes(item.value)) as DefaultOptionType[]}
|
|
|
/>
|
|
|
</Form.Item></Col>
|
|
|
- {/* <Col><Form.Item name={'isDeleted'}>
|
|
|
- <Select
|
|
|
- showSearch
|
|
|
- placeholder="已删除?"
|
|
|
- filterOption={(input, option) =>
|
|
|
- ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
|
|
|
- }
|
|
|
- style={{ width: 120 }}
|
|
|
- allowClear
|
|
|
- options={[
|
|
|
- { label: '已删除', value: true },
|
|
|
- { label: '未删除', value: false }
|
|
|
- ]}
|
|
|
- />
|
|
|
- </Form.Item></Col> */}
|
|
|
<Col><Form.Item name={'potentialStatus'}>
|
|
|
<Select
|
|
|
showSearch
|
|
@@ -125,6 +168,28 @@ const SelectComponentsUnitSearch: React.FC<Props> = ({ type, onSearch, component
|
|
|
</Form.Item></Col>
|
|
|
</Row>
|
|
|
</Form>
|
|
|
+
|
|
|
+ {/* 选择素材 */}
|
|
|
+ {(selectVideoVisible && selectCloudData) && <SelectCloudComponent
|
|
|
+ {...selectCloudData}
|
|
|
+ accountCreateLogs={[{ accountId: accountId }]}
|
|
|
+ visible={selectVideoVisible}
|
|
|
+ isGroup={materialConfig?.isGroup}
|
|
|
+ onClose={() => {
|
|
|
+ setSelectVideoVisible(false)
|
|
|
+ setSelectCloudData(undefined)
|
|
|
+ }}
|
|
|
+ putInType={putInType}
|
|
|
+ title="选择素材查找"
|
|
|
+ onChange={(content: any) => {
|
|
|
+ if (content?.length > 0) {
|
|
|
+ const idList = content?.map((item: any) => item.id)?.toString()
|
|
|
+ form.setFieldsValue({ idList })
|
|
|
+ }
|
|
|
+ setSelectVideoVisible(false)
|
|
|
+ setSelectCloudData(undefined)
|
|
|
+ }}
|
|
|
+ />}
|
|
|
</Card>
|
|
|
}
|
|
|
|