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

src/pages/launchSystemV3/tencentAdPutIn/create/Dynamic/SelectLable.tsx

@@ -1,12 +1,12 @@
 import { CloseOutlined, PlusOutlined } from "@ant-design/icons"
-import { Button, Form, Modal, Space, Spin, Tabs, Tooltip, Typography } from "antd"
+import { Button, Form, Input, message, Modal, Space, Spin, Tabs, Tooltip, Typography } from "antd"
 import React, { useEffect, useState } from "react"
 import { LABEL_TYPE_ENUM } from "../../const"
 import style from './index.less'
 import '../../index.less'
 import { useAjax } from "@/Hook/useAjax"
 import { getAdLabelApi } from "@/services/adqV3/global"
-const { Text, Title } = Typography;
+const { Text } = Typography;
 
 
 interface Props {
@@ -24,10 +24,19 @@ const SelectLabel: React.FC<Props> = ({ value, onChange, arrayProperty }) => {
     /************************************/
     const [visible, setVisible] = useState<boolean>(false)
     const [activeKey, setActiveKey] = useState<string>('1')
+    const [oldValue, setOldValue] = useState<{ content: string, type: LABEL_TYPE_ENUM }[]>([])
+    const [isFocus, setIsFocus] = useState<boolean>(false)
+    const [customizetext, setCustomizetext] = useState<string>()
 
     const getAdLabel = useAjax((params) => getAdLabelApi(params))
     /************************************/
 
+    useEffect(() => {
+        if (visible && value) {
+            setOldValue(value)
+        }
+    }, [visible, value])
+
     useEffect(() => {
         if (visible) {
             getAdLabel.run({})
@@ -35,11 +44,23 @@ const SelectLabel: React.FC<Props> = ({ value, onChange, arrayProperty }) => {
     }, [visible])
 
     const handleOk = () => {
-
+        onChange?.(oldValue)
+        setVisible(false)
     }
 
     return <>
-        <a className={style.selectLabelBtn} onClick={() => setVisible(true)}><PlusOutlined /><span>选择标签</span></a>
+        {(value && value?.length > 0) ? <div className={style.toggleLabels}>
+            {value?.map((item, tIndex) => <div
+                key={tIndex}
+                className={`${style.toggleLabel} ${style.showLabel}}`}
+            >
+                <Space>
+                    <span>{item.content}</span>
+                    <CloseOutlined className={style.clearLable} onClick={() => onChange?.(value.filter((_, index) => tIndex !== index))} />
+                </Space>
+            </div>)}
+            <a onClick={() => setVisible(true)}>修改</a>
+        </div> : <a className={style.selectLabelBtn} onClick={() => setVisible(true)}><PlusOutlined /><span>选择标签</span></a>}
         {visible && <Modal
             title={<strong>选择标签</strong>}
             visible={visible}
@@ -50,19 +71,19 @@ const SelectLabel: React.FC<Props> = ({ value, onChange, arrayProperty }) => {
             footer={<div className={style.showLabel}>
                 <div style={{ textAlign: 'left' }}>
                     <Tooltip
-                        title={`${(value?.length || 0) > arrayProperty.maxNumber ? `最多可选 ${arrayProperty.maxNumber} 个标签` : ''}，${(value || []).reduce((pre: number, cur) => pre + cur.content.length, 0) > 16 ? '标签总字数上限不超过 16 个字，中英文均算 1 个字' : ''}`}
-                        visible={((value?.length || 0) > arrayProperty.maxNumber || (value || []).reduce((pre: number, cur) => pre + cur.content.length, 0) > 16)}
+                        title={`${(oldValue?.length || 0) > arrayProperty.maxNumber ? `最多可选 ${arrayProperty.maxNumber} 个标签` : ''}，${oldValue.reduce((pre: number, cur) => pre + cur.content.length, 0) > 16 ? '标签总字数上限不超过 16 个字，中英文均算 1 个字' : ''}`}
+                        visible={((oldValue?.length || 0) > arrayProperty.maxNumber || oldValue.reduce((pre: number, cur) => pre + cur.content.length, 0) > 16)}
                     >
-                        <Text strong>文字标签 ({value?.length || 0}/{arrayProperty.maxNumber})</Text>
+                        <Text strong>文字标签 ({oldValue?.length || 0}/{arrayProperty.maxNumber})</Text>
                     </Tooltip>
                     <div className={style.toggleLabels}>
-                        {value?.map((item, tIndex) => <div
+                        {oldValue?.map((item, tIndex) => <div
                             key={tIndex}
-                            className={`${style.toggleLabel} ${style.showLabel} ${((value?.length || 0) > arrayProperty.maxNumber || value.reduce((pre: number, cur) => pre + cur.content.length, 0) > 16) ? style.errorSHowLabel : ''}`}
+                            className={`${style.toggleLabel} ${style.showLabel} ${((oldValue?.length || 0) > arrayProperty.maxNumber || oldValue.reduce((pre: number, cur) => pre + cur.content.length, 0) > 16) ? style.errorSHowLabel : ''}`}
                         >
                             <Space>
                                 <span>{item.content}</span>
-                                <CloseOutlined className={style.clearLable} />
+                                <CloseOutlined className={style.clearLable} onClick={() => setOldValue(oldValue.filter((_, index) => tIndex !== index))} />
                             </Space>
                         </div>)}
                     </div>
@@ -94,18 +115,18 @@ const SelectLabel: React.FC<Props> = ({ value, onChange, arrayProperty }) => {
                                 {getAdLabel.data?.map((item: { labelCategory: string, label: string[], labelTypeName: string }, index: number) => <Form.Item className={style.toggleLabelForm} label={<strong>{item.labelCategory}</strong>} key={index}>
                                     <div className={style.toggleLabels}>
                                         {item.label.map((text, tIndex) => {
-                                            let activeIndex = (value || [])?.findIndex(i => i.content === text)
+                                            let activeIndex = oldValue?.findIndex(i => i.content === text)
                                             return <div
                                                 key={tIndex}
                                                 className={`${style.toggleLabel} ${(activeIndex !== -1) ? style.active : ''}`}
                                                 onClick={() => {
-                                                    let newValue: { content: string, type: LABEL_TYPE_ENUM }[] = JSON.parse(JSON.stringify(value || []))
+                                                    let newValue: { content: string, type: LABEL_TYPE_ENUM }[] = JSON.parse(JSON.stringify(oldValue))
                                                     if (activeIndex !== -1) {
                                                         newValue = newValue.filter((_, index) => activeIndex !== index)
                                                     } else {
                                                         newValue.push({ content: text, type: (item.labelTypeName === '普通文本标签' ? 'LABEL_TYPE_COMMON' : 'LABEL_TYPE_UNKNOWN') as LABEL_TYPE_ENUM })
                                                     }
-                                                    onChange?.(newValue)
+                                                    setOldValue(newValue)
                                                 }}
                                             >{text}</div>
                                         })}
@@ -116,6 +137,48 @@ const SelectLabel: React.FC<Props> = ({ value, onChange, arrayProperty }) => {
                     </Spin>
                 </Tabs.TabPane>
                 <Tabs.TabPane tab="新建标签" key="2" >
+                    <div className={style.spauiInputGroup} style={{ borderColor: isFocus ? '#296bef' : '#dfe1e6' }}>
+                        {oldValue?.filter(item => item.type === 'LABEL_TYPE_CUSTOMIZETEXT' as LABEL_TYPE_ENUM)?.map((item, tIndex) => <div
+                            key={tIndex}
+                            className={`${style.toggleLabel} ${style.customizeLabel}`}
+                        >
+                            <Space>
+                                <span>{item.content}</span>
+                                <CloseOutlined className={style.clearLable} onClick={() => setOldValue(oldValue.filter((_, index) => tIndex !== index))} />
+                            </Space>
+                        </div>)}
+                        <div className={style.divInput}>
+                            <Input
+                                placeholder="请输入自定义标签文案，按回车键生成标签，单标签 2-7 字"
+                                bordered={false}
+                                onFocus={() => setIsFocus(true)}
+                                onBlur={() => setIsFocus(false)}
+                                value={customizetext}
+                                maxLength={7}
+                                minLength={2}
+                                onChange={(e) => setCustomizetext(e.target.value)}
+                                onPressEnter={() => {
+                                    if (customizetext) {
+                                        if (oldValue.some(item => item.content === customizetext)) {
+                                            message.error('存在相同名称标签')
+                                            return
+                                        }
+                                        let yyLables = getAdLabel?.data?.reduce((pre: any, cur: { label: any }) => [...pre, ...(cur.label || [])], [])
+                                        if (yyLables.some((item: string) => item === customizetext)) {
+                                            message.warn(`标签【${customizetext}】为已有标签，已为您自动选择`)
+                                            return
+                                        }
+                                        let newValue: { content: string, type: LABEL_TYPE_ENUM }[] = JSON.parse(JSON.stringify(oldValue))
+                                        newValue.push({ content: customizetext, type: 'LABEL_TYPE_CUSTOMIZETEXT' as LABEL_TYPE_ENUM })
+                                        setOldValue(newValue)
+                                        setCustomizetext(undefined)
+                                    } else {
+                                        message.error('请填写内容')
+                                    }
+                                }}
+                            />
+                        </div>
+                    </div>
                 </Tabs.TabPane>
             </Tabs>
         </Modal>}

src/pages/launchSystemV3/tencentAdPutIn/create/Dynamic/creativeConversionAssistant.tsx

@@ -257,7 +257,7 @@ const CreativeConversionAssistant: React.FC<{ automaticSiteEnabled?: boolean }>
             // const content = list.children.content
             // const type = list.children.type
 
-            return <Form.Item name={['label', 'value', 'list']} style={{ marginTop: 16 }} label={<strong>&nbsp;&nbsp;&nbsp;标签{label.required ? '' : '(选填)'}</strong>}>
+            return <Form.Item name={'creativeLabelDTOS'} style={{ marginTop: 16, marginBottom: 0 }} label={<strong>&nbsp;&nbsp;&nbsp;标签{label.required ? '' : '(选填)'}</strong>}>
                 <SelectLabel arrayProperty={list.arrayProperty}/>
             </Form.Item>
         }
@@ -550,7 +550,7 @@ const CreativeConversionAssistant: React.FC<{ automaticSiteEnabled?: boolean }>
         }
     }, [cardType])
 
-    if (Object.keys(creativeComponents).some(key => ['text_link', 'action_button', 'show_data', 'floating_zone'].includes(key))) {
+    if (Object.keys(creativeComponents).some(key => ['text_link', 'action_button', 'show_data', 'floating_zone', 'label'].includes(key))) {
         return <Card
             title={<strong style={{ fontSize: 18 }}>营销组件</strong>}
             className="cardResetCss"
@@ -597,7 +597,7 @@ const CreativeConversionAssistant: React.FC<{ automaticSiteEnabled?: boolean }>
             </Form.Item>}
             {textLinkContent}
             {actionButtonContent}
-            {/* {labelContent} */}
+            {labelContent}
             {showDataContent}
             {floatingZoneContent}
 

src/pages/launchSystemV3/tencentAdPutIn/create/Dynamic/index.less

@@ -54,6 +54,14 @@
     }
 }
 
+.customizeLabel {
+    border-radius: 4px;
+    border-color: #296bef;
+    color: #296bef;
+    padding: 2px 16px;
+    margin-right: 4px;
+}
+
 .active {
     color: #296bef;
     border-color: #80aaff;
@@ -86,4 +94,19 @@
     .clearLable {
         cursor: pointer;
     }
+}
+
+.spauiInputGroup {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 4px 6px;
+    border-radius: 6px;
+    border: 1px solid #dfe1e6;
+    margin-bottom: 130px;
+
+    .divInput {
+        flex: 1 0;
+        min-width: 400px;
+    }
 }

src/pages/launchSystemV3/tencentAdPutIn/create/Dynamic/index.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from "react"
 import style from '../index.less'
-import { Button, Space } from "antd"
+import { Button, Space, Tag } from "antd"
 import { EditOutlined } from "@ant-design/icons"
 import { DispatchAddelivery } from ".."
 import NewDynamic from "./newDynamic"
@@ -19,7 +19,7 @@ const Dynamic: React.FC<{ creativeTemplateAppellation?: string, creativeTemplate
     const { addelivery, setAddelivery, clearData, setAccountCreateLogs, accountCreateLogs } = useContext(DispatchAddelivery)!;
     const { adgroups, dynamic: dynamicData } = addelivery;
     const { deliveryMode, creativeTemplateId, dynamicCreativeName, creativeComponents, configuredStatus } = dynamicData
-    const { textLink, actionButton, showData, brand, mainJumpInfo, floatingZoneComponent } = creativeComponents || {}
+    const { textLink, actionButton, showData, brand, mainJumpInfo, floatingZoneComponent, creativeLabelDTOS } = creativeComponents || {}
     const [newVisible, setNewVisible] = useState<boolean>(false);
     const [profileData, setprofileData] = useState<any>()
 
@@ -76,6 +76,10 @@ const Dynamic: React.FC<{ creativeTemplateAppellation?: string, creativeTemplate
                         <p>按钮文案：{actionButton?.[0]?.value?.buttonText}</p>
                         {actionButton?.[0]?.value?.jumpInfo?.pageType && <p>跳转落地页：{PAGE_TYPE_ENUM[actionButton?.[0]?.value?.jumpInfo?.pageType as keyof typeof PAGE_TYPE_ENUM]}</p>}
                     </>}
+                    {creativeLabelDTOS?.length > 0 && <>
+                        <p style={{ fontWeight: 'bold', color: '#000' }}>标签：</p>
+                        {creativeLabelDTOS.map((item: { content: string }, index: number) => <Tag key={index}>{item.content}</Tag>)}
+                    </>}
                     {showData?.length > 0 && <>
                         <p style={{ fontWeight: 'bold', color: '#000' }}>数据外显：开启</p>
                         <p>数据类型：{CONVERSION_DATA_ENUM[showData?.[0]?.value?.conversionDataType as keyof typeof CONVERSION_DATA_ENUM]}</p>

src/pages/launchSystemV3/tencentAdPutIn/create/Dynamic/newDynamic.tsx

@@ -295,6 +295,7 @@ const NewDynamic: React.FC<Props> = ({ value: newValue, visible, onClose, onChan
             showDataShow,
             showData,
             floatingZone,
+            creativeLabelDTOS,
             ...surplusValues
         } = values
 
@@ -402,6 +403,11 @@ const NewDynamic: React.FC<Props> = ({ value: newValue, visible, onClose, onChan
             creativeComponents.actionButton = newActionButton
         }
 
+        // 标签
+        if (creativeLabelDTOS?.length) {
+            creativeComponents.creativeLabelDTOS = creativeLabelDTOS
+        }
+
         // 数据外显
         if (showDataShow) {
             creativeComponents.showData = [showData]
@@ -438,12 +444,14 @@ const NewDynamic: React.FC<Props> = ({ value: newValue, visible, onClose, onChan
                     actionButton,
                     showData,
                     mainJumpInfo,
-                    floatingZoneComponent
+                    floatingZoneComponent,
+                    creativeLabelDTOS
                 },
                 ...surplusValues
             } = JSON.parse(JSON.stringify(value))
             let dynamicValues: any = {
-                ...surplusValues
+                ...surplusValues,
+                creativeLabelDTOS
             }
             if (value.deliveryMode === 'DELIVERY_MODE_CUSTOMIZE') {
                 getTemplate(value.creativeTemplateId)
@@ -498,6 +506,7 @@ const NewDynamic: React.FC<Props> = ({ value: newValue, visible, onClose, onChan
                     delete dynamicValues.actionButtonShow
                 }
             }
+
             // 数据外显
             if (showData && showData?.length > 0) {
                 dynamicValues = {

src/pages/launchSystemV3/tencentAdPutIn/create/addDynamic.tsx

@@ -453,7 +453,7 @@ const AddDynamic: React.FC<PULLIN.NewAddDynamic> = ({ visible, onChange, onClose
 
         let accountIdParamDTOMap: any = {}
         accountCreateLogs.forEach(item => {
-            let { pageList, productList, userActionSetsList, accountId, wechatChannelList, videoChannelList } = item
+            let { pageList, userActionSetsList, accountId, wechatChannelList, videoChannelList } = item
 
             let userActionSetsListDto = userActionSetsList?.map((item: any) => ({ id: item?.userActionSetId, type: item?.type })) // dataSourceId
 
@@ -461,16 +461,12 @@ const AddDynamic: React.FC<PULLIN.NewAddDynamic> = ({ visible, onChange, onClose
                 userActionSetsList: userActionSetsListDto,
                 pageList: pageList?.map((item: { pageId: any }) => item.pageId)
             }
-            if (productList) {
-                map.productDTOS = productList?.map(item => {
-                    return { productId: item.marketingAssetId }
-                })
-            }
-            if (wechatChannelList) {
+
+            if (wechatChannelList && (['MARKETING_TARGET_TYPE_WECHAT_OFFICIAL_ACCOUNT'].includes(adgroups?.marketingAssetOuterSpec?.marketingTargetType) || adgroups?.marketingCarrierType === 'MARKETING_CARRIER_TYPE_WECHAT_OFFICIAL_ACCOUNT')) {
                 map.wechatChannelId = wechatChannelList?.[0]?.wechatOfficialAccountId
             }
             
-            if (videoChannelList) {
+            if (videoChannelList && dynamic?.creativeComponents?.brand?.[0]?.value?.jumpInfo?.pageType === 'PAGE_TYPE_WECHAT_CHANNELS_PROFILE') {
                 map.videoChannelId = videoChannelList?.[0]?.wechatChannelsAccountId
             }
 

src/pages/launchSystemV3/tencentAdPutIn/create/index.tsx

@@ -714,18 +714,18 @@ const Create: React.FC = () => {
                 userActionSetsList: userActionSetsListDto,
                 pageList: pageList?.map((item: { pageId: any }) => item.pageId)
             }
-            if (productList) {
+            if (productList && ['MARKETING_TARGET_TYPE_FICTION', 'MARKETING_TARGET_TYPE_SHORT_DRAMA'].includes(marketingAssetOuterSpec?.marketingTargetType)) {
                 map.productDTOS = productList?.map(item => {
                     return { productId: item.marketingAssetId }
                 })
             }
-            if (wechatChannelList) {
+            if (wechatChannelList && (['MARKETING_TARGET_TYPE_WECHAT_OFFICIAL_ACCOUNT'].includes(marketingAssetOuterSpec?.marketingTargetType) || marketingCarrierType === 'MARKETING_CARRIER_TYPE_WECHAT_OFFICIAL_ACCOUNT' || dynamic?.creativeComponents?.brand?.[0]?.value?.jumpInfo?.pageType === 'PAGE_TYPE_WECHAT_OFFICIAL_ACCOUNT_DETAIL')) {
                 map.wechatChannelId = wechatChannelList?.[0]?.wechatOfficialAccountId
             }
-            if (newConversionList) {
+            if (newConversionList && isConversion) {
                 map.conversionId = newConversionList?.[0]?.conversionId
             }
-            if (videoChannelList) {
+            if (videoChannelList && creativeComponents?.brand?.[0]?.value?.jumpInfo?.pageType === 'PAGE_TYPE_WECHAT_CHANNELS_PROFILE') {
                 map.videoChannelId = videoChannelList?.[0]?.wechatChannelsAccountId
             }