@cloudbase/weda-ui 0.2.16 → 0.2.21-alpha.1

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

@@ -0,0 +1,768 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines */
+import { useRef, useEffect, useState, useMemo, forwardRef, memo, } from 'react';
+import { ConfigProvider } from 'tea-component';
+import { Table, ExportFileModal, ImportFileModal, InOrOutRecordModal, deleteRecord, importHandleByApi, exportHandleByApi, exportHandle, FilterFieldsPanel, ToolBar, } from './components';
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { DataSource } from '../../utils/datasource';
+import { CELL_CUSTOM_OPTION, emptyArray } from '../../utils/constant';
+import { useEnumContext } from '../../utils/hooks/context';
+import { EnumHoc } from '../../utils/hooks/EnumHoc';
+import { usePlatform, isInIde } from '../../utils/platform';
+import { convertWhere } from '../../utils/getModelParams';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { useAuthFields } from './hooks/useAuthFields';
+import { useTableData } from './hooks/useTableData';
+import { useViewFields } from './hooks/useViewFields';
+import { useQueryParams } from './hooks/useQueryParams';
+import { WdCompError } from '../../utils/error';
+import { getSlots, getFilterFields, getSelectedView, getSortColumns, mapTableDataWithView, checkSupport, DataSourceType, getRecordKey, getCurrentPageData, } from './utils';
+import { Mock } from './mock';
+import { getTableColumns, slotRender, mapColumKey, } from './components/FieldRender';
+import Modal from '../modal';
+import { WdButton } from '../wd-button';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
+import '../style';
+import './utils/style';
+export const _defaultPageIndex = 1;
+export const _defaultPageSize = 10;
+export const TableOption = function TableOption({ slots, ...props }) {
+    return slotRender(slots[CELL_CUSTOM_OPTION], props);
+};
+export const GlobalButton = memo(function GlobalButtonDom({ classPrefix, slots, }) {
+    return _jsx("div", { className: `${classPrefix}-global-btn`, children: slotRender(slots) });
+});
+// eslint-disable-next-line complexity
+export const WdTable = forwardRef(function TableComp(tableProps, ref) {
+    const { className, style, dataSourceType = 'data-model', bindConnectMetadata = {
+        datasource: { id: '', name: '', title: '' },
+    }, // APImock数据
+    connectorMethod = { name: '', inParams: [], outParams: [], title: '' }, // API方法
+    connectorParams: rawConnectorParams = {}, // API查询入参
+    bindMetadata = {
+        datasource: { id: '', name: '', title: '' },
+        enabledFieldNames: [],
+        selectedViewIds: [],
+        isNewData: false,
+    }, // 数据源+字段data对象
+    filterFields, // 筛选字段
+    columnSets, // 列管理，具备列排序/列勾选/列自定义渲染作用，存在时代替enabledFieldNames
+    rowColor, // 行背景色
+    id, // 组件id
+    events, // 事件
+    orderBy = 'updatedAt', // 排序字段
+    orderType = 'desc', // 排序方式
+    fixedFront = '', // 冻结首列至本列
+    fixedEnd = '', // 冻结本列至尾列
+    enableCellCustomOption, // 是否显示插槽操作列
+    customOptionTitle = '操作', // 操作列标题
+    enableGlobalButton, // 是否显示插槽全局按钮
+    enablePagination = true, columnSelectType = 'select', defaultPageIndex = _defaultPageIndex, defaultPageSize = _defaultPageSize, loading: exprLoading = false, 
+    // 以下为非标准属性，config中没有
+    // isOrderBy, // API是否支持排序(旧的表格有该属性)
+    isMock = false, //是否mock数据
+    enableRefreshBtn = true, enableTableHeightSizeBtn = true, emptyText = '暂无数据', dataSourceData, //绑定表达式时的表格数据
+    recordKey: _recordKey = '_id', // 数据主键
+    total: _total, // 表格总条数
+    enableTotal = false, //是否开启动态分页
+    supportManyRelated, // 支持新版数据源关联查询
+    selectFieldType = 'table', // 查询字段范围类型
+    selectFields = emptyArray, // 查询字段范围自定义
+    isSuspendHeader = true, //是否开启表头在页面顶部悬停
+    isSuspendFooter = true, // 是否分页器在页面底部悬停
+    isSupportMultipleSort = false, // 是否支持多字段排序
+    sorter, // 排序规则
+    __innerSlot, ...props } = tableProps;
+    const wList = convertWhere(props, supportManyRelated); // 查询参数
+    const { classPrefix } = useConfig();
+    const platform = usePlatform();
+    const isH5 = platform === 'h5'; // 响应式判定
+    const [tableHightSize, setTableHightSize] = useState('md');
+    const tableClassList = {
+        [`${classPrefix}-table--size-${tableHightSize}`]: !!tableHightSize,
+    };
+    // 打开移动端筛选面板
+    const [openMobileFilter, setOpenMobileFilter] = useState(false);
+    const connectorParams = rawConnectorParams && JSON.parse(JSON.stringify(rawConnectorParams));
+    // 数据源类型是否时表达式
+    const isExpression = dataSourceType === DataSourceType.Expression;
+    // 数据源类型是否是模型
+    const isModel = dataSourceType === DataSourceType.DataModel;
+    // 数据源类型是否是apis
+    const isApis = dataSourceType === DataSourceType.CustomConnector;
+    const { enabledFieldNames, isNewData, selectedViewIds } = bindMetadata;
+    const datasource = isModel
+        ? bindMetadata.datasource
+        : bindConnectMetadata.datasource;
+    const { outParams } = connectorMethod;
+    const dbName = datasource === null || datasource === void 0 ? void 0 : datasource.name;
+    // 数据源名称
+    const datasourceTitle = (datasource === null || datasource === void 0 ? void 0 : datasource.title) || dbName;
+    const dbFieldNames = isModel ? enabledFieldNames : outParams;
+    // 视图列表 列表
+    const selectedView = getSelectedView(selectedViewIds);
+    // 判断是否支持视图
+    const isViewTable = (selectedView === null || selectedView === void 0 ? void 0 : selectedView.length) && isModel;
+    // 是否未绑定数据源
+    const isNoDataSourceBind = !dbName && !(connectorMethod === null || connectorMethod === void 0 ? void 0 : connectorMethod.name) && !isExpression;
+    // wrap类名
+    const wrapClassList = {
+        [`${classPrefix}-table-wrap`]: true,
+        'is-suspend-header': isSuspendHeader,
+        'is-suspend-footer': isSuspendFooter,
+        [`${classPrefix}-${platform}-table-wrap`]: true,
+        // 响应式css api
+        [`${classPrefix}-${platform}-table`]: true,
+        [`${classPrefix}-${platform}-table-without-global-btn`]: isH5 && (!enableGlobalButton || isNoDataSourceBind),
+    };
+    // 弹窗显隐
+    const [isInOrOutRecordModalVisible, setIsInOrOutRecordModalVisible] = useState(null);
+    const [isImportFileModalByApiVisible, setIsImportFileModalByApiVisible] = useState(false);
+    const [isExportFileModalByApiVisible, setIsExportFileModalByApiVisible] = useState(false);
+    // 移动端操作按钮弹窗
+    const [isMobileOptionVisible, setIsMobileOptionVisible] = useState(false);
+    const modalRef = useRef(null);
+    const dataRef = useRef({
+        dataSourceData: [],
+        tableRecords: [],
+    });
+    const { enumOptions } = useEnumContext();
+    const dataSourceAPI = useMemo(() => new DataSource(dbName), [dbName]); // datasource 方法-模型
+    // 插槽属性
+    const slots = useMemo(() => {
+        return getSlots(props);
+    }, [props]);
+    // table选中key值
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [selectedRecords, setSelectedRecords] = useState([]);
+    // 行点击出参
+    const [rowData, setRowData] = useState({});
+    // 搜索和分页参数
+    let initPageIndex = isModel || isExpression ? defaultPageIndex : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo;
+    let initPageSize = isModel || isExpression ? defaultPageSize : connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize;
+    initPageIndex = parseInt(initPageIndex);
+    initPageSize = parseInt(initPageSize);
+    // 排序规则
+    const _sort = useMemo(() => {
+        var _a;
+        return ((_a = sorter === null || sorter === void 0 ? void 0 : sorter.filter((n) => n.orderBy && n.orderType)) === null || _a === void 0 ? void 0 : _a.map((i) => ({ by: i.orderBy, order: i.orderType }))) || [];
+    }, [sorter]);
+    const [queryParams, setQueryParams] = useState({
+        pageIndex: initPageIndex,
+        pageSize: initPageSize,
+        sort: [],
+        searchValues: [],
+        orderBy,
+        orderType,
+        defaultSort: _sort,
+    });
+    const columnSetsKey = columnSets === null || columnSets === void 0 ? void 0 : columnSets.map((i) => i.key);
+    // 过滤权限字段
+    const { authFields, fieldsLoading, isError: fieldsError, } = useAuthFields({
+        dbName,
+        dbFieldNames,
+        isNewData,
+        isModel,
+        connectorMethod,
+        isNoDataSourceBind,
+        isExpression,
+        isApis,
+        columnSetsKey,
+    });
+    // 视图
+    const { viewFieldsData, viewFields, viewLoading } = useViewFields({
+        selectedView,
+        selectedViewIds,
+        dbName,
+        isModel,
+        authFields,
+        isViewTable,
+    });
+    let fields = isViewTable ? viewFields : authFields;
+    if (isExpression && Array.isArray(columnSets)) {
+        fields = columnSets === null || columnSets === void 0 ? void 0 : columnSets.map((i) => ({
+            ...i.schema,
+            name: i.key,
+            title: i.header,
+        }));
+    }
+    // 筛选字段
+    const filterFieldsData = getFilterFields(filterFields, fields);
+    const [filterConfig, setFilterConfig] = useState(() => {
+        return filterFieldsData.map((i) => (i === null || i === void 0 ? void 0 : i.filterConfig) || { name: i.name, label: i.title });
+    });
+    // 重置筛选器方法
+    const filterMethodsRef = useRef({});
+    // 可排序字段
+    const sortColumns = getSortColumns({ fields, columnSets });
+    // 表格 columns
+    const [resizeColumns, setColumns] = useState([]);
+    useEffect(() => {
+        setColumns([]);
+    }, [columnSets]);
+    const columns = useMemo(() => {
+        if (isMock || (isInIde() && isNoDataSourceBind)) {
+            return Mock.columns;
+        }
+        if (isNoDataSourceBind || (!isExpression && fieldsLoading)) {
+            return [];
+        }
+        let baseColumns = getTableColumns({
+            fields,
+            columnSets,
+            slots,
+            fixedFront,
+            fixedEnd,
+            isH5,
+            supportManyRelated,
+        });
+        // 操作列
+        if (enableCellCustomOption && !isH5) {
+            // 展示插槽操作列
+            baseColumns.push({
+                key: 'button',
+                header: customOptionTitle,
+                width: 150,
+                align: 'left',
+                fixed: 'right',
+                render: (record, rowKey, recordIndex, column, columnIndex) => (_jsx("div", { className: `${classPrefix}-pc-table-option-btn-wrap`, children: _jsx(TableOption, { slots: slots, record: record, rowKey: rowKey, recordIndex: recordIndex, column: column, columnIndex: columnIndex }) })),
+            });
+        }
+        // 选择列
+        if (columnSelectType === 'radio') {
+            baseColumns.unshift({
+                key: 'weda_radio',
+                header: '',
+                width: 48,
+                fixed: 'left',
+            });
+        }
+        else if (columnSelectType === 'select') {
+            // 插入选择项列，进行冻结
+            baseColumns.unshift({
+                key: 'weda_select',
+                header: '',
+                width: 48,
+                fixed: 'left',
+            });
+        }
+        baseColumns = baseColumns.map((i) => {
+            var _a;
+            const width = (_a = resizeColumns === null || resizeColumns === void 0 ? void 0 : resizeColumns.find((j) => i.key === j.key)) === null || _a === void 0 ? void 0 : _a.width;
+            return width ? { ...i, width } : i;
+        });
+        return baseColumns;
+    }, [
+        isMock,
+        isNoDataSourceBind,
+        isExpression,
+        fieldsLoading,
+        fields,
+        columnSets,
+        slots,
+        fixedFront,
+        fixedEnd,
+        isH5,
+        enableCellCustomOption,
+        customOptionTitle,
+        columnSelectType,
+        classPrefix,
+        supportManyRelated,
+        resizeColumns,
+    ]);
+    // 主键
+    const recordKey = getRecordKey({
+        dataSourceType,
+        dataSourceData,
+        key: _recordKey,
+    });
+    // 查询参数
+    const { query } = useQueryParams({
+        queryParams,
+        wList,
+        viewFieldsData,
+        connectorParams,
+        isModel,
+        isViewTable,
+        events,
+        columns,
+        authFields,
+        supportManyRelated,
+        selectFieldType,
+        selectFields,
+        isSupportMultipleSort,
+    });
+    // 查询数据
+    const { tableData, tableTotal, tableLoading, getNewList, isError, errorObj, emptyTable, } = useTableData({
+        dataSourceAPI,
+        dbName,
+        connectorMethod,
+        query,
+        events,
+        isModel,
+        isH5,
+        isNoDataSourceBind,
+        supportManyRelated,
+    });
+    const refreshTable = async () => {
+        // 清除选中的 key
+        setSelectedKeys([]);
+        setSelectedRecords([]);
+        if (queryParams.pageIndex === _defaultPageIndex) {
+            await getNewList({ forceClear: true });
+        }
+        else {
+            setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
+        }
+    };
+    // 1.绑定数据源时请求返回的联合加载状态；2.绑定表达式时，加载状态由外部loading属性控制
+    const getLoadingStatus = () => {
+        if (isExpression) {
+            return exprLoading;
+        }
+        if (isNoDataSourceBind) {
+            return false;
+        }
+        if (isModel) {
+            return tableLoading || fieldsLoading || (viewLoading && isViewTable);
+        }
+        return tableLoading || fieldsLoading;
+    };
+    const isTableLoading = getLoadingStatus();
+    // 表格数据
+    const mapTableData = () => {
+        if (isMock || (isInIde() && isNoDataSourceBind)) {
+            return Mock.records;
+        }
+        // 绑定表达式则直接返回表达式的值
+        if (isExpression) {
+            if (exprLoading && !isH5)
+                return [];
+            return Array.isArray(dataSourceData) ? dataSourceData : [];
+        }
+        // 加载过程中,pc端每次查询置空,h5端仅首页置空
+        // 避免编辑器内切换数据源时,column更改,table render还未更新造成渲染问题
+        if ((isTableLoading && !isH5) || isNoDataSourceBind) {
+            return [];
+        }
+        if (isTableLoading &&
+            isH5 &&
+            (queryParams === null || queryParams === void 0 ? void 0 : queryParams.pageIndex) === _defaultPageIndex) {
+            return [];
+        }
+        if (viewFieldsData === null || viewFieldsData === void 0 ? void 0 : viewFieldsData.selectedViewId) {
+            mapTableDataWithView(viewFieldsData, tableData);
+        }
+        return tableData;
+    };
+    const tableRecords = mapTableData();
+    // 总数
+    let total = isExpression ? tableRecords === null || tableRecords === void 0 ? void 0 : tableRecords.length : tableTotal;
+    if (enableTotal && isExpression && !isNaN(parseInt(`${_total}`))) {
+        total = parseInt(`${_total}`);
+    }
+    useEffect(() => {
+        setSelectedKeys([]);
+        setSelectedRecords([]);
+    }, [_recordKey]);
+    useEffect(() => {
+        var _a, _b;
+        if (isExpression &&
+            Array.isArray(dataSourceData) &&
+            !isObjectEqual((_a = dataRef === null || dataRef === void 0 ? void 0 : dataRef.current) === null || _a === void 0 ? void 0 : _a.dataSourceData, dataSourceData)) {
+            dataRef.current.dataSourceData = dataSourceData || [];
+        }
+        if (!isObjectEqual((_b = dataRef === null || dataRef === void 0 ? void 0 : dataRef.current) === null || _b === void 0 ? void 0 : _b.tableRecords, tableRecords)) {
+            dataRef.current.tableRecords = tableRecords || [];
+        }
+    }, [dataSourceData, tableRecords, isExpression]);
+    const beforeModalDestroy = () => {
+        // 重新加载数据
+        refreshTable();
+    };
+    // 事件属性
+    useSetWidgetApi(() => ({
+        deleteOne: async (params) => {
+            const selectedKeys = [];
+            const { id } = params;
+            if (id) {
+                selectedKeys.push(id);
+            }
+            const { isSupport, message } = checkSupport(dataSourceType, 'deleteOne');
+            if (!isSupport) {
+                throw new WdCompError(`${message}` || '', {
+                    code: 'WdTable.ActionNotSupport',
+                });
+            }
+            try {
+                await deleteRecord({
+                    selectedKeys,
+                    dataSourceAPI,
+                    beforeModalDestroy,
+                    supportManyRelated,
+                });
+            }
+            catch (error) {
+                throw new WdCompError(`${error === null || error === void 0 ? void 0 : error.message}` || '', {
+                    code: (error === null || error === void 0 ? void 0 : error.code) || 'WdTable.DeleteOneError',
+                    requestId: error === null || error === void 0 ? void 0 : error.requestId,
+                    original: error === null || error === void 0 ? void 0 : error.original,
+                });
+            }
+        },
+        // 删除选中数据
+        deleteSelected: async () => {
+            try {
+                const { isSupport, message } = checkSupport(dataSourceType, 'deleteSelected');
+                if (!isSupport) {
+                    const errorMsg = {
+                        code: 'WdTable.ActionNotSupport',
+                        message,
+                        requestId: '',
+                    };
+                    throw errorMsg;
+                }
+                await deleteRecord({
+                    selectedKeys,
+                    dataSourceAPI,
+                    beforeModalDestroy,
+                    supportManyRelated,
+                });
+            }
+            catch (error) {
+                throw new WdCompError(`${error === null || error === void 0 ? void 0 : error.message}` || '', {
+                    code: (error === null || error === void 0 ? void 0 : error.code) || 'WdTable.DeleteSelectedError',
+                    requestId: error === null || error === void 0 ? void 0 : error.requestId,
+                    original: error === null || error === void 0 ? void 0 : error.original,
+                });
+            }
+        },
+        // 导入
+        import: () => {
+            const { isSupport, message } = checkSupport(dataSourceType, 'import');
+            if (isSupport) {
+                importHandleByApi({
+                    isH5,
+                    setIsImportFileModalByApiVisible,
+                });
+            }
+            else {
+                throw new WdCompError(`${message}` || '', {
+                    code: 'WdTable.ActionNotSupport',
+                });
+            }
+        },
+        // 导出
+        export: () => {
+            const { isSupport, message } = checkSupport(dataSourceType, 'export');
+            if (isSupport) {
+                exportHandle({
+                    selectedKeys,
+                    records: tableRecords,
+                    enumOptions,
+                    datasourceTitle,
+                    columnSets,
+                    fields: fields,
+                });
+            }
+            else {
+                throw new WdCompError(`${message}` || '', {
+                    code: 'WdTable.ActionNotSupport',
+                });
+            }
+        },
+        // 后端导出
+        exportOptionalMode: () => {
+            const { isSupport, message } = checkSupport(dataSourceType, 'exportOptionalMode');
+            if (isSupport) {
+                exportHandleByApi({
+                    isH5,
+                    setIsExportFileModalByApiVisible,
+                });
+            }
+            else {
+                throw new WdCompError(`${message}` || '', {
+                    code: 'WdTable.ActionNotSupport',
+                });
+            }
+        },
+        refresh: async () => {
+            try {
+                await refreshTable();
+            }
+            catch (error) {
+                throw new WdCompError(`${error === null || error === void 0 ? void 0 : error.message}` || '', {
+                    code: (error === null || error === void 0 ? void 0 : error.code) || 'WdTable.RefreshError',
+                    requestId: error === null || error === void 0 ? void 0 : error.requestId,
+                    original: error === null || error === void 0 ? void 0 : error.original,
+                });
+            }
+        },
+        // 刷新表格(查看当前页数据)
+        refreshKeepPage: async () => {
+            try {
+                if (isH5) {
+                    // 移动端下拉分页不支持查看当前页，刷新即首页
+                    await refreshTable();
+                }
+                else {
+                    // 清除选中的 key
+                    setSelectedKeys([]);
+                    setSelectedRecords([]);
+                    await getNewList({ forceClear: true });
+                }
+            }
+            catch (error) {
+                throw new WdCompError(`${error === null || error === void 0 ? void 0 : error.message}` || '', {
+                    code: (error === null || error === void 0 ? void 0 : error.code) || 'WdTable.RefreshKeepPageError',
+                    requestId: error === null || error === void 0 ? void 0 : error.requestId,
+                    original: error === null || error === void 0 ? void 0 : error.original,
+                });
+            }
+        },
+        // 移动端打开弹窗
+        openOperationDialog: () => {
+            const { isSupport, message } = checkSupport(dataSourceType, 'openOperationDialog');
+            if (isSupport) {
+                isH5 && setIsMobileOptionVisible(true);
+            }
+            else {
+                throw new WdCompError(`${message}` || '', {
+                    code: 'WdTable.ActionNotSupport',
+                });
+            }
+        },
+        // 重置筛选器，仅数据模型有筛选器
+        resetFilter: () => {
+            const { isSupport, message } = checkSupport(dataSourceType, 'resetFilter');
+            if (isSupport) {
+                if (typeof filterMethodsRef.current.resetFilter === 'function') {
+                    filterMethodsRef.current.resetFilter();
+                }
+            }
+            else {
+                throw new WdCompError(`${message}` || '', {
+                    code: 'WdTable.ResetFilter',
+                });
+            }
+        },
+        // 当前页数据
+        records: isExpression && !enableTotal
+            ? getCurrentPageData(dataRef.current.tableRecords, query.pageNo, query.pageSize)
+            : dataRef.current.tableRecords,
+        // 当前总数
+        total: total,
+        pageNo: query.pageNo,
+        pageSize: query.pageSize,
+        selectedRecords,
+        dataSourceType,
+        error: errorObj,
+        bindMetadata,
+        columnSets,
+        defaultPageSize,
+        defaultPageIndex,
+        dataSourceData: dataRef.current.dataSourceData,
+        sort: supportManyRelated
+            ? query.orderBy
+            : [{ orderBy: query.orderBy, orderType: query.orderType }],
+        filter: supportManyRelated ? query.filter : query === null || query === void 0 ? void 0 : query.where,
+        dataSourceVersion: supportManyRelated ? 'v2' : 'v1',
+        filterConfig,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        columnSets,
+        datasourceTitle,
+        fields === null || fields === void 0 ? void 0 : fields.length,
+        isH5,
+        isModel,
+        selectedKeys,
+        dataRef.current.tableRecords,
+        total,
+        query.pageNo,
+        query.pageSize,
+        dataSourceType,
+        errorObj,
+        bindMetadata,
+        defaultPageSize,
+        defaultPageIndex,
+        dataRef.current.dataSourceData,
+        selectedRecords,
+        query === null || query === void 0 ? void 0 : query.orderBy,
+        query === null || query === void 0 ? void 0 : query.orderType,
+        query === null || query === void 0 ? void 0 : query.where,
+        query === null || query === void 0 ? void 0 : query.filter,
+        supportManyRelated,
+        filterConfig,
+    ], ref);
+    // 表格更改上下文数据
+    // 移动端和自定义APIs场景不支持导入功能，监听变化存到表格上下文中
+    useEffect(() => {
+        // 表格上下文
+        if (typeof (events === null || events === void 0 ? void 0 : events.onDataChange) === 'function') {
+            events.onDataChange({
+                data: tableRecords,
+                state: {
+                    total: total,
+                    pageNo: query.pageNo,
+                    pageSize: query.pageSize,
+                    selectedRecords,
+                    isModel,
+                    isH5,
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        isH5,
+        isModel,
+        selectedRecords,
+        total,
+        tableRecords === null || tableRecords === void 0 ? void 0 : tableRecords.length,
+        query.pageNo,
+        query.pageSize,
+    ]);
+    useEffect(() => {
+        if (isModel || isExpression) {
+            setQueryParams((queryParams) => ({
+                ...queryParams,
+                searchValues: (queryParams === null || queryParams === void 0 ? void 0 : queryParams.searchValues) || [],
+                pageIndex: defaultPageIndex,
+                pageSize: defaultPageSize,
+                orderBy: orderBy,
+                orderType: orderType,
+                defaultSort: _sort,
+                sort: [],
+            }));
+        }
+        else {
+            setQueryParams(() => ({
+                pageIndex: (connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo) || _defaultPageIndex,
+                pageSize: (connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize) || _defaultPageSize,
+                orderBy: connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderBy,
+                orderType: connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderType,
+                sort: [],
+            }));
+        }
+    }, [
+        defaultPageIndex,
+        defaultPageSize,
+        connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize,
+        connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo,
+        isModel,
+        orderBy,
+        orderType,
+        connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderBy,
+        connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.orderType,
+        isExpression,
+        _sort,
+    ]);
+    useEffect(() => {
+        if (isH5) {
+            setQueryParams((queryParams) => ({ ...queryParams, pageIndex: 1 }));
+        }
+        else {
+            setQueryParams((queryParams) => ({
+                ...queryParams,
+                pageSize: initPageSize,
+                pageIndex: initPageIndex,
+            }));
+        }
+        // 仅当切换小屏的时候重新请求
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isH5]);
+    const hasFilterButton = !!filterFieldsData.length && !isExpression;
+    // 行点击事件
+    const rowClick = (e, context) => {
+        if (events === null || events === void 0 ? void 0 : events.tabTableRow) {
+            events.tabTableRow({
+                record: context.record,
+                rowKey: context.rowKey,
+                recordIndex: context.recordIndex,
+            }, { originEvent: e });
+        }
+        setRowData({
+            record: context.record,
+            rowKey: context.rowKey,
+            recordIndex: context.recordIndex,
+        });
+    };
+    const cellClick = (e, context) => {
+        if (events === null || events === void 0 ? void 0 : events.cellClick) {
+            events.cellClick(context, { originEvent: e });
+        }
+    };
+    // 选择事件
+    const onSelectChange = (keys, context, empty = false) => {
+        if (empty) {
+            setSelectedKeys([]);
+            return;
+        }
+        setSelectedKeys([].concat(keys));
+        const selectValue = columnSelectType === 'radio' ? context === null || context === void 0 ? void 0 : context.record : context === null || context === void 0 ? void 0 : context.selectedRecords;
+        const data = [].concat(selectValue);
+        setSelectedRecords(data);
+        // 历史问题events?.rowsSelect方法出参存在问题，废弃
+        if (events === null || events === void 0 ? void 0 : events.rowsSelect) {
+            events.rowsSelect(selectValue);
+        }
+        if (events === null || events === void 0 ? void 0 : events.rowsSelected) {
+            events.rowsSelected({ data });
+        }
+    };
+    // 查询参数改变
+    const onQueryChange = (query) => {
+        setQueryParams((queryParams) => {
+            var _a, _b;
+            const queryParamsRes = { ...queryParams, ...query };
+            //  v2协议支持多字段排序，默认排序规则(_sort)始终存在，运行态排序规则(query.sort)优先级最底
+            //  数组下标越小优先级越高
+            if (isSupportMultipleSort && (query === null || query === void 0 ? void 0 : query.sort) && (_sort === null || _sort === void 0 ? void 0 : _sort.length)) {
+                queryParamsRes.sort =
+                    ((_b = (_a = _sort === null || _sort === void 0 ? void 0 : _sort.filter((i) => { var _a, _b; return i.by !== ((_b = (_a = query.sort) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.by); })) === null || _a === void 0 ? void 0 : _a.concat(query.sort)) === null || _b === void 0 ? void 0 : _b.filter((n) => n.by && n.order)) || [];
+            }
+            return queryParamsRes;
+        });
+    };
+    // 点击刷新按钮
+    const onRefreshBtnClick = () => {
+        refreshTable();
+        events === null || events === void 0 ? void 0 : events.onRefreshBtnClick();
+    };
+    // 筛选值变化
+    const onFilterChange = (searchValues = []) => {
+        if (isObjectEqual(queryParams.searchValues, searchValues)) {
+            getNewList();
+        }
+        else {
+            emptyTable();
+            setQueryParams((queryParams) => ({
+                ...queryParams,
+                searchValues,
+                pageIndex: 1,
+            }));
+        }
+        events === null || events === void 0 ? void 0 : events.onFilterChange({ searchValues });
+    };
+    const errorStatus = isError || fieldsError;
+    const errorMsg = isError ? errorObj : fieldsError;
+    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(EnumHoc, { fields: authFields, children: _jsxs("div", { className: classNames(wrapClassList, className), style: style, id: id, children: [hasFilterButton && (_jsx(FilterFieldsPanel, { ref: filterMethodsRef, openMobileFilter: openMobileFilter, setOpenMobileFilter: setOpenMobileFilter, filterFields: filterFieldsData, fetchData: onFilterChange, setFilterConfig: setFilterConfig })), _jsxs("div", { className: `${classPrefix}-table-container`, children: [!isH5 && !isNoDataSourceBind && (_jsxs("div", { className: `${classPrefix}-table-wrap-toolbar`, children: [enableGlobalButton && (_jsx("div", { className: `${classPrefix}-table-wrap-toolbar__col ${classPrefix}-table-wrap-toolbar__col-start`, children: _jsx(GlobalButton, { classPrefix: classPrefix, slots: slots === null || slots === void 0 ? void 0 : slots.globalButton }) })), (enableRefreshBtn || enableTableHeightSizeBtn) && (_jsx("div", { className: `${classPrefix}-table-wrap-toolbar__col ${classPrefix}-table-wrap-toolbar__col-end`, children: _jsx(ToolBar, { hasFilterButton: hasFilterButton, total: total, refreshTable: onRefreshBtnClick, setTableHightSize: setTableHightSize, currentSize: tableHightSize, setOpenMobileFilter: () => {
+                                                setOpenMobileFilter(true);
+                                            }, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination }) }))] })), isH5 &&
+                                (enablePagination ||
+                                    enableRefreshBtn ||
+                                    enableTableHeightSizeBtn ||
+                                    hasFilterButton) && (_jsx(ToolBar, { hasFilterButton: hasFilterButton, total: total, refreshTable: onRefreshBtnClick, setTableHightSize: setTableHightSize, currentSize: tableHightSize, setOpenMobileFilter: () => {
+                                    setOpenMobileFilter(true);
+                                }, enableRefreshBtn: enableRefreshBtn, enableTableHeightSizeBtn: enableTableHeightSizeBtn, enablePagination: enablePagination })), _jsx(Table, { events: events, emptyText: emptyText, isH5: isH5, isNoDataSourceBind: isNoDataSourceBind, className: tableClassList, recordKey: recordKey, currentSize: tableHightSize, defaultPageIndex: defaultPageIndex, defaultPageSize: defaultPageSize, sortColumns: sortColumns, enablePagination: !isH5 && enablePagination, columnSelectType: columnSelectType, columns: columns, setColumns: setColumns, records: tableRecords, sort: queryParams.sort, selectedKeys: selectedKeys, onSelectChange: onSelectChange, isLoading: isTableLoading, rowColor: rowColor, queryParams: queryParams, total: total, onQueryChange: onQueryChange, rowClick: rowClick, cellClick: cellClick, isError: errorStatus, errorObj: errorMsg, __innerSlot: __innerSlot }), isH5 && enableGlobalButton && !isNoDataSourceBind && (_jsx("div", { className: `${classPrefix}-h5-table-wrap-footer`, children: _jsx(GlobalButton, { classPrefix: classPrefix, slots: slots === null || slots === void 0 ? void 0 : slots.globalButton }) }))] }), _jsx(ImportFileModal, { columnSets: columnSets, dbName: dbName, datasourceTitle: datasourceTitle, fields: fields, setIsImportFileModalByApiVisible: setIsImportFileModalByApiVisible, isImportFileModalByApiVisible: isImportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible, refresh: refreshTable, supportManyRelated: supportManyRelated }), _jsx(ExportFileModal, { whereList: wList, fields: fields, columns: mapColumKey(columns), isExportFileModalByApiVisible: isExportFileModalByApiVisible, selectedKeys: selectedKeys, dbName: dbName, query: query, setIsExportFileModalByApiVisible: setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible, supportManyRelated: supportManyRelated }), _jsx(InOrOutRecordModal, { dbName: dbName, isInOrOutRecordModalVisible: isInOrOutRecordModalVisible, setIsImportFileModalByApiVisible: setIsImportFileModalByApiVisible, setIsExportFileModalByApiVisible: setIsExportFileModalByApiVisible, setIsInOrOutRecordModalVisible: setIsInOrOutRecordModalVisible }), isH5 && (_jsx(Modal, { overlayClassName: `${classPrefix}-h5-table-overlay`, className: `${classPrefix}-h5-table-option-modal-wrap`, disableCloseIcon: true, title: "\u64CD\u4F5C", visible: isMobileOptionVisible, outerRef: modalRef, events: {
+                            close: () => {
+                                setIsMobileOptionVisible(false);
+                            },
+                        }, content: '', customContent: _jsx("div", { className: `${classPrefix}-h5-table-option-btn-wrap`, children: enableCellCustomOption &&
+                                slotRender(slots[CELL_CUSTOM_OPTION], rowData) }), customButton: _jsx(WdButton, { variant: "text", text: "\u53D6\u6D88", events: {
+                                tap: () => {
+                                    setIsMobileOptionVisible(false);
+                                },
+                            } }) }))] }) }) }));
+});