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

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

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef } from 'react';
+import { Row, Col, ConfigProvider, Drawer } from 'tea-component';
+import { formatDateToNumber, dateCalculation } from '../../../../utils/date';
+import isObjectEqual from '../../../../utils/isObjectEqual';
+import { useConfig } from '../../../../utils/config-context';
+import { FilterFieldItem } from './FilterFieldItem';
+import { filterFieldsGenerate } from './filterFieldsGenerate';
+import { WdButton } from '../../../wd-button';
+import { usePlatform } from '../../../../utils/platform';
+import { useSetWidgetApi } from '../../../../utils/widget-api/use-set-widget-api';
+const getFilterConfig = (data) => data.map(({ name, label, value, fieldCalculationOption = [], fieldCalculation, }) => ({
+    name,
+    label,
+    value,
+    filterType: fieldCalculation === null || fieldCalculation === void 0 ? void 0 : fieldCalculation.value,
+    filterTypeOption: fieldCalculationOption === null || fieldCalculationOption === void 0 ? void 0 : fieldCalculationOption.map((i) => i === null || i === void 0 ? void 0 : i.value),
+}));
+// 筛选表单
+export const FilterFieldsPanel = forwardRef(function Comp(props, ref) {
+    const { filterFields, fetchData, openMobileFilter, setOpenMobileFilter, setFilterConfig, } = props;
+    const num = 2;
+    const maxlength = 3;
+    const { classPrefix } = useConfig();
+    const isH5 = usePlatform() === 'h5'; // 响应式判定
+    const [collapse, setCollapse] = useState(true);
+    const [initFilterData, setInitFilterData] = useState([]);
+    const [filterData, setFilterData] = useState([]);
+    const updateFilterData = (filterFieldItemConfig) => {
+        const newData = filterData.map((i) => i.id === filterFieldItemConfig.id ? filterFieldItemConfig : i);
+        setFilterData(newData);
+        setFilterConfig(getFilterConfig(newData));
+    };
+    useEffect(() => {
+        var _a;
+        const result = filterFieldsGenerate(filterFields);
+        // 筛选字段改变，重新初始化筛选面板
+        if (!isObjectEqual(result, initFilterData)) {
+            const initFilterData = JSON.parse(JSON.stringify(result));
+            setInitFilterData(initFilterData);
+            setFilterData(initFilterData);
+            setFilterConfig(getFilterConfig(initFilterData));
+            // 如果配置有值则执行查询
+            if (initFilterData.some((i) => i.value)) {
+                searchHandle(initFilterData);
+            }
+            // 如果折叠的查询条件中有值，则展开面板
+            if ((_a = initFilterData === null || initFilterData === void 0 ? void 0 : initFilterData.filter((i, index) => index >= maxlength)) === null || _a === void 0 ? void 0 : _a.some((j) => j.value)) {
+                setCollapse(false);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterFields]);
+    const searchHandle = (searchData = filterData) => {
+        let searchValues = [];
+        const filterValues = searchData.filter((i) => {
+            if (Array.isArray(i.value) &&
+                i.filterType === 'number' &&
+                i.fieldCalculation.value === 'scope') {
+                // 若筛选字段为number类型，且为范围选择时，只要有一个值则返回
+                return i.value[0] || i.value[1];
+            }
+            return !!(i.value && i.value.length);
+        });
+        // 为空不为空筛选条件
+        searchData.forEach((i) => {
+            var _a, _b;
+            if (['$empty', '$nempty'].includes((_a = i === null || i === void 0 ? void 0 : i.fieldCalculation) === null || _a === void 0 ? void 0 : _a.value)) {
+                const $and = searchValues.find((i) => i.$and);
+                if ($and) {
+                    searchValues = searchValues.map((n) => {
+                        var _a;
+                        if (n.$and) {
+                            return {
+                                $and: [
+                                    ...n.$and,
+                                    { [i.name]: { [(_a = i === null || i === void 0 ? void 0 : i.fieldCalculation) === null || _a === void 0 ? void 0 : _a.value]: '1' } },
+                                ],
+                            };
+                        }
+                        return n;
+                    });
+                }
+                else {
+                    searchValues.push({
+                        $and: [{ [i.name]: { [(_b = i === null || i === void 0 ? void 0 : i.fieldCalculation) === null || _b === void 0 ? void 0 : _b.value]: '1' } }],
+                    });
+                }
+            }
+        });
+        // 值筛选条件
+        filterValues.forEach((i) => {
+            switch (i.fieldCalculation.value) {
+                case 'scope':
+                    if (i.filterType === 'number') {
+                        if (i.value[0]) {
+                            searchValues.push({
+                                key: i.name,
+                                val: Number(i.value[0]),
+                                rel: 'gte',
+                            });
+                        }
+                        if (i.value[1]) {
+                            searchValues.push({
+                                key: i.name,
+                                val: Number(i.value[1]),
+                                rel: 'lte',
+                            });
+                        }
+                    }
+                    else {
+                        searchValues.push({
+                            key: i.name,
+                            val: formatDateToNumber(i.filterType, i.value[0]),
+                            rel: 'gte',
+                        });
+                        searchValues.push({
+                            key: i.name,
+                            // @ts-ignore 兼容字符串和数字
+                            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                            val: formatDateToNumber(i.filterType, i.value[1]) + 999,
+                            rel: 'lte',
+                        });
+                    }
+                    break;
+                case 'exclude':
+                    searchValues.push({
+                        key: i.name,
+                        val: `^((?!${i.value}).)*$`,
+                        rel: 'regex',
+                    });
+                    break;
+                case 'startWith':
+                    searchValues.push({ key: i.name, val: `^${i.value}`, rel: 'regex' });
+                    break;
+                default: {
+                    const searchItem = {
+                        key: i.name,
+                        val: i.value,
+                        rel: i.fieldCalculation.value,
+                    };
+                    if (i.filterType === 'number') {
+                        searchItem.val = Number(i.value);
+                        searchValues.push(searchItem);
+                    }
+                    else if (['date', 'datetime', 'time'].includes(i.filterType)) {
+                        searchItem.val = formatDateToNumber(i.filterType, i.value);
+                        dateCalculation(searchItem, i.filterType).forEach((i) => {
+                            searchValues.push(i);
+                        });
+                    }
+                    else {
+                        searchValues.push(searchItem);
+                    }
+                }
+            }
+        });
+        fetchData(searchValues);
+    };
+    const onFormSubmit = (e) => {
+        e.preventDefault();
+        searchHandle();
+    };
+    const resetFilter = () => {
+        const result = initFilterData.map((i) => ({ ...i, value: '' }));
+        setFilterData(result);
+        setFilterConfig(getFilterConfig(result));
+        fetchData();
+        if (isH5) {
+            setOpenMobileFilter(false);
+        }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useSetWidgetApi(() => ({ resetFilter }), [initFilterData], ref);
+    return (_jsxs(ConfigProvider, { classPrefix: "wedatea2td", children: [_jsx(Drawer, { className: `${classPrefix}-table-mobile-filter-drawer ${classPrefix}-table-wrap-filter ${classPrefix}-h5-table-wrap-filter`, title: "\u7B5B\u9009\u5668", visible: isH5 && openMobileFilter, onClose: () => {
+                    setOpenMobileFilter(false);
+                }, children: _jsxs("div", { children: [_jsx("div", { className: `${classPrefix}-table-wrap-filter__body`, children: filterData === null || filterData === void 0 ? void 0 : filterData.map((i) => (_jsx(FilterFieldItem, { ...i, updateFilterData: updateFilterData, fields: filterFields }, i.id))) }), _jsx("div", { className: `${classPrefix}-table-wrap-filter__footer`, children: _jsxs("div", { className: `${classPrefix}-table-wrap-filter__btn`, children: [_jsx("div", { className: `${classPrefix}-table-wrap-filter__btn-item`, children: _jsx(WdButton, { theme: "primary", variant: "outline", size: "lg", text: "\u91CD\u7F6E", events: {
+                                                tap: resetFilter,
+                                            } }) }), _jsx("div", { className: `${classPrefix}-table-wrap-filter__btn-item`, children: _jsx(WdButton, { theme: "primary", size: "lg", text: "\u786E\u5B9A", events: {
+                                                tap: () => {
+                                                    searchHandle();
+                                                    setOpenMobileFilter(false);
+                                                },
+                                            } }) })] }) })] }) }), !isH5 && !!filterData.length && (_jsx("form", { className: `${classPrefix}-table-wrap-filter`, onSubmit: onFormSubmit, children: _jsxs(Row, { gap: 20, verticalAlign: 'bottom', style: { justifyContent: 'space-between' }, children: [_jsx(_Fragment, { children: filterData === null || filterData === void 0 ? void 0 : filterData.map((i, index) => (_jsx(Col, { span: 6, style: {
+                                    display: `${index > num && collapse ? 'none' : 'block'}`,
+                                }, children: _jsx(FilterFieldItem, { ...i, updateFilterData: updateFilterData, fields: filterFields }) }, i.id))) }), _jsx(Col, { span: 24, style: { flex: '1', textAlign: 'right' }, children: _jsxs("div", { className: `${classPrefix}-space`, children: [_jsx("div", { className: `${classPrefix}-space-item`, children: _jsx(WdButton, { size: "md", theme: "secondary", text: "\u91CD\u7F6E", events: {
+                                                tap: resetFilter,
+                                            } }) }), _jsxs("div", { className: `${classPrefix}-space-item`, children: [_jsx("input", { type: "submit", style: { display: 'none' } }), _jsx(WdButton, { size: "md", theme: "primary", text: "\u67E5\u8BE2", events: {
+                                                    tap: () => {
+                                                        searchHandle();
+                                                    },
+                                                } })] }), filterData.length > maxlength && (_jsx("div", { className: `${classPrefix}-space-item`, children: _jsx(WdButton, { icon: collapse ? 'td:chevron-down' : 'td:chevron-up', iconType: "icon-only", theme: "secondary", variant: "text", size: "md", events: {
+                                                tap: () => {
+                                                    setCollapse(!collapse);
+                                                },
+                                            } }) }))] }) }, "search-button")] }) }))] }));
+});

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * 后端导入弹窗
+ */
+export declare const ImportFileModal: ({ fields, isImportFileModalByApiVisible, datasourceTitle, dbName, setIsImportFileModalByApiVisible, setIsInOrOutRecordModalVisible, refresh, supportManyRelated, columnSets, }: {
+    fields: any;
+    isImportFileModalByApiVisible: any;
+    datasourceTitle: any;
+    dbName: any;
+    setIsImportFileModalByApiVisible: any;
+    setIsInOrOutRecordModalVisible: any;
+    refresh: any;
+    supportManyRelated: any;
+    columnSets: any;
+}) => JSX.Element;
+/**
+ * 后端表格导入方法
+ */
+export declare const importHandleByApi: ({ isH5, setIsImportFileModalByApiVisible, }: {
+    isH5: any;
+    setIsImportFileModalByApiVisible: any;
+}) => void;

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ImportFileModalByApi as ImportFileModalByApiFromTable } from '../../../table/ImportFileModalByApi';
+import { alertErrorMessage } from '../../../../utils/platform';
+import { isObjHasProp } from '../../../../utils/tool';
+import { ConfigProvider } from 'tea-component';
+/**
+ * 后端导入弹窗
+ */
+export const ImportFileModal = ({ fields, isImportFileModalByApiVisible, datasourceTitle, dbName, setIsImportFileModalByApiVisible, setIsInOrOutRecordModalVisible, refresh, supportManyRelated, columnSets, }) => {
+    const keys = React.useMemo(() => {
+        if (!Array.isArray(columnSets))
+            return [];
+        return columnSets
+            .filter((item) => isObjHasProp(item, 'key'))
+            .map((item) => item.key);
+    }, [columnSets]);
+    let supportFields = 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;
+    });
+    supportFields = supportFields.sort((a, b) => {
+        const aIndex = keys.indexOf(a === null || a === void 0 ? void 0 : a.name);
+        const bIndex = keys.indexOf(b === null || b === void 0 ? void 0 : b.name);
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        if (aIndex > -1 && bIndex > -1) {
+            return aIndex - bIndex;
+        }
+        return (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,227 @@
+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, selectFieldType, selectFields, }, 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 columnSetsKey = columnSets === null || columnSets === void 0 ? void 0 : columnSets.map((i) => i.key);
+    // 过滤权限字段
+    const { authFields, fieldsLoading } = useAuthFields({
+        dbName,
+        dbFieldNames,
+        isNewData,
+        isModel,
+        connectorMethod,
+        isNoDataSourceBind,
+        columnSetsKey,
+    });
+    const fields = authFields;
+    // 查询参数
+    const { query } = useQueryParams({
+        queryParams,
+        wList,
+        viewFieldsData: {},
+        connectorParams: {},
+        isModel,
+        isViewTable: false,
+        events,
+        columns: undefined,
+        authFields,
+        supportManyRelated: true,
+        selectFieldType,
+        selectFields,
+    });
+    // 查询数据
+    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,
+            showRelationWithTag: false,
+        });
+        return baseColumns === null || baseColumns === void 0 ? void 0 : baseColumns.map((i) => ({ ...i, isSort: true }));
+    }, [
+        isNoDataSourceBind,
+        fieldsLoading,
+        fields,
+        columnSets,
+        fixedFront,
+        fixedEnd,
+        isH5,
+    ]);
+    // 可排序字段
+    const sortColumns = getSortColumns({ fields, columnSets: columns });
+    // 事件属性
+    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: () => { }, cellClick: () => { }, 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,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TagSearchBox, useClassNames, ConfigProvider } from 'tea-component';
+import { alertErrorMessage } from '../../../../utils/platform';
+import { getSearchAttributes, filterCustomFields } from '../FieldRender';
+import { WdButton } from '../../../wd-button';
+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(WdButton, { className: Margin.Left['2n'], icon: "refresh", text: "\u5237\u65B0", events: { tap: refresh } })] }) }));
+};