wjx 2 years ago
parent
commit
fbce1c9452

+ 20 - 0
src/pages/launchSystemNew/components/textAideInput/index.less

@@ -0,0 +1,20 @@
+.textAideInputPopover {
+  .ant-popover-inner-content {
+    padding: 0;
+    cursor: pointer;
+  }
+  .crt {
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    margin-left: 8px;
+    padding: 1px 4px;
+    height: 16px;
+    border-radius: 3px;
+    font-size: 12px;
+    color: #fff;
+    border: 1px solid #296bef;
+    background-color: #296bef;
+    line-height: normal;
+  }
+}

+ 79 - 0
src/pages/launchSystemNew/components/textAideInput/index.tsx

@@ -0,0 +1,79 @@
+import { useAjax } from "@/Hook/useAjax"
+import { getText } from "@/services/launchAdq/global"
+import { Input, List, Popover, Space } from "antd";
+import React, { useEffect } from "react"
+import { useState } from "react";
+import './index.less'
+
+
+interface Props {
+    value?: any,
+    onChange?: (value: any) => void,
+    style?: React.CSSProperties,
+    placeholder?: string;
+    maxTextLength?: number
+}
+/**
+ * 带文案助手输入框
+ * @returns 
+ */
+const TextAideInput: React.FC<Props> = (props) => {
+
+    /************************/
+    const { value, onChange, style, placeholder, maxTextLength = 10 } = props
+    const [text, setText] = useState<any>(value)
+    const [descriptionShow, setDescriptionshow] = useState(false)
+
+    const getTextLsit = useAjax((params) => getText(params))
+    /************************/
+
+    // 文案助手
+    const textList = (keyword?: any) => {
+        getTextLsit.run({ keyword, maxTextLength })
+    }
+
+    return <div className="textAideInput">
+        <Space>
+            <Popover placement="topLeft" overlayClassName="textAideInputPopover" style={{ minWidth: 600 }} visible={descriptionShow} content={<>
+                {
+                    descriptionShow && <List
+                        loading={getTextLsit?.loading}
+                        size="small"
+                        style={{ maxHeight: 300, overflowX: 'auto', minWidth: 600 }}
+                        dataSource={getTextLsit?.data?.returnTexts}
+                        renderItem={(item: any) => <List.Item onClick={(e: any) => {
+                            setText(item.text)
+                            setDescriptionshow(false)
+                            onChange && onChange(item.text)
+                        }}><span >{item.text}{item.tag && <span className="crt">{'CTR 高'}</span>}</span></List.Item>}
+                    />
+                }
+            </>}>
+                <Input
+                    placeholder={placeholder}
+                    style={style}
+                    value={text}
+                    onFocus={() => {
+                        setDescriptionshow(true)
+                        textList()
+                    }}
+                    onBlur={() => {
+                        setTimeout(() => { setDescriptionshow(false) }, 100)
+                    }}
+                    onChange={(e) => {
+                        let value = e.target.value
+                        setText(value)
+                        textList(value)
+                        onChange && onChange(value)
+                    }}
+                    allowClear
+                />
+            </Popover>
+
+            <span>{`${text?.length ?? 0}/${maxTextLength}`}</span>
+        </Space>
+    </div>
+}
+
+
+export default React.memo(TextAideInput)

+ 1 - 1
src/pages/launchSystemNew/launchManage/localAd/creative/modal.tsx

@@ -132,7 +132,7 @@ function CreativeModal(props: Props) {
             if(newValues?.overrideCanvasHeadOption?.length === 1 && newValues?.overrideCanvasHeadOption[0] === 'OPTION_CREATIVE_OVERRIDE_CANVAS'){
                 newValues.overrideCanvasHeadOption = 'OPTION_CREATIVE_OVERRIDE_CANVAS'
             }
-            // callback(newValues)
+            callback(newValues)
         })
         // PupFn({ visible: false })
     }, [form, materialConfig])

+ 70 - 4
src/pages/launchSystemNew/launchManage/taskList/batchCreativeCopy.tsx

@@ -1,5 +1,10 @@
-import { Modal } from "antd"
-import React, { useState } from "react"
+import { useAjax } from "@/Hook/useAjax"
+import { getSysAdcreativeInfo } from "@/services/launchAdq/creative"
+import { PromotedObjectType, SiteSetEnum } from "@/services/launchAdq/enum"
+import { PlusOutlined } from "@ant-design/icons"
+import { Button, Modal } from "antd"
+import React, { useEffect, useRef, useState } from "react"
+import CreativeForm from "./creativeForm"
 import style from './index.less'
 
 interface Props {
@@ -16,17 +21,78 @@ interface Props {
 const BatchCreativeCopy: React.FC<Props> = (props) => {
 
     /*******************************/
-    const { visible, onClose, onChange } = props
+    const { publicData, visible, onClose, onChange } = props
     const [oriData, setOriData] = useState<any[]>([])  // 创意数据
+    const [template, setTemplate] = useState<{ siteSet: string[], promotedObjectType: string }>({ siteSet: [], promotedObjectType: '' })
+    const itemsRef: any = useRef([]);
+
+    const getSysAdcreative = useAjax((params) => getSysAdcreativeInfo(params))
     /*******************************/
 
+    // 获取创意详情
+    useEffect(() => {
+        getSysAdcreative.run(publicData?.sysAdcreativeId).then(res => {
+            console.log(111111, res);
+            oriData[0] = { data: res, isOpen: true }
+            setOriData(JSON.parse(JSON.stringify(oriData)))
+            setTemplate({ siteSet: res?.siteSet, promotedObjectType: res?.promotedObjectType })
+        })
+    }, [])
 
     const handleOk = () => {
+        console.log('itemsRef---->', itemsRef);
+        let current = (itemsRef?.current as any[])?.filter(item => item)
+        console.log('itemsRef?.current---->', current);
+        Promise.all(current?.map((item: { handleOk: any }) => item.handleOk())).then(res => {
+            console.log(1111111, res);
+            
+        }).catch(err => {
+            console.log(22222222, err);
+        })
+    }
+
+    // 删除创意
+    const delOri = (index: number) => {
+        oriData?.splice(index, 1)
+        setOriData([...oriData])
+    }
 
+    // 新增创意
+    const addOri = () => {
+        let newOriData = [...oriData]
+        newOriData.push({ isOpen: true })
+        setOriData(newOriData)
     }
 
     return <Modal title="批量复制" visible={visible} onOk={handleOk} width={1000} onCancel={() => { onClose && onClose() }} className={style.batchCopy}>
-        
+        <div className={style.info}>
+            <div className={style.items}>
+                <div className={style.item}>
+                    <label className={style.label}>计划名称:</label>
+                    <span>{publicData?.campaignName}</span>
+                </div>
+                <div className={style.item}>
+                    <label className={style.label}>计划类型:</label>
+                    <span>{publicData?.campaignType === 'CAMPAIGN_TYPE_NORMAL' ? '普通展示广告' : '微信朋友圈广告'}</span>
+                </div>
+            </div>
+            <div className={style.items}>
+                <div className={style.item}>
+                    <label className={style.label}>推广目标:</label>
+                    <span>{PromotedObjectType[publicData?.promotedObjectType]}</span>
+                </div>
+                <div className={style.item}>
+                    <label className={style.label}>广告版位:</label>
+                    <span>{getSysAdcreative?.data?.siteSet?.map((item: string) => SiteSetEnum[item]).toString()}</span>
+                </div>
+            </div>
+        </div>
+
+        {oriData?.length > 0 && oriData?.map((item: any, index: number) => {
+            return <CreativeForm data={item.data} template={template} ref={el => { itemsRef.current[index] = el }} index={index + 1} key={index} delOri={() => { delOri(index) }} isDel={oriData?.length > 1}/>
+        })}
+
+        <Button type="link" style={{ padding: '4px 0', marginTop: 10 }} onClick={addOri}><PlusOutlined /> 新增创意</Button>
     </Modal>
 }
 

+ 371 - 0
src/pages/launchSystemNew/launchManage/taskList/creativeForm.tsx

@@ -0,0 +1,371 @@
+import { useAjax } from "@/Hook/useAjax";
+import { AdcreativeTemplate, AdcreativeTemplateList } from "@/services/launchAdq";
+import { get_adcreative_template, get_adcreative_template_list } from "@/services/launchAdq/global";
+import { mySet } from "@/utils/arrFn";
+import { DeleteOutlined, DownOutlined, UpOutlined } from "@ant-design/icons";
+import { Button, Form, Popconfirm, Radio, Spin } from "antd"
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from "react"
+import { useModel } from "umi";
+import SelectCloud from "../../components/selectCloud";
+import TextAideInput from "../../components/textAideInput";
+import { outAdcreativeTemplateIdFun } from "../localAd/adenum";
+import style from './index.less'
+
+interface Props {
+    template: { siteSet: string[], promotedObjectType: string },
+    index: number,
+    isDel: boolean,
+    delOri?: () => void
+    data?: any
+}
+/**
+ * 批量Form
+ * @returns 
+ */
+const CreativeForm = forwardRef((props: Props, ref) => {
+
+    /**************************/
+    const { data, template, index, delOri, isDel } = props
+    const [form] = Form.useForm();
+    let adcreativeElementsType = Form.useWatch('adcreativeElementsType', form)
+    let adcreativeTemplateId = Form.useWatch('adcreativeTemplateId', form)
+
+    const [adcreative_template_list, set_adcreative_template_list] = useState<AdcreativeTemplateList[]>([])
+    const [adcreative_template, set_adcreative_template] = useState<AdcreativeTemplate>()
+    const [conversionList, setConversionList] = useState<any>(null)
+    const [materialConfig, setMaterialConfig] = useState<{ adcreativeTemplateId?: number, type: string, cloudSize: { relation: string, width: number, height: number }[], list: any[], max: number }>({
+        type: '',//类型
+        cloudSize: [],//素材搜索条件
+        list: [],//素材
+        max: 1,//素材数量
+    })//素材配置
+    const [pupState, setPupState] = useState({
+        kp_show: false,
+        xd_show: false,
+        sj_show: false,
+        bq_show: false,
+        sp_show: false
+    })
+    const [isOpen, setIsOpen] = useState<boolean>(true)
+    const [isErr, setIsErr] = useState<boolean>(false)
+    const [selectImgVisible, set_selectImgVisible] = useState(false)
+
+
+    const { init } = useModel('useLaunchAdq.useBdMediaPup')
+
+    const getAdcreativeTemplateList = useAjax((params) => get_adcreative_template_list(params))
+    const getAdcreativeTemplate = useAjax((params) => get_adcreative_template(params))
+    /**************************/
+
+    //子组件暴露方法
+    useImperativeHandle(ref, () => ({
+        handleOk
+    }));
+
+    const handleOk = () => {
+        return new Promise((resolve: (value: unknown) => void, reject: (reason?: any) => void) => {
+            form.validateFields().then(values => {
+                setIsErr(false)
+                resolve(values)
+            }).catch(err => {
+                setIsErr(true)
+                reject(err)
+            })
+        })
+    }
+
+    // 获取创意形式列表
+    useEffect(() => {
+        if (template && template?.siteSet?.length > 0 && template?.promotedObjectType) {
+            getAdcreativeTemplateList.run({
+                siteSet: template?.siteSet,
+                promotedObjectType: template?.promotedObjectType,
+                campaignType: 'CAMPAIGN_TYPE_NORMAL',
+            }).then(res => {
+                let newArr: any = []
+                // 过滤掉相同的和即将下线的
+                if (!res) {
+                    return
+                }
+                Object.values(res)?.forEach((arr: any) => {
+                    Array.isArray(arr) && arr?.forEach((item: any) => {
+                        if (newArr.length > 0) {
+                            if (outAdcreativeTemplateIdFun(item.adcreativeTemplateId) && newArr.every((i: { adcreativeTemplateId: any }) => i.adcreativeTemplateId !== item.adcreativeTemplateId)) {
+                                newArr.push(item)
+                            } else {
+                                // 找出通用创意
+                                newArr = newArr?.map((arr: { adcreativeTemplateId: any }) => {
+                                    if (arr.adcreativeTemplateId === item.adcreativeTemplateId) {
+                                        return { ...arr, isGeneral: true }
+                                    }
+                                    return arr
+                                })
+                            }
+                        } else {
+                            if (outAdcreativeTemplateIdFun(item.adcreativeTemplateId)) {
+                                newArr.push(item)
+                            }
+                        }
+                    })
+                })
+                set_adcreative_template_list(newArr)
+            })
+        }
+    }, [template, form])
+
+    // 获取创意形式详情
+    useEffect(() => {
+        // CAMPAIGN_TYPE_NORMAL
+        if (template?.siteSet?.length > 0 && template?.promotedObjectType && adcreativeTemplateId) {
+            if (adcreativeTemplateId) {
+                getAdcreativeTemplate.run({
+                    siteSet: template?.siteSet,
+                    promotedObjectType: template?.promotedObjectType,
+                    adcreativeTemplateId
+                }).then(res => {
+                    if (res?.length > 0) {
+                        set_adcreative_template(res[0])
+                    }
+                })
+            }
+        }
+    }, [template?.siteSet, template?.promotedObjectType, adcreativeTemplateId])
+
+    //每次选中创意设置该展示的界面
+    useEffect(() => {
+        let states = {
+            kp_show: false,
+            xd_show: true,
+            sj_show: false,
+            bq_show: false,
+            sp_show: false
+        }
+        let values: any = { pageType: 'PAGE_TYPE_CANVAS_WECHAT', }
+        if (adcreative_template) {
+            let pageList = adcreative_template?.landingPageConfig?.supportPageTypeList
+            let pageType = pageList?.length ? pageList[0]?.pageType : null
+            //数据展示组件
+            if (adcreative_template.adcreativeAttributes.some(item => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')) {
+                let arr = adcreative_template.adcreativeAttributes?.filter((item: { name: string; }) => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')
+                let newObj: any = {}
+                arr.forEach((item) => {
+                    let arr: any[] = mySet(item.propertyDetail.enumDetail.enumeration)
+                    newObj[item.name] = arr
+                })
+                setConversionList(newObj)
+
+                states = { ...states, sj_show: true }
+                if (newObj.conversion_data_type) {
+                    values = { ...values, conversionDataType: newObj.conversion_data_type[0].value }
+                }
+                if (newObj.conversion_target_type) {
+                    values = { ...values, conversionTargetType: newObj.conversion_target_type[0].value }
+                }
+            }
+            //行动按钮组件存在
+            if (states.xd_show) {
+                let linkNameList = (pageList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkNameType?.list
+                let linkPageList = (pageList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkPageType?.list
+                if (linkNameList) {
+                    let linkNameType = linkNameList[0]?.linkNameType
+                    let linkPageType = linkPageList[0]?.linkPageType
+                    values = { ...values, linkNameType, linkPageType }
+                } else {
+                    states = { ...states, xd_show: false }
+                }
+            }
+            // 视频结束页 end_page
+            if (adcreative_template.adcreativeElements.some(item => item.name === 'end_page')) {
+                // let endPageType =adcreative_template?.adcreativeElements?.filter(item=>item.name === 'end_page_type')[0]?.enumProperty?.enumeration
+                values = { ...values, endPageType: 'END_PAGE_AVATAR_NICKNAME_HIGHLIGHT' }
+                states = { ...states, sp_show: true }
+            }
+            setPupState(states)
+            form.setFieldsValue(values)
+        }
+    }, [adcreative_template])
+
+    // 版位改变清空数据
+    useEffect(() => {
+        if (materialConfig.adcreativeTemplateId && adcreativeTemplateId !== materialConfig.adcreativeTemplateId) {
+            setMaterialConfig({ ...materialConfig, adcreativeTemplateId: undefined, list: [] })
+        }
+    }, [adcreativeTemplateId, materialConfig])
+
+    // 切换创意形式默认选中第一个
+    useEffect(() => {
+        // 设置默认选中第一个
+        if (adcreativeElementsType && adcreative_template_list?.length > 0) {
+            let adcreativeTemplateIdArr = adcreative_template_list?.filter(item => item.adcreativeTemplateStyle === adcreativeElementsType)
+            form.setFieldsValue({ adcreativeTemplateId: adcreativeTemplateIdArr[0].adcreativeTemplateId })
+        }
+    }, [adcreativeElementsType, adcreative_template_list])
+
+    return <div className={style.originality} key={index} style={isOpen ? { borderColor: isErr ? 'red' : '#e4e4e4' } : { height: 44, overflow: 'hidden', borderColor: isErr ? 'red' : '#e4e4e4' }}>
+        <div className={style.head} onClick={() => { setIsOpen(!isOpen) }}>
+            <div>创意{index}</div>
+            <div>
+                {isDel && <Popconfirm placement="top" title="是否放弃该创意" onConfirm={(e) => { e?.stopPropagation(); delOri && delOri() }} okText="Yes" cancelText="No">
+                    <Button type="link" size='small' className={style.clear} style={{ color: 'red' }} onClick={(e) => { e?.stopPropagation() }}><DeleteOutlined /></Button>
+                </Popconfirm>}
+                <Button
+                    type="link"
+                    size='small'
+                    style={{ color: '#000' }}
+                >
+                    {isOpen ? <UpOutlined /> : <DownOutlined />}
+                </Button>
+            </div>
+        </div>
+        <div>
+            <div style={{ height: 20 }}></div>
+            <Form
+                form={form}
+                labelCol={{ span: 4 }}
+                labelWrap={true}
+                labelAlign="left"
+                initialValues={
+                    {
+                        adcreativeElementsType: '视频'
+                    }
+                }
+            >
+                <Form.Item label="创意形式" name='adcreativeElementsType'>
+                    <Radio.Group >
+                        <Radio.Button value="视频">视频</Radio.Button>
+                        <Radio.Button value="图片">图片</Radio.Button>
+                    </Radio.Group>
+                </Form.Item>
+
+                <Spin tip="Loading..." spinning={getAdcreativeTemplateList?.loading} style={{ width: '100%' }}>
+                    <Form.Item style={{ marginLeft: 155 }} name='adcreativeTemplateId'>
+                        <Radio.Group className={style.adcreative_template}>
+                            {adcreative_template_list?.filter(item => item.adcreativeTemplateStyle === adcreativeElementsType)?.map((item: any) => {
+                                return <Radio.Button value={item.adcreativeTemplateId} key={item.adcreativeTemplateId}>
+                                    <div className={style.adcreative_template_item}>
+                                        {item.isGeneral && <span style={{ color: '#4080ff', fontSize: 10 }}>所选版位通投</span>}
+                                        <img src={item.adcreativeSampleImage} />
+                                        <span style={{ fontSize: 12, height: 20, lineHeight: '20px' }}>{item.adcreativeTemplateAppellation}</span>
+                                        <span style={{ fontSize: 12, height: 20, lineHeight: '20px' }}>{item.adcreativeTemplateId}</span>
+                                    </div>
+                                </Radio.Button>
+                            })}
+                        </Radio.Group>
+                    </Form.Item>
+
+                    {/* 优先展示视频或图片 */}
+                    {adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image').map(item => {
+                        return <Form.Item label={item.description} rules={[{ required: true, message: '请选择素材!' }]} key={item.name} name={item.name}>
+                            {/* 视频 */}
+                            {
+                                (item.name === 'short_video1' || item.name === 'video') && <div className={`${style.box} ${style.video}`} onClick={() => {
+                                    init({ mediaType: 'VIDEO', cloudSize: adcreativeTemplateId === 1708 ? [[{ relation: '=', width: 1280, height: 720 }]] : [[{ relation: '=', width: item.restriction.videoRestriction.minWidth, height: item.restriction.videoRestriction.minHeight }]], maxSize: item.restriction.videoRestriction.fileSize * 1024 })
+                                    setTimeout(() => {
+                                        set_selectImgVisible(true)
+                                        setMaterialConfig({
+                                            ...materialConfig,
+                                            type: item.name,
+                                            max: 1,
+                                            adcreativeTemplateId
+                                        })
+                                    }, 100)
+                                }}>
+                                    <p>
+                                        {
+                                            materialConfig?.list[0] ? <video src={materialConfig?.list[0].url} controls /> : <>
+                                                <span>{`推荐尺寸(${adcreativeTemplateId === 1708 ? 1280 : item.restriction.videoRestriction.minWidth} x ${adcreativeTemplateId === 1708 ? 720 : item.restriction.videoRestriction.minHeight})`}</span>
+                                                <span>{`${item.restriction.videoRestriction.fileFormat?.map(str => str?.replace('MEDIA_TYPE_', ''))};< ${item.restriction.videoRestriction.fileSize / 1024}M;时长 ≥ ${item.restriction.videoRestriction.minDuration}s,≤ ${item.restriction.videoRestriction.maxDuration}s,必须带有声音`}</span>
+                                            </>
+                                        }
+                                    </p>
+                                </div>
+                            }
+                            {/* 单图 */}
+                            {
+                                item.name === 'image' && <div className={`${style.box} ${style.image}`} onClick={() => {
+                                    init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
+                                    setTimeout(() => {
+                                        set_selectImgVisible(true)
+                                        setMaterialConfig({
+                                            ...materialConfig,
+                                            type: item.name,
+                                            max: 1,
+                                            adcreativeTemplateId
+                                        })
+                                    }, 100)
+
+                                }}>
+                                    <p>
+                                        {materialConfig?.list[0] ? <img src={materialConfig?.list[0].url} /> : <>
+                                            <span>{`推荐尺寸(${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height})`}</span>
+                                            <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))};小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
+                                        </>
+                                        }
+                                    </p>
+                                </div>
+                            }
+                            {/* 多图 */}
+                            {
+                                item.name === 'image_list' && <div className={`${style.box} ${item.arrayProperty.maxNumber >= 3 ? style.image_list : style.image}`} onClick={() => {
+                                    init({ mediaType: 'IMG', num: item.arrayProperty.maxNumber, cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]], maxSize: item.restriction.imageRestriction.fileSize * 1024 })
+                                    setTimeout(() => {
+                                        set_selectImgVisible(true)
+                                        setMaterialConfig({
+                                            ...materialConfig,
+                                            type: item.name,
+                                            max: item.arrayProperty.maxNumber,
+                                            adcreativeTemplateId
+                                        })
+                                    }, 100)
+                                }}>
+                                    {
+                                        Array(item.arrayProperty.maxNumber).fill('').map((arr, index) => {
+                                            return <p key={index}>
+                                                {
+                                                    materialConfig?.list[index] ? <img src={materialConfig?.list[index].url} /> : <>
+                                                        <span>{`推荐尺寸(${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height})`}</span>
+                                                        <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))};小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
+                                                    </>
+                                                }
+
+                                            </p>
+                                        })
+                                    }
+                                </div>
+                            }
+                        </Form.Item>
+                    })}
+
+                    {/* 过滤了不必传和品牌名称,品牌标识图(外部传)短视频结构(组装使用) */}
+                    {adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'description').map(item => {
+                        let maxNum = adcreativeTemplateId === 1708 ? pupState.xd_show ? 10 : item.restriction.textRestriction.maxLength : item.restriction.textRestriction.maxLength
+                        return <div key={item.fieldType}>
+                            <Form.Item label={item.description} name={item.name} rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${maxNum}}`)), message: '请输入正确的' + item.description }]}>
+                                <TextAideInput placeholder={'请输入' + item.description} style={{ width: 500 }} maxTextLength={maxNum} />
+                            </Form.Item>
+                        </div>
+                    })}
+                </Spin>
+            </Form>
+        </div>
+
+
+        {/* 选择素材 */}
+        {selectImgVisible && <SelectCloud
+            visible={selectImgVisible}
+            onClose={() => set_selectImgVisible(false)}
+            sliderImgContent={materialConfig.list}
+            onChange={(content) => {
+                if (content.length > 0) {
+                    form.setFieldsValue({ [materialConfig.type]: materialConfig.type })
+                }
+                setMaterialConfig({ ...materialConfig, list: content })
+                set_selectImgVisible(false)
+                console.log(content)
+            }} />
+        }
+    </div>
+})
+
+
+export default React.memo(CreativeForm)

+ 145 - 52
src/pages/launchSystemNew/launchManage/taskList/index.less

@@ -1,58 +1,151 @@
 .batchCopy {
-    .info {
-        border: 1px solid rgb(226, 226, 226);
-        padding: 0 10px;
-        width: 100%;
-        border-radius: 4px;
-        .items {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            margin: 10px 0;
-
-            .item {
-                width: 50%;
-                display: flex;
-                justify-content: flex-start;
-                align-items: center;
-                .label {
-                    font-size: 14px;
-                    font-weight: 500;
-                    width: 110px;
-                    text-align: right;
-                    margin-right: 10px;
-                }
-            }
+  .info {
+    border: 1px solid rgb(226, 226, 226);
+    padding: 0 10px;
+    width: 100%;
+    border-radius: 4px;
+
+    .items {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      margin: 10px 0;
+
+      .item {
+        width: 50%;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .label {
+          font-size: 14px;
+          font-weight: 500;
+          width: 110px;
+          text-align: right;
+          margin-right: 10px;
         }
-        margin-bottom: 20px;
+      }
     }
-    .title {
-        font-size: 16px;
-        font-weight: 700;
-        margin-bottom: 20px;
+
+    margin-bottom: 20px;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    margin-bottom: 20px;
+  }
+
+  .originality {
+    border: 1px dashed rgb(228, 228, 228);
+    padding: 10px;
+    box-sizing: border-box;
+    border-radius: 4px;
+
+    &+div {
+      margin-top: 10px;
     }
-    .originality {
-        border: 1px dashed rgb(228, 228, 228);
-        padding: 10px;
-        box-sizing: border-box;
-        border-radius: 4px;
-        &+div{
-            margin-top: 10px;
-        }
-        .head {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-weight: 700;
-            font-size: 14px;
-
-            .clear{
-                display: none;
-            }
-
-            &:hover .clear {
-                display: inline-block;
-            }
-        }
+
+    .head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: 700;
+      font-size: 14px;
+
+      .clear {
+        display: none;
+      }
+
+      &:hover .clear {
+        display: inline-block;
+      }
     }
+  }
+}
+
+.adcreative_template {
+  width: 100%;
+  overflow-y: auto;
+  display: flex;
+  height: 173px;
+
+  >label {
+    height: 100%;
+    margin-right: 15px;
+  }
+}
+
+.adcreative_template_item {
+  width: 150px;
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: column;
+}
+
+.video {}
+
+.box {
+  width: 60%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f7fa;
+  flex-direction: column;
+  color: rgba(0, 0, 0, .3);
+  border-radius: 5px;
+
+  >p {
+    display: flex;
+    align-items: center;
+    flex-flow: column;
+    font-size: 10px;
+    cursor: pointer;
+    max-height: 150px;
+    margin-bottom: 0;
+
+    img {
+      height: 100%;
+    }
+
+    video {
+      height: 100%;
+    }
+  }
+}
+
+.image_list {
+  flex-flow: row wrap;
+  background-color: transparent;
+  height: auto;
+  justify-content: flex-start;
+
+  >p {
+    width: 150px;
+    background-color: #f5f7fa;
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e6e8ed;
+    margin: 0;
+  }
+}
+
+.crt {
+  display: inline-flex;
+  align-items: center;
+  width: auto;
+  margin-left: 8px;
+  padding: 1px 4px;
+  height: 16px;
+  border-radius: 3px;
+  font-size: 12px;
+  color: #fff;
+  border: 1px solid #296bef;
+  background-color: #296bef;
+  line-height: normal;
 }

+ 22 - 22
src/pages/launchSystemNew/launchManage/taskList/log.tsx

@@ -64,28 +64,28 @@ const Log: React.FC<Props> = (props) => {
             total={getTaskLogList?.data?.data?.total}
             page={getTaskLogList?.data?.data?.current}
             pageSize={getTaskLogList?.data?.data?.size}
-            rowSelection={{
-                type: 'checkbox',
-                selectedRowKeys: selectedRowKeys?.map((item: {id: number}) => item.id.toString()),
-                onSelect: (record: any, selected: boolean, selectedRows: any, nativeEvent: any) => {
-                    let oldSelectedRowKeys: any[] = JSON.parse(JSON.stringify(selectedRowKeys))
-                    if (selected) { // 新增
-                        oldSelectedRowKeys.push(record)
-                    } else { // 减少
-                        oldSelectedRowKeys = oldSelectedRowKeys.filter((item: {id: number}) => item.id != record.id)
-                    }
-                    setSelectedRowKeys(oldSelectedRowKeys)
-                },
-                onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
-                    let oldSelectedRowKeys: any[] = JSON.parse(JSON.stringify(selectedRowKeys))
-                    if (selected) {
-                        oldSelectedRowKeys = [...oldSelectedRowKeys, ...changeRows]
-                    } else {
-                        oldSelectedRowKeys = oldSelectedRowKeys.filter((item: {id: number}) => !changeRows?.some((item1: {id: number}) => item1.id == item.id))
-                    }
-                    setSelectedRowKeys(oldSelectedRowKeys)
-                }
-            }}
+            // rowSelection={{
+            //     type: 'checkbox',
+            //     selectedRowKeys: selectedRowKeys?.map((item: {id: number}) => item.id.toString()),
+            //     onSelect: (record: any, selected: boolean, selectedRows: any, nativeEvent: any) => {
+            //         let oldSelectedRowKeys: any[] = JSON.parse(JSON.stringify(selectedRowKeys))
+            //         if (selected) { // 新增
+            //             oldSelectedRowKeys.push(record)
+            //         } else { // 减少
+            //             oldSelectedRowKeys = oldSelectedRowKeys.filter((item: {id: number}) => item.id != record.id)
+            //         }
+            //         setSelectedRowKeys(oldSelectedRowKeys)
+            //     },
+            //     onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
+            //         let oldSelectedRowKeys: any[] = JSON.parse(JSON.stringify(selectedRowKeys))
+            //         if (selected) {
+            //             oldSelectedRowKeys = [...oldSelectedRowKeys, ...changeRows]
+            //         } else {
+            //             oldSelectedRowKeys = oldSelectedRowKeys.filter((item: {id: number}) => !changeRows?.some((item1: {id: number}) => item1.id == item.id))
+            //         }
+            //         setSelectedRowKeys(oldSelectedRowKeys)
+            //     }
+            // }}
             leftChild={<Space>
                 <Select
                     placeholder="媒体账户"

+ 22 - 22
src/pages/launchSystemNew/launchManage/taskList/logTableConfig.tsx

@@ -77,28 +77,28 @@ function tableConfig(copyCreative: (data: any) => void): any {
                 return <a style={{ fontSize: "12px" }} onClick={() => copy(a)}>{a || '--'}</a>
             }
         },
-        {
-            title: '操作',
-            dataIndex: 'cz',
-            key: 'cz',
-            width: 100,
-            align: 'center',
-            render: (a: any, b: any) => {
-                return <Dropdown trigger={['click']} overlay={<Menu items={[
-                    {
-                        key: '1',
-                        label: (<Button size="small" type="link" onClick={() => { copyCreative(b) }}>批量复制</Button>)
-                    }
-                ]} />}>
-                    <a onClick={e => e.preventDefault()} style={{ fontSize: 12 }}>
-                        <Space>
-                            操作
-                            <DownOutlined />
-                        </Space>
-                    </a>
-                </Dropdown>
-            }
-        }
+        // {
+        //     title: '操作',
+        //     dataIndex: 'cz',
+        //     key: 'cz',
+        //     width: 100,
+        //     align: 'center',
+        //     render: (a: any, b: any) => {
+        //         return <Dropdown trigger={['click']} overlay={<Menu items={[
+        //             {
+        //                 key: '1',
+        //                 label: (<Button size="small" type="link" onClick={() => { copyCreative(b) }}>批量复制</Button>)
+        //             }
+        //         ]} />}>
+        //             <a onClick={e => e.preventDefault()} style={{ fontSize: 12 }}>
+        //                 <Space>
+        //                     操作
+        //                     <DownOutlined />
+        //                 </Space>
+        //             </a>
+        //         </Dropdown>
+        //     }
+        // }
     ]
 }