fix

src/pages/launchSystemNew/adq/campaign/index.tsx

@@ -1,11 +1,12 @@
 
 import { useAjax } from '@/Hook/useAjax'
 import { CampaignTypeEnum, ConfiguredStatusEnum, PromotedObjectType } from '@/services/launchAdq/enum'
-import { Col, Row, Input, Select, message, Button } from 'antd'
+import { Col, Row, Input, Select, message, Button, Popconfirm, Tooltip } from 'antd'
 import React, { useEffect, useCallback, useState } from 'react'
 import TableData from '../../components/TableData'
 import tableConfig from './tableConfig'
-import { getAdqCampaignList, putAdqCampaignPage, putAdqCampaignConfigStatus } from '@/services/launchAdq/adq'
+import { getAdqCampaignList, putAdqCampaignPage, putAdqCampaignConfigStatus, delCampaignIdsApi, putConfigStatusApi } from '@/services/launchAdq/adq'
+import { PauseCircleOutlined, PlayCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons'
 type Props = {
     accountId: string,
     adAccountId: string,
@@ -32,11 +33,13 @@ type Props = {
 }
 
 function Campaign(props: Props) {
-    let { accountId, adAccountId, userId, queryParmas, tableIdClick } = props
+    let { userId, queryParmas, tableIdClick } = props
     // api方法
     const listAjax = useAjax((params) => getAdqCampaignList(params), { formatResult: true })
     const syncAjax = useAjax((adAccountId) => putAdqCampaignPage(adAccountId))
     const switchAjax = useAjax((params) => putAdqCampaignConfigStatus(params))
+    const delCampaignIds = useAjax((params) => delCampaignIdsApi(params))
+    const putConfigStatus = useAjax((params) => putConfigStatusApi(params))
     const [selectedRows, setSelectedRows] = useState<any[]>([])
     const [queryFrom, set_queryFrom] = useState<{
         pageNum: number;
@@ -55,37 +58,137 @@ function Campaign(props: Props) {
     }, [userId, queryParmas.accountId, queryParmas.campaignId])
     // 获取列表
     const getList = useCallback((params: any) => {
-        // if (!params.campaignName || params.campaignName !== listAjax?.params[0]?.adcreativeName) {
-        //     !params.campaignName && delete params.campaignName
-        // }
         listAjax.run({ ...params, userId })
     }, [userId, listAjax,])
     // 同步 
     const sync = useCallback(() => {
-        // if (selectedRows?.length === 0) {
-        //     message.error('请先勾选要同步的广点通账号!')
-        //     return
-        // }
-        let arr = [...new Set(selectedRows?.map(item=>item.accountId))]
-        syncAjax.run({ accountIdList:arr }).then(res => {
+        let arr = [...new Set(selectedRows?.map(item => item.accountId))]
+        syncAjax.run({ accountIdList: arr }).then(res => {
             res && listAjax.refresh()
             res ? message.success('同步成功！') : message.error('同步失败！')
 
         })
-    }, [listAjax,selectedRows])
+    }, [listAjax, selectedRows])
     // 启停
     const switchHandle = useCallback((data, checked) => {
         let { accountId, campaignId } = data
         let configuredStatus = checked ? 'AD_STATUS_NORMAL' : 'AD_STATUS_SUSPEND'
         switchAjax.run({ accountId, campaignId, configuredStatus }).then(res => {
-            res && listAjax.refresh()
+            setSelectedRows([])
+            listAjax.refresh()
             res ? message.success(checked ? '开启计划成功！' : '关闭计划成功！') : message.error(checked ? '开启计划失败' : '关闭计划失败！')
         })
-    }, [])
+    }, [listAjax])
+
+    // 修改状态
+    const adStatus = (configuredStatus: 'AD_STATUS_NORMAL' | 'AD_STATUS_SUSPEND') => {
+        putConfigStatus.run({ list: selectedRows.map(item => item.accountId + '_' + item.campaignId).toString(), configuredStatus }).then(res => {
+            message.success(configuredStatus === 'AD_STATUS_NORMAL' ? '开启计划成功！' : '关闭计划成功！')
+            setSelectedRows([])
+            listAjax.refresh()
+        })
+    }
+
+    // 批量删除计划
+    const delCampaigns = () => {
+        // if (selectedRows.some(item => item.configuredStatus === 'AD_STATUS_NORMAL')) {
+        //     message.error('只能删除暂停的计划')
+        //     return
+        // }
+        delCampaignIds.run({ list: selectedRows.map(item => item.accountId + '_' + item.campaignId).toString() }).then(res => {
+            message.info({ content: res, duration: 5 })
+            setSelectedRows([])
+            listAjax.refresh()
+        })
+    }
+
     return <div>
+        <Row gutter={[6, 6]} align='middle' style={{ marginBottom: 15 }}>
+            <Col>
+                <Input
+                    placeholder='广告账号'
+                    allowClear
+                    style={{ width: 150 }}
+                    onChange={(e) => {
+                        let value = e.target.value
+                        set_queryFrom({ ...queryFrom, accountId: value })
+                        tableIdClick({ activeKey: '1', parma: { accountId: '' } })
+                    }}
+                />
+            </Col>
+            <Col>
+                <Input
+                    placeholder='计划名称'
+                    allowClear
+                    style={{ width: 150 }}
+                    onChange={(e) => {
+                        let value = e.target.value
+                        set_queryFrom({ ...queryFrom, campaignName: value })
+                    }}
+                />
+            </Col>
+            <Col>
+                <Input
+                    placeholder='计划ID'
+                    allowClear
+                    style={{ width: 150 }}
+                    onChange={(e) => {
+                        let value = e.target.value
+                        set_queryFrom({ ...queryFrom, campaignId: value })
+                        tableIdClick({ activeKey: '2', parma: { campaignId: '' } })
+                    }}
+                />
+            </Col>
+            <Col>
+                <Select placeholder='推广目标选择' style={{ minWidth: 150 }} showSearch filterOption={(input: any, option: any) =>
+                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+                } allowClear onChange={(value: any) => {
+                    set_queryFrom({ ...queryFrom, promotedObjectType: value })
+                }}>
+                    {
+                        Object.keys(PromotedObjectType).map(key => {
+                            // let obj = JSON.parse(PromotedObjectType[key])
+                            return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
+                        })
+                    }
+                </Select>
+            </Col>
+            <Col>
+                <Select placeholder='计划状态' style={{ minWidth: 150 }} showSearch filterOption={(input: any, option: any) =>
+                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+                } allowClear onChange={(value: any) => {
+                    set_queryFrom({ ...queryFrom, configuredStatus: value })
+                }}>
+                    {
+                        Object.keys(ConfiguredStatusEnum).map(key => {
+                            // let obj = JSON.parse(PromotedObjectType[key])
+                            return <Select.Option value={key} key={key}>{ConfiguredStatusEnum[key]}</Select.Option>
+                        })
+                    }
+                </Select>
+            </Col>
+            <Col>
+                <Select placeholder='计划类型' style={{ minWidth: 150 }} showSearch filterOption={(input: any, option: any) =>
+                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
+                } allowClear onChange={(value: any) => {
+                    set_queryFrom({ ...queryFrom, campaignType: value })
+                }}>
+                    {
+                        Object.keys(CampaignTypeEnum).map(key => {
+                            // let obj = JSON.parse(PromotedObjectType[key])
+                            console.log(key)
+                            return <Select.Option value={key} key={key}>{CampaignTypeEnum[key]}</Select.Option>
+                        })
+                    }
+                </Select>
+            </Col>
+            <Col>
+                <Button type='primary' onClick={() => { getList({ ...queryFrom, pageNum: 1 }) }}>搜索</Button>
+            </Col>
+        </Row>
         <TableData
             isCard={false}
-            columns={() => tableConfig(switchHandle, tableIdClick)}
+            columns={() => tableConfig(switchHandle)}
             ajax={listAjax}
             syncAjax={sync}
             dataSource={listAjax?.data?.data?.records}
@@ -97,99 +200,68 @@ function Campaign(props: Props) {
             myKey={'campaignId'}
             leftChild={<>
                 <Row gutter={[10, 10]}>
+                    <Col><Button type='primary' loading={putConfigStatus.loading} style={{ background: '#67c23a', borderColor: '#67c23a' }} icon={<PlayCircleOutlined />} disabled={selectedRows.length === 0} onClick={() => adStatus('AD_STATUS_NORMAL')}>启动</Button></Col>
+                    <Col><Button type='primary' loading={putConfigStatus.loading} style={{ background: '#e6a23c', borderColor: '#e6a23c' }} icon={<PauseCircleOutlined />} disabled={selectedRows.length === 0} onClick={() => adStatus('AD_STATUS_SUSPEND')}>暂停</Button></Col>
+                    <Col><Popconfirm
+                        title="确定删除？"
+                        onConfirm={delCampaigns}
+                        disabled={selectedRows.length === 0}
+                    >
+                        <Button danger disabled={selectedRows.length === 0} loading={delCampaignIds.loading}>
+                            删除
+                            {/* <Tooltip title="只支持删除暂停的计划">
+                                <QuestionCircleOutlined />
+                            </Tooltip> */}
+                        </Button>
+                    </Popconfirm></Col>
                     <Col>
-                        <Input
-                            placeholder='广告账号'
-                            allowClear
-                            style={{ width: 150 }}
-                            onChange={(e) => {
-                                let value = e.target.value
-                                set_queryFrom({ ...queryFrom, accountId: value })
-                                tableIdClick({ activeKey: '1', parma: { accountId: '' } })
-                            }}
-                        />
-                    </Col>
-                    <Col>
-                        <Input
-                            placeholder='计划名称'
-                            allowClear
-                            style={{ width: 150 }}
-                            onChange={(e) => {
-                                let value = e.target.value
-                                set_queryFrom({ ...queryFrom, campaignName: value })
-                            }}
-                        />
-                    </Col>
-                    <Col>
-                        <Input
-                            placeholder='计划ID'
-                            allowClear
-                            style={{ width: 150 }}
-                            onChange={(e) => {
-                                let value = e.target.value
-                                set_queryFrom({ ...queryFrom, campaignId: value })
-                                tableIdClick({ activeKey: '2', parma: { campaignId: '' } })
-                            }}
-                        />
-                    </Col>
-                    <Col>
-                        <Select placeholder='推广目标选择' style={{ minWidth: 150 }} showSearch filterOption={(input: any, option: any) =>
-                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
-                        } allowClear onChange={(value: any) => {
-                            set_queryFrom({ ...queryFrom, promotedObjectType: value })
-                        }}>
-                            {
-                                Object.keys(PromotedObjectType).map(key => {
-                                    // let obj = JSON.parse(PromotedObjectType[key])
-                                    return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
-                                })
-                            }
-                        </Select>
-                    </Col>
-                    <Col>
-                        <Select placeholder='计划状态' style={{ minWidth: 150 }} showSearch filterOption={(input: any, option: any) =>
-                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
-                        } allowClear onChange={(value: any) => {
-                            set_queryFrom({ ...queryFrom, configuredStatus: value })
-                        }}>
-                            {
-                                Object.keys(ConfiguredStatusEnum).map(key => {
-                                    // let obj = JSON.parse(PromotedObjectType[key])
-                                    return <Select.Option value={key} key={key}>{ConfiguredStatusEnum[key]}</Select.Option>
-                                })
-                            }
-                        </Select>
-                    </Col>
-                    <Col>
-                        <Select placeholder='计划类型' style={{ minWidth: 150 }} showSearch filterOption={(input: any, option: any) =>
-                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
-                        } allowClear onChange={(value: any) => {
-                            set_queryFrom({ ...queryFrom, campaignType: value })
-                        }}>
-                            {
-                                Object.keys(CampaignTypeEnum).map(key => {
-                                    // let obj = JSON.parse(PromotedObjectType[key])
-                                    console.log(key)
-                                    return <Select.Option value={key} key={key}>{CampaignTypeEnum[key]}</Select.Option>
-                                })
-                            }
-                        </Select>
-                    </Col>
-                    <Col>
-                        <Button type='primary' onClick={() => { getList({ ...queryFrom, pageNum: 1 }) }}>搜索</Button>
+                        {selectedRows?.length > 0 && <Button type='link' style={{ padding: 0, color: 'red' }} onClick={() => {
+                            setSelectedRows([])
+                        }}>清空已选（{selectedRows?.length}）</Button>}
                     </Col>
                 </Row>
             </>}
             onChange={(props: any) => {
-                let { sortData, pagination } = props
+                let { pagination } = props
                 let { current, pageSize } = pagination
                 set_queryFrom({ ...queryFrom, pageNum: current, pageSize })
                 getList({ ...queryFrom, pageNum: current, pageSize })
             }}
             rowSelection={{
                 selectedRowKeys: selectedRows?.map(item => item?.campaignId?.toString()),
-                onChange: (selectedRowKeys: any, selectedRows: any) => {
-                    setSelectedRows(selectedRows)
+                getCheckboxProps: (record: any) => ({
+                    disabled: record.isDeleted
+                }),
+                onSelect: (record: { campaignId: number }, selected: boolean) => {
+                    if (selected) {
+                        selectedRows.push({ ...record })
+                        setSelectedRows([...selectedRows])
+                    } else {
+                        let newSelectAccData = selectedRows.filter((item: { campaignId: number }) => item.campaignId !== record.campaignId)
+                        setSelectedRows([...newSelectAccData])
+                    }
+                },
+                onSelectAll: (selected: boolean, selectedRowss: { campaignId: number }[], changeRows: { campaignId: number }[]) => {
+                    if (selected) {
+                        let newSelectAccData = [...selectedRows]
+                        changeRows.forEach((item: { campaignId: number }) => {
+                            let index = newSelectAccData.findIndex((ite: { campaignId: number }) => ite.campaignId === item.campaignId)
+                            if (index === -1) {
+                                newSelectAccData.push({ ...item })
+                            }
+                        })
+                        setSelectedRows([...newSelectAccData])
+                    } else {
+                        let newSelectAccData = selectedRows.filter((item: { campaignId: number }) => {
+                            let index = changeRows.findIndex((ite: { campaignId: number }) => ite.campaignId === item.campaignId)
+                            if (index !== -1) {
+                                return false
+                            } else {
+                                return true
+                            }
+                        })
+                        setSelectedRows([...newSelectAccData])
+                    }
                 }
             }}
         />

src/pages/launchSystemNew/adq/campaign/tableConfig.tsx

@@ -1,22 +1,9 @@
 import { CampaignTypeEnum, ConfiguredStatusEnum, PromotedObjectType, SpeedMode } from '@/services/launchAdq/enum'
 import { copy } from '@/utils/utils'
-import { CopyOutlined } from '@ant-design/icons'
 import { Badge, Space, Switch } from 'antd'
 import React from 'react'
 
-function tableConfig(
-    switchHandle: (data: any, Status: any) => void,
-    tableIdClick: (props: {
-        activeKey: string,
-        parma: {
-            accountId?: string,//账户ID
-            campaignId?: string,//计划ID
-            adgroupId?: string,//广告ID
-            adcreativeId?: string,//创意ID
-            pageId?: string,//落地页ID
-            targetingId?: string,//定向ID
-        }
-    }) => void): any {
+function tableConfig(switchHandle: (data: any, Status: any) => void): any {
     return [
         {
             title: '启停',
@@ -26,7 +13,7 @@ function tableConfig(
             width: 50,
             fixed: 'left',
             render: (a: string, b: any) => {
-                return <Switch defaultChecked={b?.configuredStatus === 'AD_STATUS_NORMAL'} onChange={(checked: boolean) => {
+                return <Switch size='small' checked={b?.configuredStatus === 'AD_STATUS_NORMAL'} onChange={(checked: boolean) => {
                     switchHandle(b, checked)
                 }} />
             }

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

@@ -63,19 +63,21 @@ const SelectCloud: React.FC<Props> = (props) => {
         title={<Space>
             <span>选择素材</span>
             {(selectItem && num && selectItem?.length > 0 && num > 1) && <div className={style.selected}>
-                {mediaType === 'IMG' ? <div>
-                    <Image.PreviewGroup>
-                        {selectItem?.filter((item: any, index: number) => index + 1 <= 10)?.map((item: any, index: number) => (<div className={style.antImg} key={index}>
-                            <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
-                            <Image
-                                className={style.imgAnt}
-                                width={32}
-                                height={32}
-                                src={item?.url}
-                            />
-                        </div>))}
-                    </Image.PreviewGroup>
-                    {selectItem.length > 10 && <span>...</span>}
+                {mediaType === 'IMG' ? <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+                    <div style={{ overflowX: 'auto', maxWidth: 950, paddingTop: 8, display: 'flex' }}>
+                        <Image.PreviewGroup>
+                            {selectItem?.map((item: any, index: number) => (<div className={style.antImg} key={index}>
+                                <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />
+                                <Image
+                                    className={style.imgAnt}
+                                    width={30}
+                                    height={30}
+                                    src={item?.url}
+                                />
+                            </div>))}
+                        </Image.PreviewGroup>
+                    </div>
+                    <span style={{ color: '#1890ff' }}>已选：{selectItem.length}</span>
                 </div> : selectItem?.map((item: any, index: number) => (
                     <div key={index} className={style.antImg}>
                         <CloseCircleFilled className={style.clear} onClick={() => { clearImg(item?.id) }} />

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

@@ -687,7 +687,7 @@ function CreativePup(props: Props) {
         footer={<Space>
             <Button onClick={() => { PupFn({ visible: false, dataInfo: null, type: 'add' }) }}>取消</Button>
             {
-                dataInfo.id ? <Popconfirm
+                dataInfo?.id ? <Popconfirm
                 title='当前创意为模板点击确定后将变为新创意！如无更改需求请直接取消关闭编辑创意窗口！'
                 onConfirm={()=>{
                     handleOk(true)

src/services/launchAdq/adq.ts

@@ -311,7 +311,7 @@ export async function adcreativeSyncAll(data: {
  */
 export async function putAdqCampaignConfigStatus(params: any) {
   let { accountId, campaignId, configuredStatus } = params
-  return request(api + `/adq/campaign/configStatus/${accountId}/${campaignId}/${configuredStatus}`, {
+  return request(api + `/adq/campaign/configStatus/${accountId + '_' + campaignId}/${configuredStatus}`, {
     method: 'PUT',
   });
 }
@@ -394,4 +394,26 @@ export async function putConfigServiceProvider(data: { accountIds: any[], servic
     method: 'PUT',
     data
   });
+}
+
+/**
+ * 删除计划
+ * @param data 
+ * @returns 
+ */
+export async function delCampaignIdsApi(data: { list: string }) {
+  return request(api + `/adq/campaign/del/${data.list}`, {
+    method: 'DELETE'
+  });
+}
+
+/**
+ * 批量修改计划状态
+ * @param data 
+ * @returns 
+ */
+export async function putConfigStatusApi(data: { list: string, configuredStatus: 'AD_STATUS_NORMAL' | 'AD_STATUS_SUSPEND' }) {
+  return request(api + `/adq/campaign/configStatus/${data.list}/${data.configuredStatus}`, {
+    method: 'PUT'
+  });
 }