ad-manage/src/pages/launchSystemV3/tencenTasset/accountAssetSharing/index.tsx

import { useAjax } from "@/Hook/useAjax"
import { delAuthAccountAssetsGroupApi, getAccountAssetsGroupListApi } from "@/services/adqV3/global"
import { PlusOutlined, SearchOutlined } from "@ant-design/icons"
import { Button, Card, Input, message, Radio, Select, Table } from "antd"
import React, { useEffect, useState } from "react"
import '../../tencentAdPutIn/index.less'
import ModifyAccountGroup from "./modifyAccountGroup"
import columns from "./tableConfig"
import SubAccount from "./subAccount"


/**
 * 账户资产共享
 * @returns 
 */
const AccountAssetSharing: React.FC = () => {

    /****************************************/
    const [queryForm, setQueryForm] = useState<{ accountGroupName?: string, authMainAccountIds?: number[], authType?: string, pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 20 })
    const [queryFormNew, setQueryFormNew] = useState<{ accountGroupName?: string, authMainAccountIds?: number[], authType?: string, pageNum: number, pageSize: number }>({ pageNum: 1, pageSize: 20 })
    const [visible, setVisible] = useState<boolean>(false)
    const [initialValues, setInitialValues] = useState<any>(undefined)
    const [subAccountData, setSubAccountData] = useState<{ visible: boolean, data: any }>({ visible: false, data: undefined })

    const getAccountAssetsGroupList = useAjax((params) => getAccountAssetsGroupListApi(params))
    const delAuthAccountAssetsGroup = useAjax((params) => delAuthAccountAssetsGroupApi(params))
    /****************************************/

    useEffect(() => {
        getAccountAssetsGroupList.run(queryFormNew)
    }, [queryFormNew])


    const del = (id: number) => {
        delAuthAccountAssetsGroup.run({ id }).then(res => {
            if (res) {
                message.success('删除成功')
                getAccountAssetsGroupList.refresh()
            }
        })
    }

    const update = (data: any) => {
        setInitialValues(data)
        setVisible(true)
    }

    const handleSubAccount = (data: any) => {
        setSubAccountData({ visible: true, data })
    }

    return <Card
        className="cardResetCss"
        title={<div className="flexStart" style={{ gap: 8 }}>
            <Select
                value={queryForm?.authType}
                allowClear
                onChange={(e) => setQueryForm({ ...queryForm, authType: e, pageNum: 1 })}
                placeholder="授权类型"
                style={{ width: 110 }}
                options={[{ label: '素材', value: 'material' }, { label: '转化归因', value: 'conversion' }, { label: '原生落地页', value: 'wechatDownPage' }]}
            />
            <Input style={{ width: 200 }} placeholder="请输入账户组名称" value={queryForm?.accountGroupName} allowClear onChange={(e) => setQueryForm({ ...queryForm, accountGroupName: e.target.value, pageNum: 1 })} />
            <Input.TextArea
                style={{ width: 300 }}
                placeholder="请输入主账户ID列表（多个逗号隔开）"
                allowClear
                rows={1}
                onChange={(e) => {
                    let value = e.target.value
                    let arr: any[] = []
                    if (value) {
                        value = value.replace(/[,，\s]/g, ',')
                        arr = value.split(',').filter((a: any) => a)
                    }
                    setQueryForm({ ...queryForm, authMainAccountIds: arr, pageNum: 1 })
                }}
            />
            <Button type="primary" icon={<SearchOutlined />} onClick={() => setQueryFormNew({ ...queryForm })}>搜索</Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => { setVisible(true) }}>新增账户资产共享组</Button>
        </div>}
    >

        <Table
            columns={columns(del, update, handleSubAccount)}
            dataSource={getAccountAssetsGroupList.data?.records}
            size="small"
            loading={getAccountAssetsGroupList?.loading}
            scroll={{ y: 600, x: 1100 }}
            bordered
            rowKey={'id'}
            pagination={{
                defaultPageSize: 20,
                current: getAccountAssetsGroupList.data?.current || 1,
                pageSize: getAccountAssetsGroupList.data?.size || 10,
                total: getAccountAssetsGroupList.data?.total || 0
            }}
            onChange={(pagination) => {
                const { current, pageSize } = pagination
                setQueryForm({ ...queryForm, pageNum: current || 1, pageSize: pageSize || 10 })
                setQueryFormNew({ ...queryForm, pageNum: current || 1, pageSize: pageSize || 10 })
            }}
        />

        {/* 新增修改 */}
        {visible && <ModifyAccountGroup
            initialValues={initialValues}
            visible={visible}
            onClose={() => {
                setVisible(false)
                setInitialValues(undefined)
            }}
            onChange={() => {
                setVisible(false)
                setInitialValues(undefined)
                getAccountAssetsGroupList.refresh()
            }}
        />}

        {/* 授权子账户 */}
        {subAccountData?.visible && <SubAccount
            {...subAccountData}
            onClose={() => {
                setSubAccountData({ visible: false, data: undefined })
            }}
        />}
    </Card>
}

export default AccountAssetSharing