fix

package.json

@@ -77,6 +77,7 @@
     "qrcodejs2": "^0.0.2",
     "qs": "^6.9.0",
     "react": "^16.8.6",
+    "react-base-table": "^1.13.4",
     "react-color": "^2.19.3",
     "react-cropper": "^2.1.7",
     "react-dom": "^16.8.6",
@@ -85,7 +86,7 @@
     "react-resizable": "^3.0.4",
     "react-responsive-carousel": "^3.2.18",
     "react-sortable-hoc": "^2.0.0",
-    "react-window": "^1.8.6",
+    "react-window": "^1.8.9",
     "regenerator-runtime": "^0.13.7",
     "sanitize-html": "^2.3.0",
     "sortablejs": "^1.13.0",

src/components/BaseTable/index.tsx

@@ -0,0 +1,148 @@
+import React from "react"
+import Table, { Column, ColumnShape } from 'react-base-table'
+import 'react-base-table/styles.css'
+
+const BaseTable: React.FC = () => {
+
+    let columns: ColumnShape<any>[] = [
+        {
+            key: 'name',
+            title: 'Name',
+            dataKey: 'name',
+            width: 150,
+            resizable: true,
+            sortable: true,
+            frozen: Column.FrozenDirection.LEFT,
+        },
+        {
+            key: 'score',
+            title: 'Score',
+            dataKey: 'score.math',
+            width: 60,
+            align: Column.Alignment.CENTER,
+            sortable: false,
+        },
+        {
+            key: 'gender',
+            title: '♂♀',
+            dataKey: 'gender',
+            width: 60,
+            align: Column.Alignment.CENTER,
+            sortable: true,
+        },
+        {
+            key: 'birthday',
+            title: 'Birthday',
+            dataKey: 'birthday',
+            width: 100,
+            align: Column.Alignment.RIGHT,
+            sortable: true,
+        },
+        {
+            key: 'email',
+            title: 'Email',
+            dataKey: 'email',
+            width: 200,
+            resizable: true,
+            sortable: true,
+        },
+        {
+            key: 'country',
+            title: 'Country',
+            dataKey: 'country',
+            width: 100,
+            resizable: true,
+            sortable: true,
+        },
+        {
+            key: 'address',
+            title: 'Address',
+            dataKey: 'address.street',
+            width: 200,
+            resizable: true,
+        },
+        {
+            key: 'name1',
+            title: 'Name',
+            dataKey: 'name',
+            width: 150,
+            resizable: true,
+            sortable: true,
+        },
+        {
+            key: 'name2',
+            title: 'Name',
+            dataKey: 'name',
+            width: 150,
+            resizable: true,
+            sortable: true,
+        },
+        {
+            key: 'name3',
+            title: 'Name',
+            dataKey: 'name',
+            width: 150,
+            resizable: true,
+            sortable: true,
+        },
+        {
+            key: 'name4',
+            title: 'Name',
+            dataKey: 'name',
+            width: 150,
+            resizable: true,
+            sortable: true,
+        },
+        {
+            key: 'name5',
+            title: 'Name',
+            dataKey: 'name',
+            width: 150,
+            resizable: true,
+            sortable: true,
+        },
+        {
+            key: 'name6',
+            title: 'Name',
+            dataKey: 'name',
+            width: 150,
+            resizable: true,
+            sortable: true,
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 100,
+            align: Column.Alignment.CENTER,
+            frozen: Column.FrozenDirection.RIGHT,
+            
+            cellRenderer: ({ rowData }: any) => (
+                <button
+                    onClick={() => {
+
+                    }}
+                >
+                    Remove
+                </button>
+            ),
+        },
+    ]
+
+    const defaultData = Array.from({ length: 10000 }, (_, key) => ({
+        id: key,
+        name: 'row' + key,
+        gender: '男',
+        score: {
+            math: 30,
+        },
+        birthday: 222,
+        attachments: 111,
+        description: '3333',
+        email: '7787@qq.com',
+        country: 'aaasdsad',
+    }));
+
+    return <Table fixed columns={columns} data={defaultData} width={600} height={400} />
+}
+
+export default React.memo(BaseTable)

src/components/QueryForm/index.tsx

@@ -41,6 +41,7 @@ interface Props {
     isGameName?: boolean
     /** 是否开启 游戏ID 搜索 */
     isGameId?: boolean
+    isGameIds?: boolean
     /** 是否开启 充值游戏ID 搜索 */
     isOrderGameId?: boolean
     /** 是否开启 父游戏ID 搜索 */
@@ -156,7 +157,7 @@ const QueryForm: React.FC<Props> = (props) => {
 
     /**************************/
     const {
-        onChange, initialValues, isSource, isAccount, isAccountId, isCompanyId, isAgentKey, isAgentName, isCpId, isCpName, isCpOrderId, isCpStatus, isCreateDay, isDevice, isGameName, isRechargeGameName, isGameId, isOrderGameId, isGameRoleId,
+        onChange, initialValues, isSource, isAccount, isAccountId, isCompanyId, isAgentKey, isAgentName, isCpId, isCpName, isCpOrderId, isCpStatus, isCreateDay, isDevice, isGameName, isRechargeGameName, isGameId, isGameIds, isOrderGameId, isGameRoleId,
         isGameRoleName, isFirstRecharge, isSwitch, isMerchantNo, isOrderId, isMerchantOrderNo, isPayStatus, isPayWay, isProductName, isRegAgent, isAgentId, isPutAgent, isRegDay, isOs, isParentId, isProjectId, isProjectName, isPromotionId, isPromotionName,
         isSysUserName, isRechargeDate, isBGGameClassify, isGameUserId, isSysUserId, isUserName, isUserId, isSelectRanking, isGameType, isConsumeDay, rechargeDay, isBeginDay, isType, isAdTTStatus, isUserEnterType, isServerName, isServerId, isServerDay, isAdTXStatus,
         payTimeDay, placeAnOrderDay, isPayIntervalTime, isActiveTypes
@@ -200,10 +201,10 @@ const QueryForm: React.FC<Props> = (props) => {
 
     /** 游戏列表 */
     useEffect(() => {
-        if (isGameId || isOrderGameId || isParentId) {
+        if (isGameId || isOrderGameId || isParentId || isGameIds) {
             getGameChoiceList.run()
         }
-    }, [isGameId, isOrderGameId, isParentId])
+    }, [isGameId, isGameIds, isOrderGameId, isParentId])
 
     /** 投手列表 */
     useEffect(() => {
@@ -535,6 +536,21 @@ const QueryForm: React.FC<Props> = (props) => {
                     {getGameChoiceList?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
                 </Select>
             </Form.Item></Col>}
+            {isGameIds && <Col><Form.Item name='gameId'>
+                <Select
+                    maxTagCount={1}
+                    mode="multiple"
+                    showSearch
+                    style={{ minWidth: 140 }}
+                    allowClear
+                    placeholder={'请选择游戏'}
+                    filterOption={(input, option) =>
+                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    }
+                >
+                    {getGameChoiceList?.data?.map((item: any) => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
+                </Select>
+            </Form.Item></Col>}
             {/* 充值游戏ID */}
             {isOrderGameId && <Col><Form.Item name='orderGameId'>
                 <Select

src/components/VirtualTable/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import "antd/dist/antd.css";
 import "./index.less";
-import { Pagination, Space, Spin, Table, Tag } from "antd";
+import { Spin, Table, Tag } from "antd";
 import type { TableProps } from "antd";
 import classNames from "classnames";
 import ResizeObserver from "rc-resize-observer";
@@ -9,7 +9,6 @@ import type { ColumnsType } from "antd/es/table";
 import { VariableSizeGrid as Grid } from "react-window";
 import { Resizable } from "react-resizable";
 
-
 const ResizableHeader = (props: { [x: string]: any; onResize: any; width: any }) => {
     const { onResize, width, ...restProps } = props;
     if (!width) {
@@ -135,9 +134,9 @@ const VTable = <RecordType extends object>(props: Props<RecordType>) => {
             >
                 {({ columnIndex, rowIndex, style }: { columnIndex: number; rowIndex: number; style: React.CSSProperties; }) => {
                     const { render, dataIndex, align } = (columnsRef.current as any)[columnIndex];
-                    if ((columnsRef.current as any)[columnIndex].title === 'C') {
-                        console.log('style--->', style)
-                    }
+                    // if ((columnsRef.current as any)[columnIndex].title === 'C') {
+                    //     console.log('style--->', style)
+                    // }
                     const myStyle = {
                         justifyContent:
                             align === "left"

src/pages/gameDataStatistics/order/index.tsx

@@ -74,7 +74,7 @@ const Order: React.FC = () => {
                 isCpOrderId
                 isCpStatus
                 isOs
-                isGameId
+                isGameIds
                 isFirstRecharge
                 isMerchantNo
                 isMerchantOrderNo

src/pages/gameDataStatistics/rankingList/gamer/index.tsx

@@ -7,6 +7,7 @@ import QueryForm from "@/components/QueryForm"
 import moment from "moment"
 import { getPresetsRanking } from "@/components/QueryForm/const"
 import VirtualTable from "@/components/VirtualTable"
+import BaseTable from "@/components/BaseTable"
 
 const Gamer: React.FC = () => {
 
@@ -21,6 +22,7 @@ const Gamer: React.FC = () => {
 
     return <div>
         {/* <VirtualTable /> */}
+        {/* <BaseTable /> */}
         <TableData
             leftChild={<QueryForm
                 initialValues={{ sourceSystem: 'ZX_ONE', rechargeDay: [moment(), moment()] }}