@cloudbase/weda-ui 3.4.2 → 3.4.4

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

@@ -0,0 +1,1240 @@
+import React, { useMemo, useEffect, useRef, useImperativeHandle, useState, } from 'react';
+import { Icon, Table, Button, Justify, Modal, message, TagSearchBox, useClassNames, Card, Row, Col, Checkbox, LoadingTip, Dropdown, List, Radio, Collapse, Form, } from 'tea-component';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { getColumns, isProcessHoldOrLocked, formatDataToXlsx, getSearchAttributes, filterCustomColumns, filterCustomFields, getFixedColumnSets, slotRender, } from './FieldRender';
+import { FilterFieldsPanel } from './FilterFields';
+import { SelectableBlock } from './SelectableBlock';
+import { REL_DICT, CELL_CUSTOM_OPTION } from '../../utils/constant';
+import { ImportFileModalByApi } from './ImportFileModalByApi';
+import { ExportFileModalByApi } from './ExportFileModalByApi';
+import { InOrOutRecordModeal } from './InOrOutRecordModeal';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { useEnumContext } from '../../utils/hooks/context';
+import { useSetState } from '../../utils/hooks/useSetState';
+import { alertErrorMessage, isInIde, navigateToModelPage, usePlatform, } from '../../utils/platform';
+import { callWedaApi, appCloudGetWedaUserId, getIsExitApi, } from '../../utils/tcb';
+import { exportData } from '../../utils/file';
+import { DataSource, getDataSourceByName, getPrimaryField, getDataSourceFieldsWithAuth, } from '../../utils/datasource';
+import { getUuid, getFieldsTypeName } from '../../utils/tool';
+import EmptyContent from '../emptyContent';
+import './baseTable.css';
+// eslint-disable-next-line prettier/prettier
+const { sortable, radioable, selectable, pageable, autotip, injectable } = Table.addons;
+/**
+ * 基础表格
+ */
+export const BaseTable = (props) => {
+    const { selectedView = [], // 视图列表 列表
+    dbName, // 数据源 Name
+    fields: showFields = [], // 字段 schema 列表
+    tableAction = true, // 是否有操作按钮
+    tableSearch = true, // 是否有搜索栏
+    actionColumn = true, // 是否有操作列
+    enableCellCustomOption, // 是否显示插槽操作列(默认为undefined, 在编辑器中会通过boolean类型来判断显隐)
+    enableGlobalButton, // 是否显示插槽全局按钮(默认为undefined, 在编辑器中会通过boolean类型来判断显隐)
+    multipleSelect = true, // 是否多选
+    onSelectConfirm, // 表底是否有确认按钮，以及确认事件
+    onSelectCancel, // 表底是否有取消按钮，以及取消事件
+    defaultSearchValue, // 默认搜索条件，比如关联关系时默认 _id 搜索条件
+    defaultsSlectedKeys = [], // 默认选中的行
+    compId, // 组件ID
+    buttons, // 选区按钮集合
+    settings, // 操作列集合「试用于非插槽实现的操作列」
+    selectableBlockEvents, // 选区按钮事件对象
+    filterType = 'searchbox', // 搜索方式
+    filterFields, // 筛选字段
+    connectorParams: rawConnectorParams = {}, // API查询入参
+    isModel = true, // 数据源类型
+    connectorMethod, // API方法
+    isOrderBy, rowColor, // 背景色，可以是字符串或方法的引用
+    columnSets, // 动态列设置, array, 为 undefined 时表示不存在列管理，使用默认列值
+    slots, // 动态插槽, object
+    events, // 事件
+    outerRef, where: rawWhere, // 筛选条件
+    orderBy: defaultOrderBy, // 排序字段
+    orderType: defaultOrderType, // 排序方式
+    fixedFront, // 冻结首列至本列
+    fixedEnd, // 冻结本列至尾列
+    emptyText, // 空状态提示
+     } = props;
+    const connectorParams = rawConnectorParams && JSON.parse(JSON.stringify(rawConnectorParams));
+    const where = rawWhere && JSON.parse(JSON.stringify(rawWhere));
+    const connectorParamsRef = React.useRef({});
+    const selectedViewRef = React.useRef([]);
+    const whereRef = React.useRef(undefined);
+    const isViewTable = selectedView === null || selectedView === void 0 ? void 0 : selectedView.length; // 判断是新增还是存量用户
+    const isH5 = usePlatform() === 'h5'; // 响应式判定
+    const datasource = useMemo(() => new DataSource(dbName), [dbName]); // datasource 方法-模型
+    const { Margin } = useClassNames();
+    const chooseList = useRef([]);
+    const searchThrottleWait = useRef(0);
+    const [isInOrOutRecordModealVisible, setIsInOrOutRecordModealVisible] = useState(null);
+    const [isImportFileModalByApiVisible, setIsImportFileModalByApiVisible] = useState(false);
+    const [isExportFileModalByApiVisible, setIsExportFileModalByApiVisible] = useState(false);
+    const [getRecordParams, setGetRecordParams] = useState({
+        orderBy: undefined,
+        orderType: undefined,
+        where: {},
+    });
+    const fetchRef = useRef({ version: '' });
+    const { enumOptions } = useEnumContext();
+    // 搜索和分页参数
+    const [{ pageIndex = 1, pageSize, sort, selectedKeys, isLoading, searchValues, filterCollapse, cardList = [], 
+    // 视图选择相关
+    selectedViewId = '', viewList = [], fields = isViewTable ? [] : showFields, 
+    // 数据源名称
+    datasourceTitle, records, total, }, setState,] = useSetState({
+        sort: [],
+        pageIndex: 1,
+        pageSize: 10,
+        selectedKeys: defaultsSlectedKeys,
+        isLoading: true,
+        searchValues: undefined,
+        filterCollapse: true,
+        cardList: [],
+        pageableInfo: undefined,
+        records: [],
+        total: 0,
+    });
+    React.useMemo(() => {
+        if (!isModel) {
+            setState({
+                pageSize: (connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize) || 10,
+                pageIndex: (connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo) || 1,
+            });
+        }
+    }, [connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageSize, connectorParams === null || connectorParams === void 0 ? void 0 : connectorParams.pageNo, isModel]);
+    // 数据筛选条件
+    const whereList = () => {
+        try {
+            const resultList = [];
+            const groupLogic = {};
+            let firstGroupLogicTyp = 'and';
+            let groupLogicList = [];
+            if (Array.isArray(where) && (where === null || where === void 0 ? void 0 : where.length)) {
+                groupLogicList = where.map((item1, index1) => {
+                    const item1Result = {};
+                    const item1ResultList = [];
+                    let secondGroupLogicTyp = 'and';
+                    if (index1 === 1) {
+                        // 每组之间统一取且/或，只有一组 groupLogic 默认值为 null
+                        firstGroupLogicTyp = item1 === null || item1 === void 0 ? void 0 : item1.groupLogic;
+                    }
+                    if (Array.isArray(item1 === null || item1 === void 0 ? void 0 : item1.logicData)) {
+                        item1.logicData.forEach((item2, index2) => {
+                            const item2Result = {};
+                            const rule = {};
+                            if (index2 === 1) {
+                                // 每组之间统一取且/或，只有一组 groupLogic 默认值为 null
+                                secondGroupLogicTyp = item2 === null || item2 === void 0 ? void 0 : item2.logic;
+                            }
+                            let [rel, val] = [
+                                REL_DICT[item2 === null || item2 === void 0 ? void 0 : item2.rel] || (item2 === null || item2 === void 0 ? void 0 : item2.rel),
+                                item2 === null || item2 === void 0 ? void 0 : item2.value,
+                            ];
+                            // 去掉空字符串、undefined(接口不支持)、对象类型(接口不支持)
+                            if (val === '' ||
+                                val === undefined ||
+                                Object.prototype.toString.call(val) === '[object Object]') {
+                                console.error(`${item2 === null || item2 === void 0 ? void 0 : item2.key}筛选值为：${val},不符合查询条件，请检查绑定变量值是否正确`);
+                                return;
+                            }
+                            if ('_begin_with' === rel) {
+                                rel = 'regex';
+                                val = `^${val}`;
+                            }
+                            if ('_exclude' === rel) {
+                                rel = 'nsearch';
+                            }
+                            rule['$' + rel] = val;
+                            item2Result[item2 === null || item2 === void 0 ? void 0 : item2.key] = rule;
+                            item1ResultList.push(item2Result);
+                        });
+                    }
+                    item1Result['$' + secondGroupLogicTyp] = item1ResultList;
+                    return item1Result;
+                });
+                groupLogic['$' + firstGroupLogicTyp] = groupLogicList;
+                resultList.push(groupLogic);
+                return resultList;
+            }
+            return [];
+        }
+        catch (error) {
+            console.error('getWhereList error', error);
+            return [];
+        }
+    };
+    // 获取数据源名称
+    useEffect(() => {
+        async function getDataSourceName() {
+            const ds = await getDataSourceByName(dbName, isModel);
+            setState({
+                datasourceTitle: (ds === null || ds === void 0 ? void 0 : ds.title) || dbName,
+            });
+        }
+        getDataSourceName();
+    }, [dbName]);
+    // 查询子数据库数据
+    useEffect(() => {
+        if (!filterFields) {
+            return;
+        }
+        const FORMAT_FATHER_SON = 'father-son';
+        const FORMAT_RELATED = 'related';
+        const fatherSon = getDataBase(FORMAT_FATHER_SON);
+        const related = getDataBase(FORMAT_RELATED);
+        chooseList.current = [
+            {
+                format: FORMAT_FATHER_SON,
+                list: fatherSon,
+            },
+            {
+                format: FORMAT_RELATED,
+                list: related,
+            },
+        ];
+    }, []);
+    const getDataBase = (format) => {
+        const filter = filterFields.filter((item) => (item === null || item === void 0 ? void 0 : item.format) === format);
+        const data = filter === null || filter === void 0 ? void 0 : filter.map((item) => {
+            var _a, _b, _c;
+            const childDbName = (_a = item['x-parent']) === null || _a === void 0 ? void 0 : _a.parentDataSourceName;
+            const primaryColumn = (_c = (_b = item.parentDatasource) === null || _b === void 0 ? void 0 : _b.schema) === null || _c === void 0 ? void 0 : _c['x-primary-column'];
+            const childItem = {
+                childDbName,
+                primaryColumn,
+            };
+            return childItem;
+        });
+        return data;
+    };
+    const getViews = async (isControlAuth = true) => {
+        try {
+            const queryParams = {
+                action: 'DescribeRuntimeDataViewList',
+                data: { DatasourceName: dbName, GetColumnAuth: true },
+            };
+            const viewPropertiesQueryParams = {
+                action: 'DescribeRuntimeDataViewPropertiesList',
+                data: { DatasourceName: dbName },
+            };
+            const { ResourceCheckInfos } = await callWedaApi(queryParams);
+            const { Count, Rows } = await callWedaApi(viewPropertiesQueryParams);
+            if (Count) {
+                const selectedViewList = selectedView
+                    .map((view) => Rows === null || Rows === void 0 ? void 0 : Rows.filter((item) => item.ViewId === view)[0])
+                    .filter((item) => !!item);
+                const views = selectedViewList.map((item) => {
+                    var _a, _b, _c, _d, _e;
+                    item.text = item.ViewName;
+                    item.value = item.ViewId;
+                    item.fields = (_a = item === null || item === void 0 ? void 0 : item.Properties) === null || _a === void 0 ? void 0 : _a.map((itemProperties) => {
+                        itemProperties = JSON.parse(itemProperties);
+                        if (itemProperties && itemProperties['x-viewType']) {
+                            // 关联模型字段
+                            itemProperties.parentRelationRecordsName = itemProperties === null || itemProperties === void 0 ? void 0 : itemProperties.name;
+                            itemProperties.name = `${itemProperties['x-parentRelationKey']}.${itemProperties['name']}`;
+                            itemProperties.title = `${itemProperties['title']}(${itemProperties['x-dataSourceTitle']})`;
+                        }
+                        return itemProperties;
+                    });
+                    // 筛选条件
+                    if (item.SearchConfig) {
+                        item.SearchConfig = (_b = JSON.parse(item.SearchConfig)
+                            .condition) === null || _b === void 0 ? void 0 : _b.filter((item) => item.IsQuery).map((item) => {
+                            var _a, _b;
+                            // 当规则为包含/不包含当前用户时，设计态无法获取当前用户uid需要 运行态主动获取
+                            if (item.Rel === 'eq-current-user' ||
+                                item.Rel === 'ne-current-user') {
+                                item.Val =
+                                    (appCloudGetWedaUserId === null || appCloudGetWedaUserId === void 0 ? void 0 : appCloudGetWedaUserId()) ||
+                                        ((_b = (_a = window === null || window === void 0 ? void 0 : window._WedaHostConfig) === null || _a === void 0 ? void 0 : _a.wedaUser) === null || _b === void 0 ? void 0 : _b.userId);
+                            }
+                            return {
+                                Key: item.Key,
+                                Rel: item.Rel,
+                                Val: item.Val,
+                            };
+                        });
+                    }
+                    // 数据查询支持复杂条件改造新增 ConditionConfig 查询字段
+                    if (item.ConditionConfig) {
+                        item.ConditionConfig = {
+                            ...JSON.parse((item === null || item === void 0 ? void 0 : item.ConditionConfig) || '{}'),
+                        };
+                    }
+                    // 排序
+                    const sortItem = (_c = item.fields) === null || _c === void 0 ? void 0 : _c.filter((item) => item['x-sortable'])[0];
+                    if (sortItem) {
+                        item.sortItem = {
+                            orderBy: sortItem.name,
+                            orderType: sortItem['x-defaultSort'],
+                        };
+                    }
+                    // 根据x-layoutShow显示隐藏
+                    item.fields = (_d = item.fields) === null || _d === void 0 ? void 0 : _d.filter((item) => item['x-layoutShow'] === true).sort((a, b) => a['x-index'] - b['x-index']);
+                    if (isControlAuth) {
+                        // 设置字段权限,关联模型字段权限，接口没返回暂不进行校验：['x-viewType']
+                        item.fields = (_e = getDataSourceFieldsWithAuth(item.fields, ResourceCheckInfos)) === null || _e === void 0 ? void 0 : _e.filter((value) => value.readWriteAuth === 'rw' || value.readWriteAuth === 'r');
+                    }
+                    return item;
+                });
+                setState({
+                    viewList: views,
+                    fields: views[0].fields,
+                    selectedViewId: views[0].ViewId,
+                });
+            }
+        }
+        catch (err) {
+            console.error('err getViews', err);
+        }
+    };
+    // 兼容私有环境，新接口不存在的情况，产品策略完善后移除
+    const getViewsCompatibleProvite = async () => {
+        try {
+            const queryParams = {
+                action: 'DescribeRuntimeDataViewList',
+                data: { DatasourceName: dbName, GetColumnAuth: true },
+            };
+            const { Count, Rows } = await callWedaApi(queryParams);
+            if (Count) {
+                const selectedViewList = selectedView
+                    .map((view) => Rows.filter((item) => item.ViewId === view)[0])
+                    .filter((item) => !!item);
+                const views = selectedViewList.map((item) => {
+                    var _a, _b, _c, _d;
+                    item.text = item.ViewName;
+                    item.value = item.ViewId;
+                    // 主模型字段
+                    const schemaProperties = JSON.parse(item.Schema).properties;
+                    item.fields = (_a = Object.keys(schemaProperties)) === null || _a === void 0 ? void 0 : _a.map((key) => ({
+                        name: key,
+                        ...schemaProperties[key],
+                    }));
+                    // 筛选条件
+                    if (item.SearchConfig) {
+                        item.SearchConfig = (_b = JSON.parse(item.SearchConfig)
+                            .condition) === null || _b === void 0 ? void 0 : _b.filter((item) => item.IsQuery).map((item) => {
+                            var _a, _b;
+                            // 当规则为包含/不包含当前用户时，设计态无法获取当前用户uid需要 运行态主动获取
+                            if (item.Rel === 'eq-current-user' ||
+                                item.Rel === 'ne-current-user') {
+                                item.Val =
+                                    (appCloudGetWedaUserId === null || appCloudGetWedaUserId === void 0 ? void 0 : appCloudGetWedaUserId()) ||
+                                        ((_b = (_a = window === null || window === void 0 ? void 0 : window._WedaHostConfig) === null || _a === void 0 ? void 0 : _a.wedaUser) === null || _b === void 0 ? void 0 : _b.userId);
+                            }
+                            return {
+                                Key: item.Key,
+                                Rel: item.Rel,
+                                Val: item.Val,
+                            };
+                        });
+                    }
+                    // 数据查询支持复杂条件改造新增 ConditionConfig 查询字段
+                    if (item.ConditionConfig) {
+                        item.ConditionConfig = {
+                            ...JSON.parse((item === null || item === void 0 ? void 0 : item.ConditionConfig) || '{}'),
+                        };
+                    }
+                    // 排序
+                    const sortItem = (_c = item.fields) === null || _c === void 0 ? void 0 : _c.filter((item) => item === null || item === void 0 ? void 0 : item['x-sortable'])[0];
+                    if (sortItem) {
+                        item.sortItem = {
+                            orderBy: sortItem.name,
+                            orderType: sortItem['x-defaultSort'],
+                        };
+                    }
+                    // 根据x-layoutShow显示隐藏
+                    item.fields = (_d = item.fields) === null || _d === void 0 ? void 0 : _d.filter((item) => item['x-layoutShow'] === true).sort((a, b) => a['x-index'] - b['x-index']);
+                    return item;
+                });
+                setState({
+                    viewList: views,
+                    fields: views[0].fields,
+                    selectedViewId: views[0].ViewId,
+                });
+            }
+        }
+        catch (err) {
+            console.error('err getViews', err);
+        }
+    };
+    // 获取视图列表
+    useEffect(() => {
+        const getViewsList = async () => {
+            if (!isModel)
+                return;
+            if (!isObjectEqual(selectedViewRef.current, selectedView)) {
+                if (selectedView.length === 0) {
+                    setState({ fields: showFields });
+                }
+                else {
+                    // 兼容私有环境，新接口不存在的情况，产品策略完善后移除
+                    if (window === null || window === void 0 ? void 0 : window._isPrivate) {
+                        const describeRuntimeDataViewPropertiesListStatus = await getIsExitApi({
+                            action: 'DescribeRuntimeDataViewPropertiesList',
+                            data: { DatasourceName: dbName },
+                        });
+                        // 私有环境DescribeRuntimeDataViewPropertiesList接口存在，可以展示关联模型字，同时兼容权限不存在
+                        describeRuntimeDataViewPropertiesListStatus
+                            ? getViews()
+                            : getViewsCompatibleProvite();
+                    }
+                    else {
+                        getViews();
+                    }
+                }
+                selectedViewRef.current = selectedView;
+            }
+        };
+        getViewsList();
+    }, [dbName, selectedView, isModel]);
+    // 视图变化再次请求
+    useEffect(() => {
+        if (!selectedViewId)
+            return;
+        const selectedView = viewList.filter((item) => item.ViewId === selectedViewId)[0];
+        if (!selectedView) {
+            setState({ isLoading: false });
+            return;
+        }
+        setState({ fields: selectedView.fields });
+        fetchData({ pageNo: pageIndex, pageSize });
+    }, [selectedViewId]);
+    useEffect(() => {
+        // 小屏时默认收起
+        setState({ filterCollapse: !isH5 });
+        fetchData({ pageNo: pageIndex, pageSize });
+    }, [isH5]);
+    // 筛选条件变化时候请求
+    useEffect(() => {
+        if (!isObjectEqual(whereRef.current, where)) {
+            fetchData({ pageNo: pageIndex, pageSize });
+            whereRef.current = where;
+        }
+    }, [where]);
+    useEffect(() => {
+        if (connectorParams &&
+            !isObjectEqual(connectorParamsRef.current, connectorParams)) {
+            fetchData({ pageNo: pageIndex, pageSize });
+            connectorParamsRef.current = connectorParams;
+        }
+    }, [connectorParams]);
+    // 移动端和自定义APIs场景不支持导入功能，监听变化存到表格上下文中
+    useEffect(() => {
+        handleContext({ state: { isH5, isModel } });
+    }, [isH5, isModel]);
+    useEffect(() => {
+        fetchData();
+    }, [sort, defaultOrderBy, defaultOrderType, isViewTable]);
+    // 查询子系数据库
+    const getChooseList = async (params) => {
+        var _a, _b, _c, _d, _e;
+        const child = (_b = (_a = chooseList.current) === null || _a === void 0 ? void 0 : _a.find((child) => child.format === params.format)) === null || _b === void 0 ? void 0 : _b.list.find((item) => item.childDbName === params.childDbName);
+        if (!child)
+            return;
+        // 删除标识，请求参数没该数据
+        delete params.format;
+        delete params.childDbName;
+        const { childDbName, primaryColumn } = child;
+        if (Array.isArray(params.where)) {
+            params.where = params.where.map((item) => {
+                return { ...item, key: primaryColumn };
+            });
+            searchThrottleWait.current = 1000;
+        }
+        else {
+            searchThrottleWait.current = 0;
+        }
+        const data = await datasource.getRecordList(params, childDbName);
+        const relData = (_d = (_c = data === null || data === void 0 ? void 0 : data.records) === null || _c === void 0 ? void 0 : _c.filter((item) => primaryColumn in item)) === null || _d === void 0 ? void 0 : _d.map((childItem) => ({
+            value: childItem._id,
+            text: childItem[primaryColumn].length === 0
+                ? childItem._id
+                : childItem[primaryColumn],
+        }));
+        return {
+            data: relData,
+            size: ((_e = data === null || data === void 0 ? void 0 : data.records) === null || _e === void 0 ? void 0 : _e.length) || 0,
+        };
+    };
+    // 搜索和分页事件
+    const fetchData = async (params = {}) => {
+        var _a, _b, _c, _d, _e;
+        try {
+            const fetchVersion = (fetchRef.current.version = getUuid());
+            // h5模式下，查询收起filter，清空选中状态
+            if (isH5) {
+                setState({ filterCollapse: false, selectedKeys: [] });
+            }
+            // H5端加载等待状态
+            setState({ isLoading: true });
+            const { searchValues, pageNo = 1, empty = true, pageSize = 10 } = params;
+            // 分页
+            let queryParams = { pageSize, pageNo };
+            let viewed, data;
+            let SearchConfig = [];
+            let ConditionConfig = {};
+            // 区分是否模型逻辑
+            if (isModel) {
+                if (isViewTable) {
+                    viewed = viewList === null || viewList === void 0 ? void 0 : viewList.filter((item) => item.ViewId === selectedViewId)[0];
+                    // 视图筛选条件
+                    SearchConfig = viewed === null || viewed === void 0 ? void 0 : viewed.SearchConfig;
+                    ConditionConfig = viewed === null || viewed === void 0 ? void 0 : viewed.ConditionConfig;
+                }
+                // 首次加载，属性区配置了视图，但数据源接口还未获取到全部视图配置
+                if (isViewTable && !viewed)
+                    return;
+                // 搜索
+                const wList = whereList();
+                if (searchValues !== undefined ||
+                    defaultSearchValue !== undefined ||
+                    SearchConfig !== undefined ||
+                    ConditionConfig !== undefined ||
+                    wList !== undefined) {
+                    queryParams.where = [
+                        ...(searchValues || []),
+                        ...(defaultSearchValue || []),
+                        ...(SearchConfig || []),
+                        ...(wList || []),
+                        ConditionConfig,
+                    ];
+                }
+                // 如果设计态存在排序条件
+                if (viewed === null || viewed === void 0 ? void 0 : viewed.sortItem) {
+                    queryParams.orderBy = (_a = viewed === null || viewed === void 0 ? void 0 : viewed.sortItem) === null || _a === void 0 ? void 0 : _a.orderBy;
+                    queryParams.orderType = (_b = viewed === null || viewed === void 0 ? void 0 : viewed.sortItem) === null || _b === void 0 ? void 0 : _b.orderType;
+                }
+                // 存在排序属性配置
+                if (!isViewTable && defaultOrderBy && defaultOrderType) {
+                    queryParams.orderBy = defaultOrderBy;
+                    queryParams.orderType = defaultOrderType;
+                }
+                // 运行态主动排序进行覆盖
+                if ((sort === null || sort === void 0 ? void 0 : sort.length) && sort[0].order) {
+                    queryParams.orderBy = sort[0].by;
+                    queryParams.orderType = sort[0].order;
+                }
+                setGetRecordParams(queryParams);
+                data = await datasource.getRecordList(queryParams);
+            }
+            else {
+                // 搜索
+                if (defaultSearchValue !== undefined) {
+                    queryParams.where = [...(defaultSearchValue || [])];
+                }
+                // API排序
+                if (isOrderBy && (sort === null || sort === void 0 ? void 0 : sort.length) && sort[0].order) {
+                    queryParams.orderBy = sort[0].by;
+                    queryParams.orderType = sort[0].order;
+                }
+                queryParams = Object.assign({}, connectorParams, queryParams);
+                setGetRecordParams(queryParams);
+                data = await datasource.getConnect(connectorMethod, queryParams);
+            }
+            if (fetchVersion !== fetchRef.current.version)
+                return;
+            data.records =
+                ((_c = data === null || data === void 0 ? void 0 : data.records) === null || _c === void 0 ? void 0 : _c.map((item) => {
+                    const temp = getPrimaryField(item);
+                    return { ...temp };
+                })) || [];
+            // 关联模型字段
+            const relationViewsFields = (_d = viewed === null || viewed === void 0 ? void 0 : viewed.fields) === null || _d === void 0 ? void 0 : _d.filter((item) => item['x-viewType']);
+            if ((relationViewsFields === null || relationViewsFields === void 0 ? void 0 : relationViewsFields.length) > 0) {
+                data.records = data.records.map((item) => {
+                    relationViewsFields.forEach((_viewFields) => {
+                        var _a, _b;
+                        const parentRelationRecord = (_b = (_a = item[_viewFields['x-parentRelationKey']]) === null || _a === void 0 ? void 0 : _a.v1) === null || _b === void 0 ? void 0 : _b.record;
+                        item[_viewFields.name] = parentRelationRecord
+                            ? parentRelationRecord[_viewFields === null || _viewFields === void 0 ? void 0 : _viewFields.parentRelationRecordsName]
+                            : '';
+                    });
+                    return item;
+                });
+            }
+            data = { total: 0, records: [], ...data };
+            // 小屏列表更新
+            if (data.total && ((_e = data.records) === null || _e === void 0 ? void 0 : _e.length) > 0) {
+                // empty :是否清空列表
+                if (empty) {
+                    setState(() => ({ cardList: data.records }));
+                }
+                else {
+                    setState((pre) => ({ cardList: [...pre.cardList, ...data.records] }));
+                }
+            }
+            else {
+                setState({ cardList: [] });
+            }
+            handleContext({
+                state: { pageNo, pageSize, total: data.total },
+                records: data.records,
+            });
+            events === null || events === void 0 ? void 0 : events.querySuccess({ data: Object.assign({}, data, queryParams) });
+            setState({
+                isLoading: false,
+                searchValues,
+                pageIndex: pageNo,
+                pageSize,
+                records: data.records,
+                total: data.total,
+            });
+        }
+        catch (e) {
+            alertErrorMessage({ message: `加载数据错误 ${e.message}` });
+            setState({ isLoading: false });
+        }
+    };
+    // 删除数据事件
+    const deleteRecord = async (keys) => {
+        try {
+            if (!isModel) {
+                return alertErrorMessage({
+                    message: '当前表格组件绑定了APIs，暂不支持进行数据删除',
+                });
+            }
+            if (!(keys === null || keys === void 0 ? void 0 : keys.length) && !(selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.length)) {
+                alertErrorMessage({ message: '请选择需要删除的记录' });
+                return;
+            }
+            const msg = !(keys === null || keys === void 0 ? void 0 : keys.length) && (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.length)
+                ? '确认删除选定的条目？'
+                : '确认删除此条目？';
+            const modal = Modal.show({
+                className: 'modal-table-delete',
+                caption: '操作确认',
+                onClose: () => modal.destroy(),
+                children: (React.createElement(React.Fragment, null,
+                    React.createElement("div", null, msg),
+                    React.createElement(Modal.Footer, null,
+                        React.createElement(Button, { type: "primary", onClick: async () => {
+                                try {
+                                    modal.destroy();
+                                    message.loading({
+                                        content: '删除数据中',
+                                    });
+                                    await datasource.batchDeleteRecord(keys || selectedKeys);
+                                    // 清除选中的 key
+                                    setState({
+                                        selectedKeys: [],
+                                    });
+                                    // 重新加载数据
+                                    fetchData(pageSize);
+                                    message.success({ content: '删除数据成功' });
+                                }
+                                catch (error) {
+                                    console.error('删除', error);
+                                    alertErrorMessage({
+                                        message: `删除数据失败: ${error.message}`,
+                                    });
+                                }
+                            } }, "\u786E\u8BA4")))),
+            });
+        }
+        catch (e) {
+            alertErrorMessage({ message: `删除数据失败: ${e.message}` });
+        }
+    };
+    useImperativeHandle(outerRef, () => ({
+        methods: {
+            deleteOne: (params) => {
+                const keys = [];
+                const { id } = params;
+                if (id) {
+                    keys.push(id);
+                }
+                deleteRecord(keys);
+            },
+            // 删除选中数据
+            deleteSelected: () => deleteRecord(),
+            // 导入
+            import: () => importHandleByApi(),
+            // 导出
+            export: () => exportHandle(),
+            // 后端导出
+            exportOptionalMode: () => exportHandleByApi(),
+            refresh: () => fetchData({ searchValues, pageSize, pageNo: 1 }),
+            // 刷新表格(查看当前页数据)
+            refreshKeepPage: () => fetchData({ searchValues, pageSize, pageNo: pageIndex }),
+        },
+    }));
+    // 表格选中事件
+    const handleRowsSelect = (keys) => {
+        if (events === null || events === void 0 ? void 0 : events.rowsSelect) {
+            const selectedData = records.filter((_) => keys.find((key) => _._id === key));
+            events.rowsSelect(selectedData);
+            handleContext({ keys });
+        }
+    };
+    // 表格更改上下文数据
+    const handleContext = ({ state = {}, keys: _keys, records: _records } = {}) => {
+        // 表格上下文
+        if (typeof (events === null || events === void 0 ? void 0 : events.onDataChange) === 'function') {
+            _keys = [].concat(_keys || selectedKeys);
+            _records = [].concat(_records || records);
+            const selectedRecords = _records.filter((_) => _keys.find((key) => _._id === key));
+            events.onDataChange({
+                data: _records,
+                state: {
+                    total,
+                    pageNo: pageIndex,
+                    pageSize,
+                    selectedRecords,
+                    isModel,
+                    isH5,
+                    ...state,
+                },
+            });
+        }
+    };
+    // table 插件
+    const tableAddons = [
+        // 排序
+        isOrderBy
+            ? sortable({
+                value: sort,
+                columns: fields
+                    .filter((field) => field.type !== 'array' &&
+                    field.type !== 'object' &&
+                    !(field === null || field === void 0 ? void 0 : field.name.includes('@')))
+                    .map((_) => _.name),
+                onChange: (value, context) => {
+                    setState({
+                        sort: [context.sort],
+                    });
+                },
+            })
+            : sortable({
+                value: sort,
+                columns: [],
+            }),
+        // 分页
+        pageable({
+            pageIndex: pageIndex || 1,
+            pageSize: pageSize || 10,
+            recordCount: total,
+            onPagingChange: (query) => {
+                fetchData({
+                    ...query,
+                    pageNo: query.pageIndex,
+                    pageSize: query.pageSize,
+                    searchValues,
+                });
+            },
+        }),
+        // 行选择
+        multipleSelect
+            ? selectable({
+                value: selectedKeys,
+                onChange: (keys) => {
+                    setState({ selectedKeys: keys });
+                    handleRowsSelect(keys);
+                },
+                render: (element, { disabled }) => disabled ? React.createElement(Icon, { type: "loading" }) : element,
+                targetColumnKey: fixedFront ? 'weda_select' : undefined,
+            })
+            : radioable({
+                value: selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys[0],
+                onChange: (key) => setState({
+                    selectedKeys: [key],
+                }),
+                rowSelect: true,
+                render: (element, { disabled }) => disabled ? React.createElement(Icon, { type: "loading" }) : element,
+                targetColumnKey: fixedFront ? 'weda_select' : undefined,
+            }),
+        // 加载、错误信息提示
+        autotip({
+            isLoading,
+            emptyText: emptyText && (React.createElement(EmptyContent, { emptyText: emptyText, component: "table" })),
+            // isError: Boolean(tableError),
+            // isFound: Boolean(searchKeyword),
+            onClear: () => {
+                setState({ searchKeyword: '' });
+                // handleSearchData({}, '');
+            },
+            onRetry: () => {
+                fetchData();
+            },
+            foundKeyword: '',
+        }),
+        // 行背景色
+        injectable({
+            row: (props, context) => ({
+                style: {
+                    background: rowColor
+                        ? typeof rowColor === 'function'
+                            ? rowColor({ event: { detail: context }, data: props })
+                            : `${rowColor}`
+                        : undefined,
+                },
+                className: rowColor ? 'modal-table-rowcolor' : '',
+            }),
+        }),
+    ];
+    const settingsMap = {
+        retrieve: (e, { dbName, recordkey }) => {
+            if (isInIde()) {
+                return alertErrorMessage({
+                    message: '请开启“实时真实预览”后，再进行查看操作',
+                });
+            }
+            navigateToModelPage('detail', {
+                dbName,
+                id: recordkey,
+            });
+        },
+        edit: (e, { dbName, recordkey }) => {
+            if (isInIde()) {
+                return alertErrorMessage({
+                    message: '请开启“实时真实预览”后，再进行查看操作',
+                });
+            }
+            navigateToModelPage('update', {
+                dbName,
+                id: recordkey,
+            });
+        },
+        del: (e, { recordkey }) => deleteRecord([recordkey]),
+    };
+    const BlockButton = ({ props, index, record, recordkey }) => (React.createElement(SelectableBlock, { ...props, component: "Button", blockKey: "settings", index: index, disabled: props.action === 'edit' || props.action === 'del'
+            ? props.disabled ||
+                isProcessHoldOrLocked(record['!!Weda!!ProcessHold'], record['!!Weda!!LOCK'])
+            : props.disabled, compId: compId, exportValue: { record, recordKey: recordkey }, actionMap: settingsMap, actionParams: { dbName, recordkey }, selectableBlockEvents: selectableBlockEvents }));
+    // 搜索框字段按列管理过滤
+    const searchFields = filterCustomFields({ fields, columnSets });
+    // 导出字段按列管理过滤，不过滤自定义列，自定义列只导出映射字段值
+    const exportFields = filterCustomFields({
+        fields,
+        columnSets,
+        isFilterGenre: true,
+    });
+    // 表格 columns
+    const columns = useMemo(() => {
+        const defaultColumns = getColumns(fields, isH5);
+        const fixedColumnSets = getFixedColumnSets({
+            fixedFront,
+            fixedEnd,
+            columnSets,
+        });
+        const baseColumns = filterCustomColumns({
+            columns: defaultColumns,
+            columnSets: fixedColumnSets,
+            slots,
+        });
+        // 插入选择项列，进行冻结联动
+        !isH5 && fixedFront && fixedFront.length > 0
+            ? baseColumns.unshift({
+                key: 'weda_select',
+                header: null,
+                width: 30,
+                fixed: 'left',
+            })
+            : null;
+        // 操作列
+        if (actionColumn &&
+            (settings === null || settings === void 0 ? void 0 : settings.length) > 0 &&
+            enableCellCustomOption === undefined) {
+            // 展示非插槽操作列
+            baseColumns.push({
+                key: '_ope',
+                width: 150,
+                header: '操作',
+                align: 'left',
+                fixed: 'right',
+                render: (record, recordkey) => !isInIde() ? (React.createElement(React.Fragment, null, settings === null || settings === void 0 ? void 0 :
+                    settings.map((props, index) => index < 3 && (React.createElement(BlockButton, { key: index, props: props, index: index, record: record, recordkey: recordkey }))),
+                    settings.length > 3 && (React.createElement(Dropdown, { boxStyle: {
+                            minWidth: '80px',
+                        }, overlayStyle: { zIndex: 998 }, className: "adminPortal_dropdown", clickClose: false, button: "\u66F4\u591A", appearance: "link", placement: "bottom" },
+                        React.createElement(List, { type: "option" }, settings === null || settings === void 0 ? void 0 : settings.map((props, index) => index > 2 &&
+                            props.show && (React.createElement(List.Item, { key: index },
+                            React.createElement(BlockButton, { props: props, index: index, record: record, recordkey: recordkey }))))))))) : (settings === null || settings === void 0 ? void 0 : settings.map((props, index) => (React.createElement(SelectableBlock, { key: index, ...props, component: "Button", blockKey: "settings", index: index, disabled: props.action === 'edit' || props.action === 'del'
+                        ? props.disabled ||
+                            isProcessHoldOrLocked(record['!!Weda!!ProcessHold'], record['!!Weda!!LOCK'])
+                        : props.disabled, compId: compId, exportValue: { record, recordKey: recordkey }, actionMap: settingsMap, actionParams: { dbName, recordkey }, selectableBlockEvents: selectableBlockEvents })))),
+            });
+        }
+        else if (enableCellCustomOption) {
+            // 展示插槽操作列
+            baseColumns.push({
+                key: 'button',
+                header: '操作',
+                width: 150,
+                align: 'left',
+                fixed: 'right',
+                render: (record, rowKey, recordIndex, column, columnIndex) => slotRender(slots[CELL_CUSTOM_OPTION], {
+                    record,
+                    rowKey,
+                    recordIndex,
+                    column,
+                    columnIndex,
+                }),
+            });
+        }
+        return baseColumns;
+    }, [fields, actionColumn, dbName, isH5, columnSets, slots]);
+    /**
+     * 表格底部，表格弹窗的确定和取消
+     */
+    const renderFooter = () => (onSelectConfirm || onSelectCancel) && (React.createElement("div", { className: isH5
+            ? 'adaptation-table__footer modal-table__footer'
+            : ' modal-table__footer' },
+        onSelectConfirm && (React.createElement(Button, { type: "primary", className: "adaptation-table__footer-btn", onClick: () => {
+                if (!(selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.length)) {
+                    return alertErrorMessage({ message: '请选择记录' });
+                }
+                if (!multipleSelect && (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.length) > 1) {
+                    return alertErrorMessage({ message: '仅允许选择一条记录' });
+                }
+                const keys = multipleSelect
+                    ? selectedKeys
+                    : records.find((item) => item._id === selectedKeys[0]);
+                onSelectConfirm === null || onSelectConfirm === void 0 ? void 0 : onSelectConfirm(keys);
+            } }, "\u786E\u8BA4")),
+        onSelectCancel && (React.createElement(Button, { className: "adaptation-table__footer-btn", onClick: () => {
+                onSelectCancel === null || onSelectCancel === void 0 ? void 0 : onSelectCancel();
+            } }, "\u53D6\u6D88"))));
+    /**
+     * 后端表格导入方法
+     */
+    const importHandleByApi = () => {
+        if (!isModel) {
+            return alertErrorMessage({
+                message: '当前表格组件绑定了APIs，暂不支持进行数据导入',
+            });
+        }
+        if (isH5) {
+            return alertErrorMessage({
+                message: '移动端暂不支持进行数据导入',
+            });
+        }
+        setIsImportFileModalByApiVisible(true);
+    };
+    /**
+     * 后端表格导出方法
+     */
+    const exportHandleByApi = () => {
+        if (!isModel) {
+            return alertErrorMessage({
+                message: '当前表格组件绑定了APIs，暂不支持进行数据导出',
+            });
+        }
+        if (isH5) {
+            return alertErrorMessage({
+                message: '移动端暂不支持进行数据导出',
+            });
+        }
+        setIsExportFileModalByApiVisible(true);
+    };
+    /**
+     * 表格导出方法
+     */
+    const exportHandle = () => {
+        if (!selectedKeys.length) {
+            return alertErrorMessage({
+                message: '请选择需要导出的数据',
+            });
+        }
+        const selectedData = records.filter((_) => selectedKeys.find((key) => _._id === key));
+        const selectedDataTrans = formatDataToXlsx(selectedData, exportFields, enumOptions);
+        exportData(selectedDataTrans, 'xlsx', datasourceTitle);
+    };
+    /**
+     * 表格按钮选区默认事件
+     */
+    const actionMap = {
+        create: () => {
+            if (isInIde()) {
+                return alertErrorMessage({
+                    message: '请开启“实时真实预览”后，再进行新建操作',
+                });
+            }
+            navigateToModelPage('create', {
+                dbName,
+            });
+        },
+        del: () => deleteRecord(),
+        export: () => exportHandle(),
+        import: () => importHandleByApi(),
+    };
+    /**
+     * 表格按钮选区默认事件参数
+     */
+    const exportValue = {
+        selectedKeys,
+        records, // 查询记录
+    };
+    // 左上角按钮
+    const renderButtons = () => {
+        // 展示插槽全局按钮
+        if (enableGlobalButton) {
+            return slotRender(slots.globalButton);
+        }
+        else if (enableGlobalButton === undefined) {
+            // 移动端和自定义APIs场景不支持导入功能
+            const buttonsList = isH5 || !isModel
+                ? buttons.filter((i) => i.action !== 'import')
+                : buttons;
+            return (buttonsList &&
+                buttonsList.map((props, index) => (React.createElement(SelectableBlock, { key: index, ...props, style: { marginBottom: '8px', marginRight: '10px', ...props.style }, component: "Button", blockKey: "buttons", index: index, compId: compId, exportValue: exportValue, actionMap: actionMap, selectableBlockEvents: selectableBlockEvents }))));
+        }
+    };
+    /**
+     * 右上角搜索
+     */
+    const renderSearch = () => (React.createElement("div", { className: "modal-table__search" },
+        React.createElement(TagSearchBox, { className: "modal-table__search-input", hideHelp: true, minWidth: 400, tips: searchValues ? '' : '搜索', attributesSelectTips: "\u9009\u62E9\u8FDB\u884C\u641C\u7D22\u7684\u5B57\u6BB5", attributes: getSearchAttributes(searchFields), onClearButtonClick: () => fetchData(), 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 });
+            } }),
+        React.createElement(Button, { className: Margin.Left['2n'], icon: "refresh", title: "\u5237\u65B0", onClick: async () => fetchData({ searchValues }) })));
+    /**
+     * H5的全选
+     */
+    const renderH5CheckboxAll = () => multipleSelect && (React.createElement(Checkbox, { value: cardList.length !== 0 && selectedKeys.length === cardList.length, onChange: (value) => {
+            if (value) {
+                const userKeys = cardList.map((item) => item._id);
+                setState({
+                    selectedKeys: userKeys,
+                });
+            }
+            else {
+                setState({
+                    selectedKeys: [],
+                });
+            }
+        } }, "\u5168\u9009"));
+    /**
+     * H5的表单单行内容
+     */
+    const renderH5FormItem = (columns, record, indexParam = {}) => columns.map((columnsItem, i) => {
+        const { offset = 0, recordIndex = 0 } = indexParam;
+        const component = columnsItem.render(record, record === null || record === void 0 ? void 0 : record[columnsItem.key], recordIndex, columnsItem, i + offset);
+        return (React.createElement(Form.Item, { label: columnsItem.header, key: columnsItem.key || i },
+            React.createElement(Form.Text, null, component)));
+    });
+    /**
+     * H5的以表单格式展示内容
+     */
+    const renderH5Form = () => {
+        const hasActionColumn = (actionColumn &&
+            (settings === null || settings === void 0 ? void 0 : settings.length) > 0 &&
+            enableCellCustomOption === undefined) ||
+            enableCellCustomOption;
+        return (React.createElement(InfiniteScroll, { dataLength: cardList.length, next: async () => {
+                if (!isLoading) {
+                    await fetchData({
+                        searchValues,
+                        pageNo: pageIndex + 1,
+                        empty: false,
+                    });
+                }
+            }, hasMore: cardList.length < total, loader: React.createElement(LoadingTip, { className: "adaptation-table__loading" }), scrollableTarget: "listScrollableContainer" }, cardList.map((recordsItem, recordIndex) => (React.createElement(Card, { className: "adaptation-table__card", key: recordsItem === null || recordsItem === void 0 ? void 0 : recordsItem._id },
+            React.createElement(Card.Body, { className: "adaptation-table__card-body" },
+                actionColumn &&
+                    (settings === null || settings === void 0 ? void 0 : settings.length) > 0 &&
+                    enableCellCustomOption === undefined && (React.createElement(Dropdown, { clickClose: false, className: "adaptation-table__row-actions", overlayStyle: { zIndex: 998 }, button: React.createElement(Button, { type: "icon", icon: "more", style: { width: '100%' } }), appearance: "pure", ...(isInIde() && recordIndex === 0 ? { open: true } : {}) },
+                    React.createElement(List, { type: "option" }, settings === null || settings === void 0 ? void 0 : settings.map((props, index) => props.show && (React.createElement(List.Item, { key: index },
+                        React.createElement(SelectableBlock, { ...props, component: "Button", blockKey: "settings", index: index, disabled: props.action === 'edit' ||
+                                props.action === 'del'
+                                ? props.disabled ||
+                                    isProcessHoldOrLocked(recordsItem['!!Weda!!ProcessHold'], recordsItem['!!Weda!!LOCK'])
+                                : props.disabled, compId: compId, exportValue: {
+                                record: recordsItem,
+                                recordKey: recordsItem === null || recordsItem === void 0 ? void 0 : recordsItem._id,
+                            }, actionMap: settingsMap, actionParams: {
+                                dbName,
+                                recordkey: recordsItem === null || recordsItem === void 0 ? void 0 : recordsItem._id,
+                            }, selectableBlockEvents: selectableBlockEvents, style: props.type === 'link'
+                                ? { width: '100%', color: 'inherit' }
+                                : { width: '100%' } }))))))),
+                enableCellCustomOption && (React.createElement(Dropdown, { clickClose: false, className: "adaptation-table__row-actions", overlayStyle: { zIndex: 998 }, button: React.createElement(Button, { type: "icon", icon: "more", style: { width: '100%' } }), appearance: "pure", ...(isInIde() && recordIndex === 0 ? { open: true } : {}) },
+                    React.createElement(List, { type: "option", className: "adaptation-table__row-actions-list" }, slotRender(slots[CELL_CUSTOM_OPTION], {
+                        record: recordsItem,
+                        rowKey: recordsItem === null || recordsItem === void 0 ? void 0 : recordsItem._id,
+                        recordIndex,
+                    })))),
+                React.createElement(Form, { readonly: true, className: "adaptation-table__form", layout: "fixed", fixedLabelWidth: "70px" },
+                    multipleSelect ? (React.createElement(Checkbox, { className: "adaptation-table__item-check", name: recordsItem === null || recordsItem === void 0 ? void 0 : recordsItem._id })) : (React.createElement(Radio, { className: "adaptation-table__item-check", name: recordsItem === null || recordsItem === void 0 ? void 0 : recordsItem._id })),
+                    renderH5FormItem(columns.slice(0, columns.length < 4 ? -1 : 3), recordsItem, {
+                        offset: 0,
+                        recordIndex,
+                    })),
+                React.createElement(Form, { readonly: true, className: "adaptation-table__form adaptation-table__form-extra", layout: "fixed", fixedLabelWidth: "70px" },
+                    React.createElement(Collapse, { icon: (active) => (React.createElement(Icon, { type: active ? 'arrowup' : 'arrowdown' })), iconPosition: "right", className: "adaptation-table__text-down" },
+                        React.createElement(Collapse.Panel, { id: "1", title: (active) => (active ? '收起' : '展开更多'), className: "adaptation-table__form-collapse" }, renderH5FormItem(hasActionColumn ? columns.slice(3, -1) : columns.slice(3), recordsItem, {
+                            offset: 3,
+                            recordIndex,
+                        }))))))))));
+    };
+    /**
+     * H5的表格内容
+     */
+    const renderH5Table = () => {
+        if (dbName && isLoading && cardList.length === 0) {
+            return React.createElement(LoadingTip, { className: "adaptation-table__loading" });
+        }
+        if (cardList.length === 0 || !dbName) {
+            return (!isLoading &&
+                emptyText && (React.createElement(EmptyContent, { emptyText: emptyText, component: "table", isH5: true })));
+        }
+        if (multipleSelect) {
+            return (React.createElement(Checkbox.Group, { value: selectedKeys, className: "adaptation-table__all-check", onChange: (val) => {
+                    setState({ selectedKeys: val });
+                    handleRowsSelect(val);
+                } }, renderH5Form()));
+        }
+        return (React.createElement(Radio.Group, { value: selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys[0], className: "adaptation-table__item-check", onChange: (val) => {
+                const keys = [].concat(val);
+                setState({ selectedKeys: keys });
+                handleRowsSelect(keys);
+            } }, renderH5Form()));
+    };
+    /**
+     * filter 查询
+     */
+    const queryHandle = (searchValues = []) => {
+        fetchData({ searchValues, pageNo: 1, pageSize });
+    };
+    /**
+     * h5 filter面板
+     */
+    const renderH5Filter = () => (React.createElement("div", { className: "_wedamodal-fn-data-filter-form-h5" },
+        React.createElement("div", { className: "_wedamodal-fn-data-filter _wedamodal-fn-data-filter--mobile" },
+            React.createElement("div", { className: "_wedamodal-fn-data-filter__panel filter__panel", style: filterCollapse ? { display: 'block' } : { display: 'none' } },
+                React.createElement("div", { className: "_wedamodal-fn-data-filter__panel-inner" },
+                    React.createElement("div", { className: "_wedamodal-fn-data-filter__panel-header" },
+                        React.createElement("span", { className: "filter-title" }, "\u6761\u4EF6\u7B5B\u9009"),
+                        React.createElement("i", { className: "filter-close-icon", onClick: () => setState((prev) => ({ filterCollapse: !prev.filterCollapse })) })),
+                    React.createElement("br", null),
+                    React.createElement(FilterFieldsPanel, { data: filterFields, getChooseList: getChooseList, fetchData: queryHandle, isH5: true }))))));
+    /**
+     * pc 搜索 视图选择 筛选
+     */
+    const renderPCViewFilter = () => (React.createElement(Row, { gap: 10 },
+        React.createElement(Col, { span: 24 }, tableSearch &&
+            (filterType === 'searchbox' ? (renderSearch()) : (React.createElement(Button, { className: `${Margin.Left['2n']} ${filterCollapse && 'active'}`, icon: "filter", title: "\u7B5B\u9009", onClick: () => {
+                    setState((prev) => ({ filterCollapse: !prev.filterCollapse }));
+                } }))))));
+    /**
+     * 后端导入弹窗
+     */
+    const renderImportFileModalByApi = () => {
+        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 (isImportFileModalByApiVisible && (React.createElement(ImportFileModalByApi, { fields: supportFields, visible: isImportFileModalByApiVisible, datasourceTitle: datasourceTitle, dbName: dbName, onCancel: () => {
+                setIsImportFileModalByApiVisible(false);
+            }, handleInOrOutRecordModealVisible: setIsInOrOutRecordModealVisible, refresh: () => {
+                fetchData({ searchValues, pageSize, pageNo: 1 });
+            } })));
+    };
+    /**
+     * 后端导出弹窗
+     */
+    const renderExportFileModalByApi = () => {
+        var _a, _b;
+        const supportFields = (_b = (_a = fields === null || fields === void 0 ? void 0 : fields.filter((field) => {
+            // 不支持上传的类型
+            if (!field)
+                return false;
+            if (field['x-system'])
+                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']))) === null || _b === void 0 ? void 0 : _b.filter((item) => {
+            // 筛选出列管理字段
+            const isVisible = columns === null || columns === void 0 ? void 0 : columns.findIndex((column) => (column === null || column === void 0 ? void 0 : column.key) === (item === null || item === void 0 ? void 0 : item.name));
+            return isVisible != -1;
+        });
+        // 没有数据标识默认加上数据标识字段
+        const isExitId = supportFields === null || supportFields === void 0 ? void 0 : supportFields.findIndex((item) => (item === null || item === void 0 ? void 0 : item.name) === '_id');
+        if (isExitId === -1) {
+            supportFields.push({
+                name: '_id',
+                title: '数据标识',
+                type: 'string',
+            });
+        }
+        return (isExportFileModalByApiVisible && (React.createElement(ExportFileModalByApi, { fields: getFieldsTypeName(supportFields), selectedKeysList: selectedKeys, visible: isExportFileModalByApiVisible, dbName: dbName, tableColumns: columns, where: getRecordParams === null || getRecordParams === void 0 ? void 0 : getRecordParams.where, whereList: whereList(), orderBy: getRecordParams === null || getRecordParams === void 0 ? void 0 : getRecordParams.orderBy, orderType: getRecordParams === null || getRecordParams === void 0 ? void 0 : getRecordParams.orderType, onCancel: () => {
+                setIsExportFileModalByApiVisible(false);
+            }, handleInOrOutRecordModealVisible: setIsInOrOutRecordModealVisible })));
+    };
+    /*
+      导入导出记录弹窗
+    */
+    const renderInOrOutRecordModeal = () => {
+        return (isInOrOutRecordModealVisible && (React.createElement(InOrOutRecordModeal, { visible: isInOrOutRecordModealVisible, dbName: dbName, onCancel: () => {
+                isInOrOutRecordModealVisible === 'import'
+                    ? setIsImportFileModalByApiVisible(true)
+                    : setIsExportFileModalByApiVisible(true);
+                setIsInOrOutRecordModealVisible(false);
+            } })));
+    };
+    return isH5 ? (React.createElement("div", { className: "_wedamodal-fn-data-filter-body-h5 adaptation-table" },
+        React.createElement("div", { className: "hiddenScrollbar adaptation-table__body", id: "listScrollableContainer" },
+            React.createElement("div", { className: "adaptation-table__actions" },
+                React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "_wedamodal-fn-data-filter _wedamodal-fn-data-filter--mobile" },
+                        tableAction && renderButtons(),
+                        tableSearch && filterType === 'filter' && (React.createElement(Icon, { style: { marginLeft: '10px', marginBottom: '8px' }, type: "filter", onClick: () => setState((prev) => ({
+                                filterCollapse: !prev.filterCollapse,
+                            })) }))),
+                    React.createElement(Justify, { className: "adaptation-table__all_check", left: renderH5CheckboxAll(), right: tableSearch && filterType === 'searchbox' && renderSearch() }))),
+            renderH5Table()),
+        filterType === 'filter' && renderH5Filter(),
+        renderFooter())) : (React.createElement(React.Fragment, null,
+        React.createElement(Table.ActionPanel, null,
+            React.createElement(Justify, { left: tableAction && renderButtons(), right: renderPCViewFilter() })),
+        filterType === 'filter' && (React.createElement("div", { className: "_wedamodal-fn-data-filter", style: { display: `${filterCollapse ? 'block' : 'none'}` } },
+            React.createElement(FilterFieldsPanel, { data: filterFields, getChooseList: getChooseList, fetchData: queryHandle }))),
+        React.createElement(Table, { className: `modal-table ${isLoading ? 'modal-table-loading' : ''}`, recordKey: "_id", records: isLoading ? [] : records, addons: tableAddons, columns: fields.length > 0 ? columns : [] }),
+        renderFooter(),
+        renderImportFileModalByApi(),
+        renderExportFileModalByApi(),
+        renderInOrOutRecordModeal()));
+};