fix

src/components/Tables/index.tsx

@@ -120,7 +120,10 @@ function Tables(props: Props) {
             scroll={scroll ? { ...scroll, scrollToFirstRowOnChange: true } : undefined}
             size={size}
             rowKey={(a: any) => {
-                return (JSON.stringify(a?.id) || JSON.stringify(a?.key) || JSON.stringify(a[myKey]))
+                if(myKey){
+                    return JSON.stringify(a[myKey])
+                }
+                return (JSON.stringify(a?.id) || JSON.stringify(a?.key))
             }}
             rowSelection={rowSelection ? rowSelection : undefined}
             onRow={record => {

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

@@ -1,8 +1,9 @@
 import Tables from "@/components/Tables"
 import { useAjax } from "@/Hook/useAjax"
 import { getAdqLandingPageList, putAdqLandingPage } from "@/services/launchAdq/adq"
+import { CreateAdProps } from "@/services/launchAdq/createAd"
 import { CheckOutlined, SyncOutlined } from "@ant-design/icons"
-import { Button, Modal, Space } from "antd"
+import { Button, Col, Modal, Row, Space } from "antd"
 import React, { useEffect, useState } from "react"
 import style from '../goodsModal/index.less'
 import columns from "./tableConfig"
@@ -16,14 +17,14 @@ interface Props {
     visible?: boolean,
     onClose?: () => void,
     onChange?: (data: any) => void,
-    data: any
+    data: any,
 }
 const PageModal: React.FC<Props> = (props) => {
 
     /*************************/
     const { visible, onClose, data: data1, onChange } = props
-    const [selectAdz, setSelectAdz] = useState<number>(1)   // 选择广告主
-    const [data, setData] = useState<any>(data1)
+    const [selectAdz, setSelectAdz] = useState<number>(data1[0].accountId)   // 选择广告主
+    const [data, setData] = useState<any>(null)
     const [queryForm, setQueryForm] = useState<{ accountId?: number, pageSize: number, pageNum: number }>({ pageNum: 1, pageSize: 20 })
 
     const putAdq = useAjax((params) => putAdqLandingPage(params))
@@ -31,8 +32,8 @@ const PageModal: React.FC<Props> = (props) => {
     /*************************/
 
     useEffect(() => {
-        if (data?.length > 0) {
-            setQueryForm({ ...queryForm, accountId: data[selectAdz - 1].adAccountId })
+        if (data1?.length > 0) {
+            setQueryForm({ ...queryForm, accountId: data1.find((item: { accountId: number })=>item.accountId === selectAdz).accountId })
         }
     }, [selectAdz])
 
@@ -54,18 +55,16 @@ const PageModal: React.FC<Props> = (props) => {
     }
 
     /** 设置选中广告主 */
-    const handleSelectAdz = (value: number, item: any) => {
-        if (value === selectAdz) {
+    const handleSelectAdz = ( item: any) => {
+        if (item.accountId === selectAdz) {
             return
         }
-        setSelectAdz(value)
+        setSelectAdz(item.accountId)
     }
 
     /** 表格选折 */
     const onChangeTable = (selectedRowKeys: React.Key[], selectedRows: any) => {
-        let newData = JSON.parse(JSON.stringify(data))
-        newData[selectAdz - 1]['pageList'] = selectedRows
-        setData([...newData])
+        setData(selectedRows[0])
     }
 
     /** 同步落地页 */
@@ -75,7 +74,7 @@ const PageModal: React.FC<Props> = (props) => {
             listAjax.refresh()
         })
     }
-
+    console.log(data,data1)
     return <Modal
         title={<Space>
             <span>ADQ落地页</span>
@@ -84,19 +83,20 @@ const PageModal: React.FC<Props> = (props) => {
         visible={visible}
         onCancel={() => { onClose && onClose() }}
         onOk={handleOk}
-        width={1100}
+        width={1200}
         className={style.SelectPackage}
         bodyStyle={{ padding: '0 10px 0 10px' }}
     >
 
         <div className={style.content}>
-            <div className={style.left}>
+            <div className={style.left} style={{width:180}}>
                 <h4 className={style.title}>媒体账户</h4>
-                {data?.map((item: { adAccountId: number, id: number }, index: number) => (
-                    <div key={index} onClick={() => { handleSelectAdz(index + 1, item) }} className={`${style.accItem} ${selectAdz === index + 1 && style.select} `}>
-                        {item?.adAccountId}
-                        {data[index].pageList?.length > 0 && <CheckOutlined style={{ color: '#1890ff' }} />}
-                    </div>))}
+                {data1?.map((item: { accountId: number,remark:string, id: number }, index: number) => (
+                    <Row key={index} onClick={() => { handleSelectAdz(item) }} className={`${style.accItem} ${selectAdz === item.accountId && style.select} `} >
+                        {/* {item?.accountId} */}
+                        <Col span={21} style={{whiteSpace:'nowrap',width:'100%',overflow:'hidden',textOverflow:'ellipsis'}}>{item.remark ? item.accountId + '—' + item.remark : item.accountId}</Col>
+                        <Col span={3}>{data?.accountId === item.accountId && <CheckOutlined style={{ color: '#1890ff' }} />}</Col>
+                    </Row>))}
             </div>
             <div className={style.right}>
                 <Space style={{ marginBottom: 10 }} align="end">
@@ -115,7 +115,7 @@ const PageModal: React.FC<Props> = (props) => {
                     }}
                     rowSelection={{
                         type: 'radio',
-                        selectedRowKeys: data[selectAdz - 1]?.pageList?.map((item: any) => item?.id?.toString()),
+                        selectedRowKeys: data1[selectAdz - 1]?.pageList?.map((item: any) => item?.id?.toString()),
                         onChange: onChangeTable
                     }}
                 />

src/pages/launchSystemNew/components/pageModal/tableConfig.tsx

@@ -7,7 +7,7 @@ let columns = () => [
         dataIndex: 'pageId',
         key: 'pageId',
         align: 'center',
-        width: 100,
+        width: 120,
         render: (a: string) => {
             return <a>{a}</a>
         }

src/pages/launchSystemNew/launchManage/createAd/ad/index.tsx

@@ -33,7 +33,13 @@ function Ad(props: Props) {
     // 获取广告详情
     const getInfo = useCallback((sysAdgroupId) => {
         getSysAdgroups.run(sysAdgroupId).then(res => {
-            setQueryForm({ ...queryForm, sysAdgroupId: sysAdgroupId, sysAdcreativeId: undefined, sysAdgroup: res });
+            setQueryForm({
+                ...queryForm,
+                sysAdgroupId,
+                sysAdcreativeId: undefined,//清空创意ID
+                taskMediaMaps: [],//清空创意
+                sysAdgroup: { ...res, isTemplate: false },
+            });
             setAdVisible(false);
             clearData()
         })
@@ -42,7 +48,7 @@ function Ad(props: Props) {
         <div className={style.top}>
             广告基本信息
             {queryForm.sysAdgroup && <a onClick={() => {
-                setQueryForm({ ...queryForm, sysAdgroup: undefined, sysAdgroupId: undefined, sysAdcreativeId: undefined })
+                setQueryForm({ ...queryForm, sysAdgroup: undefined, sysAdgroupId: undefined, sysAdcreativeId: undefined ,pageList:[],taskMediaMaps:[]})
             }}>清空</a>}
         </div>
         <div className={style.center}>

src/pages/launchSystemNew/launchManage/createAd/ad/modal/leadAd.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { Modal, Form, Input, Divider, Select, Radio, DatePicker, Switch, Checkbox, message, Tooltip, Row, Col, Space, TimePicker, Button } from 'antd'
-import { BidModeEnum, OptimizationGoalEnum, BidStrategyEnum } from '@/services/launchAdq/enum'
+import { BidModeEnum, OptimizationGoalEnum, BidStrategyEnum, AdStatus } from '@/services/launchAdq/enum'
 import { ModalConfig } from '../index'
 import moment from 'moment';
 import { useAjax } from '@/Hook/useAjax';
@@ -97,17 +97,17 @@ function LeadAdModal(props: Props) {
             newValues['timeSeries'] = Array(336).fill(1).join('')
             newValues['promotedObjectType'] =  queryForm.promotedObjectType
             console.log(newValues)
-
+            newValues['isTemplate']=template_checked
             // 开启存为模板开关执行
-            if (template_checked && type==='add') {
-                createSysAdgroup.run(newValues).then(res => {
-                    if (res) {
-                        callback(newValues)
-                    }
-                })
-            } else {
+            // if (template_checked && type==='add') {
+            //     createSysAdgroup.run(newValues).then(res => {
+            //         if (res) {
+            //             callback(newValues)
+            //         }
+            //     })
+            // } else {
                 callback(newValues)
-            }
+            // }
         })
     }, [form, template_checked,queryForm,type])
     // 场景定向
@@ -138,6 +138,7 @@ function LeadAdModal(props: Props) {
                 miniProgramAndMiniGame: dataInfo?.sceneSpec?.wechatScene?.miniProgramAndMiniGame,//小程序小游戏流量类型
                 payScene: dataInfo?.sceneSpec?.wechatScene?.payScene,//订单详情页消费场景
                 firstDayBeginTime:dataInfo?.firstDayBeginTime?moment(`${dataInfo?.beginDate} ${dataInfo?.firstDayBeginTime}`) : undefined,//首日开始时间
+                configuredStatus:dataInfo?.configuredStatus || 'AD_STATUS_SUSPEND',//广告启停
             })
             if(dataInfo?.firstDayBeginTime){//存在首日开始时间，选中开关
                 setState({...state,isShowTime:['1']})
@@ -154,7 +155,7 @@ function LeadAdModal(props: Props) {
         footer={<Space>
             <Button onClick={() => { PupFn({ visible: false, dataInfo: null, type: 'add' }) }}>取消</Button>
             <Button type='primary' onClick={handleOk}>确定</Button>
-            {type === 'add' &&<Checkbox checked={template_checked} onChange={(e) => {
+            {<Checkbox checked={template_checked} onChange={(e) => {
                 let checked = e.target.checked
                 settemplate_checked(checked)
                 localStorage.setItem('template_checked', checked ? '1' : '0')
@@ -178,7 +179,8 @@ function LeadAdModal(props: Props) {
                     autoAcquisitionEnabled: false,
                     wechatSceneType: '0',
                     wechatPositionType: '0',
-                    optimizationGoal: 'OPTIMIZATIONGOAL_ECOMMERCE_ORDER'
+                    optimizationGoal: 'OPTIMIZATIONGOAL_ECOMMERCE_ORDER',
+                    configuredStatus:'AD_STATUS_SUSPEND'
                 }
             }
         >
@@ -348,6 +350,13 @@ function LeadAdModal(props: Props) {
             <Form.Item label={<strong>广告日预算</strong>} name='dailyBudget'>
                 <Input placeholder='不填默认为不限' style={{ width: 300 }} />
             </Form.Item>
+            <Form.Item label={<strong>广告状态</strong>} name="configuredStatus" rules={[{ required: true, message: '请选择广告状态' }]}>
+                <Select placeholder="选择广告状态">
+                    {Object.keys(AdStatus).map(key => {
+                        return <Select.Option value={key} key={key}>{AdStatus[key]}</Select.Option>
+                    })}
+                </Select>
+            </Form.Item>
         </Form>
     </Modal >
 }

src/pages/launchSystemNew/launchManage/createAd/ad/modal/wechat.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { Modal, Form, Input, Divider, Select, Radio, DatePicker, Switch, Checkbox, message, Tooltip, Row, Col, Space, TimePicker, Button } from 'antd'
-import { BidModeEnum, OptimizationGoalEnum, BidStrategyEnum } from '@/services/launchAdq/enum'
+import { BidModeEnum, OptimizationGoalEnum, BidStrategyEnum, AdStatus } from '@/services/launchAdq/enum'
 import { ModalConfig } from '../index'
 import moment from 'moment';
 import { useAjax } from '@/Hook/useAjax';
@@ -96,17 +96,18 @@ function WeChatAdModal(props: Props) {
             delete newValues['date']
             newValues['timeSeries'] = Array(336).fill(1).join('')
             newValues['promotedObjectType'] = queryForm.promotedObjectType
+            newValues['isTemplate']=template_checked
             console.log(newValues)
             // 开启存为模板开关执行
-            if (template_checked && type === 'add') {
-                createSysAdgroup.run(newValues).then(res => {
-                    if (res) {
-                        callback(newValues)
-                    }
-                })
-            } else {
+            // if (template_checked && type === 'add') {
+            //     createSysAdgroup.run(newValues).then(res => {
+            //         if (res) {
+            //             callback(newValues)
+            //         }
+            //     })
+            // } else {
                 callback(newValues)
-            }
+            // }
         })
     }, [form, template_checked, queryForm,type])
     // 场景定向
@@ -137,6 +138,7 @@ function WeChatAdModal(props: Props) {
                 miniProgramAndMiniGame: dataInfo?.sceneSpec?.wechatScene?.miniProgramAndMiniGame,//小程序小游戏流量类型
                 payScene: dataInfo?.sceneSpec?.wechatScene?.payScene,//订单详情页消费场景
                 firstDayBeginTime:dataInfo?.firstDayBeginTime?moment(`${dataInfo?.beginDate} ${dataInfo?.firstDayBeginTime}`) : undefined,//首日开始时间
+                configuredStatus:dataInfo?.configuredStatus || 'AD_STATUS_SUSPEND',//广告启停
             })
             if(dataInfo?.firstDayBeginTime){//存在首日开始时间，选中开关
                 setState({...state,isShowTime:['1']})
@@ -153,7 +155,7 @@ function WeChatAdModal(props: Props) {
         footer={<Space>
             <Button onClick={() => { PupFn({ visible: false, dataInfo: null, type: 'add' }) }}>取消</Button>
             <Button type='primary' onClick={handleOk}>确定</Button>
-            {type === 'add' && <Checkbox checked={template_checked} onChange={(e) => {
+            { <Checkbox checked={template_checked} onChange={(e) => {
                 let checked = e.target.checked
                 settemplate_checked(checked)
                 localStorage.setItem('template_checked', checked ? '1' : '0')
@@ -177,7 +179,8 @@ function WeChatAdModal(props: Props) {
                     autoAcquisitionEnabled: false,
                     wechatSceneType: '0',
                     wechatPositionType: '0',
-                    optimizationGoal: 'OPTIMIZATIONGOAL_ECOMMERCE_ORDER'
+                    optimizationGoal: 'OPTIMIZATIONGOAL_ECOMMERCE_ORDER',
+                    configuredStatus:'AD_STATUS_SUSPEND'
                 }
             }
         >
@@ -332,6 +335,13 @@ function WeChatAdModal(props: Props) {
             <Form.Item label={<strong>广告日预算</strong>} name='dailyBudget'>
                 <Input placeholder='不填默认为不限' style={{ width: 300 }} />
             </Form.Item>
+            <Form.Item label={<strong>广告状态</strong>} name="configuredStatus" rules={[{ required: true, message: '请选择广告状态' }]}>
+                <Select placeholder="选择广告状态"  style={{ width: 300 }}>
+                    {Object.keys(AdStatus).map(key => {
+                        return <Select.Option value={key} key={key}>{AdStatus[key]}</Select.Option>
+                    })}
+                </Select>
+            </Form.Item>
         </Form>
     </Modal >
 }

src/pages/launchSystemNew/launchManage/createAd/adgroupsCol.tsx

@@ -1,4 +1,4 @@
-import { BidModeEnum, BidStrategyEnum, OptimizationGoalEnum, PromotedObjectType, SiteSetEnum } from "@/services/launchAdq/enum"
+import { AdStatus, BidModeEnum, BidStrategyEnum, OptimizationGoalEnum, PromotedObjectType, SiteSetEnum } from "@/services/launchAdq/enum"
 import React from "react"
 
 
@@ -13,7 +13,7 @@ const AdgroupsCol = React.forwardRef((props: Props, ref) => {
 
     /*************************/
     const { data } = props
-    const { adgroupName, promotedObjectType, siteSet, endDate, beginDate, bidMode, optimizationGoal, smartBidType, bidStrategy, bidAmount, dailyBudget ,firstDayBeginTime} = data
+    const { adgroupName, promotedObjectType, siteSet, endDate, beginDate, bidMode, optimizationGoal, smartBidType, bidStrategy, bidAmount, dailyBudget ,firstDayBeginTime,configuredStatus} = data
     /*************************/
 
     return <>
@@ -28,6 +28,7 @@ const AdgroupsCol = React.forwardRef((props: Props, ref) => {
         {bidStrategy && <div>出价策略: <span>{BidStrategyEnum[bidStrategy]}</span></div>}
         <div>广告出价: <span>{bidAmount}{`元/${OptimizationGoalEnum[optimizationGoal] || '千次曝光'}`}</span></div>
         <div>广告日预算: <span>{dailyBudget || '不限'}</span></div>
+        <div>广告状态: <span>{AdStatus[configuredStatus||'AD_STATUS_SUSPEND']}</span></div>
     </>
 })
 

src/pages/launchSystemNew/launchManage/createAd/creative/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import { Button, Col, Space, Spin, Tooltip, } from 'antd'
+import { Button, Col, Space, Spin, Tabs, Tooltip, } from 'antd'
 import style from '../index.less'
 import CreativeModal from "../../../components/creativeModal"
 import { CreateAdProps } from '@/services/launchAdq/createAd'
@@ -14,9 +14,12 @@ type Props = {
     getSysAdgroups: BaseResult<any, any>,
     getSysAdcreative: BaseResult<any, any>,
     clearData: () => void,
+    targetKey: string,
+    page_checked: boolean,
+    set_targetKey: (key: string) => void
 }
 function Creative(props: Props) {
-    let { queryForm, getSysAdgroups, getSysAdcreative, setQueryForm, clearData } = props
+    let { queryForm, getSysAdgroups, getSysAdcreative, setQueryForm, clearData, targetKey, set_targetKey, page_checked } = props
     const [adModalConfig, setAdModalConfig] = useState<ModalConfig>({//新建广告弹窗
         visible: false,
         type: 'add'
@@ -31,33 +34,73 @@ function Creative(props: Props) {
     // 获取创意详情
     const getInfo = useCallback((sysAdcreativeId) => {
         getSysAdcreative.run(sysAdcreativeId).then(res => {
-            setQueryForm({ ...queryForm, sysAdcreativeId, sysAdcreative: res });
+            let arr = queryForm.taskMediaMaps || []
+            arr[targetKey] = { sysAdcreative: { ...res, isTemplate: false } }
+            setQueryForm({ ...queryForm, sysAdcreativeId, taskMediaMaps: arr });
             setCreativeVisible(false);
             clearData()
         })
-    }, [queryForm])
+    }, [queryForm, targetKey])
+
+    // tabs新增和删除
+    const onEdit = useCallback((targetKey: string | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, action: 'add' | 'remove') => {
+        if (queryForm.taskMediaMaps) {
+            if (action === 'add') {
+                if (page_checked) {
+                    let arr: any = queryForm.taskMediaMaps || []
+                    let adqPageArr: any = queryForm.adqPageList || []
+                    let pageArr: any = queryForm.pageList || []
+                    adqPageArr[queryForm.taskMediaMaps.length.toString()] = adqPageArr[0]
+                    pageArr[queryForm.taskMediaMaps.length.toString()] = pageArr[0]
+                    arr = [...arr, { ...arr[0], sysAdcreative: '' }]
+                    setQueryForm({ ...queryForm, taskMediaMaps: arr, pageList: pageArr, adqPageList: adqPageArr })
+                } else {
+                    setQueryForm({ ...queryForm, taskMediaMaps: [...queryForm.taskMediaMaps, { sysAdcreative: '' }] })
+                }
+                set_targetKey(queryForm.taskMediaMaps.length.toString())
+            } else {
+                let arr = queryForm.taskMediaMaps
+                if (arr.length > 1) {
+                    arr = arr.filter((item, index) => index.toString() !== targetKey)
+                } else {
+                    arr = [{}]
+                }
+                set_targetKey((arr.length - 1).toString())
+                setQueryForm({ ...queryForm, taskMediaMaps: arr })
+            }
+        }
+    }, [queryForm, page_checked])
     return <Col span={12} className={style.conRightBorder}>
         <div className={style.top}>创意基本信息
-            {queryForm.sysAdcreative && <a onClick={() => {
-                setQueryForm({ ...queryForm, sysAdcreative: undefined, sysAdcreativeId: undefined })
-            }}>清空</a>}
+            {queryForm.taskMediaMaps && queryForm.taskMediaMaps?.length > 0 && <a onClick={() => {
+                setQueryForm({ ...queryForm, taskMediaMaps: [], sysAdcreativeId: undefined })
+            }}>全部清空</a>}
         </div>
         <div className={style.center}>
-            <Spin spinning={getSysAdcreative.loading}>
-                <div className={style.centerContent}>
-                    {(queryForm?.sysAdcreative && queryForm?.sysAdcreativeId) && <AdcreativeCol data={queryForm?.sysAdcreative} />}
-                </div>
-            </Spin>
+            <Tabs size={'small'} onEdit={onEdit} type="editable-card" activeKey={targetKey} onChange={(key) => { set_targetKey(key) }} >
+                {
+                    queryForm?.taskMediaMaps?.map((item, index) => {
+                        return <Tabs.TabPane key={index} tab={'创意' + (index + 1)}>
+                            <Spin spinning={getSysAdcreative.loading}>
+                                <div className={style.centerContent}>
+                                    {(item.sysAdcreative && queryForm?.sysAdcreativeId) && <AdcreativeCol data={item.sysAdcreative} />}
+                                </div>
+                            </Spin>
+                        </Tabs.TabPane >
+                    })
+                }
+            </Tabs>
+
         </div>
         <div className={style.bottom}>
             <Space size={20}>
                 {queryForm?.sysAdgroup ? <>
-                    <span onClick={() => { setCreativeVisible(true) }}>{queryForm?.sysAdcreative ? '重选创意' : '选择创意'}</span>
+                    <span onClick={() => { setCreativeVisible(true) }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative ? '重选创意' : '选择创意'}</span>
                 </> : <Tooltip title="请先设置广告">
                     <span>选择创意</span>
                 </Tooltip>}
                 {queryForm?.sysAdgroup ? <>
-                    <span onClick={() => { handleAdModalConfig(queryForm?.sysAdcreative ? { visible: true, type: 'edit' } : { visible: true, type: 'add' }) }}>{queryForm?.sysAdcreative ? '编辑创意' : '新建创意'}</span>
+                    <span onClick={() => { handleAdModalConfig(queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative ? { visible: true, type: 'edit' } : { visible: true, type: 'add' }) }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative ? '编辑创意' : '新建创意'}</span>
                 </> : <Tooltip title="请先设置广告">
                     <span>新建创意</span>
                 </Tooltip>}
@@ -67,9 +110,11 @@ function Creative(props: Props) {
         {creativeVisible && <CreativeModal siteSet={getSysAdgroups?.data?.siteSet} visible={creativeVisible} onClose={() => setCreativeVisible(false)} onChange={getInfo} sysAdcreativeId={queryForm?.sysAdcreativeId} promotedObjectType={queryForm.promotedObjectType as string} />}
         {/* 创建创意 */}
         {adModalConfig.visible && <CreativePup visible={adModalConfig.visible} type={adModalConfig.type} PupFn={handleAdModalConfig} callback={(values: any) => {
-            setQueryForm({ ...queryForm, sysTargeting: values, }); setCreativeVisible(false); clearData();
+            let arr = queryForm.taskMediaMaps || []
+            arr[targetKey] = { sysAdcreative: values }
+            setQueryForm({ ...queryForm, taskMediaMaps: arr }); setCreativeVisible(false); clearData();
             handleAdModalConfig({ visible: false, dataInfo: null, type: 'add' })
-        }} dataInfo={queryForm.sysAdcreative} queryForm={queryForm} />}
+        }} dataInfo={queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative} queryForm={queryForm} />}
     </Col>
 }
 export default Creative

src/pages/launchSystemNew/launchManage/createAd/creative/modal/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Modal, Form, Input, Divider, Select, Radio, Switch, Spin, List, Checkbox, Space, Button, message ,Image} from 'antd'
+import { Modal, Form, Input, Divider, Select, Radio, Switch, Spin, List, Checkbox, Space, Button, message, Image } from 'antd'
 import { SiteSetEnum, PromotedObjectType } from '@/services/launchAdq/enum'
 import styles from './index.less'
 import { useAjax } from '@/Hook/useAjax'
@@ -12,7 +12,6 @@ import { ModalConfig } from '../../ad';
 import { outAdcreativeTemplateIdFun } from '../../../localAd/adenum'
 import { CreateAdProps } from '@/services/launchAdq/createAd'
 import { createSysAdcreative } from '@/services/launchAdq/creative'
-import getMD5 from '@/components/MD5'
 interface Props {
     queryForm: Partial<CreateAdProps>,
     title?: string,
@@ -46,14 +45,14 @@ function CreativePup(props: Props) {
     const [descriptionShow, setdescriptionshow] = useState(false)
     const [endPageDescShow, setendPageDescnshow] = useState(false)
     const [videoImgs, set_videoImgs] = useState<{//视频封面图设置
-        activeUrl:string,//选中的视频封面图地址
-        preview:boolean,//是否开启图片点击预览
-        urlList:any[],//生成的视频封面列表
+        activeUrl: string,//选中的视频封面图地址
+        preview: boolean,//是否开启图片点击预览
+        urlList: any[],//生成的视频封面列表
     }>({
-        activeUrl:'',
-        preview:false,
-        urlList:[
-            'https://test-adq-media.oss-cn-hangzhou.aliyuncs.com/image/21D8D51AD98C4FF8BF41F1C2D28EA39F.jpg', 
+        activeUrl: '',
+        preview: false,
+        urlList: [
+            'https://test-adq-media.oss-cn-hangzhou.aliyuncs.com/image/21D8D51AD98C4FF8BF41F1C2D28EA39F.jpg',
             'https://test-adq-media.oss-cn-hangzhou.aliyuncs.com/image/80DBE1AB3EDE4E85ABAE5F1670D9FED0.jpg',
             'https://test-adq-media.oss-cn-hangzhou.aliyuncs.com/image/BCB2DAB86BDB4549BCB8E493C4F29E82.jpg',
             'https://test-adq-media.oss-cn-hangzhou.aliyuncs.com/image/545A4C2A5B874C82A9D1C0C063624AE5.jpg'
@@ -182,19 +181,20 @@ function CreativePup(props: Props) {
             if (!newValues?.siteSet) {
                 newValues['siteSet'] = queryForm.sysAdgroup.siteSet
             }
-            // 开启存为模板开关执行
-            if (template_checked && type === 'add') {
-                addSysAdgroup.run(newValues).then(res => {
-                    if (res) {
-                        callback(newValues)
-                    }
-                })
-            } else {
-                callback(newValues)
-            }
+            newValues['isTemplate'] = template_checked
+            // // 开启存为模板开关执行
+            // if (template_checked && type === 'add') {
+            //     addSysAdgroup.run(newValues).then(res => {
+            //         if (res) {
+            //             callback(newValues)
+            //         }
+            //     })
+            // } else {
+            callback(newValues)
+            // }
         })
         // PupFn({ visible: false })
-    }, [form, imgMaterialConfig, videoMaterialConfig, queryForm])
+    }, [form, imgMaterialConfig, videoMaterialConfig, queryForm, template_checked])
     // 获取创意形式列表
     useEffect(() => {
         if (siteSet?.length > 0 && promotedObjectType) {
@@ -423,6 +423,7 @@ function CreativePup(props: Props) {
                     type: 'video',
                     adcreativeTemplateId
                 })
+                obj = { ...obj, video: videoUrl }
             }
             if (imageUrl) {
                 setImgMaterialConfig({
@@ -432,6 +433,7 @@ function CreativePup(props: Props) {
                     type: 'image',
                     adcreativeTemplateId
                 })
+                obj = { ...obj, image: imageUrl }
             }
             if (imageUrlList) {
                 setImgMaterialConfig({
@@ -441,6 +443,7 @@ function CreativePup(props: Props) {
                     type: 'image_list',
                     adcreativeTemplateId
                 })
+                obj = { ...obj, image_list: imageUrlList }
             }
             if (shortVideoStruct) {
                 setVideoMaterialConfig({
@@ -450,6 +453,7 @@ function CreativePup(props: Props) {
                     type: 'short_video1',
                     adcreativeTemplateId
                 })
+                obj = { ...obj, short_video1: shortVideoStruct.shortVideo1Url }
             }
             form.setFieldsValue(obj)
         }
@@ -484,7 +488,7 @@ function CreativePup(props: Props) {
         footer={<Space>
             <Button onClick={() => { PupFn({ visible: false, dataInfo: null, type: 'add' }) }}>取消</Button>
             <Button type='primary' onClick={handleOk}>确定</Button>
-            {type === 'add' && <Checkbox checked={template_checked} onChange={(e) => {
+            {<Checkbox checked={template_checked} onChange={(e) => {
                 let checked = e.target.checked
                 settemplate_checked(checked)
                 localStorage.setItem('template_checked', checked ? '1' : '0')
@@ -735,7 +739,7 @@ function CreativePup(props: Props) {
                             })
                         }
                         {/* ============================================================落地页============================================================= */}
-                        <Form.Item label={<strong>落地页</strong>} name='pageType'>
+                        <Form.Item label={<strong>落地页</strong>} name='pageType' >
                             <Radio.Group>
                                 {
                                     pageTypeList?.map((item: any) => {
@@ -906,28 +910,28 @@ function CreativePup(props: Props) {
         {
             videoImgsVisbile && <Modal
                 visible={videoImgsVisbile}
-                title={<div>生成封面图 <Switch checkedChildren="开启预览" unCheckedChildren="关闭预览"  checked={videoImgs.preview} onChange={(checked)=>{set_videoImgs({...videoImgs,preview:checked})}}/></div>}
+                title={<div>生成封面图 <Switch checkedChildren="开启预览" unCheckedChildren="关闭预览" checked={videoImgs.preview} onChange={(checked) => { set_videoImgs({ ...videoImgs, preview: checked }) }} /></div>}
                 onOk={() => {
-                    if(videoImgs.activeUrl){
-                        setImgMaterialConfig({ ...imgMaterialConfig, list: [{url:videoImgs.activeUrl}] })
+                    if (videoImgs.activeUrl) {
+                        setImgMaterialConfig({ ...imgMaterialConfig, list: [{ url: videoImgs.activeUrl }] })
                         set_videoImgsVisbile(false)
-                    }else{
+                    } else {
                         message.error('请选择图片，获取使用取消按钮关闭弹窗！')
                     }
-                 }}
+                }}
                 onCancel={() => { set_videoImgsVisbile(false) }}
                 confirmLoading={getVideoCapture.loading}
                 width={600}
             >
 
-                <Radio.Group className={styles.videoImgs} onChange={(e)=>{
+                <Radio.Group className={styles.videoImgs} onChange={(e) => {
                     let url = e.target.value
-                    set_videoImgs({...videoImgs,activeUrl:url})
+                    set_videoImgs({ ...videoImgs, activeUrl: url })
                 }}>
                     {
-                        videoImgs?.urlList?.map((item: any,index:number) => {
+                        videoImgs?.urlList?.map((item: any, index: number) => {
                             return <Radio.Button value={item} key={index}>
-                                <Image src={item} preview={videoImgs.preview}/>
+                                <Image src={item} preview={videoImgs.preview} />
                             </Radio.Button>
                         })
                     }

src/pages/launchSystemNew/launchManage/createAd/index.less

@@ -5,7 +5,11 @@
     font-weight: 600;
   }
 }
-
+// #page_tabs,#ad_tabs{
+//   >div>div>div>div{
+//     padding: 5px;
+//   }
+// }
 
 .selector {
   border: 1px solid #dcdee2;
@@ -151,7 +155,8 @@
           height: 40px;
           text-align: center;
           line-height: 40px;
-
+          display: flex;
+          justify-content: center;
           span {
             cursor: pointer;
             color: #108ee9;

src/pages/launchSystemNew/launchManage/createAd/index.tsx

@@ -7,7 +7,7 @@ import { getTagsList } from "@/services/launchAdq/global"
 import { getSysAdgroupsInfo } from "@/services/launchAdq/localAd"
 import { getsysTargetingInfo } from "@/services/launchAdq/targeting"
 import { CloseOutlined, EditOutlined, QuestionCircleOutlined, SearchOutlined } from "@ant-design/icons"
-import { Button, Card, Col, Empty, Row, Select, Space, Spin, Tooltip, Image, message, Popover } from "antd"
+import { Button, Card, Col, Empty, Row, Select, Space, Spin, Tooltip, Image, message, Popover, Tabs, Checkbox } from "antd"
 import React, { useCallback, useEffect, useRef, useState } from "react"
 import { useModel } from "umi"
 import Ad from "./ad"
@@ -41,8 +41,9 @@ const CreateAd: React.FC = () => {
         adgroupName: undefined,  // 广告名称
         configuredStatus: 'AD_STATUS_SUSPEND',  // 广告状态
         sysAdcreativeId: undefined, // 创意ID
-        sysAdcreative: undefined, // 创意内容
-        sysPageId: undefined, // 落地页Id
+        taskMediaMaps: [], // 创意内容
+        pageList: [],//本地落地页详情入口
+        adqPageList: [],//云落地页
     })
     const [accountCreateLogs, setAccountCreateLogs] = useState<{ adAccountId: number, id: number, userActionSetsList?: number, productList?: any, conversionList?: any, customAudienceList?: any, excludedCustomAudienceList?: any, pageList?: any }[]>([])  // 账户
 
@@ -59,6 +60,8 @@ const CreateAd: React.FC = () => {
     const [tableSelect, setTableSelect] = useState<any[]>([])
     const [geoLocationList, setGeoLocationList] = useState<any>({}) // 所有地域列表
     const [modelList, setModelList] = useState<any>({})  // 所有品牌手机
+    const [targetKey, set_targetKey] = useState('0')//创意key
+    const [page_checked, set_page_checked] = useState(false)//创意key
     const { init, get } = useModel('useLaunchAdq.useBdMediaPup')
 
 
@@ -79,7 +82,6 @@ const CreateAd: React.FC = () => {
             setAccountCreateLogs(accountCreateLogs)
         }
     }, [])
-
     // 设置地域
     useEffect(() => {
         tagsList_REGION.run({ type: 'REGION' }).then(res => {
@@ -119,30 +121,8 @@ const CreateAd: React.FC = () => {
         }
     }, [getSysAdgroups?.data?.bidMode])
 
-    /** 获取创意详情 */
-    useEffect(() => {
-        if (queryForm?.sysAdcreativeId && queryForm.sysAdcreativeId !== getSysAdcreative.params[0]) {
-            getSysAdcreative.run(queryForm?.sysAdcreativeId).then(res=>{
-                setQueryForm({...queryForm,sysAdcreative:res})
-            })
-        }
-    }, [queryForm])
 
 
-    /** 获取落地页详情 */
-    useEffect(() => {
-        if (queryForm?.sysPageId) {
-            get.run({ mediaType: 'PAGE', sysMediaId: queryForm?.sysPageId }).then(res => {
-                if (!Object.keys(res)?.includes('fail')) {
-                    let data = res
-                    let pageElementsSpecList = data?.pageSpecsList[0]?.pageElementsSpecList
-                    setWxButtonList(() => (pageElementsSpecList as any[])?.filter((item: { elementType: string }) => item?.elementType === 'ENTERPRISE_WX'))
-                } else {
-                    setQueryForm({ ...queryForm, sysPageId: undefined })
-                }
-            })
-        }
-    }, [queryForm?.sysPageId])
 
     /** 删除商品内容 */
     const goodsDel = (index: number) => {
@@ -172,11 +152,7 @@ const CreateAd: React.FC = () => {
         setAccountCreateLogs(newArr)
     }
 
-    /** 设置落地页 */
-    const setPage = (e: any) => {
-        setQueryForm({ ...queryForm, sysPageId: e[0]?.id || undefined })
-        setSelectImgVisible(false)
-    }
+
 
     /** 预览 */
     const preview = () => {
@@ -196,16 +172,28 @@ const CreateAd: React.FC = () => {
             message.error('请选择定向')
             return
         }
-        if (!queryForm.sysAdcreativeId) {
+        if (!queryForm.taskMediaMaps?.every(item => item.sysAdcreative)) {
             message.error('请设置创意的基本信息')
             return
         }
-        if (!queryForm.sysPageId) {
+        if (!queryForm.taskMediaMaps?.every(item => item.sysPageId || item.pageId)) {
             message.error('请选择落地页')
             return
         }
-        let data = accountCreateLogs.map((item: any, index) => {
-            return { ...item, ...queryForm, sysAdGroupData: getSysAdgroups?.data, targetingData: getsysTargeting?.data, sysAdcreativeData: { ...getSysAdcreative?.data }, pageData: get?.data }
+        let data: any[] = []
+        accountCreateLogs.forEach((item: any) => {
+            queryForm.taskMediaMaps?.forEach((task, index) => {
+                let obj = {
+                    ...item,
+                    ...queryForm,
+                    sysAdGroupData: queryForm.sysAdgroup,
+                    targetingData: queryForm.sysTargeting,
+                    sysAdcreativeData: task.sysAdcreative,
+                    pageData: (queryForm.pageList as any)[index],
+                    myId: Number(item.id + '' + index)
+                }
+                data.push(obj)
+            })
         })
         console.log('data--->', data)
         setTableData(data)
@@ -214,7 +202,8 @@ const CreateAd: React.FC = () => {
     const submit = (data: { adgroupName: string, campaignName: string }) => {
         console.log(111111, tableSelect);
         let params = { ...queryForm, ...data }
-        let accountLogs = tableSelect.map((item: any) => {
+        console.log(accountCreateLogs)
+        let accountLogs = accountCreateLogs.map((item: any, index) => {
             // userActionSetsList 数据源  productList 商品
             let data: any = { adAccountId: item.id }
             if (item?.userActionSetsList?.length > 0) { // 数据源
@@ -231,11 +220,18 @@ const CreateAd: React.FC = () => {
                 data.excludedCustomAudience = item?.excludedCustomAudienceList?.map((item: any) => item.id)
             }
             if (item?.pageList) {
-                data.pageId = item?.pageList[0].id
+                data.pageId = item?.pageData?.id
             }
             return data
         })
         params.accountCreateLogs = accountLogs
+        delete params.sysAdgroupId
+        delete params.sysAdcreativeId
+        delete params.sysTargetingId
+        delete params.pageList
+        delete params.adqPageList
+        console.log('params', params)
+        // return
         createAdBatch.run(params).then(res => {
             if (res) {
                 sessionStorage.setItem('CAMP', data?.campaignName)
@@ -275,11 +271,71 @@ const CreateAd: React.FC = () => {
             adgroupName: undefined,  // 广告名称
             configuredStatus: 'AD_STATUS_SUSPEND',  // 广告状态
             sysAdcreativeId: undefined, // 创意ID
-            sysPageId: undefined, // 落地页Id
         })
     }
-    console.log(queryForm)
-
+    /** 设置落地页 */
+    const setPage = (e: any) => {
+        let arr: any = queryForm.taskMediaMaps || []
+        if (page_checked) {
+            arr = queryForm.taskMediaMaps?.map(item => ({ ...item, sysPageId: e[0]?.id, pageId: '', pageAccountId: '' }))
+        } else {
+            arr[targetKey as string] = { ...arr[targetKey as string], sysPageId: e[0]?.id, pageId: '', pageAccountId: '' }
+        }
+        getPageInfo(arr)
+        setSelectImgVisible(false)
+    }
+    /** 获取落地页详情 */
+    const getPageInfo = useCallback((arrList) => {
+        if (arrList && arrList[targetKey]?.sysPageId) {
+            get.run({ mediaType: 'PAGE', sysMediaId: arrList[targetKey]?.sysPageId }).then(res => {
+                if (!Object.keys(res)?.includes('fail')) {
+                    let data = res
+                    let pageElementsSpecList = data?.pageSpecsList[0]?.pageElementsSpecList
+                    let arr: any = queryForm.pageList || []
+                    if (page_checked) {
+                        arr = arr.map((item: any) => data)
+                    } else {
+                        arr[targetKey] = data
+                    }
+                    setQueryForm({ ...queryForm, pageList: arr, taskMediaMaps: arrList })//设置落地页详情数组
+                    setWxButtonList(() => (pageElementsSpecList as any[])?.filter((item: { elementType: string }) => item?.elementType === 'ENTERPRISE_WX'))
+                } else {
+                    //清空对应创意中的落地页ID
+                    let arr = queryForm.taskMediaMaps || []
+                    arr[targetKey].sysPageId = ''
+                    setQueryForm({ ...queryForm, taskMediaMaps: arr })
+                }
+            })
+        }
+    }, [queryForm, targetKey, page_checked])
+    // 设置云端落地页
+    const setAdqPage = useCallback((data) => {
+        let arr: any = queryForm.taskMediaMaps || []
+        let adqPageArr: any = queryForm.adqPageList || []
+        if (page_checked) {
+            adqPageArr = queryForm.taskMediaMaps?.map(item => data)
+            arr = queryForm.taskMediaMaps?.map(item => ({ ...item, sysPageId: '', pageId: data.pageId, pageAccountId: data.accountId }))
+        } else {
+            adqPageArr[targetKey as string] = data
+            arr[targetKey as string] = { ...arr[targetKey as string], sysPageId: '', pageId: data.pageId, pageAccountId: data.accountId }
+        }
+        setQueryForm({ ...queryForm, taskMediaMaps: arr, adqPageList: adqPageArr })
+
+    }, [queryForm, targetKey, page_checked])
+    // tabs新增和删除
+    const onEdit = useCallback((targetKey: string | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, action: 'add' | 'remove') => {
+        if (queryForm.taskMediaMaps) {
+            if (action === 'remove') {
+                let arr = queryForm.taskMediaMaps
+                let adqPageArr = queryForm.adqPageList || []
+                let pageArr = queryForm.pageList || []
+                adqPageArr[targetKey as string] = {}
+                pageArr[targetKey as string] = {}
+                arr[targetKey as string] = { ...arr[targetKey as string], pageId: '', sysPageId: '', pageAccountId: '' }
+                setQueryForm({ ...queryForm, taskMediaMaps: arr, pageList: pageArr, adqPageList: adqPageArr })
+            }
+        }
+    }, [queryForm, targetKey])
     return <Space direction="vertical" style={{ width: '100%' }}>
         <Card title={<div className={style.cardTitle}>配置区</div>} className={style.createAd} hoverable>
             <Space>
@@ -298,11 +354,12 @@ const CreateAd: React.FC = () => {
                         }
                         value={accountCreateLogs?.map((item: { id: number }) => item?.id)}
                         onChange={(e, option) => {
-                            setAccountCreateLogs(option?.map((item: any) => ({ adAccountId: item?.children, id: item?.value })))
+                            console.log(option)
+                            setAccountCreateLogs(option?.map((item: any) => ({ adAccountId: item?.children?.toString()?.split('——')[0], id: item?.value })))
                             clearData()
                         }}
                     >
-                        {getAdAccount?.data?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.accountId+'——'+item.remark}</Select.Option>)}
+                        {getAdAccount?.data?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.remark ? item.accountId + '——' + item.remark : item.accountId}</Select.Option>)}
                         {/* <Select.OptGroup label="Engineer">
                             <Select.Option value="20632113">20632113</Select.Option>
                         </Select.OptGroup> */}
@@ -312,7 +369,7 @@ const CreateAd: React.FC = () => {
                 <Selector label="推广目标">
                     <Select style={{ width: 200 }} value={queryForm?.promotedObjectType} placeholder="请选择推广目标" bordered={false} showSearch filterOption={(input: any, option: any) =>
                         (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
-                    } onChange={(e) => { setQueryForm({ ...queryForm, promotedObjectType: e ,sysAdgroup:null,sysAdgroupId:undefined,sysAdcreative:null,sysAdcreativeId:undefined}); clearData() }}>
+                    } onChange={(e) => { setQueryForm({ ...queryForm, promotedObjectType: e, sysAdgroup: null, sysAdgroupId: undefined, taskMediaMaps: [], sysAdcreativeId: undefined }); clearData() }}>
                         {Object.keys(PromotedObjectType).map(key => {
                             return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
                         })}
@@ -322,7 +379,7 @@ const CreateAd: React.FC = () => {
 
             <div className={style.cardBody}>
                 <Row className={style.content}>
-                    <Col span={16} className={style.conLeft}>
+                    <Col span={12} className={style.conLeft}>
                         <Row className={`${style.conTitle} ${style.conRightBorder}`}><Col span={24}>广告</Col></Row>
                         <Row className={style.items}>
                             {/* =============广告基本信息=========== */}
@@ -341,7 +398,7 @@ const CreateAd: React.FC = () => {
                                 accountCreateLogs={accountCreateLogs}
                             />
                             {/* =============商品=========== */}
-                            <Col className={style.conRightBorder}>
+                            <Col className={style.conRightBorder} span={5}>
                                 <div className={style.top}>
                                     商品{/* <span>已选：{1}</span> */}
                                 </div>
@@ -372,7 +429,7 @@ const CreateAd: React.FC = () => {
                                 </div>
                             </Col>
                             {/* 数据源 */}
-                            <Col className={style.conRightBorder}>
+                            <Col className={style.conRightBorder} span={5}>
                                 <div className={style.top}>
                                     数据源 {/* <span>已选：{1}</span> */}
                                 </div>
@@ -406,71 +463,82 @@ const CreateAd: React.FC = () => {
                         </Row>
                     </Col>
                     {/* =============广告创意=========== */}
-                    <Col span={8} className={style.conRight}>
+                    <Col span={12} className={style.conRight}>
                         <Row className={style.conTitle}><Col span={24}>广告创意</Col></Row>
                         <Row className={style.items}>
                             {/* 创意 */}
-                            <Creative queryForm={queryForm} setQueryForm={setQueryForm} getSysAdgroups={getSysAdgroups} clearData={clearData} getSysAdcreative={getSysAdcreative}/>
+                            <Creative queryForm={queryForm} setQueryForm={setQueryForm} getSysAdgroups={getSysAdgroups} clearData={clearData} getSysAdcreative={getSysAdcreative} set_targetKey={set_targetKey} targetKey={targetKey} page_checked={page_checked} />
                             {/* 落地页 */}
                             <Col span={12} >
                                 <div className={style.top}>
-                                    <span>落地页 <Tooltip title="云端落地页优先于本地落地页">
+                                    落地页
+                                    {/* <span >落地页<Tooltip title="云端落地页优先于本地落地页">
                                         <QuestionCircleOutlined />
-                                    </Tooltip></span>
+                                    </Tooltip></span> */}
                                     {wxButtonList?.length > 0 && <Button type="link" size="small">配置客服</Button>}
+                                    {<Checkbox checked={page_checked} onChange={(e) => {
+                                        let checked = e.target.checked
+                                        set_page_checked(checked)
+                                    }}><span style={{ fontSize: 12, fontWeight: 400, color: '#635f5f' }}>同落地页<Tooltip title="勾选后请重新选择一次落地页,将覆盖全部创意，使用同一个落地页">
+                                        <QuestionCircleOutlined style={{ color: '#03a9f4', marginLeft: 2 }} />
+                                    </Tooltip></span></Checkbox>}
                                 </div>
                                 <div className={style.center}>
-                                    <Spin spinning={get.loading}>
-                                        <div className={style.centerContent}>
-                                            {(queryForm?.sysPageId || accountCreateLogs?.some((item: any) => item.pageList?.length > 0) && !Object.keys(get?.data)?.includes('fail')) ? <>
-                                                {(queryForm?.sysPageId && !accountCreateLogs?.every((item: any) => item.pageList?.length > 0)) && <>
-                                                    <div>落地页名称：{get?.data?.pageName || ''}</div>
-                                                    <div>分享名称：{get?.data?.shareContentSpec?.shareTitle || ''}</div>
-                                                    <div>分享描述：{get?.data?.shareContentSpec?.shareDescription || ''}</div>
-                                                    <div style={{ marginBottom: 10 }}>原生推广页顶部素材预览：
-                                                        <div>{get?.data?.pageSpecsList && get?.data?.pageSpecsList[0]?.pageElementsSpecList?.filter((item: any, index: number) => index === 0)?.map((item: { elementType: 'TOP_IMAGE' | 'TOP_VIDEO' | 'TOP_SLIDER', topImageSpec: any, topSliderSpec: any, topVideoSpec: any }, index: number) => {
-                                                            switch (item?.elementType) {
-                                                                case 'TOP_IMAGE':
-                                                                    return <Image width={80} src={item.topImageSpec.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} key={index} />
-                                                                case 'TOP_SLIDER':
-                                                                    return <Space wrap key={index}>
-                                                                        {item?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <Image width={70} src={url} style={{ borderRadius: 8 }} key={'TOP_SLIDER' + index} />)}
-                                                                    </Space>
-                                                                case 'TOP_VIDEO':
-                                                                    return <video src={item.topVideoSpec.videoUrl} width={150} controls key={index}></video>
-                                                            }
-                                                        })}</div>
-                                                    </div>
-                                                </>}
-                                                {accountCreateLogs?.map((item: any, index: number) => {
-                                                    if (item?.pageList && item?.pageList?.length > 0) {
-                                                        return <div className={style.acc} key={index}>
-                                                            <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
+                                    <Tabs size={'small'} onEdit={onEdit} type="editable-card" activeKey={targetKey} onChange={(key) => { set_targetKey(key) }} hideAdd >
+                                        {
+                                            queryForm?.taskMediaMaps?.map((item, index) => {
+                                                return <Tabs.TabPane tab={'创意' + (index + 1)} key={index} >
+                                                    <Spin spinning={get.loading}>
+                                                        <div className={style.centerContent}>
                                                             {
-                                                                item?.pageList?.map((pack: { pageName: string, type: string, id: number }, index1: number) => {
-                                                                    return <div className={style.accCon} key={pack.id}> <span className={style.title}>{pack.pageName}</span> <CloseOutlined className={style.close} onClick={() => {
-                                                                        pageDel(index)
-                                                                    }} /></div>
-                                                                })
-                                                            }
+                                                                item?.sysPageId || item?.pageId ? <>
+                                                                    {
+                                                                        (item?.sysPageId && queryForm?.pageList) && <>
+                                                                            <div>落地页名称：{queryForm?.pageList[targetKey]?.pageName || ''}</div>
+                                                                            <div>分享名称：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareTitle || ''}</div>
+                                                                            <div>分享描述：{queryForm?.pageList[targetKey]?.shareContentSpec?.shareDescription || ''}</div>
+                                                                            <div style={{ marginBottom: 10 }}>原生推广页顶部素材预览：
+                                                                                <div>{queryForm?.pageList[targetKey]?.pageSpecsList && queryForm?.pageList[targetKey]?.pageSpecsList[0]?.pageElementsSpecList?.filter((item: any, index: number) => index === 0)?.map((item: { elementType: 'TOP_IMAGE' | 'TOP_VIDEO' | 'TOP_SLIDER', topImageSpec: any, topSliderSpec: any, topVideoSpec: any }, index: number) => {
+                                                                                    switch (item?.elementType) {
+                                                                                        case 'TOP_IMAGE':
+                                                                                            return <Image width={80} src={item?.topImageSpec?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} key={index} />
+                                                                                        case 'TOP_SLIDER':
+                                                                                            return <Space wrap key={index}>
+                                                                                                {item?.topSliderSpec?.imageUrlList?.map((url: string, index: number) => <Image width={70} src={url} style={{ borderRadius: 8 }} key={'TOP_SLIDER' + index} />)}
+                                                                                            </Space>
+                                                                                        case 'TOP_VIDEO':
+                                                                                            return <video src={item?.topVideoSpec?.videoUrl} width={150} controls key={index}></video>
+                                                                                    }
+                                                                                })}</div>
+                                                                            </div>
+                                                                        </>
+                                                                    }
+                                                                    {
+                                                                        item?.pageId && queryForm?.adqPageList && <div className={style.acc} >
+                                                                            <div className={style.accName} style={{ fontWeight: 800 }}>{queryForm?.adqPageList[targetKey]?.adAccountId}</div>
+                                                                            <div className={style.accCon}>
+                                                                                <span className={style.title}>{queryForm?.adqPageList[targetKey]?.pageName}</span>
+                                                                            </div>
+                                                                        </div>
+                                                                    }
+                                                                </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                                                         </div>
-                                                    } else {
-                                                        return null
-                                                    }
-                                                })}
-                                            </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
-                                        </div>
-                                    </Spin>
+                                                    </Spin>
+                                                </Tabs.TabPane>
+                                            })
+                                        }
+                                    </Tabs>
                                 </div>
-                                <div className={style.bottom}>{queryForm?.sysAdcreativeId ? <>
-                                    {queryForm?.sysPageId && <Button type="link" onClick={() => { setLookVisible(true) }}>查看</Button>}
-                                    <Button type="link" onClick={() => { setSelectImgVisible(true) }}>{queryForm?.sysPageId ? '修改' : '选择落地页'}</Button>
-                                    {accountCreateLogs?.length > 0 ? <Button type="link" onClick={() => { setPageVisible(true) }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
-                                        <Button type="link">云端落地页</Button>
+                                <div className={style.bottom}>{
+                                    queryForm?.sysAdcreativeId ? <>
+                                        {queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId && <Button type="link" onClick={() => { setLookVisible(true) }}>查看</Button>}
+                                        <Button type="link" onClick={() => { setSelectImgVisible(true) }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId ? '修改' : '选择落地页'}</Button>
+                                        {accountCreateLogs?.length > 0 ? <Button type="link" onClick={() => { setPageVisible(true) }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
+                                            <Button type="link">云端落地页</Button>
+                                        </Tooltip>}
+                                    </> : <Tooltip title="请先设置创意">
+                                        <Button type="link"><span>选择落地页</span></Button>
                                     </Tooltip>}
-                                </> : <Tooltip title="请先设置创意">
-                                    <Button type="link"><span>选择落地页</span></Button>
-                                </Tooltip>}
                                 </div>
                             </Col>
                         </Row>
@@ -489,15 +557,15 @@ const CreateAd: React.FC = () => {
             className={style.createAd}
             hoverable
             extra={tableData?.length > 0 ? <Space>
-                <span>推广计划总数：{accountCreateLogs?.length}</span>
-                <span>广告总数：{accountCreateLogs?.length}</span>
-                {tableSelect?.length > 0 && <span> 已选：<span style={{ color: '#1890FF' }}>{tableSelect?.length}</span> 条</span>}
+                <span>推广计划总数：{tableData?.length}</span>
+                <span>广告总数：{tableData?.length}</span>
+                {/* {tableSelect?.length > 0 && <span> 已选：<span style={{ color: '#1890FF' }}>{tableSelect?.length}</span> 条</span>} */}
                 {
                     <Button type='primary' onClick={() => {
-                        if (tableSelect.length === 0) {
-                            message.error('请选择要提交的计划！')
-                            return
-                        };
+                        // if (tableSelect.length === 0) {
+                        //     message.error('请选择要提交的计划！')
+                        //     return
+                        // };
                         setSubVisible(true)
                     }}>批量提交审核</Button>
                 }
@@ -512,13 +580,14 @@ const CreateAd: React.FC = () => {
                         total={0}
                         size="small"
                         bordered
-                        scroll={{ x: 1800 }}
-                        rowSelection={{
-                            selectedRowKeys: tableSelect?.map((item: any) => item?.id.toString()),
-                            onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
-                                setTableSelect(selectedRows)
-                            }
-                        }}
+                        scroll={{ x: 2000 }}
+                        myKey={'myId'}
+                    // rowSelection={{
+                    //     selectedRowKeys: tableSelect?.map((item: any) => item?.myId.toString()),
+                    //     onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
+                    //         setTableSelect(selectedRows)
+                    //     }
+                    // }}
                     />
                 </div>
             </div> : <div style={{ minHeight: 400, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -527,7 +596,7 @@ const CreateAd: React.FC = () => {
         </Card>
 
 
-       
+
         {/* 选择商品 */}
         {goodsVisible && <GoodsModal visible={goodsVisible} data={accountCreateLogs} onClose={() => setGoodsVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setGoodsVisible(false); clearData() }} />}
         {/* 选择数据源 */}
@@ -535,11 +604,11 @@ const CreateAd: React.FC = () => {
         {/* 选择转化ID */}
         {idVisible && <IdModal visible={idVisible} data={accountCreateLogs} onClose={() => setIdVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false); clearData() }} />}
         {/* 选择ADQ落地页 */}
-        {pageVisible && <PageModal visible={pageVisible} data={accountCreateLogs} onClose={() => setPageVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setPageVisible(false); clearData() }} />}
+        {pageVisible && <PageModal visible={pageVisible} data={getAdAccount?.data?.data} onClose={() => setPageVisible(false)} onChange={(e) => { console.log('选择ADQ落地页', e); setAdqPage(e); setPageVisible(false); clearData() }} />}
         {/* 选择素材 */}
         {selectImgVisible && <SelectCloud visible={selectImgVisible} onClose={() => setSelectImgVisible(false)} onChange={setPage} isBack={false} />}
         {/* 查看落地页 */}
-        {lookVisible && <LookLanding visible={lookVisible} onClose={() => setLookVisible(false)} id={queryForm?.sysPageId as any} />}
+        {lookVisible && <LookLanding visible={lookVisible} onClose={() => setLookVisible(false)} id={queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey].sysPageId} />}
         {/* 设置名称 */}
         {subVisible && <SubmitModal data={getSysAdgroups?.data} visible={subVisible} onClose={() => setSubVisible(false)} onChange={submit} ajax={createAdBatch} />}
     </Space>

src/pages/launchSystemNew/launchManage/createAd/submitModal.tsx

@@ -19,49 +19,49 @@ const SubmitModal: React.FC<Props> = (props) => {
 
     /********************/
     const { visible, onClose, onChange, ajax, data } = props
-    const { endDate, beginDate, bidAmount } = data
+    // const { endDate, beginDate, bidAmount } = data
     const [form] = Form.useForm()
     let dateType = Form.useWatch('dateType', form)
     const [initialValues, setInitialValues] = useState<{ configuredStatus?: string, dateType?: string, date?: [any, any], beginDate?: any, bidAmount?: number, firstDayBeginTime?: any }>({ dateType: '1', configuredStatus: 'AD_STATUS_SUSPEND' })
     /********************/
 
-    useEffect(() => {
-        let params: { configuredStatus?: string, dateType?: string, date?: [any, any], beginDate?: any, bidAmount?: number, firstDayBeginTime?: any } = { bidAmount, configuredStatus: 'AD_STATUS_SUSPEND' }
-        if (endDate) {
-            params.dateType = '1'
-            params.date = [moment(beginDate), moment(endDate)]
-        } else {
-            params.dateType = '2'
-            params.beginDate = moment(beginDate)
-        }
-        setInitialValues(params)
-        setTimeout(() => {
-            form.resetFields();
-        }, 50)
-    }, [])
+    // useEffect(() => {
+    //     let params: { configuredStatus?: string, dateType?: string, date?: [any, any], beginDate?: any, bidAmount?: number, firstDayBeginTime?: any } = { bidAmount, configuredStatus: 'AD_STATUS_SUSPEND' }
+    //     if (endDate) {
+    //         params.dateType = '1'
+    //         params.date = [moment(beginDate), moment(endDate)]
+    //     } else {
+    //         params.dateType = '2'
+    //         params.beginDate = moment(beginDate)
+    //     }
+    //     setInitialValues(params)
+    //     setTimeout(() => {
+    //         form.resetFields();
+    //     }, 50)
+    // }, [])
 
     const handleOk = async () => {
         form.submit()
         let data = await form.validateFields()
-        const { dateType, date, beginDate, firstDayBeginTime, bidAmount, ...value } = data
-        let params: any = {}
-        if (dateType === '1') { // 选择开始与结束日期
-            if (date) {
-                params.beginDate = moment(date[0]).format('YYYY-MM-DD')
-                params.endDate = moment(date[1]).format('YYYY-MM-DD')
-            }
-        } else { // 长期投放
-            if (beginDate) {
-                params.beginDate = moment(beginDate).format('YYYY-MM-DD')
-            }
-        }
-        if (firstDayBeginTime) {
-            params.firstDayBeginTime = moment(firstDayBeginTime).format('hh:mm:ss')
-        }
-        if (bidAmount) {
-            params.bidAmount = bidAmount
-        }
-        onChange && onChange({ ...value, ...params })
+        // const { dateType, date, beginDate, firstDayBeginTime, bidAmount, ...value } = data
+        // let params: any = {}
+        // if (dateType === '1') { // 选择开始与结束日期
+        //     if (date) {
+        //         params.beginDate = moment(date[0]).format('YYYY-MM-DD')
+        //         params.endDate = moment(date[1]).format('YYYY-MM-DD')
+        //     }
+        // } else { // 长期投放
+        //     if (beginDate) {
+        //         params.beginDate = moment(beginDate).format('YYYY-MM-DD')
+        //     }
+        // }
+        // if (firstDayBeginTime) {
+        //     params.firstDayBeginTime = moment(firstDayBeginTime).format('hh:mm:ss')
+        // }
+        // if (bidAmount) {
+        //     params.bidAmount = bidAmount
+        // }
+        onChange && onChange(data)
     }
 
     return <Modal title="设置名称" visible={visible} confirmLoading={ajax?.loading} onOk={handleOk} onCancel={() => { onClose && onClose() }}>
@@ -73,13 +73,13 @@ const SubmitModal: React.FC<Props> = (props) => {
             autoComplete="off"
             initialValues={{ ...initialValues }}
         >
-            <Form.Item label={<strong>广告名称</strong>} name="adgroupName">
+            {/* <Form.Item label={<strong>广告名称</strong>} name="adgroupName">
                 <Input placeholder="请输入广告名称" />
-            </Form.Item>
+            </Form.Item> */}
             <Form.Item label={<strong>计划名称</strong>} name="campaignName">
                 <Input placeholder="请输入计划名称" />
             </Form.Item>
-            <Form.Item label={<strong>广告状态</strong>} name="configuredStatus" rules={[{ required: true, message: '请选择广告状态' }]}>
+            {/* <Form.Item label={<strong>广告状态</strong>} name="configuredStatus" rules={[{ required: true, message: '请选择广告状态' }]}>
                 <Select placeholder="选择广告状态">
                     {Object.keys(AdStatus).map(key => {
                         return <Select.Option value={key} key={key}>{AdStatus[key]}</Select.Option>
@@ -103,7 +103,7 @@ const SubmitModal: React.FC<Props> = (props) => {
             </Form.Item>
             <Form.Item label={<strong>出价</strong>} name='bidAmount' rules={[{ required: true, message: '请输入价格' }]}>
                 <Input placeholder='输入价格 元/千次曝光' />
-            </Form.Item>
+            </Form.Item> */}
         </Form>
     </Modal>
 }

src/pages/launchSystemNew/launchManage/createAd/targeting/index.tsx

@@ -46,7 +46,7 @@ function TargetIng(props: Props) {
      // 获取定向详情
      const getInfo = useCallback((sysTargetingId) => {
         getsysTargeting.run(sysTargetingId).then(res=>{
-            setQueryForm({ ...queryForm, sysTargetingId: sysTargetingId,sysTargeting:res });
+            setQueryForm({ ...queryForm, sysTargetingId: sysTargetingId,sysTargeting:{...res,isTemplate:false}  });
              setDxVisible(false);
               clearData() 
         })

src/pages/launchSystemNew/launchManage/createAd/targeting/modal/index.tsx

@@ -183,16 +183,17 @@ function TargetingPup(props: Props) {
                 }
             })
             // console.log(JSON.stringify(newValues))
+            newValues['isTemplate']=template_checked
             // 开启存为模板开关执行
-            if (template_checked && type === 'add') {
-                create.run(newValues).then(res => {
-                    if (res) {
-                        callback(newValues)
-                    }
-                })
-            } else {
+            // if (template_checked && type === 'add') {
+            //     create.run(newValues).then(res => {
+            //         if (res) {
+            //             callback(newValues)
+            //         }
+            //     })
+            // } else {
                 callback(newValues)
-            }
+            // }
         })
     }, [form, regionsList, template_checked, type])
 
@@ -321,7 +322,7 @@ function TargetingPup(props: Props) {
         footer={<Space>
             <Button onClick={() => { PupFn({ visible: false, dataInfo: null, type: 'add' }) }}>取消</Button>
             <Button type='primary' onClick={handleOk}>确定</Button>
-            {type === 'add' &&<Checkbox checked={template_checked} onChange={(e) => {
+            {<Checkbox checked={template_checked} onChange={(e) => {
                 let checked = e.target.checked
                 settemplate_checked(checked)
                 localStorage.setItem('template_checked', checked ? '1' : '0')

src/services/launchAdq/createAd.ts

@@ -13,14 +13,15 @@ export interface CreateAdProps {
     totalBudget?: number, // 推广计划总预算
     speedMode: string, // 投放速度模式
     sysAdgroupId: number,  // 广告组ID
+    pageList:any[],//本地落地页详情入口
+    adqPageList:any[],//云落地页
     sysAdgroup:any,//广告组内容
     sysTargetingId: number,  // 定向包 id
     sysTargeting: any,  // 定向包内容
     adgroupName: string,  // 广告名称
     configuredStatus: string,  // 广告状态
     sysAdcreativeId: number, // 创意ID
-    sysAdcreative:any,//创意内容
-    sysPageId: number, // 落地页Id
+    taskMediaMaps:any[],//创意内容
     beginDate?: string, // 开始日期
     firstDayBeginTime?: string,  //hh:mm:ss 开始时间
     endDate?: string, // 结束日期