fix

package.json

@@ -62,11 +62,7 @@
     "@types/sortablejs": "^1.10.6",
     "@types/spark-md5": "^3.0.2",
     "ahooks": "^2.9.1",
-<<<<<<< HEAD
     "antd": "4.20.0",
-=======
-    "antd": "^4.22.1",
->>>>>>> c6ba6b223357f81861c3e879b714233e7fecf542
     "antd-img-crop": "^3.13.2",
     "array-move": "^3.0.1",
     "classnames": "^2.2.6",

src/components/FileBoxAD/index.tsx

@@ -184,7 +184,7 @@ function FlieBox(props: Props) {
             },
         }
     }, [folderId, moveId, mediaType])
-
+    
     return <div style={{ display: 'flex', flexFlow: 'row' }}>
         {get_folder_tree?.data?.length > 0 && <div style={{ flexShrink: 0 }}>
             {treeEl}

src/models/useLaunchAdq/useBdMediaPup.ts

@@ -329,24 +329,28 @@ function useBdMediaPup() {
     const changeClickFile = useCallback((e: any, item: { id: any, folder?: boolean }, isAll?: boolean, noFile?: boolean) => {
         let { id } = item
         e?.stopPropagation()//阻止冒泡传递到文件夹被点击事件
-        let state = selectFile?.some((i) => i === id)
-        if (state) {//存在就是删除
-            set({ selectFile: selectFile?.filter(i => i !== id), selectItem: selectItem?.filter((i: { id: number }) => i.id !== id) })
-        } else {//否则新增
-            if (num === 1) {
-                if (state) {//存在就是删除
-                    set({ selectFile: selectFile?.filter(i => i !== id), selectItem: [] })
-                } else {//否则新增
-                    set({ selectFile: [id], selectItem: [item] })
-                }
-            } else {
-                if (selectFile && num && (selectFile?.length >= num)) {
-                    message.error(`只能选择${num}张`)
-                    return
+        if (mediaType === 'PAGE') {
+
+        } else {
+            let state = selectFile?.some((i) => i === id)
+            if (state) {//存在就是删除
+                set({ selectFile: selectFile?.filter(i => i !== id), selectItem: selectItem?.filter((i: { id: number }) => i.id !== id) })
+            } else {//否则新增
+                if (num === 1) {
+                    if (state) {//存在就是删除
+                        set({ selectFile: selectFile?.filter(i => i !== id), selectItem: [] })
+                    } else {//否则新增
+                        set({ selectFile: [id], selectItem: [item] })
+                    }
+                } else {
+                    if (selectFile && num && (selectFile?.length >= num)) {
+                        message.error(`只能选择${num}张`)
+                        return
+                    }
+                    let newSelectItem = selectItem || []
+                    newSelectItem.push(item)
+                    set({ selectItem: newSelectItem, selectFile: [...selectFile as number[], id] })
                 }
-                let newSelectItem = selectItem || []
-                newSelectItem.push(item)
-                set({ selectItem: newSelectItem, selectFile: [...selectFile as number[], id] })
             }
         }
     }, [selectFile, mediaType, num])

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

@@ -0,0 +1,122 @@
+import Tables from "@/components/Tables"
+import { useAjax } from "@/Hook/useAjax"
+import { getDataSourceApi, sysDataSourceApi } from "@/services/launchAdq/createAd"
+import { CheckOutlined, SyncOutlined } from "@ant-design/icons"
+import { Button, Modal, Space } from "antd"
+import React, { useEffect, useState } from "react"
+import style from '../goodsModal/index.less'
+import columns from './tableConfig'
+
+
+/**
+ * 获取数据源
+ * @returns 
+ */
+interface Props {
+    visible?: boolean,
+    onClose?: () => void,
+    onChange?: (data: any) => void,
+    data: any
+}
+const DataSourceModal: React.FC<Props> = (props) => {
+
+    /************************/
+    const { visible, onClose, data: data1, onChange } = props
+    const [tableData, setTableData] = useState<any[]>([])//table数据
+    const [selectAdz, setSelectAdz] = useState<number>(1)   // 选择广告主
+    const [data, setData] = useState<any>(data1)
+
+    const getDataSource = useAjax((params) => getDataSourceApi(params))
+    const sysDataSource = useAjax((params) => sysDataSourceApi(params))
+    /************************/
+
+    useEffect(() => {
+        if (data?.length > 0) {
+            getList([data[selectAdz - 1].adAccountId])
+        } else {
+            setTableData([])
+        }
+    }, [selectAdz])
+
+    // 获取数据源
+    const getList = (params: number[]) => {
+        getDataSource.run(params).then(res => {
+            console.log('res===>', res)
+            if (res && Object.keys(res)?.indexOf(params[0].toString()) !== -1) {
+                setTableData(res[params[0]]?.map((item: { userActionSetId: string }) => ({ ...item, id: item?.userActionSetId })))
+            } else {
+                setTableData([])
+            }
+        })
+    }
+
+    const handleOk = () => {
+        onChange && onChange(data)
+    }
+
+    // 同步数据源
+    const synDataSourceList = () => {
+        sysDataSource.run(data?.map((item: { id: number }) => item?.id)).then(res => {
+            getList([data[selectAdz - 1].adAccountId])
+        })
+    }
+
+    /** 设置选中广告主 */
+    const handleSelectAdz = (value: number, item: any) => {
+        if (value === selectAdz) {
+            return
+        }
+        setSelectAdz(value)
+    }
+
+    /** 表格选折 */
+    const onChangeTable = (selectedRowKeys: React.Key[], selectedRows: any) => {
+        let newData = JSON.parse(JSON.stringify(data))
+        newData[selectAdz - 1]['userActionSetsList'] = selectedRows
+        setData([...newData])
+    }
+
+    return <Modal
+        title={<Space>
+            <span>数据源</span>
+            <Button size="small" onClick={() => { synDataSourceList() }} loading={sysDataSource?.loading}>同步数据源</Button>
+        </Space>}
+        visible={visible}
+        onCancel={() => { onClose && onClose() }}
+        onOk={handleOk}
+        width={1100}
+        className={style.SelectPackage}
+        bodyStyle={{ padding: '0 10px 0 10px' }}
+    >
+        <div className={style.content}>
+            <div className={style.left}>
+                <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].userActionSetsList?.length > 0 && <CheckOutlined style={{ color: '#1890ff' }} />}
+                    </div>))}
+            </div>
+            <div className={style.right}>
+                <Space style={{ marginBottom: 10 }}>
+                    <Button icon={<SyncOutlined />} type='link' loading={getDataSource?.loading} onClick={() => { getList([data[selectAdz - 1].adAccountId]) }}></Button>
+                </Space>
+                <Tables
+                    columns={columns()}
+                    dataSource={tableData}
+                    size="small"
+                    loading={getDataSource?.loading}
+                    scroll={{ y: 300 }}
+                    bordered
+                    rowSelection={{
+                        type: 'checkbox',
+                        selectedRowKeys: data[selectAdz - 1]?.userActionSetsList?.map((item: any) => item?.id?.toString()),
+                        onChange: onChangeTable
+                    }}
+                />
+            </div>
+        </div>
+    </Modal>
+}
+
+export default React.memo(DataSourceModal)

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

@@ -0,0 +1,38 @@
+import React from "react"
+let columns = () => [
+    {
+        title: '数据源名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        render: (a: any, b: any) => {
+            return <span style={{fontSize: "12px"}}>{a}</span>
+        }
+    },
+    {
+        title: '数据源ID',
+        dataIndex: 'userActionSetId',
+        key: 'userActionSetId',
+        align: 'center'
+    },
+    {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        align: 'center',
+        render: (a: any, b: any) => {
+            return <span style={{fontSize: "12px"}}>{a === 'WECHAT' ? '公众号' : a}</span>
+        }
+    },
+    {
+        title: '接入状态',
+        dataIndex: 'activateStatus',
+        key: 'activateStatus',
+        align: 'center',
+        render: (a: any, b: any) => {
+            return <span style={{fontSize: "12px"}}>{a ? '已接入' : '未接入'}</span>
+        }
+    }
+]
+
+export default columns

src/pages/launchSystemNew/components/goodsModal/index.less

@@ -0,0 +1,61 @@
+.SelectPackage{
+    .content{
+        width: 100%;
+        display: flex;
+        justify-content: flex-start;
+        min-height: 200px;
+        .left{
+            width: 200px;
+            padding-top: 10px;
+            border-right: 1px solid #f0f0f0;
+            box-sizing: border-box;
+            .title{
+                font-weight: 700;
+                padding-left: 10px;
+                box-sizing: border-box;
+            }
+            .accItem{
+                height: 32px;
+                line-height: 32px;
+                cursor: pointer;
+                padding-left: 10px;
+                padding-right: 10px;
+                box-sizing: border-box;
+                margin-bottom: 1px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                &:hover{
+                    background-color: #e6f7ff;
+                    color: #1890ff;
+                }
+            }
+            .select{
+                background-color: #e6f7ff;
+                color: #1890ff;
+                border-right: 2px solid #1890ff;
+            }
+            .alreadySelect{
+                background-color: #d1f0ff;
+            }
+        }
+        .right{
+            padding: 10px;
+            box-sizing: border-box;
+            width: calc(100% - 200px);
+        }
+    }
+
+    .refresh{
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .tips{
+            margin-left: 20px;
+            div{
+                font-size: 12px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,130 @@
+import Tables from "@/components/Tables"
+import { useAjax } from "@/Hook/useAjax"
+import { getGoodsApi, synGoodsApi } from "@/services/launchAdq/createAd"
+import { CheckOutlined, SyncOutlined } from "@ant-design/icons"
+import { Button, Modal, Space } from "antd"
+import React, { useEffect, useState } from "react"
+import style from './index.less'
+import columns from './tableConfig'
+
+/**
+ * 获取商品列表
+ * @returns 
+ */
+interface Props {
+    visible?: boolean,
+    onClose?: () => void,
+    onChange?: (data: any) => void,
+    data: any
+}
+const GoodsModal: React.FC<Props> = (props) => {
+
+    /************************/
+    const { visible, onClose, data: data1, onChange } = props
+    const [tableData, setTableData] = useState<any[]>([])//table数据
+    const [selectAdz, setSelectAdz] = useState<number>(1)   // 选择广告主
+    const [data, setData] = useState<any>(data1)
+
+    const getGoods = useAjax((params) => getGoodsApi(params))
+    const synGoods = useAjax((params) => synGoodsApi(params))
+    /************************/
+
+    useEffect(() => {
+        if (data?.length > 0) {
+            getList([data[selectAdz - 1].adAccountId])
+        } else {
+            setTableData([])
+        }
+    }, [selectAdz])
+
+    // 获取商品列表
+    const getList = (params: number[]) => {
+        getGoods.run(params).then(res => {
+            console.log('res===>', res)
+            if (res && Object.keys(res)?.indexOf(params[0].toString()) !== -1) {
+                setTableData(res[params[0]]?.map((item: { productOuterId: string }) => ({ ...item, id: Number(item?.productOuterId?.replace(/\D/ig, '')) })))
+            } else {
+                setTableData([])
+            }
+        })
+    }
+
+    const handleOk = () => {
+        onChange && onChange(data)
+    }
+
+    // 同步商品库
+    const synGoodsList = () => {
+        synGoods.run(data?.map((item: { id: number }) => item?.id)).then(res => {
+            getList([data[selectAdz - 1].adAccountId])
+        })
+    }
+
+    /** 设置选中广告主 */
+    const handleSelectAdz = (value: number, item: any) => {
+        if (value === selectAdz) {
+            return
+        }
+        setSelectAdz(value)
+    }
+
+    /** 表格选折 */
+    const onChangeTable = (selectedRowKeys: React.Key[], selectedRows: any) => {
+        let newData = JSON.parse(JSON.stringify(data))
+        newData[selectAdz - 1]['productList'] = selectedRows
+        setData([...newData])
+    }
+
+    return <Modal
+        title={<Space>
+            <span>商品库</span>
+            <Button size="small" onClick={() => { synGoodsList() }} loading={synGoods?.loading}>同步商品库</Button>
+        </Space>}
+        visible={visible}
+        onCancel={() => { onClose && onClose() }}
+        onOk={handleOk}
+        width={1100}
+        className={style.SelectPackage}
+        bodyStyle={{ padding: '0 10px 0 10px' }}
+    >
+        <div className={style.content}>
+            <div className={style.left}>
+                <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].productList?.length > 0 && <CheckOutlined style={{ color: '#1890ff' }} />}
+                    </div>))}
+            </div>
+            {/* <div className={style.left}>
+                <h4 className={style.title}>商品库</h4>
+                {goodsData?.map((item: { name: string, goodsList: any[], catalogId: number }, index: number) => (
+                    <div key={index} onClick={() => { handleGoods(index + 1, { ...queryFormDetail, godsId: goodsData[index].catalogId }) }} className={`${style.accItem} ${selectGoods === index + 1 && style.select} `}>
+                        {item?.name}
+                        {orientPackage[selectAdz - 1]?.goods?.key === item?.catalogId && orientPackage[selectAdz - 1].goods?.data?.length > 0 && <CheckOutlined style={{ color: '#1890ff' }} />}
+                    </div>))
+                }
+            </div> */}
+            <div className={style.right}>
+                <Space style={{ marginBottom: 10 }}>
+                    <Button icon={<SyncOutlined />} type='link' loading={getGoods?.loading} onClick={() => { getList([data[selectAdz - 1].adAccountId]) }}></Button>
+                </Space>
+                <Tables
+                    columns={columns()}
+                    dataSource={tableData}
+                    size="small"
+                    loading={getGoods?.loading}
+                    scroll={{ y: 300 }}
+                    bordered
+                    rowSelection={{
+                        type: 'radio',
+                        selectedRowKeys: data[selectAdz - 1]?.productList?.map((item: any) => item?.id?.toString()),
+                        onChange: onChangeTable
+                    }}
+                />
+            </div>
+        </div>
+    </Modal>
+}
+
+export default React.memo(GoodsModal)

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

@@ -0,0 +1,55 @@
+import React from "react"
+let columns = () => [
+    {
+        title: '商品名称',
+        dataIndex: 'productName',
+        key: 'productName',
+        align: 'center',
+        ellipsis: true,
+        render: (a: any, b: any) => {
+            return <span style={{ fontSize: "12px" }}>{a}</span>
+        }
+    },
+    {
+        title: '商品封面',
+        dataIndex: 'productImageUrl',
+        key: 'productImageUrl',
+        ellipsis: true,
+        align: 'center',
+        render: (a: any, b: any) => {
+            return <img src={a} style={{ height: 50 }} />
+        }
+    },
+    {
+        title: '描述',
+        dataIndex: 'description',
+        key: 'description',
+        align: 'center',
+        ellipsis: true,
+        render: (a: any, b: any) => {
+            return <span style={{ fontSize: "12px" }}>{a}</span>
+        }
+    },
+    {
+        title: '商品库名称',
+        dataIndex: 'productCatalog',
+        key: 'productCatalog',
+        align: 'center',
+        ellipsis: true,
+        render: (a: any, b: any) => {
+            return <span style={{ fontSize: "12px" }}>{a?.productCatalogName}</span>
+        }
+    },
+    {
+        title: '分类',
+        dataIndex: 'secondCatalogName',
+        key: 'secondCatalogName',
+        align: 'center',
+        ellipsis: true,
+        render: (a: any, b: any) => {
+            return <span style={{ fontSize: "12px" }}>{b.firstCatalogName}-{b.secondCatalogName}-{b.thirdCatalogName}</span>
+        }
+    },
+]
+
+export default columns

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

@@ -0,0 +1,121 @@
+import Tables from "@/components/Tables"
+import { useAjax } from "@/Hook/useAjax"
+import { getIdApi, sysIdApi } from "@/services/launchAdq/createAd"
+import { CheckOutlined, SyncOutlined } from "@ant-design/icons"
+import { Button, Modal, Space } from "antd"
+import React, { useEffect, useState } from "react"
+import style from '../goodsModal/index.less'
+import columns from './tableConfig'
+
+/**
+ * 获取转化ID
+ * @returns 
+ */
+interface Props {
+    visible?: boolean,
+    onClose?: () => void,
+    onChange?: (data: any) => void,
+    data: any
+}
+const IdModal: React.FC<Props> = (props) => {
+
+    /************************/
+    const { visible, onClose, onChange, data: data1 } = props
+    const [tableData, setTableData] = useState<any[]>([])//table数据
+    const [selectAdz, setSelectAdz] = useState<number>(1)   // 选择广告主
+    const [data, setData] = useState<any>(data1)
+
+    const getId = useAjax((params) => getIdApi(params))
+    const sysId = useAjax((params) => sysIdApi(params))
+    /************************/
+
+    useEffect(() => {
+        if (data?.length > 0) {
+            getList([data[selectAdz - 1].adAccountId])
+        } else {
+            setTableData([])
+        }
+    }, [selectAdz])
+
+    // 获取数据源
+    const getList = (params: number[]) => {
+        getId.run(params).then(res => {
+            if (res && Object.keys(res)?.indexOf(params[0].toString()) !== -1) {
+                setTableData(res[params[0]]?.map((item: { userActionSetId: string }) => ({ ...item, id: item?.userActionSetId })))
+            } else {
+                setTableData([])
+            }
+        })
+    }
+
+    const handleOk = () => {
+        onChange && onChange(data)
+    }
+
+    // 同步商品库
+    const synIdList = () => {
+        sysId.run(data?.map((item: { id: number }) => item?.id)).then(res => {
+            getList([data[selectAdz - 1].adAccountId])
+        })
+    }
+
+    /** 设置选中广告主 */
+    const handleSelectAdz = (value: number, item: any) => {
+        if (value === selectAdz) {
+            return
+        }
+        setSelectAdz(value)
+    }
+
+    /** 表格选折 */
+    const onChangeTable = (selectedRowKeys: React.Key[], selectedRows: any) => {
+        let newData = JSON.parse(JSON.stringify(data))
+        newData[selectAdz - 1]['userActionSetsList'] = selectedRows
+        setData([...newData])
+    }
+
+    return <Modal
+        title={<Space>
+            <span>商品库</span>
+            <Button size="small" onClick={() => { synIdList() }} loading={sysId?.loading}>同步商品库</Button>
+        </Space>}
+        visible={visible}
+        onCancel={() => { onClose && onClose() }}
+        onOk={handleOk}
+        width={1100}
+        className={style.SelectPackage}
+        bodyStyle={{ padding: '0 10px 0 10px' }}
+    >
+        <div className={style.content}>
+            <div className={style.left}>
+                <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].conversionList?.length > 0 && <CheckOutlined style={{ color: '#1890ff' }} />}
+                    </div>))}
+            </div>
+            <div className={style.right}>
+                <Space style={{ marginBottom: 10 }}>
+                    <Button icon={<SyncOutlined />} type='link' loading={getId?.loading} onClick={() => { getList([data[selectAdz - 1].adAccountId]) }}></Button>
+                </Space>
+                <Tables
+                    columns={columns()}
+                    dataSource={tableData}
+                    size="small"
+                    loading={getId?.loading}
+                    scroll={{ y: 300 }}
+                    bordered
+                    rowSelection={{
+                        type: 'checkbox',
+                        selectedRowKeys: data[selectAdz - 1]?.conversionList?.map((item: any) => item?.id?.toString()),
+                        onChange: onChangeTable
+                    }}
+                />
+            </div>
+        </div>
+    </Modal>
+}
+
+
+export default React.memo(IdModal)

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

@@ -0,0 +1,38 @@
+import React from "react"
+let columns = () => [
+    {
+        title: '数据源名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        render: (a: any, b: any) => {
+            return <span style={{fontSize: "12px"}}>{a}</span>
+        }
+    },
+    {
+        title: '数据源ID',
+        dataIndex: 'userActionSetId',
+        key: 'userActionSetId',
+        align: 'center'
+    },
+    {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        align: 'center',
+        render: (a: any, b: any) => {
+            return <span style={{fontSize: "12px"}}>{a === 'WECHAT' ? '公众号' : a}</span>
+        }
+    },
+    {
+        title: '接入状态',
+        dataIndex: 'activateStatus',
+        key: 'activateStatus',
+        align: 'center',
+        render: (a: any, b: any) => {
+            return <span style={{fontSize: "12px"}}>{a ? '已接入' : '未接入'}</span>
+        }
+    }
+]
+
+export default columns

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

@@ -55,6 +55,7 @@
     .conRightBorder {
       border-right: 1px solid #f0f0f0;
       box-sizing: border-box;
+      flex: 1;
     }
 
     .items {
@@ -93,6 +94,7 @@
             width: 100%;
             min-height: 200px;
           }
+
           .acc {
             margin-bottom: 14px;
           }
@@ -108,6 +110,7 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            position: relative;
 
             >span.title {
               width: 90%;
@@ -120,6 +123,10 @@
               cursor: pointer;
               margin-right: 10px;
               display: none;
+              position: absolute;
+              right: 4px;
+              top: 50%;
+              transform: translateY(-50%);
             }
 
             &:hover {

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

@@ -3,10 +3,15 @@ import { CreateAdProps } from "@/services/launchAdq/createAd"
 import { BidModeEnum, BidStrategyEnum, OptimizationGoalEnum, PromotedObjectType, SiteSetEnum } from "@/services/launchAdq/enum"
 import { getSysAdgroupsInfo } from "@/services/launchAdq/localAd"
 import { getsysTargetingInfo } from "@/services/launchAdq/targeting"
-import { Card, Col, Empty, Row, Select, Space, Spin, Tooltip } from "antd"
+import { CloseOutlined } from "@ant-design/icons"
+import { Button, Card, Col, Empty, Row, Select, Space, Spin, Tooltip } from "antd"
 import React, { useEffect, useState } from "react"
 import { useModel } from "umi"
 import AdModal from "../../components/adModal"
+import DataSourceModal from "../../components/dataSourceModal"
+import GoodsModal from "../../components/goodsModal"
+import IdModal from "../../components/idModal"
+import SelectCloud from "../../components/selectCloud"
 import TargetingModal from "../../components/targetingModal"
 import style from './index.less'
 import Selector from "./selector"
@@ -27,17 +32,23 @@ const CreateAd: React.FC = () => {
         sysAdcreativeId: undefined, // 创意ID
         sysPageId: undefined, // 落地页Id
     })
-    const [accountCreateLogs, setAccountCreateLogs] = useState<{ adAccountId: number, id: number, userActionSets?: number }[]>([])  // 账户
+    const [accountCreateLogs, setAccountCreateLogs] = useState<{ adAccountId: number, id: number, userActionSetsList?: number, productList?: any, conversionList?: any }[]>([])  // 账户
 
     const [adVisible, setAdVisible] = useState<boolean>(false) // 选择广告弹窗控制
     const [dxVisible, setDxVisible] = useState<boolean>(false) // 选择定向弹窗控制
+    const [goodsVisible, setGoodsVisible] = useState<boolean>(false) // 选择商品弹窗控制
+    const [sourceVisible, setSourceVisible] = useState<boolean>(false) // 选择数据源弹窗控制
+    const [idVisible, setIdVisible] = useState<boolean>(false) // 选择转化ID弹窗控制
+    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false) // 选择转化ID弹窗控制
     const getSysAdgroups = useAjax((params) => getSysAdgroupsInfo(params))
     const getsysTargeting = useAjax((params) => getsysTargetingInfo(params))
+    const { init } = useModel('useLaunchAdq.useBdMediaPup')
     /*************************/
 
     // 获取账户列表
     useEffect(() => {
         getAdAccount.run()
+        init({ mediaType: 'PAGE' })
     }, [])
 
     /** 获取广告详情 */
@@ -53,9 +64,25 @@ const CreateAd: React.FC = () => {
         }
     }, [queryForm?.sysTargetingId])
 
-    console.log('==========>', accountCreateLogs);
+    /** 删除商品内容 */
+    const goodsDel = (index: number) => {
+        let newArr = JSON.parse(JSON.stringify(accountCreateLogs))
+        delete newArr[index].productList
+        setAccountCreateLogs(newArr)
+    }
 
+    /** 删除数据源 */
+    const sourceDel = (index: number, num: number) => {
+        console.log(index, num);
+        let newArr = JSON.parse(JSON.stringify(accountCreateLogs))
+        newArr[index].userActionSetsList?.splice(num, 1)
+        setAccountCreateLogs(newArr)
+    }
 
+    /** 设置落地页 */
+    const setPage = (e: any) => {
+        console.log(22222, e)
+    }
 
     return <Card title={<div className={style.cardTitle}>配置区</div>} className={style.createAd} hoverable>
         <Space>
@@ -94,11 +121,11 @@ const CreateAd: React.FC = () => {
 
         <div className={style.cardBody}>
             <Row className={style.content}>
-                <Col span={18} className={style.conLeft}>
+                <Col span={16} className={style.conLeft}>
                     <Row className={`${style.conTitle} ${style.conRightBorder}`}><Col span={24}>广告</Col></Row>
                     <Row className={style.items}>
                         {/* =============广告基本信息=========== */}
-                        <Col span={6} className={style.conRightBorder}>
+                        <Col className={style.conRightBorder}>
                             <div className={style.top}>广告基本信息</div>
                             <div className={style.center}>
                                 <Spin spinning={getSysAdgroups.loading}>
@@ -125,7 +152,7 @@ const CreateAd: React.FC = () => {
                             </div>
                         </Col>
                         {/* =============定向包=========== */}
-                        <Col span={6} className={style.conRightBorder}>
+                        <Col className={style.conRightBorder}>
                             <div className={style.top}>
                                 定向{/* <span>已选：{1}</span> */}
                             </div>
@@ -135,7 +162,6 @@ const CreateAd: React.FC = () => {
                                         {getsysTargeting?.data ? <>
                                             <div>定向名称: {getsysTargeting?.data?.targetingName}</div>
                                             <div>定向描述: {getsysTargeting?.data?.description}</div>
-                                            <div>定向描述: {getsysTargeting?.data?.description}</div>
                                         </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                                     </div>
                                 </Spin>
@@ -143,64 +169,90 @@ const CreateAd: React.FC = () => {
                             <div className={style.bottom}><span onClick={() => { setDxVisible(true) }}>{getsysTargeting?.data ? '修改' : '添加'}</span></div>
                         </Col>
                         {/* =============商品=========== */}
-                        <Col span={6} className={style.conRightBorder}>
+                        <Col className={style.conRightBorder}>
                             <div className={style.top}>
-                                商品<span>已选：{1}</span>
+                                商品{/* <span>已选：{1}</span> */}
                             </div>
                             <div className={style.center}>
-
+                                <div className={style.centerContent}>
+                                    {accountCreateLogs?.map((item: any, index: number) => {
+                                        if (item?.productList) {
+                                            return <div className={style.acc} key={index}>
+                                                <div className={style.accName}>{item.adAccountId}</div>
+                                                {
+                                                    item?.productList?.map((pack: { productName: string, author: string, id: number }, index: number) => {
+                                                        return <div className={style.accCon} key={pack.id}>{pack.productName}<CloseOutlined className={style.close} onClick={() => {
+                                                            goodsDel(index)
+                                                        }} /></div>
+                                                    })
+                                                }
+                                            </div>
+                                        } else {
+                                            return null
+                                        }
+                                    })}
+                                </div>
                             </div>
                             <div className={style.bottom}>
-                                {accountCreateLogs?.length > 0 ? <span onClick={() => { }}>添加</span> : <Tooltip title="请先选择媒体账户">
-                                    <span>添加</span>
+                                {accountCreateLogs?.length > 0 ? <span onClick={() => { setGoodsVisible(true) }}>编辑</span> : <Tooltip title="请先选择媒体账户">
+                                    <span>编辑</span>
                                 </Tooltip>}
                             </div>
                         </Col>
                         {/* 数据源 */}
-                        <Col span={6} className={style.conRightBorder}>
+                        <Col className={style.conRightBorder}>
                             <div className={style.top}>
-                                数据源<span>已选：{1}</span>
+                                数据源 {/* <span>已选：{1}</span> */}
                             </div>
                             <div className={style.center}>
-
+                                {/* userActionSetsList */}
+                                <div className={style.centerContent}>
+                                    {accountCreateLogs?.map((item: any, index: number) => {
+                                        if (item?.userActionSetsList && item?.userActionSetsList?.length > 0) {
+                                            return <div className={style.acc} key={index}>
+                                                <div className={style.accName}>{item.adAccountId}</div>
+                                                {
+                                                    item?.userActionSetsList?.map((pack: { name: string, type: string, id: number }, index1: number) => {
+                                                        return <div className={style.accCon} key={pack.id}> <span className={style.title}>{pack.name}{' > '}{pack.type}</span> <CloseOutlined className={style.close} onClick={() => {
+                                                            sourceDel(index, index1)
+                                                        }} /></div>
+                                                    })
+                                                }
+                                            </div>
+                                        } else {
+                                            return null
+                                        }
+                                    })}
+                                </div>
                             </div>
                             <div className={style.bottom}>
-                                {accountCreateLogs?.length > 0 ? <span onClick={() => { }}>添加</span> : <Tooltip title="请先选择媒体账户">
-                                    <span>添加</span>
+                                {accountCreateLogs?.length > 0 ? <span onClick={() => { setSourceVisible(true) }}>编辑</span> : <Tooltip title="请先选择媒体账户">
+                                    <span>编辑</span>
                                 </Tooltip>}
                             </div>
                         </Col>
                     </Row>
                 </Col>
                 {/* =============广告创意=========== */}
-                <Col span={6} className={style.conRight}>
+                <Col span={8} className={style.conRight}>
                     <Row className={style.conTitle}><Col span={24}>广告创意</Col></Row>
                     <Row className={style.items}>
-                        <Col span={24}>
+                        <Col span={12} className={style.conRightBorder}>
                             <div className={style.top}>创意基本信息</div>
                             <div className={style.center}>
 
                             </div>
                             <div className={style.bottom}><span onClick={() => { }}>编辑</span></div>
                         </Col>
-                        {/* <Col span={6}>
-                                <div className={style.top}>创意素材<span>已选：0</span></div>
-                                <div className={style.center}>
-                                </div>
-                                <div className={style.bottom}><span>添加</span></div>
-                            </Col>
-                            <Col span={6}>
-                                <div className={style.top}>创意文案</div>
-                                <div className={style.center}>
-                                </div>
-                                <div className={style.bottom}><span>添加</span></div>
-                            </Col>
-                            <Col span={6}>
-                                <div className={style.top}>落地页<span>已选：0</span></div>
-                                <div className={style.center}>
+                        <Col span={12} >
+                            <div className={style.top}>落地页</div>
+                            <div className={style.center}>
+                                <div className={style.centerContent}>
+                                    <div>落地页：<Button type="link" onClick={() => { setSelectImgVisible(true) }}>选择落地页</Button></div>
                                 </div>
-                                <div className={style.bottom}><span>添加</span></div>
-                            </Col> */}
+                            </div>
+                            {/* <div className={style.bottom}><span>添加</span></div> */}
+                        </Col>
                     </Row>
                 </Col>
             </Row>
@@ -216,6 +268,14 @@ const CreateAd: React.FC = () => {
         {adVisible && <AdModal visible={adVisible} onClose={() => setAdVisible(false)} promotedObjectType={queryForm.promotedObjectType as string} onChange={(e) => { setQueryForm({ ...queryForm, sysAdgroupsId: e }); setAdVisible(false) }} />}
         {/* 选择定向 */}
         {dxVisible && <TargetingModal visible={dxVisible} onClose={() => setDxVisible(false)} onChange={(e) => { setQueryForm({ ...queryForm, sysTargetingId: e }); setDxVisible(false) }} />}
+        {/* 选择商品 */}
+        {goodsVisible && <GoodsModal visible={goodsVisible} data={accountCreateLogs} onClose={() => setGoodsVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setGoodsVisible(false) }} />}
+        {/* 选择数据源 */}
+        {sourceVisible && <DataSourceModal visible={sourceVisible} data={accountCreateLogs} onClose={() => setSourceVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false) }} />}
+        {/* 选择转化ID */}
+        {idVisible && <IdModal visible={idVisible} data={accountCreateLogs} onClose={() => setIdVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setSourceVisible(false) }} />}
+        {/* 选择素材 */}
+        {selectImgVisible && <SelectCloud visible={selectImgVisible} onClose={() => setSelectImgVisible(false)} onChange={setPage} />}
     </Card>
 }
 

src/services/launchAdq/createAd.ts

@@ -31,4 +31,79 @@ export async function getSysProductCatalogApi(data: CreateAdProps) {
         method: 'POST',
         data
     })
+}
+
+
+
+/**
+ * 获取商品列表
+ * @param data
+ * @returns 
+ */
+export async function getGoodsApi(data: number[]) {
+    return request(api + `/adq/product/allByAccountWithCatalog`, {
+        method: 'POST',
+        data
+    })
+}
+/**
+ * 同步商品库
+ * @param data
+ * @returns 
+ */
+export async function synGoodsApi(data: number[]) {
+    return request(api + `/adq/product/syncProductAndCatalogByAdAccountId`, {
+        method: 'PUT',
+        data
+    })
+}
+
+
+/**
+ * 获取数据源
+ * @param data
+ * @returns 
+ */
+ export async function getDataSourceApi(data: number[]) {
+    return request(api + `/adq/userActionSets/allByAccount`, {
+        method: 'POST',
+        data
+    })
+}
+
+/**
+ * 同步数据源
+ * @param data 
+ * @returns 
+ */
+export async function sysDataSourceApi(data: number[]) {
+    return request(api + `/adq/userActionSets/syncByAdAccountId`, {
+        method: 'PATCH',
+        data
+    })
+}
+
+/**
+ * 获取转化ID
+ * @param data 
+ * @returns 
+ */
+export async function getIdApi(data: number[]) {
+    return request(api + `/adq/conversions/allByAccount`, {
+        method: 'POST',
+        data
+    })
+}
+
+
+/**
+ * 同步转化ID
+ * @param data 
+ * @returns 
+ */
+export async function sysIdApi(data: number[]) {
+    return request(api + `/adq/conversions/syncByAdAccountId`, {
+        method: 'PUT',
+        data
+    })
 }