qc-gameDataStatistics/src/pages/gsData/roleIpMonitor/regIpRoleDetails.tsx

import { useAjax } from '@/Hook/useAjax';
import { getRoleDetailListApi } from '@/services/gsData';
import { Modal, Table } from 'antd';
import React, { useEffect, useState } from 'react';


/**
 * 查询同ip角色详情列表
 * @param param0 
 * @returns 
 */
const RegIpRoleDetails: React.FC<{ ip: any, userId?: any, icon?: React.ReactNode }> = ({ ip, userId, icon }) => {

    /*********************************/
    const [visible, setVisible] = useState<boolean>(false)
    const getRoleDetailList = useAjax((params) => getRoleDetailListApi(params))
    /*********************************/

    useEffect(() => {
        if (visible) {
            const params: { regIp: string, excludeUserId?: any } = { regIp: ip }
            if (userId) {
                params.excludeUserId = userId
            }
            getRoleDetailList.run(params)
        }
    }, [ip, userId, visible])

    return <>
        <a onClick={() => setVisible(true)}>{icon}</a>
        {visible && <Modal
            title={<strong>同IP下角色列表{userId ? '（排除同玩家）' : ''}({ip})</strong>}
            visible={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={700}
        >
            <Table
                columns={[
                    {
                        title: '角色名称',
                        dataIndex: 'roleName',
                        key: 'roleName',
                        ellipsis: true
                    },
                    {
                        title: '角色ID',
                        dataIndex: 'roleId',
                        key: 'roleId',
                        align: 'center',
                        ellipsis: true
                    },
                    {
                        title: '玩家名称',
                        dataIndex: 'userName',
                        key: 'userName',
                        align: 'center',
                        ellipsis: true
                    },
                    {
                        title: '玩家ID',
                        dataIndex: 'userId',
                        key: 'userId',
                        align: 'center',
                        ellipsis: true
                    },
                    {
                        title: '游戏名称',
                        dataIndex: 'gameName',
                        key: 'gameName',
                        align: 'center',
                        ellipsis: true
                    },
                    {
                        title: '游戏ID',
                        dataIndex: 'gameId',
                        key: 'gameId',
                        align: 'center',
                        ellipsis: true
                    },
                    {
                        title: '区服名称',
                        dataIndex: 'serverName',
                        key: 'serverName',
                        align: 'center',
                        ellipsis: true
                    },
                    {
                        title: '区服ID',
                        dataIndex: 'serverId',
                        key: 'serverId',
                        align: 'center',
                        ellipsis: true
                    }
                ]}
                rowKey={'roleId'}
                dataSource={getRoleDetailList?.data?.records}
                loading={getRoleDetailList?.loading}
                size="small"
                bordered
                pagination={false}
            />
        </Modal>}
    </>
};

export default React.memo(RegIpRoleDetails);