|
@@ -1,12 +1,12 @@
|
|
|
import Selector from "@/pages/launchSystemNew/launchManage/createAd/selector"
|
|
|
import React, { useEffect, useState } from "react"
|
|
|
import style from './index.less'
|
|
|
-import { Button, Input, message, Modal, Select, Table, Tag, Tooltip, Typography } from "antd";
|
|
|
+import { Button, Col, Form, Input, message, Modal, Row, Select, Space, Table, Tag, Tooltip, Typography } from "antd";
|
|
|
import { CloseCircleFilled } from "@ant-design/icons";
|
|
|
-import { getGroupListApi, getAccountListApi } from "@/services/launchAdq/subgroup";
|
|
|
+import { getGroupListApi } from "@/services/launchAdq/subgroup";
|
|
|
import { useAjax } from "@/Hook/useAjax";
|
|
|
import { getAccountAssetsGroupListAllApi } from "@/services/adqV3/global";
|
|
|
-import { getAllUserAccountApi } from "@/services/launchAdq/adAuthorize";
|
|
|
+import { getUserAccountListApi } from "@/services/launchAdq/adAuthorize";
|
|
|
import { arraysHaveSameValues, groupBy } from "@/utils/utils";
|
|
|
import { DELIVERY_MODE_ENUM } from "../../const";
|
|
|
import '../../index.less'
|
|
@@ -30,119 +30,103 @@ interface Props {
|
|
|
const SelectAccount: React.FC<Props> = ({ putInType, accountCreateLogs, setAccountCreateLogs, onChange, dynamicGroup, deliveryMode, mType }) => {
|
|
|
|
|
|
/***********************************/
|
|
|
-
|
|
|
+ const [form] = Form.useForm()
|
|
|
const [visible, setVisible] = useState<boolean>(false)
|
|
|
- const [assetSharingDeta, setAssetSharingDeta] = useState<{ authMainAccountId: number, groupId: number }>() // 资产共享组
|
|
|
- const [dataSource, setDataSource] = useState<any[]>([])
|
|
|
- const [options, setOptions] = useState<any[]>([])
|
|
|
const [selectedRows, setSelectedRows] = useState<any[]>([])
|
|
|
- const [mediaTypeGroupIds, setMediaTypeGroupIds] = useState<number[]>([])
|
|
|
- const [loading, setLoading] = useState<boolean>(false)
|
|
|
- const [inputAccountList, setInputAccountList] = useState<string[]>([])
|
|
|
const [tipsVisible, setTipsVisible] = useState<boolean>(false)
|
|
|
+ const [loading, setLoading] = useState<boolean>(false)
|
|
|
+ const [queryForm, setQueryForm] = useState<{ accountIdList?: number[], adUnitTypeList?: string[], groupId?: number, remark?: string, sysGroupId?: number, pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 50 })
|
|
|
|
|
|
const getGroupList = useAjax(() => getGroupListApi())
|
|
|
const getAccountAssetsGroupListAll = useAjax((params) => getAccountAssetsGroupListAllApi(params))
|
|
|
- const getAllUserAccount = useAjax(() => getAllUserAccountApi())
|
|
|
+ const getUserAccountList = useAjax((params) => getUserAccountListApi(params))
|
|
|
/***********************************/
|
|
|
|
|
|
+ const onFinish = (data: any) => {
|
|
|
+ let oldQueryFrom = JSON.parse(JSON.stringify(queryForm))
|
|
|
+ let params = { ...oldQueryFrom, ...data, pageNum: 1 }
|
|
|
+ if (params?.accountIdList) {
|
|
|
+ params.accountIdList = params?.accountIdList.split(/[,,\n\s]+/ig).filter((item: any) => item)
|
|
|
+ } else {
|
|
|
+ delete params?.accountIdList
|
|
|
+ }
|
|
|
+ setQueryForm(params)
|
|
|
+ }
|
|
|
+
|
|
|
// 判断选择的账号是否在同一个资产组,允许选择云端素材的关键
|
|
|
- const getauthMainAccountData = (accountCreateLogs: PULLIN.AccountCreateLogsProps[]) => {
|
|
|
- console.log('---->', getAllUserAccount?.data)
|
|
|
- if (getAllUserAccount?.data?.length && accountCreateLogs?.length) {
|
|
|
- const list = accountCreateLogs.map(item => item.accountId)
|
|
|
- const selectAccountList = getAllUserAccount.data.filter((item: { accountId: any }) => list.includes(item.accountId))
|
|
|
- const groupAccount = groupBy(selectAccountList, (item) => item.groupId, true)
|
|
|
- const GrounpArray = Object.keys(groupAccount).map(function (group) {
|
|
|
- return groupAccount[group];
|
|
|
- })
|
|
|
- if (GrounpArray.length === 1 && !groupAccount['undefined']) {
|
|
|
- return { authMainAccountId: GrounpArray?.[0]?.[0]?.authMainAccountId || GrounpArray?.[0]?.[0]?.accountId, isSelectRemote: true }
|
|
|
- } else if (GrounpArray.length === 2 && groupAccount?.['undefined']?.length === 1) {
|
|
|
- const undefinedAccount = groupAccount?.['undefined'][0].accountId
|
|
|
- let authMainAccountId: any
|
|
|
- Object.keys(groupAccount).forEach(key => {
|
|
|
- if (key !== 'undefined') {
|
|
|
- authMainAccountId = groupAccount[key][0].authMainAccountId
|
|
|
+ const getauthMainAccountData = (accountCreateLogs: PULLIN.AccountCreateLogsProps[]): Promise<{ authMainAccountId?: number, isSelectRemote: boolean }> => {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ if (accountCreateLogs?.length) {
|
|
|
+ setLoading(true)
|
|
|
+ getUserAccountListApi({ adUnitTypeList: putInType === 'NOVEL' ? ['NOVEL', 'NOVEL_IAA', 'SKIT_IAA'] : ['GAME', 'GAME_IAA'], pageNum: 1, pageSize: 20000, accountIdList: accountCreateLogs.map(item => item.accountId) }).then(res => {
|
|
|
+ setLoading(false)
|
|
|
+ console.log('ppppp', res)
|
|
|
+ if (res?.data?.records?.length) {
|
|
|
+ const list = accountCreateLogs.map(item => item.accountId)
|
|
|
+ const selectAccountList = res.data.records.filter((item: { accountId: any }) => list.includes(item.accountId))
|
|
|
+ const groupAccount = groupBy(selectAccountList, (item) => item.groupId, true)
|
|
|
+ const GrounpArray = Object.keys(groupAccount).map(function (group) {
|
|
|
+ return groupAccount[group];
|
|
|
+ })
|
|
|
+ if (GrounpArray.length === 1 && !groupAccount['undefined']) {
|
|
|
+ resolve({ authMainAccountId: GrounpArray?.[0]?.[0]?.authMainAccountId || GrounpArray?.[0]?.[0]?.accountId, isSelectRemote: true })
|
|
|
+ } else if (GrounpArray.length === 2 && groupAccount?.['undefined']?.length === 1) {
|
|
|
+ const undefinedAccount = groupAccount?.['undefined'][0].accountId
|
|
|
+ let authMainAccountId: any
|
|
|
+ Object.keys(groupAccount).forEach(key => {
|
|
|
+ if (key !== 'undefined') {
|
|
|
+ authMainAccountId = groupAccount[key][0].authMainAccountId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (undefinedAccount === authMainAccountId) {
|
|
|
+ resolve({ authMainAccountId: authMainAccountId, isSelectRemote: true })
|
|
|
+ } else {
|
|
|
+ resolve({ authMainAccountId: -1, isSelectRemote: false })
|
|
|
+ }
|
|
|
+ } else if (groupAccount?.['undefined']?.length === 1 && groupAccount?.['undefined']?.[0]?.isGroupMainAccount) {
|
|
|
+ resolve({ authMainAccountId: groupAccount?.['undefined']?.[0]?.accountId, isSelectRemote: true })
|
|
|
+ } else {
|
|
|
+ resolve({ authMainAccountId: -1, isSelectRemote: false })
|
|
|
+ }
|
|
|
}
|
|
|
+ }).catch(() => {
|
|
|
+ setVisible(false)
|
|
|
+ resolve({ authMainAccountId: undefined, isSelectRemote: false })
|
|
|
})
|
|
|
- if (undefinedAccount === authMainAccountId) {
|
|
|
- return { authMainAccountId: authMainAccountId, isSelectRemote: true }
|
|
|
- } else {
|
|
|
- return { authMainAccountId: -1, isSelectRemote: false }
|
|
|
- }
|
|
|
- } else if (groupAccount?.['undefined']?.length === 1 && groupAccount?.['undefined']?.[0]?.isGroupMainAccount) {
|
|
|
- return { authMainAccountId: groupAccount?.['undefined']?.[0]?.accountId, isSelectRemote: true }
|
|
|
} else {
|
|
|
- return { authMainAccountId: -1, isSelectRemote: false }
|
|
|
+ resolve({ authMainAccountId: undefined, isSelectRemote: false })
|
|
|
}
|
|
|
- } else {
|
|
|
- return { authMainAccountId: undefined, isSelectRemote: false }
|
|
|
- }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (visible && accountCreateLogs?.length) {
|
|
|
- setSelectedRows(accountCreateLogs)
|
|
|
+ setSelectedRows(JSON.parse(JSON.stringify(accountCreateLogs)))
|
|
|
}
|
|
|
}, [accountCreateLogs, visible])
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
+ if (putInType && visible) {
|
|
|
+ getUserAccountList.run({ adUnitTypeList: putInType === 'NOVEL' ? ['NOVEL', 'NOVEL_IAA', 'SKIT_IAA'] : ['GAME', 'GAME_IAA'], ...queryForm })
|
|
|
+ }
|
|
|
+ }, [putInType, queryForm, visible])
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
if (putInType) {
|
|
|
// 获取账户组
|
|
|
getGroupList.run()
|
|
|
// 获取资产共享组
|
|
|
getAccountAssetsGroupListAll.run({})
|
|
|
- // 账户
|
|
|
- getAllUserAccount.run().then(res => {
|
|
|
- if (res) {
|
|
|
- let options = res?.filter((item: any) => putInType === 'NOVEL' ? ['NOVEL', 'NOVEL_IAA', 'SKIT_IAA'].includes(item.adUnitType) : putInType === 'GAME' ? ['GAME', 'GAME_IAA'].includes(item.adUnitType) : false)
|
|
|
- setOptions(options || [])
|
|
|
- setDataSource(options || [])
|
|
|
- }
|
|
|
- })
|
|
|
}
|
|
|
return () => {
|
|
|
document.body.style.overflow = 'auto';
|
|
|
}
|
|
|
}, [putInType])
|
|
|
|
|
|
- /** 获取分组里账号 */
|
|
|
- const getGroupAccountList = (ids: number[]) => {
|
|
|
- setMediaTypeGroupIds(ids)
|
|
|
- setAssetSharingDeta(undefined)
|
|
|
- if (ids.length > 0) {
|
|
|
- setLoading(true)
|
|
|
- let data = ids.map(id => getAccountListApi(id))
|
|
|
- Promise.all(data).then(res => {
|
|
|
- setLoading(false)
|
|
|
- if (res?.length > 0 && res.every((item: { code: number }) => item.code === 200)) {
|
|
|
- let userArr: any[] = []
|
|
|
- res.forEach((item: { data: { adAccountList: { accountId: number, id: number }[] } }) => {
|
|
|
- item.data.adAccountList.forEach(acc => {
|
|
|
- let obj = userArr.find((item: { accountId: number }) => item.accountId === acc.accountId)
|
|
|
- if (!obj) {
|
|
|
- userArr.push(acc.accountId)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- setDataSource(options.filter(item => userArr.includes(item.accountId)))
|
|
|
- } else {
|
|
|
- message.error('操作异常')
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- setDataSource(options)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
const handleOk = (isClear: boolean) => {
|
|
|
document.body.style.overflow = 'auto';
|
|
|
onChange?.(selectedRows, isClear)
|
|
|
setSelectedRows([])
|
|
|
- setInputAccountList([])
|
|
|
- setMediaTypeGroupIds([])
|
|
|
- setAssetSharingDeta(undefined)
|
|
|
setVisible(false)
|
|
|
setTipsVisible(false)
|
|
|
}
|
|
@@ -150,9 +134,6 @@ const SelectAccount: React.FC<Props> = ({ putInType, accountCreateLogs, setAccou
|
|
|
const handleCancel = () => {
|
|
|
document.body.style.overflow = 'auto';
|
|
|
setSelectedRows([])
|
|
|
- setInputAccountList([])
|
|
|
- setMediaTypeGroupIds([])
|
|
|
- setAssetSharingDeta(undefined)
|
|
|
setVisible(false)
|
|
|
}
|
|
|
|
|
@@ -238,68 +219,84 @@ const SelectAccount: React.FC<Props> = ({ putInType, accountCreateLogs, setAccou
|
|
|
</Selector>
|
|
|
{visible && <div className={style.selectAccount_list}>
|
|
|
<div className={style.selectAccount_list_header}>
|
|
|
- <Input.TextArea
|
|
|
- rows={1}
|
|
|
- autoSize={{ minRows: 1, maxRows: 1 }}
|
|
|
- placeholder="账户/备注(多个,,空格换行)"
|
|
|
- style={{ width: 200 }}
|
|
|
- allowClear
|
|
|
- onChange={e => {
|
|
|
- let input = e.target.value
|
|
|
- let newInput: string[] = input ? input?.split(/[,,\n\s]+/ig).filter((item: any) => item) : []
|
|
|
- setInputAccountList(newInput)
|
|
|
- }}
|
|
|
- />
|
|
|
- <Select
|
|
|
- mode="multiple"
|
|
|
- style={{ minWidth: 200 }}
|
|
|
- placeholder="快捷选择媒体账户组"
|
|
|
- maxTagCount={1}
|
|
|
- allowClear
|
|
|
- filterOption={(input: any, option: any) => {
|
|
|
- return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
|
|
|
- }}
|
|
|
- value={mediaTypeGroupIds}
|
|
|
- onChange={(e) => { getGroupAccountList(e) }}
|
|
|
- >
|
|
|
- {getGroupList?.data && getGroupList?.data?.map((item: any) => <Select.Option value={item.groupId} key={item.groupId}>{item.groupName}</Select.Option>)}
|
|
|
- </Select>
|
|
|
- <Select
|
|
|
- allowClear
|
|
|
- showSearch
|
|
|
- placeholder="账户资产共享组"
|
|
|
- filterOption={(input: any, option: any) => {
|
|
|
- return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
|
|
|
- }}
|
|
|
- style={{ width: 145 }}
|
|
|
- value={assetSharingDeta?.groupId}
|
|
|
- onChange={(_, option) => {
|
|
|
- setMediaTypeGroupIds([])
|
|
|
- if (option) {
|
|
|
- let assetSharingDeta = { groupId: option.value, authMainAccountId: option.authMainAccountId }
|
|
|
- setAssetSharingDeta({ groupId: option.value, authMainAccountId: option.authMainAccountId })
|
|
|
- setDataSource(options?.filter((item: { accountId: number; groupId: number }) => assetSharingDeta?.groupId ? (item.accountId?.toString() === assetSharingDeta?.authMainAccountId?.toString() || item?.groupId?.toString() === assetSharingDeta?.groupId?.toString()) : true))
|
|
|
- } else {
|
|
|
- setAssetSharingDeta(undefined)
|
|
|
- setDataSource(options)
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- {getAccountAssetsGroupListAll?.data?.map((item: { accountId: any; authMainAccountId: number; id: number; accountGroupName: string }) => <Select.Option value={item.accountId} authMainAccountId={item.authMainAccountId} key={item.id}>{item.accountGroupName}({item.authMainAccountId})</Select.Option>)}
|
|
|
- </Select>
|
|
|
+ <Form layout="inline" className='queryForm' name="basicSelectAcc" form={form} onFinish={onFinish}>
|
|
|
+ <Row gutter={[0, 6]}>
|
|
|
+ <Col><Form.Item name='accountIdList'>
|
|
|
+ <Input.TextArea
|
|
|
+ rows={1}
|
|
|
+ autoSize={{ minRows: 1, maxRows: 1 }}
|
|
|
+ placeholder="账户(多个,,空格换行)"
|
|
|
+ style={{ width: 180 }}
|
|
|
+ allowClear
|
|
|
+ />
|
|
|
+ </Form.Item></Col>
|
|
|
+ <Col><Form.Item name='remark'>
|
|
|
+ <Input
|
|
|
+ placeholder="备注"
|
|
|
+ style={{ width: 120 }}
|
|
|
+ allowClear
|
|
|
+ />
|
|
|
+ </Form.Item></Col>
|
|
|
+ <Col><Form.Item name='sysGroupId'>
|
|
|
+ <Select
|
|
|
+ mode="multiple"
|
|
|
+ style={{ minWidth: 180 }}
|
|
|
+ placeholder="快捷选择媒体账户组"
|
|
|
+ maxTagCount={1}
|
|
|
+ allowClear
|
|
|
+ filterOption={(input: any, option: any) => {
|
|
|
+ return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {getGroupList?.data && getGroupList?.data?.map((item: any) => <Select.Option value={item.groupId} key={item.groupId}>{item.groupName}</Select.Option>)}
|
|
|
+ </Select>
|
|
|
+ </Form.Item></Col>
|
|
|
+ <Col><Form.Item name='groupId'>
|
|
|
+ <Select
|
|
|
+ allowClear
|
|
|
+ showSearch
|
|
|
+ placeholder="账户资产共享组"
|
|
|
+ filterOption={(input: any, option: any) => {
|
|
|
+ return option!.children?.toString().toLowerCase().includes(input.toLowerCase())
|
|
|
+ }}
|
|
|
+ style={{ width: 145 }}
|
|
|
+ >
|
|
|
+ {getAccountAssetsGroupListAll?.data?.map((item: { accountId: any; authMainAccountId: number; id: number; accountGroupName: string }) => <Select.Option value={item.id} key={item.id}>{item.accountGroupName}({item.authMainAccountId})</Select.Option>)}
|
|
|
+ </Select>
|
|
|
+ </Form.Item></Col>
|
|
|
+ <Col>
|
|
|
+ <Space>
|
|
|
+ <Button type="primary" htmlType="submit">搜索</Button>
|
|
|
+ {/* <Button onClick={() => form.resetFields()}>重置</Button> */}
|
|
|
+ </Space>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </Form>
|
|
|
+
|
|
|
+ {/*
|
|
|
+ */}
|
|
|
</div>
|
|
|
<div className={style.selectAccount_list_table}>
|
|
|
<Table
|
|
|
size={'small'}
|
|
|
bordered
|
|
|
- dataSource={dataSource.filter(item => inputAccountList?.length > 0 ? inputAccountList?.some(val => item.accountId?.toString().toLowerCase()?.includes(val) || item?.remark?.toString().toLowerCase()?.includes(val)) : true)}
|
|
|
+ dataSource={getUserAccountList?.data?.records}
|
|
|
rowKey={'accountId'}
|
|
|
scroll={{ y: 220 }}
|
|
|
pagination={{
|
|
|
- pageSize: 50,
|
|
|
- showTotal: total => `总共 ${total} 账户`
|
|
|
+ pageSize: getUserAccountList?.data?.size || 50,
|
|
|
+ current: getUserAccountList?.data?.current || 1,
|
|
|
+ showTotal: total => `总共 ${total} 账户`,
|
|
|
+ total: getUserAccountList?.data?.total,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showLessItems: true,
|
|
|
+ defaultCurrent: 1,
|
|
|
+ defaultPageSize: 50,//默认初始的每页条数
|
|
|
+ onChange: (page, pageSize) => {
|
|
|
+ setQueryForm({ ...queryForm, pageNum: page, pageSize })
|
|
|
+ }
|
|
|
}}
|
|
|
- loading={getAllUserAccount.loading || loading}
|
|
|
+ loading={getUserAccountList.loading || loading}
|
|
|
columns={[
|
|
|
{
|
|
|
title: '账号',
|
|
@@ -383,6 +380,7 @@ const SelectAccount: React.FC<Props> = ({ putInType, accountCreateLogs, setAccou
|
|
|
<Button
|
|
|
className={style.resetCss}
|
|
|
type="primary"
|
|
|
+ loading={loading}
|
|
|
style={{ marginLeft: 8 }}
|
|
|
onClick={() => {
|
|
|
if (accountCreateLogs?.length && arraysHaveSameValues(accountCreateLogs.map(item => item.accountId), selectedRows.map(item => item.accountId))) {
|
|
@@ -453,15 +451,17 @@ const SelectAccount: React.FC<Props> = ({ putInType, accountCreateLogs, setAccou
|
|
|
message.error('请联系管理员')
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
if (isY && authMainAccountId) {
|
|
|
// 2.有的话判断 判断账户是否为一组
|
|
|
- const authMainData = getauthMainAccountData(selectedRows)
|
|
|
- if (authMainData.isSelectRemote && authMainData.authMainAccountId === authMainAccountId) {
|
|
|
- handleOk(false)
|
|
|
- } else {
|
|
|
- setTipsVisible(true)
|
|
|
- }
|
|
|
+ getauthMainAccountData(selectedRows).then(authMainData => {
|
|
|
+ console.log('authMainData---->', authMainData)
|
|
|
+ if (authMainData.isSelectRemote && authMainData.authMainAccountId === authMainAccountId) {
|
|
|
+ handleOk(false)
|
|
|
+ } else {
|
|
|
+ setTipsVisible(true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
// 3.是的话 判断是以前那组吗
|
|
|
} else {
|
|
|
handleOk(false)
|