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

import { Form, message, Modal, Transfer } from "antd"
import React, { useEffect, useState } from "react"
import '../../tencentAdPutIn/index.less'
import { getAccountAllListApi } from "@/services/launchAdq/adAuthorize"
import { useAjax } from "@/Hook/useAjax"
import { authAccountAssetsGroupAccountApi } from "@/services/adqV3/global"

interface Props {
    // 主账户
    authMainAccountId: string
    // 主账户ID
    accountAssetsGroupId: number
    // 已选账户
    selectedAccountIdList: string[]
    // 主体名称
    corporationName: string,
    // 主体编号
    corporationLicence: string
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}
const AddSubAccount: React.FC<Props> = ({ authMainAccountId, accountAssetsGroupId, selectedAccountIdList = [], corporationName, corporationLicence, visible, onClose, onChange }) => {

    /************************************/
    const [form] = Form.useForm()
    const [errorDataList, setErrorDataList] = useState<any[]>([])

    const getAccountAllList = useAjax(() => getAccountAllListApi())
    const authAccountAssetsGroupAccount = useAjax((params) => authAccountAssetsGroupAccountApi(params))
    /************************************/

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

    const handleOk = () => {
        form.validateFields().then(valid => {
            console.log(valid)
            authAccountAssetsGroupAccount.run({ ...valid, accountAssetsGroupId: accountAssetsGroupId }).then(res => {
                console.log(res)
                if (res) {
                    message.success('授权成功')
                    onChange?.()
                }
            })
        })
    }

    return <Modal
        title={<strong>{authMainAccountId} 授权子账户（<span style={{ color: 'red', fontSize: 12 }}>主体：{corporationName}</span>）</strong>}
        open={visible}
        onCancel={onClose}
        className="modalResetCss"
        onOk={handleOk}
        confirmLoading={authAccountAssetsGroupAccount.loading}
    >
        <Form
            name="basicAddSub"
            form={form}
            layout='vertical'
            autoComplete="off"
        >
            <Form.Item label={<strong>请选择账户</strong>} name="accountId" rules={[{ required: true, message: '请选择账户!' }]} valuePropName="targetKeys">
                <Transfer
                    showSearch
                    filterOption={(inputValue: string, option: any) => {
                        let newInput: string[] = inputValue ? inputValue?.split(/[,，\n\s]+/ig).filter((item: any) => item) : []
                        return newInput?.some(val => option!.title?.toString().toLowerCase()?.includes(val))
                    }}
                    dataSource={getAccountAllList?.data?.filter((item: { accountId: string, corporationLicence: string }) => item.accountId != authMainAccountId && item.corporationLicence === corporationLicence)?.map((item: { accountId: any }) => ({ title: item.accountId, key: item.accountId, disabled: selectedAccountIdList?.includes(item.accountId) }))}
                    titles={['所有', '已选']}
                    oneWay
                    listStyle={{
                        height: 450,
                        width: 222
                    }}
                    render={item => <span>{item.title}</span>}
                    pagination
                />
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(AddSubAccount)