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<{ roleId: string, excludeUserType: 0 | 1, icon?: React.ReactNode }> = ({ roleId, excludeUserType, icon }) => {

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

    useEffect(() => {
        if (visible) {
            const params = { roleId, excludeUserType }
            getRoleDetailList.run(params)
        }
    }, [roleId, excludeUserType, visible])

    return <>
        <a onClick={() => setVisible(true)}>{icon}</a>
        {visible && <Modal
            title={<strong>同IP下角色列表{excludeUserType ? '（排除同玩家）' : ''}(角色ID：{roleId})</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={(record) => {
                    return record.roleId + '_' + record.gameId + '_' + record.userId
                }}
                dataSource={getRoleDetailList?.data}
                loading={getRoleDetailList?.loading}
                size="small"
                bordered
            />
        </Modal>}
    </>
};

export default React.memo(RegIpRoleDetails);