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

src/components/FileBoxAD/index.tsx

@@ -54,7 +54,7 @@ function FlieBox(props: Props) {
 
     const { isAll = true, height, noFile = false, setPage, isBack = false } = props
     const { state, set, dels, list, get, onFile, allFile, delPupOn, delPupOff, changeClickFile, editFile, fileClick, treeClick, pathClick, getList, edit_media_folder, get_folder_tree } = useModel(isAll ? 'useLaunchAdq.useBdMedia' : 'useLaunchAdq.useBdMediaPup')
-    const { fileVisible, belongUser, selectFile, selectItem, delPupId, xy, rightClickPup, path, publicPath, parentId, imgVisrible, imgsVisrible, mediaType, sortVisible } = state
+    const { fileVisible, belongUser, selectFile, selectItem, delPupId, xy, rightClickPup, path, publicPath, parentId, imgVisrible, imgsVisrible, mediaType, sortVisible, num } = state
     const { copy } = useCopy()
     const fileImg = require('../../../public/file.png')
     const [moveId, setMoveId] = useState<any>('')//移动的素材ID
@@ -75,7 +75,7 @@ function FlieBox(props: Props) {
         if (props.isItem && isAll) {
             return <ul style={{ top: xy?.y, left: xy?.x }} className={style.menu} >
                 {
-                    isAll && <li onClick={allFile}>全选/反选</li>
+                    isAll || num === 100 && <li onClick={allFile}>全选/反选</li>
                 }
                 {mediaType === 'PAGE' ? <>
                     {/* <li onClick={() => { setPage && setPage(1, rightClickPup.id) }}>查看</li> */}
@@ -95,7 +95,7 @@ function FlieBox(props: Props) {
         }
         return <ul style={{ top: xy?.y, left: xy?.x }} className={style.menu}>
             {
-                isAll && <li onClick={allFile}>全选/反选</li>
+                isAll || num === 100 && <li onClick={allFile}>全选/反选</li>
             }
             {//防止K图文无限嵌套创建判断
                 (isAll !== false) && <li onClick={() => { set({ fileVisible: true }) }}>新建文件夹</li> //: <li>此处无法新建操作</li>
@@ -187,8 +187,7 @@ function FlieBox(props: Props) {
             },
         }
     }, [folderId, moveId, mediaType])
-
-
+    
     return <div style={{ display: 'flex', flexFlow: 'row' }}>
         {get_folder_tree?.data?.length > 0 && <div style={{ flexShrink: 0 }}>
             {treeEl}

src/models/useLaunchAdq/useBdMedia.ts

@@ -34,7 +34,7 @@ type State = {
     selectItem?: any,//单选素材时存放选中的素材
     knewsdefaultData?: any,//k图文编辑时的默认内容
     sortVisible?: boolean,//排序弹窗
-
+    num?: number
 
     size?: number,  // 需要上传素材的大小
     upLoadLoading?: boolean,  // 上传loading

src/models/useLaunchAdq/useBdMediaPup.ts

@@ -579,20 +579,15 @@ function useBdMediaPup() {
   );
   /**判断是取消还是选中文件的操作在点击打钩时使用 */
   const changeClickFile = useCallback(
-    (e: any, item: { id: any; folder?: boolean }, isAll?: boolean, noFile?: boolean) => {
-      let { id } = item;
+    (e: any, item: { id: any; folder?: boolean, url: string }, isAll?: boolean, noFile?: boolean) => {
+      let { id, url } = item;
       e?.stopPropagation(); //阻止冒泡传递到文件夹被点击事件
-      console.log(111111, num);
-
-      // if (mediaType === 'PAGE') {
-
-      // } else {
-      let state = selectFile?.some((i) => i === id);
+      let state = selectItem?.some((i) => i.url === url);
       if (state) {
         //存在就是删除
         set({
           selectFile: selectFile?.filter((i) => i !== id),
-          selectItem: selectItem?.filter((i: { id: number }) => i.id !== id),
+          selectItem: selectItem?.filter((i: { url: string }) => i.url !== url),
         });
       } else {
         //否则新增
@@ -602,7 +597,6 @@ function useBdMediaPup() {
             set({ selectFile: selectFile?.filter((i) => i !== id), selectItem: [] });
           } else {
             //否则新增
-            console.log(11111);
             set({ selectFile: [id], selectItem: [item] });
           }
         } else {
@@ -664,12 +658,13 @@ function useBdMediaPup() {
   }, [selectFile, actionItem]);
   /**全选反选文件*/
   const allFile = useCallback(() => {
-    let allArr: any[] = [];
+    let allArr: any[] = [], allFile: any[] = [];
     list?.data?.records?.forEach((item: { id: any }) => {
       allArr.push(item.id);
+      allFile.push(item)
     });
-    set({ selectFile: allArr.filter((i) => selectFile?.every((id) => id !== i)) });
-  }, [selectFile, list, mediaType]);
+    set({ selectFile: allArr.filter((i) => selectFile?.every((id) => id !== i)), selectItem: allFile.filter((i) => selectItem?.every((item: any) => item.id !== i.id)) });
+  }, [selectFile, list, mediaType, selectItem]);
   return {
     state,
     init,

src/pages/launchSystemNew/components/selectCloud/index.tsx

@@ -63,22 +63,25 @@ const SelectCloud: React.FC<Props> = (props) => {
         title={<Space>
             <span>选择素材</span>
             {(selectItem && num && selectItem?.length > 0 && num > 1) && <div className={style.selected}>
-                <Image.PreviewGroup>
-                    {
-                        selectItem?.map((item: any, index: number) => (
-                            <div key={index} className={style.antImg}>
-                                <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
-                                <Image
-                                    className={style.imgAnt}
-                                    width={35}
-                                    height={35}
-                                    src={item?.url}
-                                />
-                            </div>
-                        ))
-                    }
-
-                </Image.PreviewGroup>
+                {mediaType === 'IMG' ? <div>
+                    <Image.PreviewGroup>
+                        {selectItem?.filter((item: any, index: number) => index + 1 <= 10)?.map((item: any, index: number) => (<div className={style.antImg} key={index}>
+                            <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
+                            <Image
+                                className={style.imgAnt}
+                                width={32}
+                                height={32}
+                                src={item?.url}
+                            />
+                        </div>))}
+                    </Image.PreviewGroup>
+                    {selectItem.length > 10 && <span>...</span>}
+                </div> : selectItem?.map((item: any, index: number) => (
+                    <div key={index} className={style.antImg}>
+                        <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
+                        <video className={style.imgAnt} src={item?.url} height={30} />
+                    </div>
+                ))}
             </div>}
         </Space>}
         visible={visible}

src/pages/launchSystemNew/launchManage/createAd/creativeCL/modal/material.tsx

@@ -26,6 +26,8 @@ const Material: React.FC<Props> = (props) => {
     const [visible, setVisible] = useState<boolean>(false)
     const [selectVideoVisible, set_selectVideoVisible] = useState(false)
     const [videoImgsVisbile, set_videoImgsVisbile] = useState(false)
+    const [videoUploads, setVideoUploads] = useState<any>()
+    const [imgUploads, setImgUploads] = useState<any>()
     const { init } = useModel('useLaunchAdq.useBdMediaPup')
     const [materialConfig, setMaterialConfig] = useState<{
         adcreativeTemplateId?: number,
@@ -95,6 +97,18 @@ const Material: React.FC<Props> = (props) => {
         }
     }, [value, visible])
 
+    // 处理判断有哪些素材 展示按钮
+    useEffect(() => {
+        console.log('material----->', material);
+        if (material?.length > 0) {
+            setVideoUploads(material?.find((item: { name: string }) => item.name === 'short_video1' || item.name === 'video'))
+            setImgUploads(material?.find((item: { name: string }) => item.name === 'image' || item.name === 'image_list'))
+        } else {
+            setVideoUploads({})
+            setImgUploads({})
+        }
+    }, [material])
+
     // 确定
     const handleOk = () => {
         form.validateFields().then(values => {
@@ -125,7 +139,42 @@ const Material: React.FC<Props> = (props) => {
 
     return <>
         <span onClick={() => { setVisible(true) }}>{value && value?.length > 0 ? '编辑' : '添加'}</span>
-        {visible && <Modal visible={visible} onCancel={() => setVisible(false)} title="创意素材" width={930} onOk={handleOk}>
+        {visible && <Modal
+            visible={visible}
+            onCancel={() => setVisible(false)}
+            title={<>
+                <span>创意素材</span>
+                {videoUploads && Object.keys(videoUploads)?.length > 0 && <Button type="link" onClick={() => {
+                    console.log('videoUploads---->', videoUploads);
+                    init({ mediaType: 'VIDEO', num: 100, cloudSize: adcreativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: videoUploads.restriction.videoRestriction.minWidth, height: videoUploads.restriction.videoRestriction.minHeight }]], maxSize: videoUploads.restriction.videoRestriction.fileSize * 1024 })
+                    setMaterialConfig({
+                        ...materialConfig,
+                        type: videoUploads.name,
+                        max: 1,
+                        index: 99999,
+                        adcreativeTemplateId
+                    })
+                    setTimeout(() => {
+                        set_selectVideoVisible(true)
+                    }, 100)
+                }}>批量添加视频素材</Button>}
+                {imgUploads && Object.keys(imgUploads)?.length > 0 && <Button type="link" onClick={() => {
+                    init({ mediaType: 'IMG', num: 100, cloudSize: [[{ relation: '=', width: imgUploads.restriction.imageRestriction.width, height: imgUploads.restriction.imageRestriction.height }]], maxSize: imgUploads.restriction.imageRestriction.fileSize * 1024 })
+                    setMaterialConfig({
+                        ...materialConfig,
+                        type: imgUploads.name,
+                        max: imgUploads.name === 'image_list' ? imgUploads.arrayProperty.maxNumber : 1,
+                        index: 99999,
+                        adcreativeTemplateId
+                    })
+                    setTimeout(() => {
+                        set_selectVideoVisible(true)
+                    }, 100)
+                }}>批量添加图片素材</Button>}
+            </>}
+            width={930}
+            onOk={handleOk}
+        >
             <Form name="dynamic_form_item" form={form} labelAlign='left' >
                 <Form.List name="materials">
                     {(fields, { add, remove }) => (<>
@@ -181,7 +230,6 @@ const Material: React.FC<Props> = (props) => {
                                                 })
                                                 setTimeout(() => {
                                                     set_selectVideoVisible(true)
-
                                                 }, 100)
                                             }}>
                                                 <p>
@@ -208,8 +256,7 @@ const Material: React.FC<Props> = (props) => {
                                                     type: item.name,
                                                     max: item.arrayProperty.maxNumber,
                                                     index: num,
-                                                    adcreativeTemplateId,
-                                                    sliderImgContent: (materials?.length > 0 && materials[num] && Object.keys(materials[num])?.includes(item.name)) ? materials[num][item.name]?.map((item: string) => ({ url: item })) : undefined
+                                                    adcreativeTemplateId
                                                 })
                                                 setTimeout(() => {
                                                     set_selectVideoVisible(true)
@@ -246,33 +293,107 @@ const Material: React.FC<Props> = (props) => {
         {selectVideoVisible && <SelectCloud
             visible={selectVideoVisible}
             onClose={() => set_selectVideoVisible(false)}
-            sliderImgContent={materialConfig.type === 'image_list'
-                ? (materials[materialConfig.index] && Object.keys(materials[materialConfig.index])?.includes(materialConfig.type)) ? materials[materialConfig.index][materialConfig.type]?.map((item: string) => ({ url: item })) : undefined
+            sliderImgContent={materialConfig.index === 99999 ? undefined : materialConfig.type === 'image_list'
+                ? (materials[materialConfig.index] && Object.keys(materials[materialConfig.index])?.includes('image_list')) ? materials[materialConfig.index]['image_list']?.map((item: string) => ({ url: item })) : undefined
                 : (materials[materialConfig.index] && Object.keys(materials[materialConfig.index])?.includes(materialConfig.type)) ? [{ url: materials[materialConfig.index][materialConfig.type] }] : undefined
             }
             onChange={(content: any) => {
                 if (content.length > 0) {
-                    materials = materials?.map((item: any, index: number) => {
-                        if (materialConfig.index === index) {
-                            if (materialConfig.type === 'image_list') {
-                                if (item) {
-                                    item[materialConfig.type] = content?.map((item: any) => item?.url)
-                                    return { ...item }
+                    if (materialConfig.index === 99999) {
+                        if (materialConfig.type === 'image_list') {
+                            let urls = content?.map((item: any) => item?.url)
+                            let max = materialConfig.max
+                            let materialsNew = materials.map((item: any) => {
+                                let newItem = item || {}
+                                // 判断是否有字段，是否设置了值
+                                if (Object.keys(newItem).includes(materialConfig.type) && newItem[materialConfig.type]) {
+                                    if (max > newItem[materialConfig.type].length && urls.length > 0) {
+                                        let difference = max - newItem[materialConfig.type].length
+                                        let material: any[] = []
+                                        if (urls.length >= difference) {
+                                            material = urls.splice(0, difference)
+                                        } else {
+                                            material = urls.splice(0, urls.length)
+                                        }
+                                        newItem[materialConfig.type] = [...newItem[materialConfig.type], ...material]
+                                        return newItem
+                                    } else {
+                                        return newItem
+                                    }
                                 } else {
-                                    return { [materialConfig.type]: content?.map((item: any) => item?.url) }
+                                    if (urls.length >= max) {
+                                        let material = urls.splice(0, max)
+                                        return { ...newItem, [materialConfig.type]: material }
+                                    } else if (urls.length > 0) {
+                                        let material = urls.splice(0, urls.length)
+                                        return { ...newItem, [materialConfig.type]: material }
+                                    } else {
+                                        return newItem
+                                    }
                                 }
-                            } else {
-                                if (item) {
-                                    item[materialConfig.type] = content[0]?.url
-                                    return { ...item }
-                                } else {
-                                    return { [materialConfig.type]: content[0]?.url }
+                            })
+                            if (urls.length > 0) {
+                                let data = Array(Math.ceil(urls.length / max)).fill(undefined).map(item => {
+                                    if (urls.length >= max) {
+                                        let material = urls.splice(0, max)
+                                        return { [materialConfig.type]: material }
+                                    } else {
+                                        let material = urls.splice(0, urls.length)
+                                        return { [materialConfig.type]: material }
+                                    }
+                                })
+                                materialsNew = [...materialsNew, ...data]
+                            }
+                            form.setFieldsValue({ materials: materialsNew })
+                        } else {
+                            let newMaterials = content?.map((item: any) => ({ [materialConfig.type]: item?.url }))
+                            if (newMaterials.length > 0) {
+                                if (materials?.every((item: any) => !item)) { // 没设置过
+                                    form.setFieldsValue({ materials: newMaterials })
+                                } else { // 设置过
+                                    let materialsNew = materials.map((item: any) => {
+                                        let newItem = item || {}
+                                        if (Object.keys(newItem).includes(materialConfig.type) && newItem[materialConfig.type]) {
+                                            return item
+                                        } else {
+                                            if (newMaterials.length > 0) {
+                                                let material = newMaterials.splice(0, 1)
+                                                return { ...newItem, ...material[0] }
+                                            } else {
+                                                return item
+                                            }
+                                        }
+                                    })
+                                    if (newMaterials.length > 0) {
+                                        materialsNew = [...materialsNew, ...newMaterials]
+                                    }
+                                    form.setFieldsValue({ materials: materialsNew })
                                 }
                             }
                         }
-                        return item
-                    })
-                    form.setFieldsValue({ materials })
+                    } else {
+                        materials = materials?.map((item: any, index: number) => {
+                            if (materialConfig.index === index) {
+                                if (materialConfig.type === 'image_list') {
+                                    if (item) {
+                                        item[materialConfig.type] = content?.map((item: any) => item?.url)
+                                        return { ...item }
+                                    } else {
+                                        return { [materialConfig.type]: content?.map((item: any) => item?.url) }
+                                    }
+                                } else {
+                                    if (item) {
+                                        item[materialConfig.type] = content[0]?.url
+                                        return { ...item }
+                                    } else {
+                                        return { [materialConfig.type]: content[0]?.url }
+                                    }
+                                }
+                            }
+                            return item
+                        })
+                        form.setFieldsValue({ materials })
+                    }
                 }
                 set_selectVideoVisible(false)
             }}