|  | @@ -1,14 +1,16 @@
 | 
											
												
													
														|  |  import { CreateAdProps } from "@/services/launchAdq/createAd"
 |  |  import { CreateAdProps } from "@/services/launchAdq/createAd"
 | 
											
												
													
														|  |  import { BaseResult } from "@ahooksjs/use-request/lib/types"
 |  |  import { BaseResult } from "@ahooksjs/use-request/lib/types"
 | 
											
												
													
														|  | -import { CloseOutlined } from "@ant-design/icons"
 |  | 
 | 
											
												
													
														|  | -import { Button, Col, Empty, Popover, Space, Spin, Tooltip } from "antd"
 |  | 
 | 
											
												
													
														|  | -import React, { useCallback, useState } from "react"
 |  | 
 | 
											
												
													
														|  | 
 |  | +import { CloseOutlined, DownOutlined } from "@ant-design/icons"
 | 
											
												
													
														|  | 
 |  | +import { Button, Col, Dropdown, Empty, Menu, Popover, Space, Spin, Tooltip } from "antd"
 | 
											
												
													
														|  | 
 |  | +import React, { useCallback, useEffect, useState } from "react"
 | 
											
												
													
														|  |  import TargetingModal from "../../../components/targetingModal"
 |  |  import TargetingModal from "../../../components/targetingModal"
 | 
											
												
													
														|  |  import TargetingPup from "./modal"
 |  |  import TargetingPup from "./modal"
 | 
											
												
													
														|  |  import TargetingTooltip from "../../../components/targetingTooltip"
 |  |  import TargetingTooltip from "../../../components/targetingTooltip"
 | 
											
												
													
														|  |  import CrowdPackModal from "../../../components/crowdPackModal"
 |  |  import CrowdPackModal from "../../../components/crowdPackModal"
 | 
											
												
													
														|  |  import style from '../index.less'
 |  |  import style from '../index.less'
 | 
											
												
													
														|  |  import { ModalConfig } from "./modal"
 |  |  import { ModalConfig } from "./modal"
 | 
											
												
													
														|  | 
 |  | +import ExpandModal from "@/pages/launchSystemNew/components/expandModal"
 | 
											
												
													
														|  | 
 |  | +import { ExpandTargeting } from "@/services/launchAdq/enum"
 | 
											
												
													
														|  |  type Props = {
 |  |  type Props = {
 | 
											
												
													
														|  |      queryForm: Partial<CreateAdProps>,
 |  |      queryForm: Partial<CreateAdProps>,
 | 
											
												
													
														|  |      setQueryForm: React.Dispatch<React.SetStateAction<Partial<CreateAdProps>>>,
 |  |      setQueryForm: React.Dispatch<React.SetStateAction<Partial<CreateAdProps>>>,
 | 
											
										
											
												
													
														|  | @@ -38,6 +40,7 @@ function TargetIng(props: Props) {
 | 
											
												
													
														|  |      })
 |  |      })
 | 
											
												
													
														|  |      const [dxVisible, setDxVisible] = useState<boolean>(false) // 选择定向弹窗控制
 |  |      const [dxVisible, setDxVisible] = useState<boolean>(false) // 选择定向弹窗控制
 | 
											
												
													
														|  |      const [cpVisible, setCpVisible] = useState<boolean>(false) // 选择设置名称弹窗控制
 |  |      const [cpVisible, setCpVisible] = useState<boolean>(false) // 选择设置名称弹窗控制
 | 
											
												
													
														|  | 
 |  | +    const [expandVisible, setExpandVisible] = useState<boolean>(false) // 自动扩量弹窗控制
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |      // 设置变量
 |  |      // 设置变量
 | 
											
												
													
														|  |      const handleAdModalConfig = useCallback((arg: ModalConfig) => {
 |  |      const handleAdModalConfig = useCallback((arg: ModalConfig) => {
 | 
											
										
											
												
													
														|  | @@ -51,15 +54,39 @@ function TargetIng(props: Props) {
 | 
											
												
													
														|  |              clearData()
 |  |              clearData()
 | 
											
												
													
														|  |          })
 |  |          })
 | 
											
												
													
														|  |      }, [queryForm])
 |  |      }, [queryForm])
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  |      return <Col className={style.conRightBorder}>
 |  |      return <Col className={style.conRightBorder}>
 | 
											
												
													
														|  |          <div className={style.top}>
 |  |          <div className={style.top}>
 | 
											
												
													
														|  |              定向
 |  |              定向
 | 
											
												
													
														|  |              {/* (queryForm.sysAdgroup?.bidMode === 'BID_MODE_CPM' || queryForm.sysAdgroup?.bidMode === 'BID_MODE_CPC') &&  */}
 |  |              {/* (queryForm.sysAdgroup?.bidMode === 'BID_MODE_CPM' || queryForm.sysAdgroup?.bidMode === 'BID_MODE_CPC') &&  */}
 | 
											
												
													
														|  | -            {<>{
 |  | 
 | 
											
												
													
														|  | -                accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setCpVisible(true)}>选择定向包</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
 |  | 
 | 
											
												
													
														|  | -                    <Button type="link" style={{ fontSize: 12, padding: 0 }}>选择定向包</Button>
 |  | 
 | 
											
												
													
														|  | -                </Tooltip>
 |  | 
 | 
											
												
													
														|  | -            }</>}
 |  | 
 | 
											
												
													
														|  | 
 |  | +            <Dropdown
 | 
											
												
													
														|  | 
 |  | +                overlay={<Menu style={{ padding: 0 }} items={[
 | 
											
												
													
														|  | 
 |  | +                    {
 | 
											
												
													
														|  | 
 |  | +                        key: '1',
 | 
											
												
													
														|  | 
 |  | +                        label: <>
 | 
											
												
													
														|  | 
 |  | +                            {accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setCpVisible(true)}>选择定向包</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
 | 
											
												
													
														|  | 
 |  | +                                <Button type="link" style={{ fontSize: 12, padding: 0 }}>选择定向包</Button>
 | 
											
												
													
														|  | 
 |  | +                            </Tooltip>}
 | 
											
												
													
														|  | 
 |  | +                        </>
 | 
											
												
													
														|  | 
 |  | +                    },
 | 
											
												
													
														|  | 
 |  | +                    {
 | 
											
												
													
														|  | 
 |  | +                        key: '2',
 | 
											
												
													
														|  | 
 |  | +                        label: <>
 | 
											
												
													
														|  | 
 |  | +                            {accountCreateLogs?.length > 0 && queryForm?.sysTargeting ? <Button type="link" style={{ fontSize: 12, padding: 0 }} onClick={() => setExpandVisible(true)}>自动扩量</Button> : <Tooltip title={accountCreateLogs?.length > 0 ? `请先添加定向` : `请先选择媒体账户`}>
 | 
											
												
													
														|  | 
 |  | +                                <Button type="link" style={{ fontSize: 12, padding: 0 }}>自动扩量</Button>
 | 
											
												
													
														|  | 
 |  | +                            </Tooltip>}
 | 
											
												
													
														|  | 
 |  | +                        </>
 | 
											
												
													
														|  | 
 |  | +                    }
 | 
											
												
													
														|  | 
 |  | +                ]} />}
 | 
											
												
													
														|  | 
 |  | +            >
 | 
											
												
													
														|  | 
 |  | +                <a onClick={e => e.preventDefault()}>
 | 
											
												
													
														|  | 
 |  | +                    <Space>
 | 
											
												
													
														|  | 
 |  | +                        扩展
 | 
											
												
													
														|  | 
 |  | +                        <DownOutlined />
 | 
											
												
													
														|  | 
 |  | +                    </Space>
 | 
											
												
													
														|  | 
 |  | +                </a>
 | 
											
												
													
														|  | 
 |  | +            </Dropdown>
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  |              {queryForm.sysTargeting && <a onClick={() => {
 |  |              {queryForm.sysTargeting && <a onClick={() => {
 | 
											
												
													
														|  |                  setQueryForm({ ...queryForm, sysTargeting: undefined, sysTargetingId: undefined })
 |  |                  setQueryForm({ ...queryForm, sysTargeting: undefined, sysTargetingId: undefined })
 | 
											
												
													
														|  |                  setAccountCreateLogs([])
 |  |                  setAccountCreateLogs([])
 | 
											
										
											
												
													
														|  | @@ -69,40 +96,19 @@ function TargetIng(props: Props) {
 | 
											
												
													
														|  |              <Spin spinning={getsysTargeting.loading}>
 |  |              <Spin spinning={getsysTargeting.loading}>
 | 
											
												
													
														|  |                  <div className={style.centerContent}>
 |  |                  <div className={style.centerContent}>
 | 
											
												
													
														|  |                      {queryForm?.sysTargeting ? <>
 |  |                      {queryForm?.sysTargeting ? <>
 | 
											
												
													
														|  | -                        {accountCreateLogs?.some((item: any) => item?.customAudienceList?.length > 0) ?
 |  | 
 | 
											
												
													
														|  | -                         <>
 |  | 
 | 
											
												
													
														|  | -                            {queryForm.sysTargeting && <Popover
 |  | 
 | 
											
												
													
														|  | -                                content={<div className={style.popover}>
 |  | 
 | 
											
												
													
														|  | -                                    <TargetingTooltip data={queryForm.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
 |  | 
 | 
											
												
													
														|  | -                                </div>}
 |  | 
 | 
											
												
													
														|  | -                                trigger="hover"
 |  | 
 | 
											
												
													
														|  | -                                placement="right"
 |  | 
 | 
											
												
													
														|  | -                            >
 |  | 
 | 
											
												
													
														|  | -                                <div className={style.popoverContent}>
 |  | 
 | 
											
												
													
														|  | -                                    <div><strong>定向名称:</strong> <span style={{color:"#5a5a5a"}}>{queryForm?.sysTargeting?.targetingName}</span></div>
 |  | 
 | 
											
												
													
														|  | -                                    <div><strong>定向描述:</strong> <span style={{color:"#5a5a5a"}}>{queryForm?.sysTargeting?.description || '<空>'}</span></div>
 |  | 
 | 
											
												
													
														|  | -                                </div>
 |  | 
 | 
											
												
													
														|  | -                            </Popover>}
 |  | 
 | 
											
												
													
														|  | 
 |  | +                        {queryForm.expandEnabled && <div className={style.popoverContent}>
 | 
											
												
													
														|  | 
 |  | +                            <div><strong>自动扩量:</strong> <span style={{ color: "#5a5a5a" }}>开启</span></div>
 | 
											
												
													
														|  | 
 |  | +                            <div><strong>不可突破定向:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.expandTargeting?.map(item => ExpandTargeting[item]).toString() || '无'}</span></div>
 | 
											
												
													
														|  |                              {accountCreateLogs?.map((item: any, index: number) => {
 |  |                              {accountCreateLogs?.map((item: any, index: number) => {
 | 
											
												
													
														|  | -                                if (item?.customAudienceList) {
 |  | 
 | 
											
												
													
														|  | 
 |  | +                                if (item?.coldStartAudienceList) {
 | 
											
												
													
														|  |                                      return <div className={style.acc} key={index}>
 |  |                                      return <div className={style.acc} key={index}>
 | 
											
												
													
														|  |                                          <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
 |  |                                          <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
 | 
											
												
													
														|  | -                                        {item?.customAudienceList?.length > 0 && <>
 |  | 
 | 
											
												
													
														|  | -                                            <div className={style.accName}>定向用户群</div>
 |  | 
 | 
											
												
													
														|  | -                                            {
 |  | 
 | 
											
												
													
														|  | -                                                item?.customAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
 |  | 
 | 
											
												
													
														|  | -                                                    return <div className={style.accCon} key={pack.id}>{pack.name}<CloseOutlined className={style.close} onClick={() => {
 |  | 
 | 
											
												
													
														|  | -                                                        cpDel(index, index1, 'customAudienceList')
 |  | 
 | 
											
												
													
														|  | -                                                    }} /></div>
 |  | 
 | 
											
												
													
														|  | -                                                })
 |  | 
 | 
											
												
													
														|  | -                                            }
 |  | 
 | 
											
												
													
														|  | -                                        </>}
 |  | 
 | 
											
												
													
														|  | -                                        {item?.excludedCustomAudienceList?.length > 0 && <>
 |  | 
 | 
											
												
													
														|  | -                                            <div className={style.accName} style={{ marginTop: 5 }}>排除用户群</div>
 |  | 
 | 
											
												
													
														|  | 
 |  | +                                        {item?.coldStartAudienceList?.length > 0 && <>
 | 
											
												
													
														|  | 
 |  | +                                            <div className={style.accName}>扩量种子人群</div>
 | 
											
												
													
														|  |                                              {
 |  |                                              {
 | 
											
												
													
														|  | -                                                item?.excludedCustomAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
 |  | 
 | 
											
												
													
														|  | 
 |  | +                                                item?.coldStartAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
 | 
											
												
													
														|  |                                                      return <div className={style.accCon} key={pack.id}>{pack.name}<CloseOutlined className={style.close} onClick={() => {
 |  |                                                      return <div className={style.accCon} key={pack.id}>{pack.name}<CloseOutlined className={style.close} onClick={() => {
 | 
											
												
													
														|  | -                                                        cpDel(index, index1, 'excludedCustomAudienceList')
 |  | 
 | 
											
												
													
														|  | 
 |  | +                                                        cpDel(index, index1, 'coldStartAudienceList')
 | 
											
												
													
														|  |                                                      }} /></div>
 |  |                                                      }} /></div>
 | 
											
												
													
														|  |                                                  })
 |  |                                                  })
 | 
											
												
													
														|  |                                              }
 |  |                                              }
 | 
											
										
											
												
													
														|  | @@ -112,13 +118,58 @@ function TargetIng(props: Props) {
 | 
											
												
													
														|  |                                      return null
 |  |                                      return null
 | 
											
												
													
														|  |                                  }
 |  |                                  }
 | 
											
												
													
														|  |                              })}
 |  |                              })}
 | 
											
												
													
														|  | -                        </> 
 |  | 
 | 
											
												
													
														|  | -                        : 
 |  | 
 | 
											
												
													
														|  | -                        <>
 |  | 
 | 
											
												
													
														|  | -                            <div><strong>定向名称:</strong> <span style={{color:"#5a5a5a"}}>{queryForm?.sysTargeting?.targetingName}</span></div>
 |  | 
 | 
											
												
													
														|  | -                            <div><strong>定向描述:</strong> <span style={{color:"#5a5a5a"}}>{queryForm?.sysTargeting?.description || '<空>'}</span></div>
 |  | 
 | 
											
												
													
														|  | -                            <TargetingTooltip data={queryForm?.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
 |  | 
 | 
											
												
													
														|  | -                        </>}
 |  | 
 | 
											
												
													
														|  | 
 |  | +                        </div>}
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +                        {accountCreateLogs?.some((item: any) => item?.customAudienceList?.length > 0) ?
 | 
											
												
													
														|  | 
 |  | +                            <>
 | 
											
												
													
														|  | 
 |  | +                                {queryForm.sysTargeting && <Popover
 | 
											
												
													
														|  | 
 |  | +                                    content={<div className={style.popover}>
 | 
											
												
													
														|  | 
 |  | +                                        <TargetingTooltip data={queryForm.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
 | 
											
												
													
														|  | 
 |  | +                                    </div>}
 | 
											
												
													
														|  | 
 |  | +                                    trigger="hover"
 | 
											
												
													
														|  | 
 |  | +                                    placement="right"
 | 
											
												
													
														|  | 
 |  | +                                >
 | 
											
												
													
														|  | 
 |  | +                                    <div className={style.popoverContent}>
 | 
											
												
													
														|  | 
 |  | +                                        <div><strong>定向名称:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.targetingName}</span></div>
 | 
											
												
													
														|  | 
 |  | +                                        <div><strong>定向描述:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.description || '<空>'}</span></div>
 | 
											
												
													
														|  | 
 |  | +                                    </div>
 | 
											
												
													
														|  | 
 |  | +                                </Popover>}
 | 
											
												
													
														|  | 
 |  | +                                {accountCreateLogs?.map((item: any, index: number) => {
 | 
											
												
													
														|  | 
 |  | +                                    if (item?.customAudienceList) {
 | 
											
												
													
														|  | 
 |  | +                                        return <div className={style.acc} key={index}>
 | 
											
												
													
														|  | 
 |  | +                                            <div className={style.accName} style={{ fontWeight: 800 }}>{item.adAccountId}</div>
 | 
											
												
													
														|  | 
 |  | +                                            {item?.customAudienceList?.length > 0 && <>
 | 
											
												
													
														|  | 
 |  | +                                                <div className={style.accName}>定向用户群</div>
 | 
											
												
													
														|  | 
 |  | +                                                {
 | 
											
												
													
														|  | 
 |  | +                                                    item?.customAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
 | 
											
												
													
														|  | 
 |  | +                                                        return <div className={style.accCon} key={pack.id}>{pack.name}<CloseOutlined className={style.close} onClick={() => {
 | 
											
												
													
														|  | 
 |  | +                                                            cpDel(index, index1, 'customAudienceList')
 | 
											
												
													
														|  | 
 |  | +                                                        }} /></div>
 | 
											
												
													
														|  | 
 |  | +                                                    })
 | 
											
												
													
														|  | 
 |  | +                                                }
 | 
											
												
													
														|  | 
 |  | +                                            </>}
 | 
											
												
													
														|  | 
 |  | +                                            {item?.excludedCustomAudienceList?.length > 0 && <>
 | 
											
												
													
														|  | 
 |  | +                                                <div className={style.accName} style={{ marginTop: 5 }}>排除用户群</div>
 | 
											
												
													
														|  | 
 |  | +                                                {
 | 
											
												
													
														|  | 
 |  | +                                                    item?.excludedCustomAudienceList?.map((pack: { name: string, id: number }, index1: number) => {
 | 
											
												
													
														|  | 
 |  | +                                                        return <div className={style.accCon} key={pack.id}>{pack.name}<CloseOutlined className={style.close} onClick={() => {
 | 
											
												
													
														|  | 
 |  | +                                                            cpDel(index, index1, 'excludedCustomAudienceList')
 | 
											
												
													
														|  | 
 |  | +                                                        }} /></div>
 | 
											
												
													
														|  | 
 |  | +                                                    })
 | 
											
												
													
														|  | 
 |  | +                                                }
 | 
											
												
													
														|  | 
 |  | +                                            </>}
 | 
											
												
													
														|  | 
 |  | +                                        </div>
 | 
											
												
													
														|  | 
 |  | +                                    } else {
 | 
											
												
													
														|  | 
 |  | +                                        return null
 | 
											
												
													
														|  | 
 |  | +                                    }
 | 
											
												
													
														|  | 
 |  | +                                })}
 | 
											
												
													
														|  | 
 |  | +                            </>
 | 
											
												
													
														|  | 
 |  | +                            :
 | 
											
												
													
														|  | 
 |  | +                            <>
 | 
											
												
													
														|  | 
 |  | +                                <div><strong>定向名称:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.targetingName}</span></div>
 | 
											
												
													
														|  | 
 |  | +                                <div><strong>定向描述:</strong> <span style={{ color: "#5a5a5a" }}>{queryForm?.sysTargeting?.description || '<空>'}</span></div>
 | 
											
												
													
														|  | 
 |  | +                                <TargetingTooltip data={queryForm?.sysTargeting} geoLocationList={geoLocationList} modelList={modelList} />
 | 
											
												
													
														|  | 
 |  | +                            </>}
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |                      </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
 |  |                      </> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
 | 
											
										
											
												
													
														|  | @@ -135,6 +186,20 @@ function TargetIng(props: Props) {
 | 
											
												
													
														|  |          {dxVisible && <TargetingModal visible={dxVisible} onClose={() => setDxVisible(false)} onChange={getInfo} sysTargetingId={queryForm?.sysTargetingId} />}
 |  |          {dxVisible && <TargetingModal visible={dxVisible} onClose={() => setDxVisible(false)} onChange={getInfo} sysTargetingId={queryForm?.sysTargetingId} />}
 | 
											
												
													
														|  |          {/* 选择定向包 */}
 |  |          {/* 选择定向包 */}
 | 
											
												
													
														|  |          {cpVisible && <CrowdPackModal visible={cpVisible} data={accountCreateLogs} onClose={() => setCpVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setCpVisible(false); clearData() }} />}
 |  |          {cpVisible && <CrowdPackModal visible={cpVisible} data={accountCreateLogs} onClose={() => setCpVisible(false)} onChange={(e) => { setAccountCreateLogs(e); setCpVisible(false); clearData() }} />}
 | 
											
												
													
														|  | 
 |  | +        {/* 设置自动扩量 */}
 | 
											
												
													
														|  | 
 |  | +        {expandVisible && <ExpandModal
 | 
											
												
													
														|  | 
 |  | +            visible={expandVisible}
 | 
											
												
													
														|  | 
 |  | +            sysTargeting={queryForm.sysTargeting}
 | 
											
												
													
														|  | 
 |  | +            expandData={{ expandEnabled: queryForm.expandEnabled || false, expandTargeting: queryForm.expandTargeting || [] }}
 | 
											
												
													
														|  | 
 |  | +            data={accountCreateLogs}
 | 
											
												
													
														|  | 
 |  | +            onClose={() => setExpandVisible(false)}
 | 
											
												
													
														|  | 
 |  | +            onChange={(e, expandData) => {
 | 
											
												
													
														|  | 
 |  | +                setAccountCreateLogs(e);
 | 
											
												
													
														|  | 
 |  | +                setQueryForm({ ...queryForm, ...expandData })
 | 
											
												
													
														|  | 
 |  | +                setExpandVisible(false)
 | 
											
												
													
														|  | 
 |  | +                clearData()
 | 
											
												
													
														|  | 
 |  | +            }}
 | 
											
												
													
														|  | 
 |  | +        />}
 | 
											
												
													
														|  |          {/* 新建定向包 */}
 |  |          {/* 新建定向包 */}
 | 
											
												
													
														|  |          {adModalConfig.visible && <TargetingPup visible={adModalConfig.visible} PupFn={handleAdModalConfig} callback={(values: any) => {
 |  |          {adModalConfig.visible && <TargetingPup visible={adModalConfig.visible} PupFn={handleAdModalConfig} callback={(values: any) => {
 | 
											
												
													
														|  |              setQueryForm({ ...queryForm, sysTargeting: values, }); setDxVisible(false); clearData();
 |  |              setQueryForm({ ...queryForm, sysTargeting: values, }); setDxVisible(false); clearData();
 |