arg&-a

src/pages/launchSystemNew/account/appointPut.tsx

@@ -45,15 +45,6 @@ const AppointPut: React.FC<Props> = (props) => {
                         key: item.userId,
                         label: item.nickname
                     }
-                    // let obj = {
-                    //     key: item.key.userId,
-                    //     label: item.key.nickName
-                    // }
-                    // if (item?.value) {
-                    //     obj['childrenarr'] = item?.value?.map(item => {
-                    //         return { key: item.accountId + '_' + item.id, label: item?.remark ? item.accountId + '_' + item?.remark : item.accountId }
-                    //     })
-                    // }
                     useAll.push(obj)
                 })
                 setUserAll(useAll)

src/pages/launchSystemNew/account/divideIntoGroups.tsx

@@ -30,7 +30,6 @@ const DivideIntoGroups: React.FC<Props> = (props) => {
     const handleVisibleChange = (newOpen: boolean) => {
         setVisible(newOpen)
     }
-
     const onChange = (checkedValues: any[]) => {
         let newGroupid = getArrDifference(checkedValues, groupIds)
         if (newGroupid.length > 0) {

src/pages/toutiao/ttAccountManage/appointPut.tsx

@@ -0,0 +1,95 @@
+import { useAjax } from "@/Hook/useAjax"
+import { oceanengine_adAccount_configOperationUser } from "@/services/toutiao/ttAccountManage"
+import { Form, message, Modal, Select } from "antd"
+import React, { useEffect, useState } from "react"
+
+
+interface Props {
+    allOfMember: any
+    onChange?: () => void
+    onClose?: () => void
+    visible?: boolean,
+    value?: any
+}
+
+/**
+ * 指派
+ * @param props 
+ * @returns 
+ */
+const AppointPut: React.FC<Props> = (props) => {
+    /*******************************/
+    const { onChange, onClose, visible, allOfMember, value = null } = props
+    const [userAll, setUserAll] = useState([])
+
+    const [form] = Form.useForm();
+    const addAccountUser = useAjax((params) => oceanengine_adAccount_configOperationUser(params))
+    /*******************************/
+
+    useEffect(() => {
+        // if (value.length === 1) {
+        //     console.log('value--->', value[0].accountUsers?.map((item: any) => item.putUserId));
+
+        //     form.setFieldsValue({ putUserIds: value[0].accountUsers?.map((item: any) => item.putUserId) })
+        // }
+    }, [value])
+
+    /** 获取组员 */
+    useEffect(() => {
+        (async function () {
+            let res = allOfMember?.data || await allOfMember.run()
+            if (res?.data) {
+                let useAll: any = []
+                res?.data?.forEach((item: any) => {
+                    let obj = {
+                        key: item.userId,
+                        label: item.nickname
+                    }
+                    useAll.push(obj)
+                })
+                setUserAll(useAll)
+            }
+        })()
+    }, [])
+
+    const handleOk = () => {
+        form.validateFields().then(values => {
+            console.log(values, value)
+            addAccountUser.run({ ...values, accountId: value?.accountId }).then(res => {
+                message.success('指派成功')
+                onChange?.()
+            })
+        })
+    }
+    console.log("userAll===>",userAll)
+    return <Modal
+        title="指派投放助理"
+        visible={visible}
+        onOk={handleOk}
+        onCancel={() => onClose?.()}
+        confirmLoading={addAccountUser.loading}
+    >
+        <Form
+            form={form}
+            labelCol={{ span: 4 }}
+            colon={false}
+            initialValues={{operationUserIds:value?.operationUserList?.map((item: { userId: any }) => item.userId)}}
+        >
+            <Form.Item label={<strong>组员</strong>} name='operationUserIds' rules={[{ required: true, message: '请选择分组' }]}>
+                <Select
+                    placeholder='请选择组员'
+                    allowClear
+                    showSearch
+                    mode="multiple"
+                    filterOption={(input: string, option: any) => {
+                        return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    }}
+                >
+                    {userAll?.map((item: { key: string, label: number }) => <Select.Option value={item.key} key={item.key}>{item.label}</Select.Option>)}
+                </Select>
+            </Form.Item>
+        </Form>
+    </Modal>
+}
+
+export default React.memo(AppointPut)

src/pages/toutiao/ttAccountManage/index.tsx

@@ -1,49 +1,57 @@
 import HocError from '@/Hoc/HocError'
-import GroupLeft from '@/pages/launchSystemNew/account/groupLeft'
 import TeamMembers from '@/pages/launchSystemNew/components/teamMembers'
-import { GetAdAccountParams } from '@/services/launchAdq/adAuthorize'
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
-import { Tabs } from 'antd'
+import { Select, Tabs } from 'antd'
 import React, { useCallback, useEffect, useState } from 'react'
 import style from './index.less'
-import { getAdAccountAllOfMember } from '@/services/launchAdq/adq'
+import { getAdAccountAllOfMember, getErpUserAll } from '@/services/launchAdq/adq'
 import { useAjax } from '@/Hook/useAjax'
 import TableData from '@/pages/launchSystemNew/components/TableData'
 import { oceanengine_adAccount_listOfUser } from '@/services/toutiao/ttAccountManage'
+import { columns } from './tableConfig'
+import AppointPut from './appointPut'
 function ttAccountManage() {
+    const [puShow, setPuShow] = useState<boolean>(false)
+    const [puData, setPuData] = useState<any[]>([])
     const [activeKey, setActiveKey] = useState<string>('1')
     const [showLeft, setShowLeft] = useState<boolean>(false)
-    const [queryForm, setQueryForm] = useState<GetAdAccountParams>({ pageNum: 1, pageSize: 20 })
+    const [queryForm, setQueryForm] = useState<any>({ pageNum: 1, pageSize: 20 })
 
     const allOfMember = useAjax(() => getAdAccountAllOfMember(), { formatResult: true })
+    const erpUserALL = useAjax(() => getErpUserAll(), { formatResult: true })
     const getAdAccountList = useAjax((params) => oceanengine_adAccount_listOfUser(params), { formatResult: true })
 
     useEffect(() => {
+        !erpUserALL.data && erpUserALL.run()
         getList()
-    }, [])
-
-
+    }, [queryForm])
     /** 获取账号列表 */
     const getList = useCallback(() => {
-        let params = JSON.parse(JSON.stringify(queryForm))
-        if (params.accountIds) {
-            params.accountIds = params.accountIds.split(/[\,\，]/)
-        } else {
-            delete params?.accountIds
-        }
-        getAdAccountList.run(params)
+        // let params = JSON.parse(JSON.stringify(queryForm))
+        // if (params.accountIds) {
+        //     params.accountIds = params.accountIds.split(/[\,\，]/)
+        // } else {
+        //     delete params?.accountIds
+        // }
+        getAdAccountList.run(queryForm)
     }, [queryForm])
+
+
+    /** 指派投手 */
+    const putUserHandle = (data: any[]) => {
+        setPuData(data)
+        setPuShow(true)
+    }
     return <div style={{ height: '100%' }}>
         <Tabs
             tabBarStyle={{ marginBottom: 1 }}
             activeKey={activeKey}
             type="card"
-            // tabBarExtraContent={<Button type='primary' onClick={()=>setVisible(true)}><PlusOutlined />广告账号授权</Button>}
             onChange={(activeKey) => {
                 if (activeKey !== 'contract') {
                     let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                     delete newQueryForm?.groupId
-                    delete newQueryForm?.putUserId
+                    delete newQueryForm?.userId
                     setQueryForm(newQueryForm)
                     setActiveKey(activeKey)
                 } else {
@@ -56,20 +64,37 @@ function ttAccountManage() {
             <Tabs.TabPane tab={showLeft ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} key='contract' />
         </Tabs>
         <div className={style.manage}>
-            {!showLeft && activeKey === '1' && <GroupLeft onChange={(groupId) => setQueryForm({ ...queryForm, groupId, pageNum: 1 })} value={queryForm?.groupId} />}
-            {!showLeft && activeKey === '2' && <TeamMembers allOfMember={allOfMember} onChange={(putUserId) => setQueryForm({ ...queryForm, putUserId, pageNum: 1 })} value={queryForm?.putUserId} />}
-            <div className={style.manage__left} style={showLeft ? { width: '100%' } : { width: 'calc(100% - 200px)' }}>
+            {!showLeft && activeKey === '2' && <TeamMembers allOfMember={allOfMember} onChange={(userId) => setQueryForm({ ...queryForm, userId, pageNum: 1 })} value={queryForm?.userId} />}
+            <div className={style.manage__left} style={showLeft || activeKey === '1' ? { width: '100%' } : { width: 'calc(100% - 200px)' }}>
                 <TableData
                     ajax={getAdAccountList}
                     dataSource={getAdAccountList?.data?.data?.records}
                     loading={getAdAccountList?.loading}
-                    columns={() => []}
+                    columns={() => columns(putUserHandle)}
                     total={getAdAccountList?.data?.data?.total}
                     page={getAdAccountList?.data?.data?.current}
                     pageSize={getAdAccountList?.data?.data?.size}
                     size="small"
                     scroll={{ y: 600 }}
-                    // leftChild={null}
+                    myKey="accountId"
+                    leftChild={<>
+                        <Select
+                            mode="tags"
+                            style={{ minWidth: 270 }}
+                            placeholder="账号ID搜索每次输入按下回车分割账号"
+                            onChange={(value)=>{
+                                let arr:any =[]
+                                value?.map((str: string)=>{
+                                    if(str?.search(/[,，]/) !== -1){
+                                        let newArr = str.split(/[,，]/)
+                                        arr =[...arr,...newArr]
+                                    }else{
+                                        arr.push(str)
+                                    }
+                                })
+                                setQueryForm({...queryForm,accountIds:arr})
+                            }}
+                        /></>}
                     onChange={(props: any) => {
                         let { pagination } = props
                         let { current, pageSize } = pagination
@@ -78,6 +103,8 @@ function ttAccountManage() {
                 />
             </div>
         </div>
+        {/* 指派 */}
+        {puShow && <AppointPut value={puData} visible={puShow} onClose={() => { setPuShow(false) }} allOfMember={erpUserALL} onChange={() => { setPuShow(false); getAdAccountList.refresh(); }} />}
     </div>
 }
 

src/pages/toutiao/ttAccountManage/tableConfig.tsx

@@ -0,0 +1,74 @@
+import { UserSwitchOutlined } from '@ant-design/icons'
+import { Badge, Button, Space, Tooltip } from 'antd'
+import React from 'react'
+export function columns(putUserHandle:(b:any)=>void):any {
+    return [
+        {
+            title: '账户ID',
+            dataIndex: 'accountId',
+            key: 'accountId',
+            align: 'center',
+            width: 120,
+        },
+        {
+            title: '账号名称',
+            dataIndex: 'accountName',
+            key: 'accountName',
+            align: 'center',
+            width: 200,
+        },
+        {
+            title: '组名称',
+            dataIndex: 'groupName',
+            key: 'groupName',
+            align: 'center',
+            width: 120,
+        },
+        {
+            title: '投手',
+            dataIndex: 'putUser',
+            key: 'putUser',
+            width: 70,
+            align: 'center',
+            ellipsis: true,
+            render: (a: any, b: any) => {
+                return <span>{a?.nickname || '-1'}</span>
+            }
+        },
+        {
+            title: '投放助理',
+            dataIndex: 'operationUserList',
+            key: 'operationUserList',
+            align: 'center',
+            width: 200,
+            render:(a:any)=>{
+                return a?.map((item: { nickName: any })=>item?.nickName)?.join()
+            }
+        },
+        {
+            title: '是否有效',
+            dataIndex: 'enabled',
+            key: 'enabled',
+            align: 'center',
+            width: 60,
+            render: (a: any, b: any) => {
+                return <Badge status={a ? "processing" : "error"} text={a ? '是' : '否'} />
+            }
+        },
+        {
+            title: '操作',
+            dataIndex: 'cz',
+            key: 'cz',
+            align: 'center',
+            width: 90,
+            fixed: 'right',
+            render: (a: any, b: any) => {
+                return <Space>
+                    {b?.belongUser ?<Tooltip title="指派投放助理">
+                        <Button size="small" style={{ color: '#0eb83a' }} onClick={() => {putUserHandle(b) }} icon={<UserSwitchOutlined />}></Button>
+                    </Tooltip>:<span style={{color:'red'}}>无权限操作</span>}
+                </Space>
+            }
+        }
+    ]
+}

src/services/toutiao/ttAccountManage.ts

@@ -14,7 +14,7 @@ export async function oceanengine_adAccount_accountOperationUser(accountId: numb
 }
 /**账号列表(拥有账号所有权)*/ 
 export async function oceanengine_adAccount_listOfUser(params: any) {
-    return request(`${api}/oceanengine/adAccount/listOfUser`, {
+    return request(`${api}/oceanengine/adAccount/list`, {
         method: 'POST',
         data: params
     });