fix

src/pages/adMonitor/adMonitorList/components/FilterQuery.tsx

@@ -3,7 +3,7 @@ import { Button, DatePicker, Form, Input, InputNumber, Popover, Space } from "an
 import React, { useEffect, useState } from "react"
 import './filterQuery.less'
 import moment from "moment"
-import { useLocalStorageState } from "ahooks"
+import { useLocalStorageState, useTimeout } from "ahooks"
 
 type TypeProps = 'DatePicker' | 'Input' | 'InputNumber' | 'Select'
 interface QueryProps {
@@ -30,6 +30,12 @@ const FilterQuery: React.FC<Props> = ({ onChange }) => {
             type: 'DatePicker',
             value: (params) => <DatePicker.RangePicker {...params} />
         },
+        {
+            lable: '广告名称',
+            name: 'adgroupName',
+            type: 'Input',
+            value: (params) => <Input placeholder="请输入广告名称" {...params} />
+        },
         {
             lable: '最低今日转化数',
             name: 'conversionsCountDayMin',
@@ -82,11 +88,15 @@ const FilterQuery: React.FC<Props> = ({ onChange }) => {
 
     /********************************/
     const [form] = Form.useForm();
-    const [visible, setVisible] = useState<boolean>(false)
+    const [visible, setVisible] = useState<boolean>(true)
     const [filterTrueList, setFilterTrueList] = useState<QueryProps[]>([])
     const [message, setMessage] = useLocalStorageState('filterQueryContentDayMessage', '');
     /********************************/
 
+    useTimeout(() => {
+        setVisible(false);
+    }, 1000);
+
     useEffect(() => {
         setFiled(message)
     }, [message])
@@ -120,6 +130,7 @@ const FilterQuery: React.FC<Props> = ({ onChange }) => {
     return <div id="filterQueryContent">
         <div style={{ width: '100%', display: 'flex', gap: 8 }}>
             <Popover
+                visible={visible}
                 content={<div style={{ width: 500, height: 400, overflowY: 'auto', padding: '10px 16px' }}>
                     <Form
                         name="FilterQuery"
@@ -147,7 +158,7 @@ const FilterQuery: React.FC<Props> = ({ onChange }) => {
                 title={<Space direction="vertical" size={0}>
                     <h3 style={{ fontWeight: 'bold', marginBottom: 0 }}>你可能找这类广告</h3>
                 </Space>}
-                trigger={'click'}
+                trigger={'hover'}
                 placement="bottomLeft"
                 onVisibleChange={(e) => setVisible(e)}
                 getPopupContainer={() => document.getElementById('filterQueryContent') as any}
@@ -157,6 +168,7 @@ const FilterQuery: React.FC<Props> = ({ onChange }) => {
             <Button type="primary" onClick={onFinish} icon={<SearchOutlined />}>搜索</Button>
             <Button onClick={() => {
                 form.resetFields();
+                onFinish()
             }}>重置</Button>
         </div>
         {filterTrueList.length > 0 && <div className="selectedFilter">

src/pages/launchSystemNew/adq/ad/FilterQuery.tsx

@@ -3,7 +3,7 @@ import { Button, DatePicker, Form, Input, InputNumber, Popover, Select, Space }
 import React, { useEffect, useState } from "react"
 import './index.less'
 import moment from "moment"
-import { useLocalStorageState } from "ahooks"
+import { useLocalStorageState, useTimeout } from "ahooks"
 import { AdStatusEnum, OptimizationGoalEnum, PromotedObjectType } from "@/services/launchAdq/enum"
 import { AdListProps } from "@/services/adMonitor/adMonitor"
 import { useModel } from "umi"
@@ -32,13 +32,17 @@ const FilterQuery: React.FC<Props> = ({ onChange, initialValues, queryForm, setQ
 
     /********************************/
     const [form] = Form.useForm();
-    const [visible, setVisible] = useState<boolean>(false)
+    const [visible, setVisible] = useState<boolean>(true)
     const [filterTrueList, setFilterTrueList] = useState<QueryProps[]>([])
     const [message, setMessage] = useLocalStorageState('filterQueryContentAdMessage', '');
 
     const { getPicherList } = useModel('useOperating.useWxGroupList')
     /********************************/
 
+    useTimeout(() => {
+        setVisible(false);
+    }, 1000);
+
     useEffect(() => {
         getPicherList.run()
     }, [])
@@ -272,7 +276,7 @@ const FilterQuery: React.FC<Props> = ({ onChange, initialValues, queryForm, setQ
     }
 
     return <div id="filterQueryContentAd">
-        <div style={{ width: '100%', display: 'flex', gap: 8 }}>
+        <div style={{ width: '100%', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
             <Select
                 showSearch
                 maxTagCount={1}
@@ -348,10 +352,21 @@ const FilterQuery: React.FC<Props> = ({ onChange, initialValues, queryForm, setQ
                     return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
                 })}
             </Select>
+
+            <DatePicker.RangePicker
+                placeholder={['投放开始时间(起始)', '投放开始时间(结束)']}
+                value={(queryForm?.putDateBegin && queryForm?.putDateEnd) ? [moment(queryForm.putDateBegin), moment(queryForm.putDateEnd)] : undefined as any}
+                style={{ width: 320 }}
+                onChange={(_, o) => {
+                    setQueryForm({ ...queryForm, putDateBegin: o[0], putDateEnd: o[1], pageNum: 1 })
+                }}
+            />
+
             <Popover
                 title={<Space direction="vertical" size={0}>
                     <h3 style={{ fontWeight: 'bold', marginBottom: 0 }}>你可能找这类广告</h3>
                 </Space>}
+                visible={visible}
                 trigger={'click'}
                 placement="bottomLeft"
                 onVisibleChange={(e) => setVisible(e)}
@@ -387,6 +402,7 @@ const FilterQuery: React.FC<Props> = ({ onChange, initialValues, queryForm, setQ
             <Button type="primary" onClick={onFinish} icon={<SearchOutlined />}>搜索</Button>
             <Button onClick={() => {
                 form.resetFields();
+                onFinish()
             }}>重置</Button>
         </div>
         <div className="selectedFilterAd">

src/pages/launchSystemNew/adq/ad/adPlanList.tsx

@@ -1,6 +1,6 @@
 
 import { useAjax } from '@/Hook/useAjax'
-import { Col, Row, message, Space, Button, Switch, notification, Modal, Tooltip, Dropdown, Menu, Select, Input } from 'antd'
+import { Col, Row, message, Space, Button, Switch, notification, Modal, Tooltip, Dropdown, Menu } from 'antd'
 import React, { useEffect, useCallback, useState, useRef } from 'react'
 import TableData from '../../components/TableData'
 import { putAdqAdgroupsSync, delListAdqAdgroupsApi, newEditAdqAdgroupsDataApi, editAdqAdgroupsDataApi, putAdqAdgroupsSyncBatch, putModifyCustomAudienceApi, getPutUserApi } from '@/services/launchAdq/adq'
@@ -33,7 +33,7 @@ const AdPlanList: React.FC<{ userId: string }> = (props) => {
     const [czjlShow, setCzjlShow] = useState(false)
     const [cpVisible, setCpVisible] = useState(false)
     const [accountCreateLogs, setAccountCreateLogs] = useState<{ adAccountId: number, id: number, customAudienceList?: any[], excludedCustomAudienceList?: any[] }[]>([])
-    const [queryForm, setQueryForm] = useState<AdListProps>({ pageNum: 1, pageSize: 20, columns: [] })
+    const [queryForm, setQueryForm] = useState<AdListProps>({ pageNum: 1, pageSize: 20, columns: [], isDeleted: false })
     const [filterForm, setFilterForm] = useState<AdListProps>()
     const getAdList = useAjax((params) => getAdListApi(params), { formatResult: true })
     const syncAjax = useAjax((adAccountId) => putAdqAdgroupsSync(adAccountId))
@@ -411,9 +411,31 @@ const AdPlanList: React.FC<{ userId: string }> = (props) => {
                     }
                 }}
                 onChange={(props: any) => {
-                    let { pagination } = props
+                    let { sortData, pagination } = props
                     let { current, pageSize } = pagination
-                    setQueryForm({ ...queryForm, pageNum: current, pageSize })
+                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
+                    newQueryForm.pageNum = current
+                    newQueryForm.pageSize = pageSize
+                    if (sortData && JSON.stringify('sortData') !== '{}') {
+                        let { field, order } = sortData   // descend 降序 大到小  ascend 升序 小到大
+                        if (order) {
+                            newQueryForm.sortColumn = field
+                            newQueryForm.sortAsc = order === 'ascend'
+                        } else {
+                            Object.keys(newQueryForm).forEach(key => {
+                                if (key === 'sortColumn' || key === 'sortAsc') {
+                                    delete newQueryForm[key]
+                                }
+                            })
+                        }
+                    } else {
+                        Object.keys(newQueryForm).forEach(key => {
+                            if (key === 'sortField' || key === 'sort') {
+                                delete newQueryForm[key]
+                            }
+                        })
+                    }
+                    setQueryForm({ ...newQueryForm })
                 }}
                 expandedRowRender={(data) => <AdExpandedRowRender data={data} scrollLeft={scrollLeft} width={size?.width} />}
             />

src/pages/launchSystemNew/adq/ad/tablePlanListConfig.tsx

@@ -121,6 +121,7 @@ function tablePlanConfig(
             align: 'center',
             width: 150,
             ellipsis: true,
+            sorter: true,
             render: (a: string, b: { end_date: string }) => {
                 return b?.end_date && b?.end_date !== '1970-01-01' ? a + '~' + b.end_date : a + '~' + '长期投放'
             }
@@ -148,6 +149,7 @@ function tablePlanConfig(
             key: 'bid_amount',
             width: 140,
             ellipsis: true,
+            sorter: true,
             render: (a: string, b: { bid_mode: string, optimization_goal: string }) => {
                 return `${b?.bid_mode ? BidModeEnum[b?.bid_mode] : ''} ${a}元/${b?.bid_mode === 'BID_MODE_CPM' ? '千次曝光' : b?.bid_mode === 'BID_MODE_CPC' ? '点击' : OptimizationGoalEnum[b?.optimization_goal]}`
             }
@@ -159,6 +161,7 @@ function tablePlanConfig(
             width: 70,
             align: 'center',
             ellipsis: true,
+            sorter: true,
             render: (a: string, b: { deep_conversion_spec_json: any }) => {
                 if (b?.deep_conversion_spec_json) {
                     return JSON.parse(b?.deep_conversion_spec_json)?.deepConversionWorthSpec?.expectedRoi || '--'
@@ -196,6 +199,7 @@ function tablePlanConfig(
             key: 'daily_budget',
             align: 'center',
             width: 70,
+            sorter: true,
             render: (a: string, b: any) => {
                 return <InputUpdate title={a} isNum={true} dataIndex={'daily_budget'} record={b} handleSave={handleSaveDaily} />
             }
@@ -234,7 +238,6 @@ function tablePlanConfig(
             key: 'status',
             align: 'center',
             width: 70,
-            fixed: 'right',
             ellipsis: true,
             render: (a: string, b: any) => {
                 return b?.rejectMessageList?.filter((str: any) => str)?.length > 0 ? <Popover
@@ -255,7 +258,6 @@ function tablePlanConfig(
             key: 'creative_id',
             width: 70,
             align: 'center',
-            fixed: 'right',
             render: (a: any, b: any) => {
                 return <Box b={b?.creative_preivew} />
             }
@@ -267,7 +269,6 @@ function tablePlanConfig(
             align: 'center',
             width: 80,
             className: 'padding2',
-            fixed: 'right',
             render: (a: any, b: any) => {
                 return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', lineHeight: 'normal', fontSize: 14 }}>
                     <RocketSvg /> <a onClick={() => details(b)} style={{ marginLeft: 10 }}>详情</a>
@@ -280,7 +281,6 @@ function tablePlanConfig(
             key: 'cz',
             width: 150,
             align: 'center',
-            fixed: 'right',
             render: (a: any, b: any) => {
                 return <Space>
                     <a onClick={() => log(b)}>告警日志</a>
@@ -297,6 +297,7 @@ function tablePlanConfig(
             key: 'create_time',
             align: 'center',
             width: 120,
+            sorter: true,
             ellipsis: true
         },
         {
@@ -305,6 +306,7 @@ function tablePlanConfig(
             key: 'cost_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='cost_total' />
             }
@@ -315,6 +317,7 @@ function tablePlanConfig(
             key: 'view_total',
             align: 'center',
             width: 80,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='view_total' />
             }
@@ -325,6 +328,7 @@ function tablePlanConfig(
             key: 'thousand_display_price_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='thousand_display_price_total' />
             }
@@ -335,6 +339,7 @@ function tablePlanConfig(
             key: 'click_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='click_total' />
             }
@@ -345,6 +350,7 @@ function tablePlanConfig(
             key: 'ctr_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 if (b?.ctr_total !== undefined && b?.ctr_total !== null) {
                     return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
@@ -359,6 +365,7 @@ function tablePlanConfig(
             key: 'cpc_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='cpc_total' />
             }
@@ -369,6 +376,7 @@ function tablePlanConfig(
             key: 'no_interest_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='no_interest_count_total' />
             }
@@ -379,18 +387,18 @@ function tablePlanConfig(
             key: 'video_play_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='video_play_count_total' />
             }
         },
-
-
         {
             title: '下载次数',
             dataIndex: 'download_count_total',
             key: 'download_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='download_count_total' />
             }
@@ -401,6 +409,7 @@ function tablePlanConfig(
             key: 'install_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='install_count_total' />
             }
@@ -411,6 +420,7 @@ function tablePlanConfig(
             key: 'activated_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='activated_count_total' />
             }
@@ -421,6 +431,7 @@ function tablePlanConfig(
             key: 'mp_follow_uv_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='mp_follow_uv_total' />
             }
@@ -431,6 +442,7 @@ function tablePlanConfig(
             key: 'mp_follow_cost_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='mp_follow_cost_total' />
             }
@@ -441,6 +453,7 @@ function tablePlanConfig(
             key: 'mp_follow_rate_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 if (b?.mp_follow_rate_total !== undefined && b?.mp_follow_rate_total !== null) {
                     return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
@@ -455,6 +468,7 @@ function tablePlanConfig(
             key: 'mp_follow_pv_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='mp_follow_pv_total' />
             }
@@ -465,17 +479,18 @@ function tablePlanConfig(
             key: 'mp_follow_pv_cost_total',
             align: 'center',
             width: 100,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='mp_follow_pv_cost_total' />
             }
         },
-
         {
             title: '快应用添加次数',
             dataIndex: 'add_quick_app_pv_total',
             key: 'add_quick_app_pv_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='add_quick_app_pv_total' />
             }
@@ -486,6 +501,7 @@ function tablePlanConfig(
             key: 'add_quick_app_cost_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='add_quick_app_cost_total' />
             }
@@ -496,6 +512,7 @@ function tablePlanConfig(
             key: 'add_quick_app_rate_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 if (b?.add_quick_app_rate_total !== undefined && b?.add_quick_app_rate_total !== null) {
                     return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
@@ -510,6 +527,7 @@ function tablePlanConfig(
             key: 'scan_follow_uv_total',
             align: 'center',
             width: 100,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='scan_follow_uv_total' />
             }
@@ -520,6 +538,7 @@ function tablePlanConfig(
             key: 'scan_follow_cost_total',
             align: 'center',
             width: 100,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='scan_follow_cost_total' />
             }
@@ -530,6 +549,7 @@ function tablePlanConfig(
             key: 'scan_follow_rate_total',
             align: 'center',
             width: 100,
+            sorter: true,
             render: (a: any, b: any) => {
                 if (b?.scan_follow_rate_total !== undefined && b?.scan_follow_rate_total !== null) {
                     return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
@@ -546,6 +566,7 @@ function tablePlanConfig(
             key: 'first_day_order_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='first_day_order_count_total' />
             }
@@ -556,6 +577,7 @@ function tablePlanConfig(
             key: 'first_day_order_amount_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='first_day_order_amount_total' />
             }
@@ -566,6 +588,7 @@ function tablePlanConfig(
             key: 'first_day_order_roi_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 if (b?.first_day_order_roi_total !== undefined && b?.first_day_order_roi_total !== null) {
                     return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
@@ -580,6 +603,7 @@ function tablePlanConfig(
             key: 'order_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='order_count_total' />
             }
@@ -590,6 +614,7 @@ function tablePlanConfig(
             key: 'order_amount_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='order_amount_total' />
             }
@@ -600,6 +625,7 @@ function tablePlanConfig(
             key: 'order_cost_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='order_cost_total' />
             }
@@ -610,6 +636,7 @@ function tablePlanConfig(
             key: 'order_rate_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 if (b?.order_rate_total !== undefined && b?.order_rate_total !== null) {
                     return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
@@ -624,6 +651,7 @@ function tablePlanConfig(
             key: 'order_roi_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 if (b?.order_roi_total !== undefined && b?.order_roi_total !== null) {
                     return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
@@ -638,6 +666,7 @@ function tablePlanConfig(
             key: 'atv_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='atv_total' />
             }
@@ -648,6 +677,7 @@ function tablePlanConfig(
             key: 'conversions_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='conversions_count_total' />
             }
@@ -658,6 +688,7 @@ function tablePlanConfig(
             key: 'conversions_cost_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='conversions_cost_total' />
             }
@@ -668,6 +699,7 @@ function tablePlanConfig(
             key: 'deep_conversions_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='deep_conversions_count_total' />
             }
@@ -678,6 +710,7 @@ function tablePlanConfig(
             key: 'conversions_rate_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 if (b?.conversions_rate_total !== undefined && b?.conversions_rate_total !== null) {
                     return <Statistic value={a ? a.toFixed(2) : 0} precision={2} valueStyle={{ color: '#3f8600' }} suffix="%" />
@@ -692,6 +725,7 @@ function tablePlanConfig(
             key: 'add_fans_count_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='add_fans_count_total' />
             }
@@ -702,6 +736,7 @@ function tablePlanConfig(
             key: 'add_fans_cost_total',
             align: 'center',
             width: 90,
+            sorter: true,
             render: (a: any, b: any) => {
                 return <StatisticNull data={b} field='add_fans_cost_total' />
             }

src/services/adMonitor/adMonitor.ts

@@ -405,6 +405,9 @@ export interface AdListProps {
     sortColumn?: string
     status?: string
     sysUserIds?: number
+
+    putDateBegin?: string,
+    putDateEnd?: string
 }
 export async function getAdListApi(data: AdListProps) {
     return request(`${api}/tencentMonitor/ad/list`, {