fix

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

@@ -0,0 +1,144 @@
+import { PlusOutlined } from "@ant-design/icons"
+import { Button, Form, Input, message, Modal, Select, Table } from "antd"
+import React, { useEffect, useState } from "react"
+import { useModel } from "umi"
+import columnsAdd from "./tableConfigAdd"
+
+
+interface Props {
+    pitcherData: any[],
+    onChange: () => void
+}
+/**
+ * 新增媒体账户组
+ * @returns 
+ */
+const KEY = 'ADQUSERS'
+const AddGroup: React.FC<Props> = (props) => {
+
+    /**********************/
+    const { pitcherData, onChange } = props
+    const [visible, setVisible] = useState<boolean>(false)
+    const [addVisible, setAddVisible] = useState<boolean>(false)
+    const [pitcherDB, setPitcherDB] = useState<any[]>([])
+    const [initialValues, setInitialValues] = useState<any>({})
+
+    const [form] = Form.useForm()
+    const { currentUser: { userId } }: any = useModel('@@initialState', model => ({ currentUser: model.initialState?.currentUser }))
+    /**********************/
+    // 进入查找库
+    useEffect(() => {
+        getList()
+    }, [])
+
+    // 
+    const getList = () => {
+        let data = localStorage.getItem(KEY + userId)
+        if (data) {
+            setPitcherDB(JSON.parse(data))
+        }
+        onChange && onChange()
+    }
+
+    /** 确定新增 */
+    const handleOk = async () => {
+        form.submit()
+        let data = await form.validateFields()
+        console.log(data)
+        let length = pitcherDB.length
+        if (Object.keys(initialValues).length > 0) { // 修改
+            let newPitcherDB = pitcherDB.map((item: { id: number }) => {
+                if (initialValues.id === item.id) {
+                    return { ...data, id: initialValues.id, users: data.pitcher?.map((str: string) => str.split('_')[1]), ids: data.pitcher?.map((str: string) => str.split('_')[0]) }
+                }
+                return item
+            })
+            localStorage.setItem(KEY + userId, JSON.stringify(newPitcherDB))
+            message.success('修改成功')
+        } else { // 新增
+            data.id = length > 0 ? pitcherDB[length - 1].id + 1 : 1
+            if (pitcherDB?.some((item: { name: string }) => item.name === data?.name)) {
+                message.error('组名重复，请重新输入')
+                return
+            }
+            let newData = data
+            newData = { ...data, users: data.pitcher?.map((str: string) => str.split('_')[1]), ids: data.pitcher?.map((str: string) => str.split('_')[0]) }
+            pitcherDB.push(newData)
+            localStorage.setItem(KEY + userId, JSON.stringify(pitcherDB))
+            message.success('新增成功')
+        }
+        getList()
+        setAddVisible(false)
+        setInitialValues({})
+        form.resetFields()
+    }
+
+    /** 删除 */
+    const del = (id: number) => {
+        let newpitcherDB = pitcherDB.filter((item: { id: number }) => item.id !== id)
+        localStorage.setItem(KEY + userId, JSON.stringify(newpitcherDB?.map((item: { id: number }, index: number) => ({ ...item, id: index + 1 }))))
+        getList()
+        message.success('删除成功')
+    }
+
+    /** 修改 */
+    const edit = (value: any) => {
+        setInitialValues(value)
+        form.resetFields()
+        setAddVisible(true)
+    }
+
+    /** 清空 */
+    const clear = () => {
+        setInitialValues({})
+        form.resetFields()
+    }
+
+    return <div>
+        <Button type='primary' onClick={() => { setVisible(true) }}><PlusOutlined />新增媒体账户组</Button>
+
+        {visible && <Modal title="媒体账号组" footer={null} visible={visible} width={900} onCancel={() => { setVisible(false) }}>
+            <Button type='primary' onClick={() => { setAddVisible(true) }} style={{ marginBottom: 10 }}><PlusOutlined />新增</Button>
+            <Table columns={columnsAdd(del, edit)} dataSource={pitcherDB} size='small' bordered rowKey={(e) => { return e.id }} />
+        </Modal>}
+
+        {addVisible && <Modal title="新增媒体账号组" visible={visible} width={450} onOk={() => handleOk()} onCancel={() => { setAddVisible(false); clear() }}>
+            <Form
+                name="basic"
+                form={form}
+                labelCol={{ span: 4 }}
+                wrapperCol={{ span: 20 }}
+                autoComplete="off"
+                initialValues={initialValues}
+            >
+                <Form.Item label="组名" name="name" rules={[{ required: true, message: '请输入组名!' }]}>
+                    <Input placeholder="请输入组名" max={6} disabled={Object.keys(initialValues).length > 0} />
+                </Form.Item>
+                <Form.Item label="账号" name="pitcher" rules={[{ required: true, message: '请选择账号!' }]}>
+                    <Select
+                        placeholder='请输账号ID'
+                        showArrow
+                        showSearch
+                        allowClear
+                        maxTagCount={3}
+                        filterOption={(input: any, option: any) => {
+                            return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
+                        }}
+                        mode="multiple"
+                    >
+                        {
+                            pitcherData?.map((list: any, eq: number) => {
+                                return <Select.Option key={list?.id} value={list?.id + '_' + list.accountId}>
+                                    {list.remark ? list.accountId + '——' + list.remark : list.accountId}
+                                </Select.Option>
+                            })
+                        })
+                    </Select>
+                </Form.Item>
+            </Form>
+        </Modal>}
+    </div>
+}
+
+
+export default React.memo(AddGroup)

src/pages/launchSystemNew/components/addGroup/tableConfigAdd.tsx

@@ -0,0 +1,55 @@
+import { Popconfirm, Space } from "antd";
+import React from "react";
+
+function columnsAdd(del: (id: number) => void, edit: (value: any) => void) {
+
+    const columns: any = [
+        {
+            title: '操作',
+            dataIndex: 'cz',
+            key: 'cz',
+            align: 'center',
+            width: 90,
+            render: (a: any[], b: any) => {
+                return <Space>
+                    <a style={{ fontSize: 12 }} onClick={() => edit(b)}>修改</a>
+                    <Popconfirm
+                        title="确定删除?"
+                        onConfirm={() => { del(b.id) }}
+                        okText="是"
+                        cancelText="否"
+                    >
+                        <a style={{ fontSize: 12, color: 'red' }}>删除</a>
+                    </Popconfirm>
+                </Space>
+            }
+        },
+        {
+            title: '序号',
+            dataIndex: 'id',
+            key: 'id',
+            align: 'center',
+            width: 50
+        },
+        {
+            title: '组名',
+            dataIndex: 'name',
+            key: 'name',
+            align: 'center',
+            width: 85,
+            ellipsis: true
+        },
+        {
+            title: '账号',
+            dataIndex: 'users',
+            key: 'users',
+            render: (a: any[]) => {
+                return <span>{a?.toString()}</span>
+            }
+        }
+    ];
+
+    return columns
+}
+
+export default columnsAdd

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

@@ -24,6 +24,7 @@ import SubmitModal from "./submitModal"
 import columns from "./tableConfig"
 import TargetIng from './targeting'
 import Creative from './creative'
+import AddGroup from '../../components/addGroup'
 
 const CreateAd: React.FC = () => {
 
@@ -46,7 +47,7 @@ const CreateAd: React.FC = () => {
         adqPageList: [],//云落地页
     })
     const [accountCreateLogs, setAccountCreateLogs] = useState<{ adAccountId: number, id: number, userActionSetsList?: number, productList?: any, conversionList?: any, customAudienceList?: any, excludedCustomAudienceList?: any, pageList?: any }[]>([])  // 账户
-
+    const { currentUser: { userId } }: any = useModel('@@initialState', model => ({ currentUser: model.initialState?.currentUser }))
 
     const [goodsVisible, setGoodsVisible] = useState<boolean>(false) // 选择商品弹窗控制
     const [sourceVisible, setSourceVisible] = useState<boolean>(false) // 选择数据源弹窗控制
@@ -62,6 +63,7 @@ const CreateAd: React.FC = () => {
     const [modelList, setModelList] = useState<any>({})  // 所有品牌手机
     const [targetKey, set_targetKey] = useState('0')//创意key
     const [page_checked, set_page_checked] = useState(false)//创意key
+    const [usesArr, setUsersArr] = useState<any>(localStorage.getItem('ADQUSERS' + userId) ? JSON.parse(localStorage.getItem('ADQUSERS' + userId) as any) : [])
     const { init, get } = useModel('useLaunchAdq.useBdMediaPup')
 
 
@@ -189,7 +191,7 @@ const CreateAd: React.FC = () => {
                     sysAdGroupData: queryForm.sysAdgroup,
                     targetingData: queryForm.sysTargeting,
                     sysAdcreativeData: task.sysAdcreative,
-                    pageData: (queryForm.pageList as any)[index] || (queryForm.adqPageList as any)[index]?.find((adq: { adAccountId: any })=>adq.adAccountId === item.adAccountId)?.pageList[0],
+                    pageData: (queryForm.pageList as any)[index] || (queryForm.adqPageList as any)[index]?.find((adq: { adAccountId: any }) => adq.adAccountId === item.adAccountId)?.pageList[0],
                     myId: Number(item.id + '' + index)
                 }
                 data.push(obj)
@@ -199,13 +201,13 @@ const CreateAd: React.FC = () => {
         setTableData(data)
     }
 
-    const submit = (props: { campaignName: string,count?:number }) => {
+    const submit = (props: { campaignName: string, count?: number }) => {
         console.log(111111, tableSelect);
         let params = { ...queryForm, ...props }
         console.log(accountCreateLogs)
         let accountLogs = accountCreateLogs.map((item: any, index) => {
             // userActionSetsList 数据源  productList 商品
-            let data: any = { adAccountId: item.id ,count:props.count || 1}
+            let data: any = { adAccountId: item.id, count: props.count || 1 }
             if (item?.userActionSetsList?.length > 0) { // 数据源
                 data.userActionSets = item?.userActionSetsList?.map((item: any) => ({ id: item?.id, type: item?.type }))
             }
@@ -368,10 +370,48 @@ const CreateAd: React.FC = () => {
             }
         }
     }, [queryForm, targetKey])
-    console.log('queryForm======>',queryForm)
+    // 媒体组更新通知
+    const usersChange=useCallback(()=>{
+        let data = JSON.parse(localStorage.getItem('ADQUSERS' + userId) as any)
+        setUsersArr(data)
+    },[])
+    console.log('queryForm======>111', queryForm)
     return <Space direction="vertical" style={{ width: '100%' }}>
-        <Card title={<div className={style.cardTitle}>配置区</div>} className={style.createAd} hoverable>
+        <Card
+            title={<div className={style.cardTitle}>配置区</div>}
+            className={style.createAd}
+            hoverable
+            extra={<AddGroup onChange={usersChange} pitcherData={getAdAccount?.data?.data} />}
+        >
             <Space>
+                <Selector label="媒体账户组">
+                    <Select
+                        mode="multiple"
+                        style={{ minWidth: 200 }}
+                        placeholder="快捷选择媒体账户组"
+                        maxTagCount={1}
+                        allowClear
+                        bordered={false}
+                        filterOption={(input: any, option: any) => {
+                            return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
+                        }}
+                        onChange={(e, option) => {
+                            console.log(e,option)
+                            let userArr:any[] = []
+                            e.forEach((key: any)=> {
+                                let obj = usesArr.find((item: { id: any })=>item.id === key)
+                               if(obj){
+                                  userArr.push(obj['pitcher'])
+                               }
+                            })
+                            userArr = [...new Set(userArr.flat())]
+                            setAccountCreateLogs(userArr?.map((item: any) => ({ adAccountId: item?.split('_')[1], id: Number(item?.split('_')[0]) })))
+                            clearData()
+                        }}
+                    >
+                        {usesArr?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
+                    </Select>
+                </Selector>
                 <Selector label="媒体账户">
                     <Select
                         mode="multiple"
@@ -393,12 +433,8 @@ const CreateAd: React.FC = () => {
                         }}
                     >
                         {getAdAccount?.data?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.remark ? item.accountId + '——' + item.remark : item.accountId}</Select.Option>)}
-                        {/* <Select.OptGroup label="Engineer">
-                            <Select.Option value="20632113">20632113</Select.Option>
-                        </Select.OptGroup> */}
                     </Select>
                 </Selector>
-
                 <Selector label="推广目标">
                     <Select style={{ width: 200 }} value={queryForm?.promotedObjectType} placeholder="请选择推广目标" bordered={false} showSearch filterOption={(input: any, option: any) =>
                         (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
@@ -559,17 +595,17 @@ const CreateAd: React.FC = () => {
                                     </Tabs>
                                 </div>
                                 <div className={style.bottom}>{
-                                   ( queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative) ? <>
+                                    (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative) ? <>
                                         {queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId && <Button type="link" onClick={() => { setLookVisible(true) }}>查看</Button>}
                                         <Button type="link" onClick={() => {
                                             setSelectImgVisible(true)
                                             // 判定是否用原生页顶部替换外部素材
-                                            if(queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE' ){
-                                                init({ mediaType: 'PAGE', cloudSize:undefined,adcreativeTemplateId:queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId})
-                                            }else{
-                                                init({ mediaType: 'PAGE', cloudSize:undefined})
+                                            if (queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.overrideCanvasHeadOption === 'OPTION_CANVAS_OVERRIDE_CREATIVE') {
+                                                init({ mediaType: 'PAGE', cloudSize: undefined, adcreativeTemplateId: queryForm?.taskMediaMaps[targetKey]?.sysAdcreative?.adcreativeTemplateId })
+                                            } else {
+                                                init({ mediaType: 'PAGE', cloudSize: undefined })
                                             }
-                                           
+
                                         }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysPageId ? '修改' : '选择落地页'}</Button>
                                         {/* {accountCreateLogs?.length > 0  ?  <Button type="link" onClick={() => { setPageVisible(true) }}>云端落地页</Button> : <Tooltip title="请先选择媒体账户">
                                             <Button type="link">云端落地页</Button>