fix

src/pages/launchSystemNew/account/groupLeft.tsx

@@ -9,17 +9,18 @@ import './index.less'
  * 分组管理Left
  */
 interface Props {
-
+    onChange?: (groupId?: number) => void
+    groupId?: number
 }
 const GroupLeft: React.FC<Props> = (props) => {
 
     /*************************/
+    const { onChange } = props
     const [isNewGrouping, setIsNewGrouping] = useState<boolean>(false);  // 是否新增分组
     const inputRef = useRef<any>(null);
     const [groupData, setGroupData] = useState<{ groupName: string, remark?: string, groupId?: number }>({ groupName: '' }) // 分组添加
     const [selectAccData, setSelectAccData] = useState<{ id: number, mpName: string }[]>([])  // 选中
-    const [queryForm, setQueryForm] = useState<{ groupId?: number, pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 20 })
-    const { groupId = 0 } = queryForm
+    const [groupId, setGroupId] = useState<number>(0)
 
     const addGroup = useAjax((params) => addGroupApi(params))
     const editGroup = useAjax((params) => editGroupApi(params))
@@ -27,6 +28,12 @@ const GroupLeft: React.FC<Props> = (props) => {
     const delGroup = useAjax((params) => delGroupApi(params))
     /*************************/
 
+    useEffect(() => {
+        if (props?.groupId) {
+            setGroupId(props?.groupId || 0)
+        }
+    }, [props.groupId])
+
     /** 点击新增处理聚焦 */
     useEffect(() => {
         if (isNewGrouping && inputRef?.current) {
@@ -65,12 +72,13 @@ const GroupLeft: React.FC<Props> = (props) => {
     }
 
     /** 删除分组 */
-    const delGroupHandle = (groupId: number) => {
-        delGroup.run({ groupId }).then(res => {
+    const delGroupHandle = (id: number) => {
+        delGroup.run({ groupId: id }).then(res => {
             message.success('删除成功')
             getGroupList.refresh()
-            if (queryForm.groupId === groupId) {
-                setQueryForm({ ...queryForm, groupId: 0 })
+            if (groupId === id) {
+                setGroupId(0)
+                onChange?.(undefined)
             }
         })
     }
@@ -107,7 +115,7 @@ const GroupLeft: React.FC<Props> = (props) => {
             </div>}
             <Spin spinning={getGroupList.loading}>
                 <div className="groupLeft_content_item">
-                    <div className={`con ${groupId === 0 ? 'select' : ''}`} onClick={() => { setQueryForm({ ...queryForm, groupId: 0 }); setSelectAccData([]) }}>
+                    <div className={`con ${groupId === 0 ? 'select' : ''}`} onClick={() => { setGroupId(0); onChange?.(undefined); setSelectAccData([]) }}>
                         <div className="left">
                             <div className="title">默认分组</div>
                         </div>
@@ -131,7 +139,7 @@ const GroupLeft: React.FC<Props> = (props) => {
                                 </Space>
                             </div>
                         </Space>
-                    </div> : <div className={`con ${groupId === item.groupId ? 'select' : ''}`} onClick={() => { setQueryForm({ ...queryForm, groupId: item.groupId, pageNum: 1 }); setSelectAccData([]) }} key={item.groupId || index}>
+                    </div> : <div className={`con ${groupId === item.groupId ? 'select' : ''}`} onClick={() => { setGroupId(item.groupId); onChange?.(item.groupId); setSelectAccData([]) }} key={item.groupId || index}>
                         <div className="left">
                             <div className="title">{item.groupName}</div>
                             {/* {item?.remark && <div className="subTitle">{item?.remark}</div>} */}

src/pages/launchSystemNew/account/index.less

@@ -10,7 +10,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 .boxCol {
   display: flex;
 
@@ -26,7 +25,7 @@
 }
 
 .manage {
-  height: 100%;
+  height: calc(100% - 42px);
   display: flex;
   justify-content: flex-start;
 

src/pages/launchSystemNew/account/index.tsx

@@ -1,42 +1,41 @@
 
 import HocError from '@/Hoc/HocError'
-import { Col, Modal, Row, Input, message, Space } from 'antd'
+import { Col, Modal, Row, Input, message, Space, Tabs } from 'antd'
 import React, { useCallback, useEffect, useState } from 'react'
 import { columnsMp } from './tableConfig'
-import { useModel } from 'umi'
 import { useAjax } from '@/Hook/useAjax'
-import { getAdAccountListApi, putAdAccountApi } from '@/services/launchAdq/adAuthorize'
+import { getAdAccountListApi, GetAdAccountParams, putAdAccountApi } from '@/services/launchAdq/adAuthorize'
 import style from './index.less'
 import TableData from '../components/TableData'
 import GroupLeft from './groupLeft'
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
 
 /** 投放管理 */
 const AdAuthorize: React.FC = () => {
 
     /*************************/
-    const { getAdAccount } = useModel('useLaunchAdq.useAdAuthorize')
-    const [tableData, setTableData] = useState<any[]>([])
+    const [queryForm, setQueryForm] = useState<GetAdAccountParams>({ pageNum: 1, pageSize: 20 })
     const [remarkData, set_remarkData] = useState<{ visible: boolean, remark: string, data: any }>({
         visible: false,
         remark: '',
         data: null
     })
+    const [activeKey, setActiveKey] = useState<string>('1')
+    const [showLeft, setShowLeft] = useState<boolean>(false)
     const putRemark = useAjax((adAccountId: any, remark: any) => putAdAccountApi(adAccountId, remark))
     const getAdAccountList = useAjax((params) => getAdAccountListApi(params), { formatResult: true })
     /*************************/
 
     useEffect(() => {
         getList()
-    }, [])
+    }, [queryForm])
+
+    /** 获取账号列表 */ 
     const getList = () => {
-        // 获取账号列表
-        getAdAccount.run().then(res => {
-            if (res) {
-                setTableData(() => res?.data || [])
-            }
-        })
+        getAdAccountList.run(queryForm)
     }
-    const remark = useCallback(() => {
+
+    const remark = () => {
         if (remarkData.remark && remarkData.data) {
             putRemark.run(remarkData.data.id, remarkData.remark).then(res => {
                 set_remarkData({ ...remarkData, visible: false, remark: '', data: null })
@@ -46,24 +45,46 @@ const AdAuthorize: React.FC = () => {
             message.error('请输入备注！')
         }
 
-    }, [getAdAccount, remarkData])
+    }
     const edit = useCallback((data) => {
         set_remarkData({ ...remarkData, visible: true, data, remark: data.remark })
     }, [remarkData])
 
     return <div style={{ height: '100%' }}>
-        {/* <div className={style.manage}> */}
-            {/* <GroupLeft /> */}
-            <div>
+
+        <Tabs
+            tabBarStyle={{ marginBottom: 1 }}
+            activeKey={activeKey}
+            type="card"
+            onChange={(activeKey) => {
+                if (activeKey !== 'contract') {
+                    setActiveKey(activeKey)
+                } else {
+                    setShowLeft(!showLeft)
+                }
+            }}
+        >
+            <Tabs.TabPane tab='我的' key='1' />
+            <Tabs.TabPane tab='组员' key='2' />
+            <Tabs.TabPane tab={showLeft ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} key='contract' />
+        </Tabs>
+
+        <div className={style.manage}>
+            {!showLeft && activeKey === '1' && <GroupLeft onChange={(groupId) => setQueryForm({ ...queryForm, groupId })}/>}
+            
+            <div className={style.manage__left} style={showLeft ? { width: '100%' } : { width: 'calc(100% - 200px)' }}>
                 <TableData
-                    ajax={getAdAccount}
-                    dataSource={tableData}
-                    loading={getAdAccount?.loading}
+                    ajax={getAdAccountList}
+                    dataSource={getAdAccountList?.data?.data?.records}
+                    loading={getAdAccountList?.loading}
                     columns={() => columnsMp(edit)}
+                    total={getAdAccountList?.data?.data?.total}
+                    page={getAdAccountList?.data?.data?.current}
+                    pageSize={getAdAccountList?.data?.data?.size}
                     size="small"
                     scroll={{ y: 600 }}
                     leftChild={<Space>
-                        <Input placeholder="广告主ID" style={{ width: 150 }} allowClear onChange={(e) => {
+                        {/* <Input placeholder="广告主ID" style={{ width: 150 }} allowClear onChange={(e) => {
                             let value = e.target.value
                             if (value) {
                                 let newArr = tableData?.filter(item => String(item.accountId).includes(value))
@@ -71,12 +92,12 @@ const AdAuthorize: React.FC = () => {
                             } else {
                                 setTableData(getAdAccount?.data?.data)
                             }
-                        }} />
+                        }} /> */}
                         {/* <Button onClick={getList} type='primary'>搜索</Button> */}
                     </Space>}
                 />
             </div>
-        {/* </div> */}
+        </div>
 
         {remarkData.visible && <Modal
             visible={remarkData.visible}