@cloudbase/weda-ui 3.4.2 → 3.4.4

package/dist/web/components/table/FilterFields.js

@@ -0,0 +1,518 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { DatePicker, TimePicker, Input, Form, Tooltip, Select, SelectMultiple, InputAdornment, Button, Row, Col, useClassNames, LoadingTip, } from 'tea-component';
+import { formatDateToNumber, dateCalculation } from '../../utils/date';
+import isObjectEqual from '../../utils/isObjectEqual';
+import moment from 'moment';
+import { useEnumContext } from '../../utils/hooks/context';
+const { RangePicker } = DatePicker;
+// 时间日期
+const DatePickerField = ({ showTime = false, isRange, updateValue, value }) => isRange ? (React.createElement(Tooltip, { title: value && `${value[0]}~${value[1]}` },
+    React.createElement(RangePicker, { 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,
+            });
+        } }))) : (React.createElement(Tooltip, { title: value },
+    React.createElement(DatePicker, { 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') }) })));
+// 时间
+const TimePickerField = ({ isRange, updateValue, value }) => isRange ? (React.createElement(TimePicker.RangePicker, { 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,
+        });
+    } })) : (React.createElement(TimePicker, { 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') }) }));
+// 文本输入框
+const InputField = ({ value, updateValue }) => (React.createElement(Input, { value: value, onChange: (value) => {
+        updateValue({ value });
+    } }));
+// 数字范围输入
+const MultipleNumber = ({ value, updateValue }) => {
+    const val1 = value ? value[0] : '';
+    const val2 = value ? value[1] : '';
+    return (React.createElement("div", { className: "_wedamodal-fn-input-range" },
+        React.createElement(Input, { size: "s", placeholder: "\u8BF7\u8F93\u5165", value: val1, onChange: (value) => {
+                if (isNaN(Number(value))) {
+                    return;
+                }
+                updateValue({ value: [value, val2] });
+            } }),
+        React.createElement("span", { className: "_wedamodal-fn-input-range__split" }, "~"),
+        React.createElement(Input, { value: val2, onChange: (value) => {
+                if (isNaN(Number(value))) {
+                    return;
+                }
+                updateValue({ value: [val1, value] });
+            }, size: "s", placeholder: "\u8BF7\u8F93\u5165" })));
+};
+// 数字输入框
+const NumberField = ({ value, updateValue, isRange }) => isRange ? (React.createElement(MultipleNumber, { value: value, updateValue: updateValue })) : (React.createElement(Input, { value: value, onChange: (value) => {
+        if (isNaN(Number(value))) {
+            return;
+        }
+        updateValue({ value });
+    } }));
+// 多选下拉框
+const SelectMultipleField = (props) => {
+    const { optionName, value, updateValue, options } = props;
+    const { enumOptions } = useEnumContext();
+    let option = (enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[optionName]) || [];
+    if (!optionName && options) {
+        option = options;
+    }
+    return (React.createElement(SelectMultiple, { searchable: true, staging: false, matchButtonWidth: true, value: value, appearance: "button", options: option, onChange: (value) => {
+            updateValue({ value });
+        } }));
+};
+// 下拉单选
+const SelectField = ({ optionName, value, updateValue }) => {
+    const { enumOptions } = useEnumContext();
+    const option = (enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[optionName]) || [];
+    return (React.createElement(Select, { 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 ? (React.createElement(Tooltip, { title: (_a = option === null || option === void 0 ? void 0 : option.find((i) => i.value === value)) === null || _a === void 0 ? void 0 : _a.text },
+                React.createElement("span", null, ((_b = option === null || option === void 0 ? void 0 : option.find((i) => i.value === value)) === null || _b === void 0 ? void 0 : _b.text) || value))) : (React.createElement("span", { className: "wedatea2td-text-weak" }, "\u8BF7\u9009\u62E9"));
+        } }));
+};
+// 搜索下拉
+const SelectSearch = ({ getChooseList, value, updateValue, format, childDbName, }) => {
+    // 每次请求数据个数
+    const size = 200;
+    const [loading, setLoading] = useState(true);
+    const [searchLoading, setSearchLoading] = useState(false);
+    const [options, setOptions] = useState([]);
+    const [page, setPage] = useState(1);
+    const [searchOptions, setSearchOptions] = useState([]);
+    const [searchPage, setSearchPage] = useState(1);
+    const [searchValue, setSearchValue] = useState('');
+    const isSearch = useMemo(() => searchValue !== '', [searchValue]);
+    // 初始化请求
+    const getList = () => getChooseList({ pageNo: page, pageSize: size, format, childDbName });
+    // 搜索请求
+    const getWhereList = (value) => getChooseList({
+        pageNo: searchPage,
+        pageSize: size,
+        where: [{ key: '', val: `${value}`, rel: 'search' }],
+        format,
+        childDbName,
+    });
+    useEffect(() => {
+        getList().then((result) => {
+            const { data } = result;
+            if (!data || data.length === 0) {
+                // 为空
+                setOptions([]);
+                setLoading(false);
+            }
+            else if (result.size < size) {
+                // 无翻页
+                setOptions(data);
+                setLoading(false);
+            }
+            else {
+                // 有翻页
+                setOptions(data);
+                setLoading(true);
+            }
+        });
+    }, []);
+    useEffect(() => {
+        if (page > 1 && loading) {
+            getList().then((result) => {
+                const { data } = result;
+                if (!data || data.length === 0) {
+                    setLoading(false);
+                }
+                else {
+                    setOptions((options) => [...options, ...data]);
+                }
+            });
+        }
+    }, [page]);
+    useEffect(() => {
+        if (searchPage > 1 && searchLoading) {
+            getWhereList(searchValue).then((result) => {
+                const { data } = result;
+                if (!data || data.length === 0) {
+                    setSearchLoading(false);
+                }
+                else {
+                    setSearchOptions((options) => [...options, ...data]);
+                }
+            });
+        }
+    }, [searchPage]);
+    const searchState = (value) => {
+        setSearchPage(1);
+        setSearchValue(value);
+        setSearchLoading(true);
+        if (value.length === 0) {
+            // 为空
+            setSearchOptions([]);
+            setSearchLoading(false);
+        }
+        else {
+            // 不为空
+            getWhereList(value).then((result) => {
+                const { data } = result;
+                if (!data || data.length === 0) {
+                    // 没搜到
+                    setSearchOptions([]);
+                    setSearchLoading(false);
+                }
+                else if (result.size < size) {
+                    // 无翻页
+                    setSearchOptions(data);
+                    setSearchLoading(false);
+                }
+                else {
+                    // 有翻页
+                    setSearchOptions(data);
+                    setSearchLoading(true);
+                }
+            });
+        }
+    };
+    return (React.createElement(Select, { clearable: true, searchable: true, matchButtonWidth: true, appearance: "button", autoClearSearchValue: true, options: (isSearch ? searchOptions : options) || [], value: value, bottomTips: (isSearch ? searchLoading : loading) ? React.createElement(LoadingTip, null) : '', onChange: (value) => {
+            updateValue({ value });
+        }, onOpen: () => {
+            setSearchLoading(false);
+            setSearchOptions([]);
+            setSearchPage(1);
+            setSearchValue('');
+        }, onScrollBottom: () => {
+            if (isSearch) {
+                setSearchPage((page) => page + 1);
+            }
+            else {
+                setPage((page) => page + 1);
+            }
+        }, onSearch: (value, context) => {
+            const tValue = value.trim();
+            if (context.event.type === 'click') {
+                if (tValue !== '') {
+                    // 手动点击搜索
+                    searchState(tValue);
+                }
+                else {
+                    // 清空
+                    setSearchValue('');
+                }
+            }
+            else if (tValue !== '') {
+                // 动态输入搜索
+                searchState(tValue);
+            }
+            else {
+                // 逐个删除
+                setSearchValue('');
+            }
+        } }));
+};
+// 计算方式
+const fieldCalculations = {
+    number: [
+        { text: '范围', value: 'scope' },
+        { text: '等于', value: 'eq' },
+        { text: '不等于', value: 'neq' },
+        { text: '大于', value: 'gt' },
+        { text: '小于', value: 'lt' },
+        { text: '大于等于', value: 'gte' },
+        { text: '小于等于', value: 'lte' },
+    ],
+    string: [
+        { text: '包含', value: 'search' },
+        { text: '不包含', value: 'exclude' },
+        { text: '等于', value: 'eq' },
+        { text: '不等于', value: 'neq' },
+        { text: '开头是', value: 'startWith' },
+    ],
+    radio: [
+        { text: '等于', value: 'eq' },
+        { text: '不等于', value: 'neq' },
+    ],
+    checkbox: [
+        { text: '包含其一', value: 'in' },
+        { text: '不包含', value: 'nin' },
+    ],
+};
+// 计算方式下拉选框
+const CalculationSelect = ({ arg, cb, isDate = false }) => {
+    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 (React.createElement(Select, { appearance: "button", options: options, value: value, onChange: (value) => calculation(value) }));
+};
+// 筛选项
+const FilterFieldItem = ({ updateFilterData, getChooseList, ...filterFieldItemConfig }) => {
+    const { filterType, isRange, label, options, fieldCalculation, value } = filterFieldItemConfig;
+    const updateFilterConfig = (value) => {
+        const lastFilterConfig = { ...filterFieldItemConfig, ...value };
+        updateFilterData(lastFilterConfig);
+    };
+    const renderFieldItem = () => {
+        switch (filterType) {
+            case 'datetime':
+                return (React.createElement(InputAdornment, { before: React.createElement(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig, isDate: true }) },
+                    React.createElement(DatePickerField, { showTime: true, isRange: isRange, updateValue: updateFilterConfig, value: value })));
+            case 'date':
+                return (React.createElement(InputAdornment, { before: React.createElement(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig, isDate: true }) },
+                    React.createElement(DatePickerField, { value: value, isRange: isRange, updateValue: updateFilterConfig })));
+            case 'time':
+                return (React.createElement(InputAdornment, { before: React.createElement(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig, isDate: true }) },
+                    React.createElement(TimePickerField, { value: value, isRange: isRange, updateValue: updateFilterConfig })));
+            case 'string':
+                return (React.createElement(InputAdornment, { before: React.createElement(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }) },
+                    React.createElement(InputField, { updateValue: updateFilterConfig, value: value })));
+            case 'number':
+                return (React.createElement(InputAdornment, { before: React.createElement(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }) },
+                    React.createElement(NumberField, { updateValue: updateFilterConfig, value: value, isRange: isRange })));
+            case 'boolean':
+                return (React.createElement(InputAdornment, { before: React.createElement(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }) },
+                    React.createElement(SelectMultipleField, { options: options || [], updateValue: updateFilterConfig, value: value })));
+            case 'x-enumObj':
+                return (React.createElement(SelectMultipleField
+                // @ts-ignore 不存在的属性
+                , { 
+                    // @ts-ignore 不存在的属性
+                    options: options || [], updateValue: updateFilterConfig, value: value }));
+            case 'x-enum':
+                if (filterFieldItemConfig.xMultiSelect) {
+                    return (React.createElement(InputAdornment, { before: React.createElement(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }) },
+                        React.createElement(SelectMultipleField, { optionName: filterFieldItemConfig.xOptionName, updateValue: updateFilterConfig, value: value })));
+                }
+                return (React.createElement(InputAdornment, { before: React.createElement(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }) },
+                    React.createElement(SelectField, { optionName: filterFieldItemConfig.xOptionName, updateValue: updateFilterConfig, value: value })));
+            case 'father-son':
+            case 'related':
+                return (React.createElement(InputAdornment, { before: React.createElement(CalculationSelect, { arg: fieldCalculation, cb: updateFilterConfig }) },
+                    React.createElement(SelectSearch, { getChooseList: getChooseList, format: filterType, childDbName: filterFieldItemConfig.childDbName, value: value, updateValue: updateFilterConfig })));
+            default:
+                return React.createElement(Input, { disabled: true, defaultValue: '该类型暂不支持表单筛选器' });
+        }
+    };
+    return (React.createElement(Form.Item, { label: React.createElement(Tooltip, { title: label }, label) }, renderFieldItem()));
+};
+/**
+ * 生成筛选配置
+ * 1、过滤不支持搜索的字段
+ * 2、生成配置
+ * 3、枚举/数字需要特殊处理
+ * { filterType: 'datetime' | 'date' | 'time' | 'string' |'number' | 'x-enumObj' , isRange: boolean }
+ */
+const filterFieldsGenetate = (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;
+    });
+};
+// 筛选表单
+export const FilterFieldsPanel = ({ data, getChooseList, fetchData, isH5 = false, }) => {
+    const { Margin } = useClassNames();
+    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 = filterFieldsGenetate(data);
+        // 筛选字段改变，重新初始化筛选面板
+        if (!isObjectEqual(result, initFilterData)) {
+            const initFilterData = JSON.parse(JSON.stringify(result));
+            setInitFilterData(initFilterData);
+            setFilterData(initFilterData);
+        }
+    }, [data]);
+    const searchHandle = () => {
+        const 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);
+        });
+        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 兼容字符串和数字
+                            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);
+    };
+    return (!!filterData.length && (React.createElement("div", { className: `${isH5 ? 'filter-wrap' : 'filter-table-wrap'}` },
+        React.createElement(Form, { style: { maxWidth: 'unset', width: '100%' }, className: `${isH5 ? 'wedatea2td-form-h5' : ''}`, layout: `${isH5 ? 'default' : 'inline-vertical'}` },
+            React.createElement(Row, { gap: 20, verticalAlign: 'bottom', style: { justifyContent: 'space-between' } },
+                React.createElement(React.Fragment, null, filterData === null || filterData === void 0 ? void 0 : filterData.map((i) => isH5 ? (React.createElement(Col, { span: 24, key: i.id },
+                    React.createElement(FilterFieldItem, { ...i, getChooseList: getChooseList, updateFilterData: updateFilterData }))) : (React.createElement(Col, { span: 24, lg: 8, xl: 6, key: i.id },
+                    React.createElement(FilterFieldItem, { ...i, getChooseList: getChooseList, updateFilterData: updateFilterData }))))),
+                !isH5 && (React.createElement(Col, { span: 24, lg: 8, xl: 6, key: "search-button", style: { flex: '1' } },
+                    React.createElement(Form.Item, { className: "_wedamodal-form__op" },
+                        React.createElement(Button, { type: "primary", className: `${Margin.Right['4n']}`, onClick: searchHandle }, "\u67E5\u8BE2"),
+                        React.createElement(Button, { onClick: () => {
+                                setFilterData(initFilterData);
+                                fetchData();
+                            } }, "\u91CD\u7F6E")))))),
+        isH5 && (React.createElement(Form.Item, { className: "_wedamodal-form__op" },
+            React.createElement(Button, { type: "link", className: `${Margin.Right['4n']}`, onClick: searchHandle }, "\u67E5\u8BE2"),
+            React.createElement(Button, { type: "link", onClick: () => {
+                    setFilterData(initFilterData);
+                    fetchData();
+                } }, "\u91CD\u7F6E"))))));
+};

package/dist/web/components/table/Form/Enum.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Select, Icon } from 'tea-component';
+import { useEnumContext } from '../../../utils/hooks/context';
+// 枚举输入组件
+export const EnumSelect = (props) => {
+    const { field, onChange } = props;
+    const { enumOptions } = useEnumContext();
+    const optionName = field['x-option-name'];
+    const isMulti = field['x-multi-select'];
+    const selectProps = {
+        options: (enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[optionName]) || [],
+        ...props,
+        virtual: true,
+        size: 'full',
+        matchButtonWidth: true,
+        appearance: 'button',
+        clearable: true,
+        searchable: true,
+        staging: false,
+    };
+    const onSelectChange = (value) => {
+        if (onChange) {
+            onChange(value || '');
+        }
+    };
+    if (isMulti) {
+        return React.createElement(Select.Multiple, { ...selectProps });
+    }
+    return React.createElement(Select, { ...selectProps, onChange: onSelectChange });
+};
+// 转换枚举值
+export const formatEnum = (value, field, enumOptions) => {
+    var _a;
+    try {
+        const optionName = field['x-option-name'];
+        const isMulti = field['x-multi-select'];
+        const options = (enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[optionName]) || [];
+        const getTextByValue = (value) => { var _a; return ((_a = options === null || options === void 0 ? void 0 : options.find((item) => (item === null || item === void 0 ? void 0 : item.value) === value)) === null || _a === void 0 ? void 0 : _a.text) || value; };
+        if (isMulti) {
+            return (_a = []
+                .concat(value)
+                .map((v) => getTextByValue(v))) === null || _a === void 0 ? void 0 : _a.join();
+        }
+        return getTextByValue(value);
+    }
+    catch (e) { }
+    return value;
+};
+// 枚举值展示组件
+export const EnumView = (props) => {
+    const { field, values } = props;
+    const { enumOptions, loading } = useEnumContext();
+    if (loading)
+        return React.createElement(Icon, { type: "loading" });
+    return formatEnum(values, field, enumOptions);
+};

package/dist/web/components/table/Form/Location.css

@@ -0,0 +1,11 @@
+.weda-business-location-input {
+  background-color: white;
+}
+
+.weda-business-location-form-array-label {
+  padding-right: 20px;
+}
+
+.weda-business-location-form-item .wedatea2td-form__controls {
+  padding-bottom: 16px !important;
+}