|
@@ -0,0 +1,84 @@
|
|
|
|
+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 React, { useCallback, useEffect, useState } from 'react'
|
|
|
|
+import style from './index.less'
|
|
|
|
+import { getAdAccountAllOfMember } from '@/services/launchAdq/adq'
|
|
|
|
+import { useAjax } from '@/Hook/useAjax'
|
|
|
|
+import TableData from '@/pages/launchSystemNew/components/TableData'
|
|
|
|
+import { oceanengine_adAccount_listOfUser } from '@/services/toutiao/ttAccountManage'
|
|
|
|
+function ttAccountManage() {
|
|
|
|
+ const [activeKey, setActiveKey] = useState<string>('1')
|
|
|
|
+ const [showLeft, setShowLeft] = useState<boolean>(false)
|
|
|
|
+ const [queryForm, setQueryForm] = useState<GetAdAccountParams>({ pageNum: 1, pageSize: 20 })
|
|
|
|
+
|
|
|
|
+ const allOfMember = useAjax(() => getAdAccountAllOfMember(), { formatResult: true })
|
|
|
|
+ const getAdAccountList = useAjax((params) => oceanengine_adAccount_listOfUser(params), { formatResult: true })
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ getList()
|
|
|
|
+ }, [])
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ /** 获取账号列表 */
|
|
|
|
+ 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)
|
|
|
|
+ }, [queryForm])
|
|
|
|
+ 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
|
|
|
|
+ setQueryForm(newQueryForm)
|
|
|
|
+ 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, 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)' }}>
|
|
|
|
+ <TableData
|
|
|
|
+ ajax={getAdAccountList}
|
|
|
|
+ dataSource={getAdAccountList?.data?.data?.records}
|
|
|
|
+ loading={getAdAccountList?.loading}
|
|
|
|
+ columns={() => []}
|
|
|
|
+ total={getAdAccountList?.data?.data?.total}
|
|
|
|
+ page={getAdAccountList?.data?.data?.current}
|
|
|
|
+ pageSize={getAdAccountList?.data?.data?.size}
|
|
|
|
+ size="small"
|
|
|
|
+ scroll={{ y: 600 }}
|
|
|
|
+ // leftChild={null}
|
|
|
|
+ onChange={(props: any) => {
|
|
|
|
+ let { pagination } = props
|
|
|
|
+ let { current, pageSize } = pagination
|
|
|
|
+ setQueryForm({ ...queryForm, pageNum: current, pageSize })
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+export default HocError(ttAccountManage)
|