fix

src/Hook/useFileDrop.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+interface FileDropHook {
+    isDragOver: boolean;
+    dropAreaProps: {
+        onDragOver: React.DragEventHandler;
+        onDragLeave: React.DragEventHandler;
+        onDrop: React.DragEventHandler;
+    };
+}
+
+const useFileDrop = (onFileDrop: (files: FileList) => void): FileDropHook => {
+    const [isDragOver, setIsDragOver] = useState(false);
+
+    const handleDragOver: React.DragEventHandler = (event) => {
+        event.preventDefault();
+        setIsDragOver(true);
+    };
+
+    const handleDragLeave: React.DragEventHandler = () => {
+        setIsDragOver(false);
+    };
+
+    const handleDrop: React.DragEventHandler = (event) => {
+        event.preventDefault();
+        setIsDragOver(false);
+
+        const files = event.dataTransfer.files;
+
+        if (onFileDrop && typeof onFileDrop === 'function') {
+            onFileDrop(files);
+        }
+    };
+
+    return {
+        isDragOver,
+        dropAreaProps: {
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop
+        },
+    };
+};
+
+export default useFileDrop

src/components/FileBox/index.less

@@ -80,7 +80,7 @@
   // column-gap: 20px;
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 2px;
   > div {
     width: 200px;
     break-inside: avoid;

src/components/FileBoxAD/components/uploadsTable/index.tsx

@@ -0,0 +1,25 @@
+import { Modal } from "antd"
+import { RcFile } from "antd/lib/upload"
+import React from "react"
+import '../../../../pages/launchSystemV3/tencentAdPutIn/index.less'
+
+interface Props {
+    fileList: RcFile[]
+    visible?: boolean
+    onClose?: () => void
+}
+const UploadsTable: React.FC<Props> = ({ visible, onClose }) => {
+
+
+    return <Modal
+        title={<strong>上传预览</strong>}
+        visible={visible}
+        onCancel={onClose}
+        className='modalResetCss'
+        width={900}
+    >
+
+    </Modal>
+}
+
+export default React.memo(UploadsTable)

src/components/FileBoxAD/index.less

@@ -3,6 +3,27 @@
   height: calc(100vh - 240px);
   overflow-y: auto;
   position: relative;
+
+  .placeholder {
+    position: absolute;
+    pointer-events: none;
+    color: #6c6c6c;
+    width: 100%;
+    height: 100%;
+    font-weight: 600;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    background-color: rgba(255, 224, 224, 0.5);
+    border: 1px dashed 9b9b9b;
+  }
+
+  .dragOver {
+    color: red;
+    border: 1px dashed red;
+  }
 }
 
 .flex_box_img {
@@ -96,7 +117,7 @@
   // column-gap: 20px;
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 2px;
 
   >div {
     width: 200px;
@@ -434,10 +455,12 @@
     opacity: 1;
   }
 }
+
 .imgData {
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 6px;
 }
+
 .maskClass {
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 6px;

src/components/FileBoxAD/index.tsx

@@ -12,6 +12,7 @@ import ImgsModal from "./components/imgsModal"
 import MoveTo from "./components/moveTo"
 import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews"
 import { getVideoImgUrl } from "@/utils/utils"
+import useFileDrop from "@/Hook/useFileDrop"
 
 interface News {
     id: number,
@@ -98,8 +99,8 @@ function FlieBox(props: Props) {
     const Menu = useCallback((props: { isItem?: boolean }) => {
         if (props.isItem && isAll) {
             return <ul style={{ top: xy?.y, left: xy?.x }} className={style.menu} >
-                {(isAll || num === 100) && <li onClick={()=> allFile('xz')}>全选</li>}
-                {(isAll || num === 100) &&  listData?.records && listData?.records?.some((item: { id: number }) => selectFile?.includes(item.id)) && <li onClick={() => allFile('qx')} style={{ color: 'red' }}>取消选择</li>}
+                {(isAll || num === 100) && <li onClick={() => allFile('xz')}>全选</li>}
+                {(isAll || num === 100) && listData?.records && listData?.records?.some((item: { id: number }) => selectFile?.includes(item.id)) && <li onClick={() => allFile('qx')} style={{ color: 'red' }}>取消选择</li>}
                 {mediaType === 'PAGE' && !rightClickPup.folder ? <>
                     {/* <li onClick={() => { setPage && setPage(1, rightClickPup.id) }}>查看</li> */}
                     <li onClick={() => { setPage && setPage(2, rightClickPup.id) }}>复制</li>
@@ -117,8 +118,8 @@ function FlieBox(props: Props) {
             </ul>
         }
         return <ul style={{ top: xy?.y, left: xy?.x }} className={style.menu}>
-            {(isAll || num === 100) && <li onClick={()=> allFile('xz')}>全选</li>}
-            {(isAll || num === 100) &&  listData?.records && listData?.records?.some((item: { id: number }) => selectFile?.includes(item.id)) && <li onClick={() => allFile('qx')} style={{ color: 'red' }}>取消选择</li>}
+            {(isAll || num === 100) && <li onClick={() => allFile('xz')}>全选</li>}
+            {(isAll || num === 100) && listData?.records && listData?.records?.some((item: { id: number }) => selectFile?.includes(item.id)) && <li onClick={() => allFile('qx')} style={{ color: 'red' }}>取消选择</li>}
             {//防止K图文无限嵌套创建判断
                 (isAll !== false) && <li onClick={() => { set({ fileVisible: true }) }}>新建文件夹</li> //: <li>此处无法新建操作</li>
             }
@@ -291,8 +292,22 @@ function FlieBox(props: Props) {
             moveSelected.style.left = '0px';
         }
     }
+    
 
-    return <div style={{ display: 'flex', flexFlow: 'row', width: '100%', padding: '0 16px 0' }}>
+    // 获取拖拽的文件
+    // const { isDragOver, dropAreaProps } = useFileDrop((fileList) => {
+    //     let file = fileList[0]
+    //     // handleFileUpload(file as RcFile)
+    //     // if (file.type.startsWith('image/')) {
+            
+    //     // } else if (file.type.startsWith('video/')) {
+            
+    //     // } else {
+            
+    //     // }
+    // });
+
+    return <div style={{ display: 'flex', flexFlow: 'row', width: '100%', padding: get_folder_tree?.data?.length ? 0 : '0 16px 0' }}>
         {get_folder_tree?.data?.length > 0 && <div style={{ flexShrink: 0 }}>
             {treeEl}
         </div>}
@@ -309,11 +324,14 @@ function FlieBox(props: Props) {
                 }
             }}
         >
-            <div className={style.files} data-type="right-boxzones" onContextMenu={rightMenu} style={height ? { height } : {}}>
-                {/* 关联公众号筛选 */}
-                <div className={style.wxSelect}>
-
-                </div>
+            <div
+                className={style.files}
+                data-type="right-boxzones"
+                onContextMenu={rightMenu}
+                style={height ? { height } : {}}
+                // {...dropAreaProps}
+            >
+                {/* {isDragOver && <div className={`${style.placeholder} ${isDragOver ? style.dragOver : ''}`}><span>拖动文件到这里</span></div>} */}
                 {/* 层级路径 */}
                 <div className={style.path} >
                     {//存在渲染个人本地路径不存在执行公共本地

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

@@ -1,21 +1,34 @@
-.selected{
-    height: 35px;
-    .antImg{
+.selected {
+
+    .images {
+        overflow: auto;
+        max-width: 950px;
+        display: flex;
+        padding-top: 6px;
+
+        &::-webkit-scrollbar {
+            width: 2px;
+            height: 2px;
+        }
+    }
+
+    .antImg {
         display: inline-block;
         margin-right: 15px;
         position: relative;
         border-radius: 4px;
-        .clear{
-            width: 20px;
-            height: 20px;
+
+        .clear {
             position: absolute;
-            top: -7px;
-            right: -12px;
+            top: -3px;
+            right: -4px;
             z-index: 10;
-            color: rgb(155, 155, 155);
+            color: red;
             cursor: pointer;
+            font-size: 12px;
         }
-        .imgAnt{
+
+        .imgAnt {
             border-radius: 4px;
         }
     }

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

@@ -5,6 +5,7 @@ import FileBoxAD from "@/components/FileBoxAD"
 import { CloseCircleFilled, QuestionCircleFilled } from "@ant-design/icons"
 import style from './index.less'
 import LookLanding from "../lookLanding"
+import '../../../launchSystemV3/tencentAdPutIn/index.less'
 
 interface Props {
     visible?: boolean,
@@ -66,26 +67,26 @@ const SelectCloud: React.FC<Props> = (props) => {
 
     return <Modal
         title={<Space>
-            <span>选择素材</span>
+            <strong>选择素材</strong>
             {(selectItem && num && selectItem?.length > 0 && num > 1) && <div className={style.selected}>
                 {mediaType === 'IMG' ? <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
-                    <div style={{ overflowX: 'auto', maxWidth: 950, paddingTop: 8, display: 'flex' }}>
-                        <Image.PreviewGroup>
+                    <Image.PreviewGroup>
+                        <div className={style.images}>
                             {selectItem?.map((item: any, index: number) => (<div className={style.antImg} key={index}>
                                 <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
                                 <Image
                                     className={style.imgAnt}
                                     src={item?.url}
-                                    style={{ maxWidth: 30, maxHeight: 30, minHeight: 20 }}
+                                    style={{ maxWidth: 30, maxHeight: 30, minHeight: 20, minWidth: 30 }}
                                 />
                             </div>))}
-                        </Image.PreviewGroup>
-                    </div>
+                        </div>
+                    </Image.PreviewGroup>
                     <span style={{ color: '#1890ff' }}>已选：{selectItem.length}</span>
                 </div> : selectItem?.map((item: any, index: number) => (
-                    <div key={index} className={style.antImg}>
+                    <div key={index} className={style.antImg} style={{ paddingTop: 6 }}>
                         <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
-                        <video className={style.imgAnt} src={item?.url} height={30} />
+                        <video className={style.imgAnt} src={item?.url} style={{ maxWidth: 30, maxHeight: 25, minHeight: 25, minWidth: 30 }} />
                     </div>
                 ))}
             </div>}
@@ -93,10 +94,11 @@ const SelectCloud: React.FC<Props> = (props) => {
         visible={visible}
         onOk={handleOk}
         onCancel={() => { onClose && onClose() }}
-        width={1200}
+        width={1220}
         destroyOnClose
         maskClosable={false}
         bodyStyle={{ padding: 0 }}
+        className='modalResetCss'
     >
         <Tabs tabBarStyle={{ marginBottom: 0 }} onChange={(activeKey: any) => { set({ belongUser: activeKey }) }} activeKey={belongUser} style={{ margin: '0 24px' }} tabBarExtraContent={<Space>
             {

src/pages/launchSystemV3/adqv3/ad/index.tsx

@@ -1,6 +1,6 @@
 import { useAjax } from "@/Hook/useAjax";
 import { DeleteOutlined, DownOutlined, PauseCircleOutlined, PlayCircleOutlined, PlusOutlined, QuestionCircleOutlined } from "@ant-design/icons";
-import { Button, Checkbox, Col, Dropdown, Input, Menu, Modal, Row, Select, Space, Tooltip, Typography, message } from "antd"
+import { Button, Checkbox, Col, DatePicker, Dropdown, Input, Menu, Modal, Row, Select, Space, Tooltip, Typography, message } from "antd"
 import React, { useCallback, useEffect, useState } from "react"
 import { ADGROUP_STATUS } from "../const";
 import { getAdqV3AdListApi, modifyStatusBatchApi, syncBatchApi } from "@/services/launchAdq/adqv3";
@@ -149,7 +149,7 @@ const Ad: React.FC<ADQV3.AdProps> = ({ userId, creativeHandle }) => {
                     }}
                 >
                     {Object.keys(ADGROUP_STATUS).map(key => {
-                        return <Select.Option value={key} key={key}>{ADGROUP_STATUS[key]}</Select.Option>
+                        return <Select.Option value={key} key={key}>{ADGROUP_STATUS[key as keyof typeof ADGROUP_STATUS]}</Select.Option>
                     })}
                 </Select>
             </Col>
@@ -196,6 +196,14 @@ const Ad: React.FC<ADQV3.AdProps> = ({ userId, creativeHandle }) => {
                     }}
                 />
             </Col>
+            <Col>
+                <DatePicker.RangePicker
+                    placeholder={['创建开始日期', '创建结束日期']}
+                    onChange={(e, options) => { 
+                        set_queryFrom({ ...queryFrom, beginDate: options[0], endDate: options[1] })
+                    }}
+                />
+            </Col>
             <Col>
                 <Space>
                     <Button
@@ -305,11 +313,11 @@ const Ad: React.FC<ADQV3.AdProps> = ({ userId, creativeHandle }) => {
                                 {selectedRows?.length > 0 && <div style={{ maxWidth: '380px' }}>
                                     <Text type="danger" ellipsis={{ tooltip: true }} strong style={{ fontSize: 12 }}>
                                         {`当前广告选择：
-                                        营销目的：${MARKETING_GOAL_ENUM[selectedRows?.[0]?.marketingGoal]}，
-                                        推广产品类型：${MARKETING_TARGET_TYPE_ENUM[selectedRows?.[0]?.marketingTargetType]},
-                                        营销载体类型：${MARKETING_CARRIER_TYPE_ENUM[selectedRows?.[0]?.marketingCarrierType]},
+                                        营销目的：${MARKETING_GOAL_ENUM[selectedRows?.[0]?.marketingGoal as keyof typeof MARKETING_GOAL_ENUM]}，
+                                        推广产品类型：${MARKETING_TARGET_TYPE_ENUM[selectedRows?.[0]?.marketingTargetType as keyof typeof MARKETING_TARGET_TYPE_ENUM]},
+                                        营销载体类型：${MARKETING_CARRIER_TYPE_ENUM[selectedRows?.[0]?.marketingCarrierType as keyof typeof MARKETING_CARRIER_TYPE_ENUM]},
                                         版位选择：${selectedRows?.[0]?.automaticSiteEnabled ? '自动版位' : '选择特定版位'},
-                                        ${!selectedRows?.[0]?.automaticSiteEnabled && `广告版位：${selectedRows?.[0]?.siteSet.map((item: string | number) => SITE_SET_ENUM[item]).toString()}`}
+                                        ${!selectedRows?.[0]?.automaticSiteEnabled && `广告版位：${selectedRows?.[0]?.siteSet.map((item: string | number) => SITE_SET_ENUM[item as keyof typeof SITE_SET_ENUM]).toString()}`}
                                         `}
                                     </Text>
                                 </div>}

src/pages/launchSystemV3/adqv3/ad/tableConfig.tsx

@@ -125,7 +125,7 @@ function tableConfig(onChange: () => void, creativeHandle?: (id: number) => void
             align: 'right',
             ellipsis: true,
             render: (a: string, b: { bidMode: string, optimizationGoal: string }) => {
-                return `${BID_MODE_ENUM[b?.bidMode]} ${a}元/${b?.bidMode === 'BID_MODE_CPM' ? '千次曝光' : b?.bidMode === 'BID_MODE_CPC' ? '点击' : OPTIMIZATIONGOAL_ENUM[b?.optimizationGoal]}`
+                return `${BID_MODE_ENUM[b?.bidMode as keyof typeof BID_MODE_ENUM]} ${a}元/${b?.bidMode === 'BID_MODE_CPM' ? '千次曝光' : b?.bidMode === 'BID_MODE_CPC' ? '点击' : OPTIMIZATIONGOAL_ENUM[b?.optimizationGoal as keyof typeof OPTIMIZATIONGOAL_ENUM]}`
             }
         },
         {
@@ -157,7 +157,7 @@ function tableConfig(onChange: () => void, creativeHandle?: (id: number) => void
             width: 70,
             ellipsis: true,
             render: (a: string, b: { endDate: string }) => {
-                return BidStrategyEnum[a]
+                return BidStrategyEnum[a as keyof typeof BidStrategyEnum]
             }
         },
         {
@@ -217,7 +217,7 @@ function tableConfig(onChange: () => void, creativeHandle?: (id: number) => void
             fixed: 'right',
             ellipsis: true,
             render: (a: string, b: any) => {
-                return ADGROUP_STATUS[a]
+                return ADGROUP_STATUS[a as keyof typeof ADGROUP_STATUS]
             }
         },
         {

src/pages/launchSystemV3/adqv3/config.ts

@@ -44,13 +44,14 @@ const txDynamicConfig = [
             { title: '轮播', dataIndex: 'floatingZone', label: '广告详情', default: 8, width: 150 },
             { title: '所属账号', dataIndex: 'accountId', label: '广告详情', default: 9, width: 75 },
             { title: '广告ID', dataIndex: 'adgroupId', label: '广告详情', default: 10, width: 90 },
-            { title: '创意名称', dataIndex: 'dynamicCreativeName', label: '广告详情', default: 11, width: 120 },
-            { title: '创意ID', dataIndex: 'dynamicCreativeId', label: '广告详情', default: 12, width: 80 },
-            { title: '是否已删除', dataIndex: 'isDeleted', label: '广告详情', default: 13, width: 60 },
-            { title: '投放模式', dataIndex: 'deliveryMode', label: '广告详情', default: 14, width: 75 },
-            { title: '创意形式匹配方式', dataIndex: 'dynamicCreativeType', label: '广告详情', default: 15, width: 75 },
-            { title: '创意形式', dataIndex: 'creativeTemplateId', label: '广告详情', default: 16, width: 90 },
-            { title: '审核状态', dataIndex: 'reviewStatusCn', label: '广告详情', default: 17, width: 90 },
+            { title: '创建时间', dataIndex: 'createdTime', label: '广告详情', default: 11, width: 140 },
+            { title: '创意名称', dataIndex: 'dynamicCreativeName', label: '广告详情', default: 12, width: 120 },
+            { title: '创意ID', dataIndex: 'dynamicCreativeId', label: '广告详情', default: 13, width: 80 },
+            { title: '是否已删除', dataIndex: 'isDeleted', label: '广告详情', default: 14, width: 60 },
+            { title: '投放模式', dataIndex: 'deliveryMode', label: '广告详情', default: 15, width: 85 },
+            { title: '创意形式匹配方式', dataIndex: 'dynamicCreativeType', label: '广告详情', default: 16, width: 75 },
+            { title: '创意形式', dataIndex: 'creativeTemplateId', label: '广告详情', default: 17, width: 90 },
+            { title: '审核状态', dataIndex: 'reviewStatusCn', label: '广告详情', default: 18, width: 90 },
         ]
     }
 ]

src/pages/launchSystemV3/adqv3/creative/index.tsx

@@ -1,6 +1,6 @@
 import { useAjax } from "@/Hook/useAjax"
 import { delBatchCreativeApi, getDynamicCreativeV3ListApi, syncBatchCreativeApi, updateBatchDynamicCreativesInfoApi } from "@/services/launchAdq/adqv3"
-import { Badge, Button, Col, Form, Input, Modal, Popconfirm, Row, Select, Space, Table, message } from "antd"
+import { Badge, Button, Col, DatePicker, Form, Input, Modal, Popconfirm, Row, Select, Space, Table, message } from "antd"
 import React, { useEffect, useState } from "react"
 import { txDynamicConfig } from "../config"
 import tableConfig from "./tableConfig"
@@ -9,6 +9,7 @@ import ReviewDetails from "./reviewDetails"
 import { DeleteOutlined, PauseCircleOutlined, PlayCircleOutlined } from "@ant-design/icons"
 import '../../tencentAdPutIn/index.less'
 import HandleLog from "./handleLog"
+import moment from "moment"
 
 /** 审核结果 */
 export const AD_STATUS = {
@@ -49,7 +50,16 @@ const Creative: React.FC<ADQV3.CreativeProps> = ({ queryForm, setQueryForm, user
 
     const onFinish = (values: any) => {
         console.log(values)
-        setQueryForm({ ...queryForm, ...values })
+        const { date, ...value } = values
+        let newQueryForm = { ...queryForm, ...value }
+        if (date?.length) {
+            newQueryForm.beginDate = moment(date[0]).format('YYYY-MM-DD')
+            newQueryForm.endDate = moment(date[1]).format('YYYY-MM-DD')
+        } else {
+            delete newQueryForm?.beginDate
+            delete newQueryForm?.endDate
+        }
+        setQueryForm(newQueryForm)
     }
 
     const reviewStatusDetails = (value: any) => {
@@ -130,12 +140,12 @@ const Creative: React.FC<ADQV3.CreativeProps> = ({ queryForm, setQueryForm, user
                     <Input placeholder="广告ID" style={{ width: 120 }} allowClear />
                 </Form.Item></Col>
                 <Col><Form.Item name='creativeName' style={{ marginRight: 0 }}>
-                    <Input placeholder="创意名称" style={{ width: 150 }} allowClear />
+                    <Input placeholder="创意名称" style={{ width: 120 }} allowClear />
                 </Form.Item></Col>
                 <Col><Form.Item name='creativeId' style={{ marginRight: 0 }}>
                     <Input placeholder="创意ID" style={{ width: 120 }} allowClear />
                 </Form.Item></Col>
-                <Col><Form.Item name='configuredStatus'>
+                <Col><Form.Item name='configuredStatus' style={{ marginRight: 0 }}>
                     <Select
                         placeholder='启用禁用状态'
                         style={{ minWidth: 120 }}
@@ -150,7 +160,28 @@ const Creative: React.FC<ADQV3.CreativeProps> = ({ queryForm, setQueryForm, user
                         <Select.Option value={'AD_STATUS_SUSPEND'}>暂停</Select.Option>
                     </Select>
                 </Form.Item></Col>
-                <Col><Form.Item name='isDeleted'>
+                <Col><Form.Item name='deliveryMode' style={{ marginRight: 0 }}>
+                    <Select
+                        placeholder='投放模式'
+                        style={{ minWidth: 120 }}
+                        showSearch
+                        allowClear
+                        maxTagCount={1}
+                        filterOption={(input: any, option: any) =>
+                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+                        }
+                        mode="multiple"
+                    >
+                        <Select.Option value={'DELIVERY_MODE_CUSTOMIZE'}>自定义创意</Select.Option>
+                        <Select.Option value={'DELIVERY_MODE_COMPONENT'}>组件化创意</Select.Option>
+                    </Select>
+                </Form.Item></Col>
+                <Col>
+                    <Form.Item name='date' style={{ marginRight: 0 }}>
+                        <DatePicker.RangePicker style={{ width: 260 }} placeholder={['创建开始日期', '创建结束日期']} />
+                    </Form.Item>
+                </Col>
+                <Col><Form.Item name='isDeleted' style={{ marginRight: 0 }}>
                     <Select
                         placeholder='是否删除？'
                         style={{ minWidth: 100 }}

src/pages/launchSystemV3/adqv3/creative/tableConfig.tsx

@@ -178,6 +178,14 @@ function tableConfig(reviewStatusDetails: (value: any) => void, suspendHandle: (
                 return <a onClick={() => copy(a)} >{a}</a>
             }
         },
+        {
+            title: '创建时间',
+            dataIndex: 'createdTime',
+            key: 'createdTime',
+            align: 'center',
+            width: 140,
+            ellipsis: true,
+        },
         {
             title: '是否已删除',
             dataIndex: 'isDeleted',

src/pages/launchSystemV3/adqv3/typings.d.ts

@@ -19,6 +19,8 @@ declare namespace ADQV3 {
         adgroupName?: string,  // 广告名称
         putUserIdList?: number[], // 投手
         systemStatusList?: string[], // 广告状态
+        beginDate?: string,
+        endDate?: string
     };
     type AccountAdgroupMapsProps = {
         accountAdgroupMaps: string[]

src/pages/launchSystemV3/components/BrandImage/tableConfig.tsx

@@ -11,17 +11,17 @@ const brandColumns = (del: (id: number) => void, edit: (data: any) => void): Tab
             dataIndex: 'cz',
             key: 'cz',
             align: 'center',
-            width: 100,
+            width: 85,
             render: (a: any, b: any) => {
                 return <Space>
-                    <a onClick={() => edit(b)}>修改</a>
+                    <a onClick={() => edit(b)} style={{ fontSize: 12 }}>修改</a>
                     <Popconfirm
                         title="确定删除?"
                         onConfirm={() => del(b.id)}
                         okText="是"
                         cancelText="否"
                     >
-                        <a style={{ color: 'red' }}>删除</a>
+                        <a style={{ color: 'red', fontSize: 12 }}>删除</a>
                     </Popconfirm>
                 </Space>
             }
@@ -43,16 +43,15 @@ const brandColumns = (del: (id: number) => void, edit: (data: any) => void): Tab
             width: 120,
             ellipsis: true,
             align: 'center',
-            render: (a: any, b: any) => {
-                return <Image width={40} style={{ borderRadius: 4 }} src={a} />
+            render: (a: any) => {
+                return <Image width={25} style={{ borderRadius: 4 }} src={a} />
             }
         },
         {
             title: '头像名称',
             dataIndex: 'name',
             key: 'name',
-            align: 'center',
-            render: (a: any, b: any) => {
+            render: (a: any) => {
                 return <span style={{ fontSize: "12px" }}>{a}</span>
             }
         },
@@ -61,6 +60,7 @@ const brandColumns = (del: (id: number) => void, edit: (data: any) => void): Tab
             dataIndex: 'createTime',
             key: 'createTime',
             align: 'center',
+            width: 140,
             render: (a: any, b: any) => {
                 return <span style={{ fontSize: "12px" }}>{a}</span>
             }

src/pages/launchSystemV3/components/PageModal/tableConfig.tsx

@@ -1,6 +1,7 @@
 import { PageStatusEnum } from "@/services/launchAdq/enum"
 import { Badge, TableProps, Tag } from "antd"
 import React from "react"
+import QrCode from "../QrCode"
 
 let columns = (type?: 1 | 2): TableProps<any>['columns'] => {
 
@@ -64,6 +65,16 @@ let columns = (type?: 1 | 2): TableProps<any>['columns'] => {
             key: 'pageName',
             ellipsis: true
         },
+        {
+            title: '预览',
+            dataIndex: 'previewUrl',
+            key: 'previewUrl',
+            width: 60,
+            align: 'center',
+            render(value) {
+                return <QrCode url={value}/>
+            }
+        },
         {
             title: '落地页状态',
             dataIndex: 'pageStatus',

src/pages/launchSystemV3/components/QrCode/index.tsx

@@ -0,0 +1,37 @@
+import { Popover } from "antd"
+import React, { useEffect, useRef, useState } from "react"
+import QRCode from 'qrcodejs2'
+
+interface Props {
+    url: string
+}
+const QrCode: React.FC<Props> = ({ url }) => {
+
+    /********************************/
+    const ref = useRef(null)
+    const [visible, setVisible] = useState<boolean>(false)
+    const [qr, setQr] = useState<any>()
+    /********************************/
+
+    useEffect(() => {
+        if (ref.current && url && visible && !qr) {
+            let a = new QRCode(ref.current, {
+                text: url,
+                width: 150,
+                height: 150
+            })
+            setQr(a)
+        }
+    }, [ref, visible])
+
+    return <Popover
+        content={<div ref={ref}></div>}
+        onVisibleChange={(e) => {
+            setVisible(e)
+        }}
+    >
+        <a style={{ fontSize: 12 }}>预览</a>
+    </Popover>
+}
+
+export default React.memo(QrCode)

src/pages/launchSystemV3/tencenTasset/profiles/tableConfig.tsx

@@ -5,14 +5,14 @@ import React from "react"
 const profilesColumns = (del: (id: number) => void): TableProps<any>['columns'] => {
 
 
-    const data: any[] = [
+    const data: TableProps<any>['columns'] = [
         {
             title: '操作',
             dataIndex: 'cz',
             key: 'cz',
             align: 'center',
-            width: 100,
-            render: (a: any, b: any) => {
+            width: 70,
+            render: (_, b) => {
                 return <Space>
                     <Popconfirm
                         title="确定删除?"
@@ -20,7 +20,7 @@ const profilesColumns = (del: (id: number) => void): TableProps<any>['columns']
                         okText="是"
                         cancelText="否"
                     >
-                        <a style={{ color: 'red' }}>删除</a>
+                        <a style={{ color: 'red', fontSize: 12 }}>删除</a>
                     </Popconfirm>
                 </Space>
             }
@@ -31,7 +31,7 @@ const profilesColumns = (del: (id: number) => void): TableProps<any>['columns']
             key: 'id',
             width: 60,
             align: 'center',
-            render: (a: any, b: any) => {
+            render: (a) => {
                 return <span style={{ fontSize: "12px" }}>{a}</span>
             }
         },
@@ -39,19 +39,17 @@ const profilesColumns = (del: (id: number) => void): TableProps<any>['columns']
             title: '头像预览图',
             dataIndex: 'headImageUrl',
             key: 'headImageUrl',
-            width: 120,
-            ellipsis: true,
+            width: 100,
             align: 'center',
-            render: (a: any) => {
-                return <Image width={40} style={{ borderRadius: 4 }} src={a} />
+            render: (a) => {
+                return <Image width={25} style={{ borderRadius: 4 }} src={a} />
             }
         },
         {
             title: '昵称',
             dataIndex: 'profileName',
             key: 'profileName',
-            align: 'center',
-            render: (a: any, b: any) => {
+            render: (a) => {
                 return <span style={{ fontSize: "12px" }}>{a}</span>
             }
         },
@@ -59,8 +57,7 @@ const profilesColumns = (del: (id: number) => void): TableProps<any>['columns']
             title: '详细描述',
             dataIndex: 'description',
             key: 'description',
-            align: 'center',
-            render: (a: any, b: any) => {
+            render: (a) => {
                 return <span style={{ fontSize: "12px" }}>{a}</span>
             }
         },
@@ -69,7 +66,8 @@ const profilesColumns = (del: (id: number) => void): TableProps<any>['columns']
             dataIndex: 'createTime',
             key: 'createTime',
             align: 'center',
-            render: (a: any, b: any) => {
+            width: 140,
+            render: (a) => {
                 return <span style={{ fontSize: "12px" }}>{a}</span>
             }
         }

src/pages/launchSystemV3/tencenTasset/targeting/tableConfig.tsx

@@ -15,7 +15,7 @@ export function TableConfig(geoLocationList: any, modelList: any, editHandle: (d
             ellipsis: true,
             render(value, records) {
                 return <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
-                    <div style={{ width: 'calc(100% - 20px)' }}><Typography.Text ellipsis={{ tooltip: true }}>{value}</Typography.Text></div>
+                    <div style={{ width: 'calc(100% - 20px)' }}><Typography.Text ellipsis={{ tooltip: true }} style={{ fontSize: 12 }}>{value}</Typography.Text></div>
                     <Popover
                         placement="right"
                         overlayInnerStyle={{ maxWidth: 350, maxHeight: 350, overflow: 'hidden', overflowY: 'auto' }}
@@ -39,7 +39,7 @@ export function TableConfig(geoLocationList: any, modelList: any, editHandle: (d
             width: 80,
             ellipsis: true,
             render(value) {
-                return value || '不限'
+                return <span style={{ fontSize: 12 }}>{value || '不限'}</span>
             },
         },
         {
@@ -49,7 +49,7 @@ export function TableConfig(geoLocationList: any, modelList: any, editHandle: (d
             width: 150,
             ellipsis: true,
             render(value) {
-                return value || '--'
+                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
             }
         },
         {
@@ -60,7 +60,7 @@ export function TableConfig(geoLocationList: any, modelList: any, editHandle: (d
             width: 100,
             ellipsis: true,
             render(value) {
-                return value || '--'
+                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
             }
         },
         {
@@ -70,6 +70,9 @@ export function TableConfig(geoLocationList: any, modelList: any, editHandle: (d
             align: 'center',
             width: 145,
             ellipsis: true,
+            render(value) {
+                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
+            }
         },
         {
             title: '更新时间',
@@ -79,7 +82,7 @@ export function TableConfig(geoLocationList: any, modelList: any, editHandle: (d
             width: 145,
             ellipsis: true,
             render(value) {
-                return value || '--'
+                return <span style={{ fontSize: 12 }}>{value || '--'}</span>
             }
         },
         {
@@ -88,16 +91,16 @@ export function TableConfig(geoLocationList: any, modelList: any, editHandle: (d
             key: 'cz',
             align: 'center',
             fixed: 'right',
-            width: 120,
+            width: 100,
             render: (a: any, b: any) => {
                 return <Space wrap>
-                    <Button type="link" style={{ padding: 0 }} onClick={() => { editHandle(b) }} >编辑</Button>
-                    <Button type="link" style={{ padding: 0 }} onClick={() => { editHandle(b, true) }} >复制</Button>
+                    <Button type="link" style={{ padding: 0, fontSize: 12 }} onClick={() => { editHandle(b) }} >编辑</Button>
+                    <Button type="link" style={{ padding: 0, fontSize: 12 }} onClick={() => { editHandle(b, true) }} >复制</Button>
                     <Popconfirm
                         title="确定删除？"
                         onConfirm={() => { del(b.id) }}
                     >
-                        <Button type="link" style={{ padding: 0 }} danger>删除</Button>
+                        <Button type="link" style={{ padding: 0, fontSize: 12 }} danger>删除</Button>
                     </Popconfirm>
                 </Space>
             }

src/pages/launchSystemV3/tencenTasset/wechatCanvasPage/tableConfig.tsx

@@ -1,6 +1,7 @@
 import { PageStatusEnum } from "@/services/launchAdq/enum"
 import { Badge, TableProps } from "antd"
 import React from "react"
+import QrCode from "../../components/QrCode"
 
 let columns = (handleCopy: (data: any) => void): TableProps<any>['columns'] => {
 
@@ -38,6 +39,16 @@ let columns = (handleCopy: (data: any) => void): TableProps<any>['columns'] => {
                 return <span style={{ fontSize: 12 }}>{value}</span>
             }
         },
+        {
+            title: '预览',
+            dataIndex: 'previewUrl',
+            key: 'previewUrl',
+            width: 60,
+            align: 'center',
+            render(value) {
+                return <QrCode url={value}/>
+            }
+        },
         {
             title: '落地页状态',
             dataIndex: 'pageStatus',

src/pages/launchSystemV3/tencentAdPutIn/create/Ad/adgroupsAdSetting.tsx

@@ -91,6 +91,22 @@ const AdgroupsAdSetting: React.FC<{ value?: any }> = ({ value }) => {
                 </div>
             </Card>
         </Form.Item>
+        <Form.Item
+            label={<Space>
+                <strong>自动衍生创意</strong>
+                <Tooltip title={<div>
+                    <p>1.使用自动衍生创意，系统将优选广告下多个创意的多个组件，自动衍生新的组件并组成新的创意。在创意列表中，可通过“自建创意”、“衍生创意”类型进行区分；</p>
+                    <p>
+                        2.广告提交后不支持再次修改
+                    </p>
+                </div>}>
+                    <QuestionCircleFilled />
+                </Tooltip>
+            </Space>}
+            name="autoDerivedCreativeEnabled"
+        >
+            <New1Radio data={[{ label: '系统衍生', value: true }, { label: '关闭衍生', value: false }]} />
+        </Form.Item>
         <Form.Item label={<strong>广告状态</strong>} name="configuredStatus" rules={[{ required: true, message: '请选择广告状态' }]}>
             <New1Radio data={Object.keys(AD_STATUS_ENUM).map(key => ({ label: AD_STATUS_ENUM[key as keyof typeof AD_STATUS_ENUM], value: key }))} />
         </Form.Item>

src/pages/launchSystemV3/tencentAdPutIn/create/Ad/adgroupsPrice.tsx

@@ -47,7 +47,7 @@ const AdgroupsPrice: React.FC = () => {
                     } else {
                         return true
                     }
-                })?.map(key => ({ label: BID_MODE_ENUM[key], value: key, disabled: optimizationGoal && ['BID_MODE_CPM', 'BID_MODE_CPC', 'BID_MODE_CPA'].includes(key) ? true : false }))}
+                })?.map(key => ({ label: BID_MODE_ENUM[key as keyof typeof BID_MODE_ENUM], value: key, disabled: optimizationGoal && ['BID_MODE_CPM', 'BID_MODE_CPC', 'BID_MODE_CPA'].includes(key) ? true : false }))}
                 onChange={(e) => {
                     // form.setFieldsValue({ siteSet: defaultSiteSet })
                     setOGPparams({ ...OGPParams, automaticSiteEnabled: e, bidMode: e as string })
@@ -77,7 +77,7 @@ const AdgroupsPrice: React.FC = () => {
         </Form.Item>
         {(bidMode === 'BID_MODE_OCPM' || bidMode === 'BID_MODE_OCPC') && <>
             <Form.Item label={<strong>出价类型</strong>} name='smartBidType' rules={[{ required: true, message: '请选择出价类型' }]}>
-                <New1Radio data={Object.keys(SMART_BID_TYPE_ENUM).map(key => ({ label: SMART_BID_TYPE_ENUM[key], value: key }))} />
+                <New1Radio data={Object.keys(SMART_BID_TYPE_ENUM).map(key => ({ label: SMART_BID_TYPE_ENUM[key as keyof typeof SMART_BID_TYPE_ENUM], value: key }))} />
             </Form.Item>
         </>}
 
@@ -86,13 +86,13 @@ const AdgroupsPrice: React.FC = () => {
                 <Input
                     placeholder={`请输入价格`}
                     style={{ width: 480 }}
-                    suffix={`元/${optimizationGoal ? OPTIMIZATIONGOAL_ENUM[optimizationGoal] : ['BID_MODE_OCPM', 'BID_MODE_OCPC'].includes(bidMode) ? '千次曝光' : '点击'}`}
+                    suffix={`元/${optimizationGoal ? OPTIMIZATIONGOAL_ENUM[optimizationGoal as keyof typeof OPTIMIZATIONGOAL_ENUM] : ['BID_MODE_OCPM', 'BID_MODE_OCPC'].includes(bidMode) ? '千次曝光' : '点击'}`}
                 />
             </Form.Item>
 
             {deepConversionType === 'DEEP_CONVERSION_BEHAVIOR' ? <>
                 <Form.Item label={<strong>深度目标出价</strong>} name={['deepConversionSpec', 'deepConversionBehaviorSpec', 'bidAmount']} rules={[{ required: true, message: '请输入深度目标出价' }]}>
-                    <Input style={{ width: 480 }} suffix={`元/${OPTIMIZATIONGOAL_ENUM[goal] || '优化目标'}`} placeholder={`请输入深度目标出价，范围0.1~10000`} />
+                    <Input style={{ width: 480 }} suffix={`元/${OPTIMIZATIONGOAL_ENUM[goal as keyof typeof OPTIMIZATIONGOAL_ENUM] || '优化目标'}`} placeholder={`请输入深度目标出价，范围0.1~10000`} />
                 </Form.Item>
             </> :
                 deepConversionType === 'DEEP_CONVERSION_WORTH' ? <>

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

@@ -20,7 +20,7 @@ const Ad: React.FC = () => {
     const { adgroups } = addelivery
     const {
         marketingGoal, marketingAssetOuterSpec, marketingCarrierType, automaticSiteEnabled, siteSet, searchExpandTargetingSwitch, bidMode, smartBidType, bidAmount, optimizationGoal,
-        deepConversionSpec, autoAcquisitionEnabled, autoAcquisitionBudget, dailyBudget, endDate, beginDate, timeSeries, firstDayBeginTime, configuredStatus, adgroupName, sceneSpec
+        deepConversionSpec, autoAcquisitionEnabled, autoAcquisitionBudget, dailyBudget, endDate, beginDate, timeSeries, firstDayBeginTime, configuredStatus, adgroupName, sceneSpec, autoDerivedCreativeEnabled
     } = adgroups
     const [newVisible, setNewVisible] = useState<boolean>(false)
     /*****************************/
@@ -61,6 +61,7 @@ const Ad: React.FC = () => {
                         <p style={{ fontWeight: 'bold', color: '#000' }}>投放日期：{beginDate} 至 {endDate}</p>
                         <p>投放时段：{timeSeries.includes('0') ? <TimeSeriesLook timeSeries={timeSeries} /> : '全天'}</p>
                         <p>首日开始时间：{firstDayBeginTime ? firstDayBeginTime : '关闭'}</p>
+                        <p>自动衍生创意：{autoDerivedCreativeEnabled ? '系统衍生' : '关闭衍生'}</p>
                         <p>广告名称：{adgroupName}</p>
                     </> : <div className={style.ad_config}>
                         {accountCreateLogs?.length > 0 ?

src/pages/launchSystemV3/tencentAdPutIn/create/Ad/newCreateAd.tsx

@@ -83,12 +83,14 @@ const NewCreateAd: React.FC<Props> = ({ value, visible, onChange, onClose }) =>
                 endDate,
                 sceneSpec,
                 marketingAssetOuterSpec,
+                autoDerivedCreativeEnabled,
                 ...surplusValues
             } = JSON.parse(JSON.stringify(value))
             let adgroupsValues: any = {
                 ...surplusValues,
                 sceneSpec,
-                marketingTargetType: marketingAssetOuterSpec?.marketingTargetType
+                marketingTargetType: marketingAssetOuterSpec?.marketingTargetType,
+                autoDerivedCreativeEnabled: autoDerivedCreativeEnabled ? true : false
             }
 
             // 首日开始时间
@@ -204,6 +206,7 @@ const NewCreateAd: React.FC<Props> = ({ value, visible, onChange, onClose }) =>
                 wechatChannelsSceneType: '0',
                 timeSeriesType: '0',
                 isSetfirstDayBeginTime: false,
+                autoDerivedCreativeEnabled: false
             }}
         >
             <DispatchAd.Provider value={{ form, OGPParams, setOGPparams }}>

src/typings.d.ts

@@ -11,6 +11,7 @@ declare module '*.gif';
 declare module '*.bmp';
 declare module '*.tiff';
 declare module 'omit.js';
+declare module 'qrcodejs2';
 
 // google analytics interface
 interface GAFieldsObject {