@cloudbase/weda-ui 3.4.8 → 3.4.9-alpha.1024

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DatePicker, TimePicker, Input, Tooltip, Select, SelectMultiple, } from 'tea-component';
+import moment from 'moment';
+import { useEnumContext } from '../../../../utils/hooks/context';
+const { RangePicker } = DatePicker;
+import { SelectSearch } from './SelectSearch';
+export { SelectSearch };
+// 时间日期
+export const DatePickerField = ({ disabled = false, showTime = false, isRange, updateValue, value, }) => isRange ? (_jsx(Tooltip, { title: value && `${value[0]}~${value[1]}`, children: _jsx(RangePicker, { disabled: disabled, clearable: true, value: value ? [moment(value[0]), moment(value[1])] : null, showTime: showTime, onChange: (value) => {
+            var _a, _b;
+            updateValue({
+                value: value[0]
+                    ? [
+                        (_a = value[0]) === null || _a === void 0 ? void 0 : _a.format('YYYY-MM-DD HH:mm:ss'),
+                        (_b = value[1]) === null || _b === void 0 ? void 0 : _b.format('YYYY-MM-DD HH:mm:ss'),
+                    ]
+                    : null,
+            });
+        } }) })) : (_jsx(Tooltip, { title: value, children: _jsx(DatePicker, { disabled: disabled, clearable: true, value: value ? moment(value) : null, showTime: showTime, onChange: (value) => updateValue({ value: value === null || value === void 0 ? void 0 : value.format('YYYY-MM-DD HH:mm:ss') }) }) }));
+// 时间
+export const TimePickerField = ({ disabled = false, isRange, updateValue, value, }) => isRange ? (_jsx(TimePicker.RangePicker, { disabled: disabled, clearable: true, value: value
+        ? [moment(value[0], 'HH:mm:ss'), moment(value[1], 'HH:mm:ss')]
+        : [null, null], onChange: (value) => {
+        var _a, _b;
+        updateValue({
+            value: value[0]
+                ? [(_a = value[0]) === null || _a === void 0 ? void 0 : _a.format('HH:mm:ss'), (_b = value[1]) === null || _b === void 0 ? void 0 : _b.format('HH:mm:ss')]
+                : null,
+        });
+    } })) : (_jsx(TimePicker, { disabled: disabled, clearable: true, value: value ? moment(value, 'HH:mm:ss') : null, onChange: (value) => updateValue({ value: value === null || value === void 0 ? void 0 : value.format('HH:mm:ss') }) }));
+// 文本输入框
+export const InputField = ({ disabled = false, value, updateValue }) => (_jsx(Input, { disabled: disabled, size: "full", value: value, onChange: (value) => {
+        updateValue({ value });
+    } }));
+// 数字范围输入
+export const MultipleNumber = ({ disabled = false, value, updateValue }) => {
+    const val1 = value ? value[0] : '';
+    const val2 = value ? value[1] : '';
+    return (_jsxs("div", { className: "_wedamodal-fn-input-range", children: [_jsx(Input, { disabled: disabled, size: "s", placeholder: "\u8BF7\u8F93\u5165", value: val1, onChange: (value) => {
+                    if (isNaN(Number(value))) {
+                        return;
+                    }
+                    updateValue({ value: [value, val2] });
+                } }), _jsx("span", { className: "_wedamodal-fn-input-range__split", children: "~" }), _jsx(Input, { disabled: disabled, value: val2, onChange: (value) => {
+                    if (isNaN(Number(value))) {
+                        return;
+                    }
+                    updateValue({ value: [val1, value] });
+                }, size: "s", placeholder: "\u8BF7\u8F93\u5165" })] }));
+};
+// 数字输入框
+export const NumberField = ({ disabled = false, value, updateValue, isRange, }) => isRange ? (_jsx(MultipleNumber, { disabled: disabled, value: value, updateValue: updateValue })) : (_jsx(Input, { disabled: disabled, size: "full", value: value, onChange: (value) => {
+        if (isNaN(Number(value))) {
+            return;
+        }
+        updateValue({ value });
+    } }));
+// 多选下拉框
+export const SelectMultipleField = (props) => {
+    const { optionName, value, updateValue, options, disabled = false } = props;
+    const { enumOptions } = useEnumContext();
+    let option = (enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[optionName]) || [];
+    if (!optionName && options) {
+        option = options;
+    }
+    return (_jsx(SelectMultiple, { disabled: disabled, size: "full", searchable: true, staging: false, matchButtonWidth: true, value: value, appearance: "button", options: option, onChange: (value) => {
+            updateValue({ value });
+        } }));
+};
+// 下拉单选
+export const SelectField = ({ optionName, value, updateValue, disabled }) => {
+    const { enumOptions } = useEnumContext();
+    const option = (enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[optionName]) || [];
+    return (_jsx(Select, { disabled: disabled, size: "full", clearable: true, searchable: true, 
+        // @ts-ignore 不存在的属性
+        staging: false, matchButtonWidth: true, value: value, appearance: "button", options: option, onChange: (value) => {
+            updateValue({ value });
+        }, button: () => {
+            var _a, _b;
+            return value ? (_jsx(Tooltip, { title: (_a = option === null || option === void 0 ? void 0 : option.find((i) => i.value === value)) === null || _a === void 0 ? void 0 : _a.text, children: _jsx("span", { children: ((_b = option === null || option === void 0 ? void 0 : option.find((i) => i.value === value)) === null || _b === void 0 ? void 0 : _b.text) || value }) })) : (_jsx("span", { className: "wedatea2td-text-weak", children: "\u8BF7\u9009\u62E9" }));
+        } }));
+};

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Input, Select } from 'tea-component';
+import { DatePickerField, TimePickerField, InputField, NumberField, SelectMultipleField, SelectField, SelectSearch, } from './Fields';
+import { fieldCalculations } from './filterFieldsGenerate';
+import { InputAdornment } from './InputAdornment';
+import { usePlatform } from '../../../../utils/platform';
+import { useConfig } from '../../../../utils/config-context';
+// 计算方式下拉选框
+const CalculationSelect = ({ arg, cb, isDate = false }) => {
+    const { classPrefix } = useConfig();
+    const isH5 = usePlatform() === 'h5'; // 响应式判定
+    const [value, setValue] = useState(arg.value);
+    const calculation = (value) => {
+        setValue(value);
+        const fieldCalculation = { ...arg };
+        fieldCalculation.value = value;
+        const fieldValue = {
+            fieldCalculation,
+            isRange: value === 'scope',
+        };
+        if (value === 'scope' || arg.value === 'scope') {
+            fieldValue.value = null;
+        }
+        cb(fieldValue);
+    };
+    useEffect(() => {
+        setValue(arg.value);
+    }, [arg]);
+    const options = isDate
+        ? fieldCalculations[arg.type].filter((i) => i.value !== 'neq')
+        : fieldCalculations[arg.type];
+    return isH5 ? (_jsx("div", { className: `${classPrefix}-space`, children: options.map((i) => (_jsx("div", { className: `${classPrefix}-space-item`, children: _jsx("div", { className: `${classPrefix}-table-wrap-filter__tag ${i.value === value ? 'is-selected ' : ''}`, onClick: () => {
+                    calculation(i.value);
+                }, children: i.text }) }, i.value))) })) : (_jsx(Select, { size: "auto", options: options, value: value, onChange: (value) => calculation(value) }));
+};
+// 筛选项
+export const FilterFieldItem = ({ updateFilterData, ...filterFieldItemConfig }) => {
+    const [disabled, setDisabled] = useState(false);
+    const { filterType, isRange, label, options, fieldCalculation, value } = filterFieldItemConfig;
+    const updateFilterConfig = (value) => {
+        const lastFilterConfig = { ...filterFieldItemConfig, ...value };
+        updateFilterData(lastFilterConfig);
+    };
+    useEffect(() => {
+        if (['$empty', '$nempty'].includes(fieldCalculation.value)) {
+            setDisabled(true);
+        }
+        else {
+            setDisabled(false);
+        }
+    }, [fieldCalculation.value]);
+    const renderFieldItem = () => {
+        switch (filterType) {
+            case 'datetime':
+                return (_jsx(InputAdornment, { label: label, before: _jsx(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig, isDate: true }), children: _jsx(DatePickerField, { disabled: disabled, showTime: true, isRange: isRange, updateValue: updateFilterConfig, value: value }) }));
+            case 'date':
+                return (_jsx(InputAdornment, { label: label, before: _jsx(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig, isDate: true }), children: _jsx(DatePickerField, { disabled: disabled, value: value, isRange: isRange, updateValue: updateFilterConfig }) }));
+            case 'time':
+                return (_jsx(InputAdornment, { label: label, before: _jsx(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig, isDate: true }), children: _jsx(TimePickerField, { disabled: disabled, value: value, isRange: isRange, updateValue: updateFilterConfig }) }));
+            case 'string':
+                return (_jsx(InputAdornment, { label: label, before: _jsx(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }), children: _jsx(InputField, { updateValue: updateFilterConfig, value: value, disabled: disabled }) }));
+            case 'number':
+                return (_jsx(InputAdornment, { label: label, before: _jsx(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }), children: _jsx(NumberField, { updateValue: updateFilterConfig, value: value, isRange: isRange, disabled: disabled }) }));
+            case 'boolean':
+                return (_jsx(InputAdornment, { label: label, before: _jsx(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }), children: _jsx(SelectMultipleField, { options: options || [], updateValue: updateFilterConfig, value: value, disabled: disabled }) }));
+            case 'x-enumObj':
+                return (_jsx(SelectMultipleField
+                // @ts-ignore 不存在的属性
+                , { 
+                    // @ts-ignore 不存在的属性
+                    options: options || [], updateValue: updateFilterConfig, value: value, disabled: disabled }));
+            case 'x-enum':
+                if (filterFieldItemConfig.xMultiSelect) {
+                    return (_jsx(InputAdornment, { label: label, before: _jsx(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }), children: _jsx(SelectMultipleField, { optionName: filterFieldItemConfig.xOptionName, updateValue: updateFilterConfig, value: value, disabled: disabled }) }));
+                }
+                return (_jsx(InputAdornment, { label: label, before: _jsx(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }), children: _jsx(SelectField, { optionName: filterFieldItemConfig.xOptionName, updateValue: updateFilterConfig, value: value, disabled: disabled }) }));
+            case 'father-son':
+            case 'related':
+                return (_jsx(InputAdornment, { label: label, before: _jsx(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }), children: _jsx(SelectSearch, { fields: filterFieldItemConfig.fields, format: filterType, childDbName: filterFieldItemConfig.childDbName, value: value, updateValue: updateFilterConfig, dbName: filterFieldItemConfig.dbName, disabled: disabled }) }));
+            default:
+                return (_jsx(Input, { size: "full", disabled: true, defaultValue: '该类型暂不支持表单筛选器' }));
+        }
+    };
+    return renderFieldItem();
+};

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from 'tea-component';
+import { useConfig } from '../../../../utils/config-context';
+import { usePlatform } from '../../../../utils/platform';
+export const InputAdornment = ({ label, before, children }) => {
+    const { classPrefix } = useConfig();
+    const isH5 = usePlatform() === 'h5'; // 响应式判定
+    return isH5 ? (_jsxs("div", { children: [_jsx("div", { className: `${classPrefix}-table-wrap-filter__label`, children: label }), _jsx("div", { className: `${classPrefix}-table-wrap-filter__controls`, children: before }), _jsx("div", { className: `${classPrefix}-table-wrap-filter__form-wrap ${classPrefix}-table-wrap-filter-item__content`, children: children })] })) : (_jsxs("div", { className: `${classPrefix}-table-wrap-filter-item`, children: [_jsxs("div", { className: `${classPrefix}-table-wrap-filter-item__label`, children: [_jsx("label", { htmlFor: label, children: _jsx(Tooltip, { title: label, children: label }) }), _jsx("span", { className: `${classPrefix}-table-wrap-filter-item__label-extra`, children: before })] }), _jsx("div", { className: `${classPrefix}-table-wrap-filter-item__content`, children: children })] }));
+};

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Select, LoadingTip } from 'tea-component';
+import { useChooseList, getDataBaseInfo } from '../../hooks/useChooseList';
+import { DataSource } from '../../../../utils/datasource';
+// 搜索下拉
+export const SelectSearch = ({ value, updateValue, format, childDbName, dbName, fields, disabled = false, }) => {
+    // 每次请求数据个数
+    const defaultSize = 50;
+    const defaultPage = 1;
+    const dataSourceAPI = useMemo(() => new DataSource(dbName), [dbName]); // datasource 方法-模型
+    const dataBase = useMemo(() => getDataBaseInfo(fields, format, childDbName), [childDbName, fields, format]);
+    const primaryColumn = dataBase === null || dataBase === void 0 ? void 0 : dataBase.primaryColumn;
+    const [query, setQuery] = useState({
+        pageNo: defaultPage,
+        pageSize: defaultSize,
+        where: [],
+    });
+    const { result, total, isValidating, empty } = useChooseList({
+        dataSourceAPI,
+        childDbName,
+        queryParams: query,
+        primaryColumn: primaryColumn,
+    });
+    return (_jsx(Select, { disabled: disabled, size: "full", clearable: true, searchable: true, matchButtonWidth: true, appearance: "button", autoClearSearchValue: true, options: result, value: value, bottomTips: isValidating ? _jsx(LoadingTip, {}) : '', onChange: (value) => {
+            updateValue({ value });
+        }, onOpen: () => {
+            empty();
+            setQuery({ ...query, pageNo: defaultPage, where: [] });
+        }, onScrollBottom: () => {
+            if (!isValidating && result.length < total) {
+                setQuery((query) => ({
+                    ...query,
+                    pageNo: query.pageNo + defaultPage,
+                }));
+            }
+        }, onSearchValueChange: (value) => {
+            const where = (value === null || value === void 0 ? void 0 : value.length)
+                ? [{ key: primaryColumn, val: `${value}`, rel: 'search' }]
+                : [];
+            empty();
+            setQuery({ ...query, pageNo: defaultPage, where });
+        } }));
+};

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

@@ -0,0 +1,113 @@
+// 计算方式
+export const fieldCalculations = {
+    number: [
+        { text: '范围', value: 'scope' },
+        { text: '等于', value: 'eq' },
+        { text: '不等于', value: 'neq' },
+        { text: '大于', value: 'gt' },
+        { text: '小于', value: 'lt' },
+        { text: '大于等于', value: 'gte' },
+        { text: '小于等于', value: 'lte' },
+        { text: '为空', value: '$empty' },
+        { text: '不为空', value: '$nempty' },
+    ],
+    string: [
+        { text: '包含', value: 'search' },
+        { text: '不包含', value: 'exclude' },
+        { text: '等于', value: 'eq' },
+        { text: '不等于', value: 'neq' },
+        { text: '开头是', value: 'startWith' },
+        { text: '为空', value: '$empty' },
+        { text: '不为空', value: '$nempty' },
+    ],
+    radio: [
+        { text: '等于', value: 'eq' },
+        { text: '不等于', value: 'neq' },
+        { text: '为空', value: '$empty' },
+        { text: '不为空', value: '$nempty' },
+    ],
+    checkbox: [
+        { text: '等于任意一个', value: 'in' },
+        { text: '不等于任意一个', value: 'nin' },
+        { text: '为空', value: '$empty' },
+        { text: '不为空', value: '$nempty' },
+    ],
+};
+/**
+ * 生成筛选配置
+ * 1、过滤不支持搜索的字段
+ * 2、生成配置
+ * 3、枚举/数字需要特殊处理
+ * { filterType: 'datetime' | 'date' | 'time' | 'string' |'number' | 'x-enumObj' , isRange: boolean }
+ */
+export const filterFieldsGenerate = (fields) => {
+    var _a;
+    return (_a = fields === null || fields === void 0 ? void 0 : fields.filter((field) => {
+        // 不支持搜索的类型
+        if (!field)
+            return false;
+        if (((field === null || field === void 0 ? void 0 : field.type) === 'array' && (field === null || field === void 0 ? void 0 : field.format) === '') ||
+            ((field === null || field === void 0 ? void 0 : field.format) === 'father-son' && (field === null || field === void 0 ? void 0 : field.default) === '') ||
+            (field === null || field === void 0 ? void 0 : field.type) === 'object' ||
+            (field === null || field === void 0 ? void 0 : field.format) === 'x-file' ||
+            (field === null || field === void 0 ? void 0 : field.format) === 'x-image' ||
+            (field === null || field === void 0 ? void 0 : field.format) === 'x-rtf')
+            return false;
+        return true;
+    })) === null || _a === void 0 ? void 0 : _a.map((i) => {
+        var _a, _b;
+        // 生成计算方式
+        const fieldCalculation = ['string', 'number'].includes(i.type)
+            ? { type: i.type, value: fieldCalculations[i.type][0].value }
+            : {};
+        const filterFieldItemConfig = {
+            id: i['x-id'],
+            name: i.name,
+            value: '',
+            isRange: true,
+            filterType: i.type,
+            label: i.title,
+            fieldCalculation,
+            options: [],
+        };
+        if (i.type === 'number' &&
+            ['time', 'date', 'datetime'].includes(i.format)) {
+            filterFieldItemConfig.filterType = i.format;
+        }
+        if (i.type === 'boolean') {
+            filterFieldItemConfig.filterType = i.type;
+            filterFieldItemConfig.options = [
+                { value: true, text: '是' },
+                { value: false, text: '否' },
+                { value: null, text: '空' },
+            ];
+            filterFieldItemConfig.fieldCalculation.type = 'checkbox';
+            filterFieldItemConfig.fieldCalculation.value = 'in';
+        }
+        if ((_a = i['x-enumObj']) === null || _a === void 0 ? void 0 : _a.length) {
+            filterFieldItemConfig.filterType = 'x-enumObj';
+            filterFieldItemConfig.options = i['x-enumObj'].map((enumItem) => ({
+                value: enumItem === null || enumItem === void 0 ? void 0 : enumItem.value,
+                text: enumItem === null || enumItem === void 0 ? void 0 : enumItem.label,
+            }));
+            filterFieldItemConfig.options.push({ value: null, text: '空' });
+        }
+        if (i.format === 'x-enum') {
+            filterFieldItemConfig.fieldCalculation.value = 'eq';
+            filterFieldItemConfig.filterType = i.format;
+            filterFieldItemConfig.xMultiSelect = i['x-multi-select'];
+            filterFieldItemConfig.xOptionName = i['x-option-name'];
+            filterFieldItemConfig.fieldCalculation.type =
+                filterFieldItemConfig.xMultiSelect ? 'checkbox' : 'radio';
+            filterFieldItemConfig.fieldCalculation.value =
+                filterFieldItemConfig.xMultiSelect ? 'in' : 'eq';
+        }
+        if (i.format === 'father-son' || i.format === 'related') {
+            filterFieldItemConfig.filterType = i.format;
+            filterFieldItemConfig.childDbName = (_b = i['x-parent']) === null || _b === void 0 ? void 0 : _b.parentDataSourceName;
+            filterFieldItemConfig.fieldCalculation.type = 'radio';
+            filterFieldItemConfig.fieldCalculation.value = 'eq';
+        }
+        return filterFieldItemConfig;
+    });
+};

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

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } 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';
+// 筛选表单
+export const FilterFieldsPanel = ({ filterFields, fetchData, openMobileFilter, setOpenMobileFilter, }) => {
+    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);
+    };
+    useEffect(() => {
+        const result = filterFieldsGenerate(filterFields);
+        // 筛选字段改变，重新初始化筛选面板
+        if (!isObjectEqual(result, initFilterData)) {
+            const initFilterData = JSON.parse(JSON.stringify(result));
+            setInitFilterData(initFilterData);
+            setFilterData(initFilterData);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterFields]);
+    const searchHandle = () => {
+        let searchValues = [];
+        const filterValues = filterData.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);
+        });
+        // 为空不为空筛选条件
+        filterData.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 num = 2;
+    const maxlength = 3;
+    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: () => {
+                                                    setFilterData(initFilterData);
+                                                    fetchData();
+                                                    setOpenMobileFilter(false);
+                                                },
+                                            } }) }), _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("div", { className: `${classPrefix}-table-wrap-filter`, 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: () => {
+                                                    setFilterData(initFilterData);
+                                                    fetchData();
+                                                },
+                                            } }) }), _jsx("div", { className: `${classPrefix}-space-item`, children: _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.js

@@ -0,0 +1,44 @@
+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, }) => {
+    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;
+        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 (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: isImportFileModalByApiVisible && (_jsx(ImportFileModalByApiFromTable, { fields: supportFields, visible: isImportFileModalByApiVisible, datasourceTitle: datasourceTitle, dbName: dbName, onCancel: () => {
+                setIsImportFileModalByApiVisible(false);
+            }, handleInOrOutRecordModealVisible: setIsInOrOutRecordModalVisible, refresh: refresh })) }));
+};
+/**
+ * 后端表格导入方法
+ */
+export const importHandleByApi = ({ isModel, isH5, setIsImportFileModalByApiVisible, }) => {
+    if (!isModel) {
+        return alertErrorMessage({
+            message: '当前表格组件绑定了APIs，暂不支持进行数据导入',
+        });
+    }
+    if (isH5) {
+        return alertErrorMessage({
+            message: '移动端暂不支持进行数据导入',
+        });
+    }
+    setIsImportFileModalByApiVisible(true);
+};

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/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.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 })] }) }));
+};