添加demo

package.json

@@ -29,15 +29,19 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "chalk": "^3.0.0",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^6.0.3",
     "css-loader": "^3.3.0",
     "docz": "^2.0.0-rc.76",
     "html-webpack-plugin": "^3.2.0",
+    "i18n-webpack-plugin": "^1.0.0",
     "js-cookie": "^2.2.1",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "ora": "^4.0.3",
     "source-map-loader": "^0.2.4",
+    "speed-measure-webpack-plugin": "^1.3.1",
     "style-loader": "^1.0.1",
     "ts-loader": "^6.2.1",
     "typescript": "^3.7.4",

scripts/demo.js

+var a = '你好';
+
+console.log(a);

scripts/test.js

+#!/bin/sh node
+const chalk = require('chalk');
+const log = console.log;
+const ora = require('ora');
+
+const spinner = ora({
+    text: 'kkk',
+    prefixText: '√',
+    spinner: 'betaWave',
+});
+
+spinner.start();
+
+setTimeout(() => {
+    spinner.color = 'yellow';
+    spinner.text = 'Loading rainbows';
+    spinner.stop();
+}, 5000);

src/apollo-table/component/Table.less

@@ -6,40 +6,6 @@
     }
 }
 
-.table {
-    background: white;
-
-    :global(.ant-table-bordered.ant-table-empty .ant-table-placeholder) {
-        display: none;
-    }
-
-    :global(.ant-table-scroll table) {
-        min-width: 0;
-    }
-
-    :global(.ant-table-thead > tr > th) {
-        padding: 0;
-    }
-
-    :global(.ant-table-tbody > tr > td) {
-        padding: 0;
-        height: 40px;
-    }
-
-    :global(.ant-table-tbody > tr > td:last-child) {
-        text-align: left;
-    }
-
-    :global(.ant-table-thead > tr > th .ant-table-header-column) {
-        display: block;
-    }
-
-    :global(.ant-table.ant-table-bordered .ant-table-footer) {
-        padding: 10px;
-        background: white;
-    }
-}
-
 .indexCell {
     padding: 0 10px;
     display: flex;

src/apollo-table/component/Table.tsx

@@ -108,7 +108,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     changeCheckbox = (record: any, flag: boolean) => {
         const { changeChecked, hasGroup } = this.props;
         const { checked, dataSource } = this.state;
-        let temp = checked && checked.slice() || [];
+        let temp = (checked && checked.slice()) || [];
         if (flag) {
             if (hasGroup) {
                 const selected = dataSource.filter((item: any) => {
@@ -136,7 +136,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     // 检测当前分组是否全部选中
     getCheckedAll = () => {
         const { checked, dataSource } = this.state;
-        const temp = checked && checked.slice() || [];
+        const temp = (checked && checked.slice()) || [];
         const result = temp.filter((v: any) => {
             return dataSource.some((item: any) => {
                 return item.id === v.id;
@@ -148,9 +148,9 @@ export default class AirTable extends Component<TableProps, TableState> {
     changeCheckboxAll = () => {
         const { checked, dataSource } = this.state;
         const { changeChecked } = this.props;
-        const temp = checked && checked.slice() || [];
+        const temp = (checked && checked.slice()) || [];
         const flag = this.getCheckedAll();
-        let result:any[] = [];
+        let result: any[] = [];
         if (flag) {
             result = temp.concat(dataSource).filter((v: any) => {
                 return (
@@ -219,7 +219,9 @@ export default class AirTable extends Component<TableProps, TableState> {
     renderCheckbox = (record: any, rowIndex: number) => {
         const { checked } = this.state;
         const { hasGroup } = this.props;
-        const flag = checked && checked.some((item: any) => {
+        const flag =
+            checked &&
+            checked.some((item: any) => {
                 return item.id === record.id;
             });
         let checkbox = flag ? (
@@ -456,7 +458,6 @@ export default class AirTable extends Component<TableProps, TableState> {
         const leftCount = this.memoizeLeftCount(columns);
 
         return (
-            <React.Fragment>
             <ScrollSync>
                 {({ onScroll, scrollLeft, scrollTop }: any) => {
                     return (
@@ -602,7 +603,6 @@ export default class AirTable extends Component<TableProps, TableState> {
                     );
                 }}
             </ScrollSync>
-            </React.Fragment>
         );
     }
 }

src/apollo-table/component/index.tsx

@@ -34,11 +34,16 @@ class AirTable extends React.Component<CommonProps, CommonState> {
         };
     }
 
-    onScroll = () => {};
+    onScroll = () => {
+        const { onScroll } = this.props;
+        if (typeof onScroll === 'function') {
+            onScroll();
+        }
+    };
 
     render() {
         const { columns, dataSource, tableId } = this.state;
-        const { rowStyle } = this.props;
+        const { rowStyle, rowClassName } = this.props;
         const operateConfig = {};
         return (
             <div className={styles.container}>
@@ -50,7 +55,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                         onScroll={this.onScroll}
                         operateConfig={operateConfig}
                         rowStyle={rowStyle}
-                        rowClassName={styles.rowClassName}
+                        rowClassName={rowClassName}
                     />
                 </div>
             </div>

src/apollo-table/component/interface.tsx

@@ -9,6 +9,7 @@ export interface CommonProps {
     rowClassName?: string | Function;
     rowStyle?: Object | Function;
     rowRenderer?: Function;
+    onScroll?:Function;
 }
 
 export interface CommonState {

src/test/demo1.tsx

+import React, { useState, useEffect, useCallback } from 'react';
+import _ from 'lodash';
+import ApolloTable from '../apollo-table';
+import { getColumnConfig, getDataSource } from './serives';
+import { message } from 'antd';
+
+const rowStyle = ({ index, record }) => {
+    const style: any = {};
+    if (index % 3 === 0) {
+        style.background = 'red';
+    }
+    return style;
+};
+const tableId = 1;
+interface RowData {
+    id: number;
+    rowData: any[];
+}
+interface PageConfig {
+    pageNum: number;
+    pageSize: number;
+    hasNextPage: boolean;
+    nextPage: number;
+}
+const Demo1 = (props) => {
+    const [columns, setColumns] = useState([]);
+    useEffect(() => {
+        const getColumnsList = async () => {
+            const res = await getColumnConfig({ tableId });
+            if (res && res.success && res.data) {
+                const arr = Array.isArray(res.data) ? res.data : [];
+                setColumns(arr);
+            }
+        };
+        getColumnsList();
+    }, []);
+    const [dataSource, setDataSource] = useState<RowData[]>([]);
+    const [pageConfig, setPageConfig] = useState<PageConfig>({
+        pageNum: 1,
+        pageSize: 50,
+        hasNextPage: false,
+        nextPage: 1,
+    });
+    useEffect(() => {
+        const getDataList = async () => {
+            const data = {
+                pageNum: pageConfig.nextPage,
+                pageSize: pageConfig.pageSize,
+            };
+            const res = await getDataSource({ tableId, data });
+            if (res && res.success && res.data) {
+                const { list, hasNextPage, nextPage } = res.data;
+                let arr = Array.isArray(list) ? list : [];
+                setDataSource([...dataSource, ...arr]);
+                setPageConfig({ ...data, hasNextPage, nextPage });
+            }
+        };
+        getDataList();
+    }, [pageConfig.pageNum]);
+    const fetchData = useCallback(async (isClean: boolean) => {
+        const data = {
+            pageNum: isClean ? 1 : pageConfig.nextPage,
+            pageSize: pageConfig.pageSize,
+        };
+        const res = await getDataSource({ tableId, data });
+        if (res && res.success && res.data) {
+            const arr = Array.isArray(res.data.list) ? res.data.list : [];
+            setDataSource(arr);
+        }
+    }, []);
+    const onScroll = () => {
+        if (pageConfig.hasNextPage) {
+            setPageConfig({ ...pageConfig, pageNum: pageConfig.nextPage });
+        } else {
+            message.warning('没有更多了');
+        }
+    };
+    const debounceScroll = _.debounce(onScroll, 400);
+    return (
+        <ApolloTable
+            rowStyle={rowStyle}
+            columns={columns}
+            dataSource={dataSource}
+            tableId={tableId}
+            onScroll={debounceScroll}
+        />
+    );
+};
+export default Demo1;

src/test/index.tsx

 import React from 'react';
 import { render } from 'react-dom';
-import ApolloTable from '../apollo-table';
-import Data from './data';
+import Demo1 from './demo1';
 
-const { cols, list } = Data;
-const rowStyle = ({ index, record }) => {
-    const style: any = {};
-    if (index % 3 === 0) {
-        style.background = 'red';
-    }
-    return style;
-};
-render(
-    <ApolloTable rowStyle={rowStyle} columns={cols} dataSource={list} tableId={1} />,
-    document.getElementById('root'),
-);
+render(<Demo1 />, document.getElementById('root'));

src/test/serives.ts

+import request from '../apollo-table/utils/request';
+
+// 获取表头配置
+export async function getColumnConfig({ tableId, data }: { tableId: number; data?: any }) {
+    return request(`/airTable/userConfig/${tableId}`, { method: 'get', prefix: '/crmApi', data });
+}
+
+// 设置表头显隐配置
+export async function setHideConfig({ tableId, data }) {
+    return request(`/airTable/hideConfig/${tableId}`, { method: 'post', prefix: '/crmApi', data });
+}
+
+// 获取操作栏配置
+export async function getOperateConfig({ tableId }) {
+    return request(`/airTable/table/config/${tableId}`, { method: 'post', prefix: '/crmApi' });
+}
+
+// 修改操作栏配置
+export async function setOperateConfig({ tableId, data }) {
+    return request(`/airTable/table/config/save/${tableId}`, { method: 'post', prefix: '/crmApi', data });
+}
+
+// 获取数据
+export async function getDataSource({ tableId, data }: { tableId: number; data?: any }) {
+    return request(`/follow/list/${tableId}`, { method: 'post', prefix: '/crmApi', data });
+}
+
+// 获取分组数据
+export async function getGroupDataSource({ tableId, data }) {
+    return request(`/follow/group/list/${tableId}`, { method: 'post', prefix: '/crmApi', data });
+}
+
+// 修改数据
+export async function addOrUpdateDataSource({ data }) {
+    return request('/follow/addOrUpdate', { method: 'post', prefix: '/crmApi', data });
+}
+
+// 删除数据
+export async function delData({ data }) {
+    return request('/follow/del', { method: 'post', prefix: '/crmApi', data });
+}
+
+// 获取数据详情
+export async function getDetail({ tableId, rowId }) {
+    return request(`/follow/row/${tableId}/${rowId}`, { method: 'get', prefix: '/crmApi' });
+}

webpack.config.js

@@ -2,6 +2,8 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const webpack = require('webpack');
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+const smp = new SpeedMeasurePlugin();
 
 const proxyHost = {
     localhost: 'http://192.168.16.252:8093', //链接本地调试
@@ -11,7 +13,7 @@ const proxyHost = {
 };
 
 const proxy_env = proxyHost[process.env.PROXY_ENV];
-module.exports = {
+const config = {
     mode: 'development',
     entry: './src/test/index.tsx',
     output: {
@@ -146,3 +148,4 @@ module.exports = {
         port: 9000,
     },
 };
+module.exports = smp.wrap(config);

webpack.config.test.js

+const path = require('path');
+const I18nPlugin = require('i18n-webpack-plugin');
+const languageConfig = {};
+const optionsObj = {};
+module.exports = {
+    mode: 'development',
+    entry: './scripts/demo.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'bundle.[hash:6].js',
+    },
+    plugins: [new I18nPlugin(languageConfig, optionsObj)],
+};