@cloudbase/weda-ui 3.5.2-mp → 3.5.3

package/dist/web/components/wd-table/components/ImportFileModalByApi/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ImportFileModalByApi as ImportFileModalByApiFromTable } from '../../../table/ImportFileModalByApi';
+import { alertErrorMessage } from '../../../../utils/platform';
+import { ConfigProvider } from 'tea-component';
+/**
+ * 后端导入弹窗
+ */
+export const ImportFileModal = ({ fields, isImportFileModalByApiVisible, datasourceTitle, dbName, setIsImportFileModalByApiVisible, setIsInOrOutRecordModalVisible, refresh, supportManyRelated, }) => {
+    var _a;
+    const supportFields = (_a = fields
+        .filter((field) => {
+        // 不支持上传的类型
+        if (!field)
+            return false;
+        if (field['x-system'])
+            return false;
+        // 计算公式不支持
+        if (field['format'] === 'function')
+            return false;
+        // 关联模型的字段不支持
+        if ((field === null || field === void 0 ? void 0 : field['x-viewType']) === 'RELATION_VIEW')
+            return false;
+        // 多对多,一对多字段不支持
+        if ((field === null || field === void 0 ? void 0 : field.format) === 'many-many' ||
+            (field === null || field === void 0 ? void 0 : field.format) === 'one-many' ||
+            (field === null || field === void 0 ? void 0 : field.format) === 'one-one-r') {
+            return false;
+        }
+        return true;
+    })) === null || _a === void 0 ? void 0 : _a.sort((a, b) => (a === null || a === void 0 ? void 0 : a['x-index']) - (b === null || b === void 0 ? void 0 : b['x-index']));
+    return (isImportFileModalByApiVisible && (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(ImportFileModalByApiFromTable, { fields: supportFields, visible: isImportFileModalByApiVisible, datasourceTitle: datasourceTitle, dbName: dbName, onCancel: () => {
+                setIsImportFileModalByApiVisible(false);
+            }, handleInOrOutRecordModealVisible: setIsInOrOutRecordModalVisible, refresh: refresh, supportManyRelated: supportManyRelated }) })));
+};
+/**
+ * 后端表格导入方法
+ */
+export const importHandleByApi = ({ isH5, setIsImportFileModalByApiVisible, }) => {
+    if (isH5) {
+        return alertErrorMessage({
+            message: '移动端暂不支持进行数据导入',
+        });
+    }
+    setIsImportFileModalByApiVisible(true);
+};

package/dist/web/components/wd-table/components/InOrOutRecordModal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const InOrOutRecordModal: ({ isInOrOutRecordModalVisible, dbName, setIsImportFileModalByApiVisible, setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible, }: {
+    isInOrOutRecordModalVisible: any;
+    dbName: any;
+    setIsImportFileModalByApiVisible: any;
+    setIsExportFileModalByApiVisible: any;
+    setIsInOrOutRecordModalVisible: any;
+}) => JSX.Element;

package/dist/web/components/wd-table/components/InOrOutRecordModal.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InOrOutRecordModeal as InOrOutRecordModalComp } from '../../table/InOrOutRecordModeal';
+import { ConfigProvider } from 'tea-component';
+/*
+    导入导出记录弹窗
+  */
+export const InOrOutRecordModal = ({ isInOrOutRecordModalVisible, dbName, setIsImportFileModalByApiVisible, setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible, }) => {
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: isInOrOutRecordModalVisible && (_jsx(InOrOutRecordModalComp, { visible: isInOrOutRecordModalVisible, dbName: dbName, onCancel: () => {
+                isInOrOutRecordModalVisible === 'import'
+                    ? setIsImportFileModalByApiVisible(true)
+                    : setIsExportFileModalByApiVisible(true);
+                setIsInOrOutRecordModalVisible(false);
+            } })) }));
+};

package/dist/web/components/wd-table/components/ModalTable/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { CommonPropsType } from '../../../../types';
+import type { DataType } from '../../../../../configs/components/wd-table';
+export declare const ModalTable: React.ForwardRefExoticComponent<ModalTableProps & React.RefAttributes<TCompRef>>;
+export interface ModalTableProps extends CommonPropsType, DataType {
+    bindMetadata: any;
+    whereModal: any;
+}
+type TCompRef = {
+    refresh: () => void;
+    refreshKeepPage: () => void;
+    records?: any[];
+    total: number;
+    pageNo: number;
+    pageSize: number;
+};
+export {};

package/dist/web/components/wd-table/components/ModalTable/index.js

@@ -0,0 +1,215 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, useMemo, useImperativeHandle, forwardRef, } from 'react';
+import { ConfigProvider } from 'tea-component';
+import { Table } from './../../components';
+import classNames from '../../../../utils/classnames';
+import { useConfig } from '../../../../utils/config-context';
+import { DataSource } from '../../../../utils/datasource';
+import { EnumHoc } from '../../../../utils/hooks/EnumHoc';
+import { usePlatform, isInIde } from '../../../../utils/platform';
+import { useAuthFields } from './../../hooks/useAuthFields';
+import { useTableData } from './../../hooks/useTableData';
+import { useQueryParams } from './../../hooks/useQueryParams';
+import { getSortColumns } from './../../utils';
+import { Mock } from './../../mock';
+import { getTableColumns } from './../../components/FieldRender';
+const _defaultPageIndex = 1;
+const _defaultPageSize = 10;
+export const ModalTable = forwardRef(function TableComp({ className, style, dataSourceType, connectorMethod = { name: '', inParams: [], outParams: [], title: '' }, // API方法
+bindMetadata = {
+    datasource: {},
+    enabledFieldNames: [],
+    selectedViewIds: [],
+}, // 数据源+字段data对象
+columnSets, // 列管理，具备列排序/列勾选/列自定义渲染作用，存在时代替enabledFieldNames
+rowColor, // 行背景色
+id, // 组件id
+events, // 事件
+whereModal, orderBy, // 排序字段
+orderType, // 排序方式
+fixedFront = '', // 冻结首列至本列
+fixedEnd = '', // 冻结本列至尾列
+enableGlobalButton, // 是否显示插槽全局按钮
+enablePagination = true, columnSelectType = 'select', defaultPageIndex = _defaultPageIndex, defaultPageSize = _defaultPageSize, emptyText, }, ref) {
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const isH5 = platform === 'h5'; // 响应式判定
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [tableHightSize, setTableHightSize] = useState('md');
+    const tableClassList = {
+        [`${classPrefix}-table--size-${tableHightSize}`]: !!tableHightSize,
+    };
+    // 数据源类型是否是模型
+    const isModel = dataSourceType !== 'custom-connector';
+    const { datasource, enabledFieldNames, isNewData } = bindMetadata;
+    const dbName = datasource === null || datasource === void 0 ? void 0 : datasource.name;
+    const dbFieldNames = enabledFieldNames;
+    // 是否未绑定数据源
+    const isNoDataSourceBind = !dbName;
+    // wrap类名
+    const wrapClassList = {
+        [`${classPrefix}-table-wrap`]: true,
+        [`${classPrefix}-${platform}-table-wrap`]: true,
+        // 响应式css api
+        [`${classPrefix}-${platform}-table`]: true,
+        [`${classPrefix}-${platform}-table-without-global-btn`]: isH5 && (!enableGlobalButton || isNoDataSourceBind),
+    };
+    const dataSourceAPI = useMemo(() => new DataSource(dbName), [dbName]); // datasource 方法-模型
+    // 筛选条件
+    const wList = whereModal;
+    // 搜索和分页参数
+    const [queryParams, setQueryParams] = useState({
+        pageIndex: defaultPageIndex,
+        pageSize: defaultPageSize,
+        sort: [],
+        searchValues: [],
+        orderBy,
+        orderType,
+    });
+    // 数据源名称
+    const datasourceTitle = dbName;
+    // 过滤权限字段
+    const { authFields, fieldsLoading } = useAuthFields(dbName, dbFieldNames, isNewData, isModel, connectorMethod, isNoDataSourceBind);
+    const fields = authFields;
+    // 可排序字段
+    const sortColumns = getSortColumns({ fields, columnSets });
+    // 查询参数
+    const { query } = useQueryParams({
+        queryParams,
+        wList,
+        viewFieldsData: {},
+        connectorParams: {},
+        isModel,
+        isViewTable: false,
+        events,
+        columns: undefined,
+        authFields,
+        supportManyRelated: true,
+    });
+    // 查询数据
+    const { tableData, tableTotal: total, tableLoading, getNewList, errorObj, } = useTableData({
+        dataSourceAPI,
+        connectorMethod,
+        query,
+        events,
+        isModel,
+        dbName,
+        isH5,
+        isNoDataSourceBind,
+        supportManyRelated: true,
+    });
+    const refreshTable = () => {
+        if (queryParams.pageIndex === _defaultPageIndex) {
+            getNewList();
+        }
+        else {
+            setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
+        }
+    };
+    const isTableLoading = !isNoDataSourceBind && (tableLoading || fieldsLoading || !fields.length);
+    // 表格数据
+    const mapTableData = () => {
+        if (isInIde() && isNoDataSourceBind) {
+            return Mock.records;
+        }
+        // 加载过程中,pc端每次查询置空,h5端仅首页置空
+        // 避免编辑器内切换数据源时,column更改,table render还未更新造成渲染问题
+        if ((isTableLoading && !isH5) || isNoDataSourceBind) {
+            return [];
+        }
+        if (isTableLoading &&
+            isH5 &&
+            (queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) === _defaultPageIndex) {
+            return [];
+        }
+        return tableData;
+    };
+    const tableRecords = mapTableData();
+    // 表格 columns
+    const columns = useMemo(() => {
+        if (isInIde() && isNoDataSourceBind) {
+            return Mock.columns;
+        }
+        if (fieldsLoading || isNoDataSourceBind) {
+            return [];
+        }
+        const baseColumns = getTableColumns({
+            fields,
+            columnSets,
+            slots: {},
+            fixedFront,
+            fixedEnd,
+            isH5,
+            supportManyRelated: true,
+        });
+        return baseColumns;
+    }, [
+        isNoDataSourceBind,
+        fieldsLoading,
+        fields,
+        columnSets,
+        fixedFront,
+        fixedEnd,
+        isH5,
+    ]);
+    // 事件属性
+    useImperativeHandle(ref, () => ({
+        refresh: () => {
+            refreshTable();
+        },
+        // 刷新表格(查看当前页数据)
+        refreshKeepPage: () => {
+            if (isH5) {
+                // 移动端下拉分页不支持查看当前页，刷新即首页
+                refreshTable();
+            }
+            else {
+                // 清除选中的 key
+                getNewList();
+            }
+        },
+        // 当前页数据
+        records: tableRecords,
+        // 当前总数
+        total: total,
+        pageNo: query.pageNo,
+        pageSize: query.pageSize,
+        selectedRecords: [],
+        dataSourceType,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        columnSets,
+        datasourceTitle,
+        fields === null || fields === void 0 ? void 0 : fields.length,
+        isH5,
+        isModel,
+        tableRecords === null || tableRecords === void 0 ? void 0 : tableRecords.length,
+        total,
+        query.pageNo,
+        query.pageSize,
+        dataSourceType,
+    ]);
+    useEffect(() => {
+        if (isModel) {
+            setQueryParams((queryParams) => ({
+                ...queryParams,
+                searchValues: (queryParams === null || queryParams === void 0 ? void 0 : queryParams.searchValues) || [],
+                pageIndex: defaultPageIndex,
+                pageSize: defaultPageSize,
+                orderBy: orderBy,
+                orderType: orderType,
+            }));
+        }
+    }, [defaultPageIndex, defaultPageSize, isModel, orderBy, orderType]);
+    useEffect(() => {
+        setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
+    }, [isH5]);
+    const recordKey = isInIde() ? undefined : '_id';
+    const renderTable = () => {
+        return (_jsx(Table, { events: events, emptyText: emptyText, isH5: isH5, isNoDataSourceBind: isNoDataSourceBind, className: `${tableClassList} modal-table`, recordKey: recordKey, currentSize: tableHightSize, defaultPageIndex: defaultPageIndex, defaultPageSize: defaultPageSize, sortColumns: sortColumns, enablePagination: !isH5 && enablePagination, columnSelectType: columnSelectType, columns: columns, records: tableRecords, sort: queryParams.sort, selectedKeys: [], onSelectChange: () => { }, isError: false, isLoading: isTableLoading, rowColor: rowColor, queryParams: queryParams, total: total, setColumns: undefined, onQueryChange: (query) => {
+                setQueryParams({ ...queryParams, ...query });
+            }, rowClick: () => { }, errorObj: errorObj }));
+    };
+    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(EnumHoc, { fields: authFields, children: _jsx("div", { className: classNames(wrapClassList, className), style: style, id: id, children: renderTable() }) }) }));
+});

package/dist/web/components/wd-table/components/Pagination/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Pagination: ({ total, pageIndex, pageSize, onPagingChange, }: {
+    total?: number;
+    pageIndex: any;
+    pageSize: any;
+    onPagingChange: any;
+}) => JSX.Element;

package/dist/web/components/wd-table/components/Pagination/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig } from '../../../../utils/config-context';
+import WdIcon from '../../../wd-icon';
+const defaultTotal = 0;
+export const Pagination = ({ total = defaultTotal, pageIndex, pageSize, onPagingChange, }) => {
+    const pagingChangeHandle = () => {
+        onPagingChange();
+    };
+    const { classPrefix } = useConfig();
+    return (_jsxs("div", { className: `${classPrefix}-pagination`, children: [_jsx("div", { className: `${classPrefix}-pagination__state`, children: _jsxs("span", { className: `${classPrefix}-pagination__text`, children: ["\u5171 ", _jsx("strong", { children: total }), " \u6761"] }) }), _jsxs("div", { className: `${classPrefix}-pagination__operate`, children: [_jsx("span", { className: `${classPrefix}-pagination__btn is-disabled`, children: _jsx(WdIcon, { name: "td:chevron-left-double" }) }), _jsx("span", { className: `${classPrefix}-pagination__btn `, children: _jsx(WdIcon, { name: "td:chevron-left" }) }), _jsx("span", { className: `${classPrefix}-pagination__btn is-selected`, children: pageIndex }), _jsx("span", { className: `${classPrefix}-pagination__btn `, onClick: pagingChangeHandle, children: "2" }), _jsx("span", { className: `${classPrefix}-pagination__btn `, children: "3" }), _jsx("span", { className: `${classPrefix}-pagination__btn `, children: "4" }), _jsx("span", { className: `${classPrefix}-pagination__btn `, children: "5" }), _jsx("span", { className: `${classPrefix}-pagination__btn ${classPrefix}-pagination__btn--borderless `, children: _jsx(WdIcon, { name: "td:ellipsis" }) }), _jsx("span", { className: `${classPrefix}-pagination__btn `, children: "90" }), _jsx("span", { className: `${classPrefix}-pagination__btn `, children: _jsx(WdIcon, { name: "td:chevron-right" }) }), _jsx("span", { className: `${classPrefix}-pagination__btn is-disabled`, children: _jsx(WdIcon, { name: "td:chevron-right-double" }) }), _jsx("div", { className: `${classPrefix}-pagination__manualinput`, children: _jsxs("span", { className: `${classPrefix}-pagination__totalpage`, children: [pageSize, "/ 100 \u9875"] }) })] })] }));
+};

package/dist/web/components/wd-table/components/SearchBox/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const SearchBox: ({ searchValues, fields, columnSets, fetchData, refresh, }: {
+    searchValues: any;
+    fields: any;
+    columnSets: any;
+    fetchData: any;
+    refresh: any;
+}) => JSX.Element;

package/dist/web/components/wd-table/components/SearchBox/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, TagSearchBox, useClassNames, ConfigProvider, } from 'tea-component';
+import { alertErrorMessage } from '../../../../utils/platform';
+import { getSearchAttributes, filterCustomFields } from '../FieldRender';
+export const SearchBox = ({ searchValues, fields, columnSets, fetchData, refresh, }) => {
+    const { Margin } = useClassNames();
+    // 搜索框字段按列管理过滤
+    const searchFields = filterCustomFields({ fields, columnSets });
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs("div", { className: "modal-table__search", style: { width: '100%' }, children: [_jsx(TagSearchBox, { className: "modal-table__search-input", hideHelp: true, minWidth: 400, tips: (searchValues === null || searchValues === void 0 ? void 0 : searchValues.length) ? '' : '搜索', attributesSelectTips: "\u9009\u62E9\u8FDB\u884C\u641C\u7D22\u7684\u5B57\u6BB5", attributes: getSearchAttributes(searchFields), 
+                    // 清空查询
+                    onClearButtonClick: () => {
+                        fetchData({ searchValues: [], pageIndex: 1 });
+                    }, onChange: (tags) => {
+                        const searchValues = tags
+                            .map((item) => {
+                            var _a, _b, _c;
+                            // 没有选择 key
+                            if (!item.attr) {
+                                alertErrorMessage({ message: '请选择搜索关键字' });
+                                return null;
+                            }
+                            const { key } = item.attr;
+                            let val = ((_a = item.values[0]) === null || _a === void 0 ? void 0 : _a.key) === undefined
+                                ? (_b = item.values[0]) === null || _b === void 0 ? void 0 : _b.name
+                                : (_c = item.values[0]) === null || _c === void 0 ? void 0 : _c.key;
+                            let rel = 'search';
+                            // 过滤无效搜索值
+                            if (val === undefined) {
+                                return null;
+                            }
+                            // 字符串转换成数字
+                            if (item.attr.fieldType === 'number') {
+                                val = Number(val);
+                            }
+                            // 枚举-旧/数字/布尔用 eq，新枚举 TODO
+                            if (['number', 'boolean'].includes(item.attr.fieldType) ||
+                                item.attr.format === 'x-enum') {
+                                rel = 'eq';
+                            }
+                            return { key, val, rel };
+                        })
+                            .filter((item) => item);
+                        fetchData({ searchValues });
+                    } }), _jsx(Button, { className: Margin.Left['2n'], icon: "refresh", title: "\u5237\u65B0", onClick: refresh })] }) }));
+};

package/dist/web/components/wd-table/components/Table/index.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+export declare const BaseTableCom: ({ events, recordKey, className, columns, setColumns, records, sortColumns, sort, onSelectChange, selectedKeys, rowColor, isError, errorObj, isLoading, queryParams, total, onQueryChange, enablePagination, columnSelectType, defaultPageSize, defaultPageIndex, rowClick, currentSize, isNoDataSourceBind, isH5, emptyText: _emptyText, }: {
+    events: any;
+    recordKey: any;
+    className: any;
+    columns: any;
+    setColumns: any;
+    records: any;
+    sortColumns: any;
+    sort: any;
+    onSelectChange: any;
+    selectedKeys: any;
+    rowColor: any;
+    isError: any;
+    errorObj: any;
+    isLoading: any;
+    queryParams: any;
+    total?: number;
+    onQueryChange: any;
+    enablePagination: any;
+    columnSelectType: any;
+    defaultPageSize: any;
+    defaultPageIndex: any;
+    rowClick: any;
+    currentSize: any;
+    isNoDataSourceBind: any;
+    isH5: any;
+    emptyText: any;
+}) => JSX.Element;
+export declare const BaseTable: React.MemoExoticComponent<({ events, recordKey, className, columns, setColumns, records, sortColumns, sort, onSelectChange, selectedKeys, rowColor, isError, errorObj, isLoading, queryParams, total, onQueryChange, enablePagination, columnSelectType, defaultPageSize, defaultPageIndex, rowClick, currentSize, isNoDataSourceBind, isH5, emptyText: _emptyText, }: {
+    events: any;
+    recordKey: any;
+    className: any;
+    columns: any;
+    setColumns: any;
+    records: any;
+    sortColumns: any;
+    sort: any;
+    onSelectChange: any;
+    selectedKeys: any;
+    rowColor: any;
+    isError: any;
+    errorObj: any;
+    isLoading: any;
+    queryParams: any;
+    total?: number;
+    onQueryChange: any;
+    enablePagination: any;
+    columnSelectType: any;
+    defaultPageSize: any;
+    defaultPageIndex: any;
+    rowClick: any;
+    currentSize: any;
+    isNoDataSourceBind: any;
+    isH5: any;
+    emptyText: any;
+}) => JSX.Element>;

package/dist/web/components/wd-table/components/Table/index.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint max-lines: [error, 350] */
+import React, { useRef, useEffect } from 'react';
+import { Icon, Table, StatusTip, ConfigProvider } from 'tea-component';
+import { useResizeObserver } from '@react-hookz/web';
+import { useConfig } from '../../../../utils/config-context';
+import { isInIde } from '../../../../utils/platform';
+const { sortable, radioable, selectable, injectable, pageable, autotip, scrollable, columnsResizable, } = Table.addons;
+import StatusContent from '../../../statusContent';
+import classNames from '../../../../utils/classnames';
+import { setTableHeaderStyle } from './util';
+const { LoadingTip } = StatusTip;
+const defaultTotal = 0;
+const pageIndexSpan = 1;
+const miniPageSize = 10;
+// h5 端表格高度
+const tableHeight = { sm: 500, md: 580, lg: 880 };
+const tableHeaderHeight = 51;
+const renderStatus = ({ isH5, status, isNoDataSourceBind, _emptyText, errorObj, }) => {
+    const text = {
+        loading: '数据加载中,请稍候...',
+        error: '数据加载失败',
+        empty: isNoDataSourceBind ? '请绑定数据源' : _emptyText,
+    };
+    return (_jsx(StatusContent, { emptyText: text[`${status}`], component: "table", icon: status, errorObj: errorObj, isH5: isH5 }));
+};
+// eslint-disable-next-line complexity
+export const BaseTableCom = ({ events, recordKey, className, columns, setColumns, records, sortColumns, sort, onSelectChange, selectedKeys, rowColor, isError, errorObj, isLoading, queryParams, total = defaultTotal, 
+// refreshTable,
+onQueryChange, enablePagination, columnSelectType, defaultPageSize, defaultPageIndex, rowClick, currentSize, isNoDataSourceBind, isH5, emptyText: _emptyText, }) => {
+    var _a;
+    const tableRef = useRef(null);
+    const { classPrefix } = useConfig();
+    // 是否展示全局loading
+    const isShowLoading = isH5
+        ? (queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) === pageIndexSpan && isLoading
+        : isLoading;
+    // table状态样式
+    const showStatus = isShowLoading || isError || !(records === null || records === void 0 ? void 0 : records.length);
+    const classes = {
+        [`${classPrefix}-table-scroll-wrap`]: true,
+        [`${classPrefix}-table--status`]: showStatus,
+        [`${classPrefix}-table--without-pagination`]: !enablePagination,
+    };
+    // table 插件
+    const tableAddons = [
+        // 排序
+        sortable({
+            value: sort,
+            columns: sortColumns,
+            onChange: (value, context) => {
+                const sort = [context.sort];
+                if (isH5) {
+                    onQueryChange({ sort, pageIndex: 1 });
+                }
+                else {
+                    onQueryChange({ sort });
+                }
+                events === null || events === void 0 ? void 0 : events.sort({
+                    sort: sort.map((i) => ({ orderType: i.order, orderBy: i.by })),
+                });
+            },
+        }),
+        // 加载、错误信息提示
+        autotip({
+            isLoading: isShowLoading,
+            isError,
+            loadingText: null,
+            emptyText: null,
+            errorText: null,
+        }),
+        // 行背景色
+        injectable({
+            row: (props, context) => ({
+                style: {
+                    background: rowColor
+                        ? typeof rowColor === 'function'
+                            ? rowColor({ event: { detail: context }, data: props })
+                            : `${rowColor}`
+                        : undefined,
+                },
+                className: rowColor ? 'modal-table-rowcolor' : '',
+                onClick: () => {
+                    rowClick(context);
+                },
+            }),
+        }),
+    ];
+    // 仅运行态可编辑
+    if (!isInIde()) {
+        tableAddons.push(columnsResizable({
+            onResizeEnd: (columns) => {
+                setColumns(columns);
+            },
+            minWidth: 92,
+            maxWidth: 1000,
+        }));
+    }
+    // 支撑分页的最大高度
+    const tableDomHeight = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    // 支持表格滚动，高度超过 500 开始显示滚动条
+    if (isH5) {
+        tableAddons.push(scrollable({
+            maxHeight: tableDomHeight - tableHeaderHeight,
+            onScrollBottom: () => {
+                if (!isLoading && (records === null || records === void 0 ? void 0 : records.length) < total && isH5) {
+                    onQueryChange({ pageIndex: queryParams.pageIndex + pageIndexSpan });
+                    events === null || events === void 0 ? void 0 : events.onPagingChange({
+                        pageIndex: queryParams.pageIndex + pageIndexSpan,
+                        pageSize: queryParams.pageSize || defaultPageSize,
+                    });
+                }
+            },
+        }));
+    }
+    // 分页
+    if (enablePagination) {
+        tableAddons.push(pageable({
+            pageIndex: queryParams.pageIndex || defaultPageIndex,
+            pageSize: queryParams.pageSize || defaultPageSize,
+            recordCount: total,
+            onPagingChange: (query) => {
+                onQueryChange(query);
+                events === null || events === void 0 ? void 0 : events.onPagingChange({ query });
+            },
+        }));
+    }
+    // 行选择
+    if (columnSelectType === 'select') {
+        tableAddons.push(selectable({
+            value: selectedKeys,
+            onChange: onSelectChange,
+            render: (element, { disabled }) => disabled ? _jsx(Icon, { type: "loading" }) : element,
+            targetColumnKey: (columns === null || columns === void 0 ? void 0 : columns.length) && columnSelectType === 'select'
+                ? 'weda_select'
+                : undefined,
+        }));
+    }
+    else if (columnSelectType === 'radio') {
+        tableAddons.push(radioable({
+            value: selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys[0],
+            onChange: onSelectChange,
+            render: (element, { disabled }) => disabled ? _jsx(Icon, { type: "loading" }) : element,
+            targetColumnKey: (columns === null || columns === void 0 ? void 0 : columns.length) && columnSelectType === 'radio'
+                ? 'weda_radio'
+                : undefined,
+        }));
+    }
+    const showLoadingBottomTip = isLoading && (queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) !== pageIndexSpan;
+    const showAllDataBottomTip = (records === null || records === void 0 ? void 0 : records.length) === total && !isLoading && (records === null || records === void 0 ? void 0 : records.length) > miniPageSize;
+    const bottomTipCompRender = () => {
+        if (!isH5) {
+            return false;
+        }
+        if (showLoadingBottomTip) {
+            return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { className: `${classPrefix}-h5-table-loading-wrap ${classPrefix}-h5-table-loading-${currentSize}`, children: _jsx(LoadingTip, { className: "adaptation-table__loading", loadingText: '数据加载中,请稍候...' }) }) }));
+        }
+        if (showAllDataBottomTip) {
+            return (_jsx("div", { className: `${classPrefix}-h5-table-loading-wrap ${classPrefix}-h5-table-loading-${currentSize}`, children: _jsx("span", { children: "\u5DF2\u52A0\u8F7D\u5168\u90E8\u6570\u636E" }) }));
+        }
+        return false;
+    };
+    const resetPadding = () => {
+        var _a, _b;
+        // table body 滚动区域
+        const tableBodyBoxDom = (_b = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('wd-table__body')) === null || _b === void 0 ? void 0 : _b[0];
+        if (tableBodyBoxDom) {
+            const bodyHasScroll = (tableBodyBoxDom === null || tableBodyBoxDom === void 0 ? void 0 : tableBodyBoxDom.scrollHeight) > (tableBodyBoxDom === null || tableBodyBoxDom === void 0 ? void 0 : tableBodyBoxDom.clientHeight);
+            // 如果table body存在滚动条，则设置header的padding值（目的是表头和操作列对齐）
+            setTableHeaderStyle(tableRef, bodyHasScroll);
+        }
+    };
+    useEffect(() => {
+        if (!isLoading) {
+            // table body 滚动区域
+            resetPadding();
+        }
+    }, [isLoading, currentSize]);
+    useResizeObserver(tableRef, () => {
+        if (!isLoading) {
+            // table body 滚动区域
+            resetPadding();
+        }
+    });
+    useEffect(() => {
+        var _a;
+        // 支撑分页的最大高度
+        const minPageSizeHeight = tableHeight[currentSize];
+        const tableDomHeight = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        if ((queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) === pageIndexSpan &&
+            tableDomHeight > minPageSizeHeight &&
+            !isLoading &&
+            isH5 &&
+            total > miniPageSize &&
+            !isInIde()) {
+            onQueryChange({ pageIndex: queryParams.pageIndex + pageIndexSpan });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [queryParams.pageIndex, currentSize, isLoading, isH5, total]);
+    const status = isShowLoading ? 'loading' : isError ? 'error' : 'empty';
+    return (_jsxs("div", { className: classNames(className, classes), children: [_jsx(Table, { ref: tableRef, className: className, bordered: true, recordKey: recordKey, columns: columns, records: records, addons: tableAddons, bottomTip: bottomTipCompRender() }), showStatus &&
+                renderStatus({
+                    isH5,
+                    status,
+                    isNoDataSourceBind,
+                    _emptyText,
+                    errorObj,
+                })] }));
+};
+export const BaseTable = React.memo(BaseTableCom);

package/dist/web/components/wd-table/components/Table/util.d.ts

@@ -0,0 +1,7 @@
+export declare const getScrollBarSize: () => number;
+export declare const getMaxHeight: ({ tableRef, platform, currentSize }: {
+    tableRef: any;
+    platform: any;
+    currentSize: any;
+}) => any;
+export declare const setTableHeaderStyle: (tableRef: any, bodyHasScroll: any) => void;