@cloudbase/weda-ui 3.4.3 → 3.4.5

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

@@ -1,20 +1,24 @@
 import React, { useMemo, useEffect, useRef, useImperativeHandle, useState, } from 'react';
-import { Icon, Table, Button, Justify, Modal, message, TagSearchBox, useClassNames, Card, Row, Col, Checkbox, Text, LoadingTip, Dropdown, List, Radio, Collapse, Form, } from 'tea-component';
+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 { ImportFileModal } from './ImportFileModal';
+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 { useRequest } from '../../utils/hooks/useRequest';
 import { alertErrorMessage, isInIde, navigateToModelPage, usePlatform, } from '../../utils/platform';
-import { callWedaApi, appCloudGetWedaUserId } from '../../utils/tcb';
+import { callWedaApi, appCloudGetWedaUserId, getIsExitApi, } from '../../utils/tcb';
 import { exportData } from '../../utils/file';
 import { DataSource, getDataSourceByName, getPrimaryField, getDataSourceFieldsWithAuth, } from '../../utils/datasource';
-import './index.css';
+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;
 /**
  * 基础表格
@@ -39,19 +43,22 @@ export const BaseTable = (props) => {
     selectableBlockEvents, // 选区按钮事件对象
     filterType = 'searchbox', // 搜索方式
     filterFields, // 筛选字段
-    connectorParams = {}, // API查询入参
+    connectorParams: rawConnectorParams = {}, // API查询入参
     isModel = true, // 数据源类型
     connectorMethod, // API方法
     isOrderBy, rowColor, // 背景色，可以是字符串或方法的引用
     columnSets, // 动态列设置, array, 为 undefined 时表示不存在列管理，使用默认列值
     slots, // 动态插槽, object
     events, // 事件
-    outerRef, where, // 筛选条件
+    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);
@@ -61,15 +68,22 @@ export const BaseTable = (props) => {
     const { Margin } = useClassNames();
     const chooseList = useRef([]);
     const searchThrottleWait = useRef(0);
-    const emptyTextRef = useRef('');
-    const [visible, setVisible] = useState(false);
+    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, }, setState,] = useSetState({
+    datasourceTitle, records, total, }, setState,] = useSetState({
         sort: [],
         pageIndex: 1,
         pageSize: 10,
@@ -79,6 +93,8 @@ export const BaseTable = (props) => {
         filterCollapse: true,
         cardList: [],
         pageableInfo: undefined,
+        records: [],
+        total: 0,
     });
     React.useMemo(() => {
         if (!isModel) {
@@ -98,32 +114,41 @@ export const BaseTable = (props) => {
             if (Array.isArray(where) && (where === null || where === void 0 ? void 0 : where.length)) {
                 groupLogicList = where.map((item1, index1) => {
                     const item1Result = {};
-                    let item1ResultList = [];
+                    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)) {
-                        item1ResultList = item1 === null || item1 === void 0 ? void 0 : item1.logicData.map((item2, index2) => {
+                        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.value];
+                            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 = 'regex';
-                                val = `^((?!${val}).)*$`;
+                                rel = 'nsearch';
                             }
                             rule['$' + rel] = val;
                             item2Result[item2 === null || item2 === void 0 ? void 0 : item2.key] = rule;
-                            return item2Result;
+                            item1ResultList.push(item2Result);
                         });
                     }
                     item1Result['$' + secondGroupLogicTyp] = item1ResultList;
@@ -184,7 +209,7 @@ export const BaseTable = (props) => {
         });
         return data;
     };
-    const getViews = async () => {
+    const getViews = async (isControlAuth = true) => {
         try {
             const queryParams = {
                 action: 'DescribeRuntimeDataViewList',
@@ -214,12 +239,10 @@ export const BaseTable = (props) => {
                         }
                         return itemProperties;
                     });
-                    // 根据x-layoutShow显示隐藏
-                    item.fields = (_b = item.fields) === null || _b === void 0 ? void 0 : _b.filter((item) => item['x-layoutShow'] === true).sort((a, b) => a['x-index'] - b['x-index']);
                     // 筛选条件
                     if (item.SearchConfig) {
-                        item.SearchConfig = (_c = JSON.parse(item.SearchConfig)
-                            .condition) === null || _c === void 0 ? void 0 : _c.filter((item) => item.IsQuery).map((item) => {
+                        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' ||
@@ -242,17 +265,19 @@ export const BaseTable = (props) => {
                         };
                     }
                     // 排序
-                    const sortItem = (_d = item.fields) === null || _d === void 0 ? void 0 : _d.filter((item) => item['x-sortable'])[0];
+                    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-viewType']
-                    item.fields = (_e = getDataSourceFieldsWithAuth(item.fields, ResourceCheckInfos)) === null || _e === void 0 ? void 0 : _e.filter((value) => value.readWriteAuth === 'rw' ||
-                        value.readWriteAuth === 'r' ||
-                        (value === null || value === void 0 ? void 0 : value['x-viewType']));
+                    // 根据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({
@@ -338,34 +363,44 @@ export const BaseTable = (props) => {
     };
     // 获取视图列表
     useEffect(() => {
-        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) {
-                    getViewsCompatibleProvite();
+        const getViewsList = async () => {
+            if (!isModel)
+                return;
+            if (!isObjectEqual(selectedViewRef.current, selectedView)) {
+                if (selectedView.length === 0) {
+                    setState({ fields: showFields });
                 }
                 else {
-                    getViews();
+                    // 兼容私有环境，新接口不存在的情况，产品策略完善后移除
+                    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;
             }
-            selectedViewRef.current = selectedView;
-        }
+        };
+        getViewsList();
     }, [dbName, selectedView, isModel]);
     // 视图变化再次请求
     useEffect(() => {
         if (!selectedViewId)
             return;
         const selectedView = viewList.filter((item) => item.ViewId === selectedViewId)[0];
-        if (!selectedView)
+        if (!selectedView) {
+            setState({ isLoading: false });
             return;
-        setState({
-            fields: selectedView.fields,
-        });
+        }
+        setState({ fields: selectedView.fields });
         fetchData({ pageNo: pageIndex, pageSize });
     }, [selectedViewId]);
     useEffect(() => {
@@ -381,23 +416,21 @@ export const BaseTable = (props) => {
         }
     }, [where]);
     useEffect(() => {
-        try {
-            if (connectorParams &&
-                !isObjectEqual(connectorParamsRef.current, connectorParams)) {
-                fetchData({ pageNo: pageIndex, pageSize });
-                connectorParamsRef.current = JSON.parse(JSON.stringify(connectorParams));
-            }
-        }
-        catch (e) {
-            console.error(e);
+        if (connectorParams &&
+            !isObjectEqual(connectorParamsRef.current, connectorParams)) {
+            fetchData({ pageNo: pageIndex, pageSize });
+            connectorParamsRef.current = connectorParams;
         }
     }, [connectorParams]);
-    // 移动端和自定义APIs场景不支持导入功能，监听变化存到表格上下文中
+    // 移动端和APIs场景不支持导入功能，监听变化存到表格上下文中
     useEffect(() => {
         handleContext({ state: { isH5, isModel } });
     }, [isH5, isModel]);
+    useEffect(() => {
+        fetchData();
+    }, [sort, defaultOrderBy, defaultOrderType, isViewTable]);
     // 查询子系数据库
-    const { run: getChooseList } = useRequest(async (params = {}) => {
+    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)
@@ -426,202 +459,186 @@ export const BaseTable = (props) => {
             data: relData,
             size: ((_e = data === null || data === void 0 ? void 0 : data.records) === null || _e === void 0 ? void 0 : _e.length) || 0,
         };
-    }, { manual: true, throttleWait: searchThrottleWait.current });
+    };
     // 搜索和分页事件
-    const { loading, run: fetchData, data: { records = [], total = 0 } = {}, } = useRequest(async (params = {}) => {
-        var _a, _b, _c, _d;
-        // h5模式下，查询收起filter，清空选中状态
-        if (isH5) {
-            setState({ filterCollapse: false, selectedKeys: [] });
-        }
-        // H5端加载等待状态
-        setState({
-            isLoading: true,
-        });
-        const { searchValues, pageNo = 1, empty = true, pageSize = 10 } = params;
-        // 分页
-        const 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,
-                ];
+    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: [] });
             }
-            // 如果设计态存在排序条件
-            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;
+            // 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);
             }
-            // 存在排序属性配置
-            if (!isViewTable && defaultOrderBy && defaultOrderType) {
-                queryParams.orderBy = defaultOrderBy;
-                queryParams.orderType = defaultOrderType;
+            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 ((sort === null || sort === void 0 ? void 0 : sort.length) && sort[0].order) {
-                queryParams.orderBy = sort[0].by;
-                queryParams.orderType = sort[0].order;
+            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 = await datasource.getRecordList(queryParams);
-            events === null || events === void 0 ? void 0 : events.querySuccess({ data: Object.assign({}, data, queryParams) });
-        }
-        else {
-            // 搜索
-            if (defaultSearchValue !== undefined) {
-                queryParams.where = [...(defaultSearchValue || [])];
+            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] }));
+                }
             }
-            // 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;
+            else {
+                setState({ cardList: [] });
             }
-            const connectQueryParams = Object.assign({}, connectorParams, queryParams);
-            data = await datasource.getConnect(connectorMethod, connectQueryParams);
-            events === null || events === void 0 ? void 0 : events.querySuccess({
-                data: Object.assign({}, data, connectQueryParams),
+            handleContext({
+                state: { pageNo, pageSize, total: data.total },
+                records: data.records,
             });
-        }
-        data.records = (_c = data === null || data === void 0 ? void 0 : data.records) === null || _c === void 0 ? void 0 : _c.map((item) => {
-            const data = getPrimaryField(item);
-            return {
-                ...data,
-            };
-        });
-        // 关联模型字段
-        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;
+            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,
             });
         }
-        // 小屏列表更新
-        if ((data === null || data === void 0 ? void 0 : data.total) && data.records) {
-            // 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,
-        });
-        setState({ isLoading: false, searchValues, pageIndex: pageNo, pageSize });
-        emptyTextRef.current = '暂无数据';
-        return data || { total: 0, records: [] };
-    }, {
-        refreshDeps: [sort, defaultOrderBy, defaultOrderType, isViewTable],
-        onError: (e) => {
-            emptyTextRef.current = '暂无数据';
+        catch (e) {
             alertErrorMessage({ message: `加载数据错误 ${e.message}` });
-        },
-    });
-    // 删除数据事件
-    const { run: deleteRecord } = useRequest(async (keys) => {
-        if (!isModel) {
-            return alertErrorMessage({
-                message: '当前表格组件绑定了APIs，暂不支持进行数据删除',
-            });
+            setState({ isLoading: false });
         }
-        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")))),
-        });
-    }, {
-        manual: true,
-        onError: (e) => alertErrorMessage({ message: `删除数据失败: ${e.message}` }),
-    });
-    // 批量上传数据事件
-    const { run: dataBatchCreate } = useRequest(async (res) => {
+    };
+    // 删除数据事件
+    const deleteRecord = async (keys) => {
         try {
-            await datasource.batchCreateRecord(res.data);
-            if (res.cb) {
-                res.cb({ type: 'success' });
+            if (!isModel) {
+                return alertErrorMessage({
+                    message: '当前表格组件绑定了APIs，暂不支持进行数据删除',
+                });
             }
-            // 重新加载数据
-            fetchData();
-            message.success({ content: '导入数据成功' });
-        }
-        catch (error) {
-            if (res.cb) {
-                res.cb({ type: 'error', message: (error === null || error === void 0 ? void 0 : error.message) || '未知错误' });
+            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")))),
+            });
         }
-    }, {
-        manual: true,
-        onError: (e) => alertErrorMessage({ message: `导入数据错误: ${e.message}` }),
-    });
+        catch (e) {
+            alertErrorMessage({ message: `删除数据失败: ${e.message}` });
+        }
+    };
     useImperativeHandle(outerRef, () => ({
         methods: {
             deleteOne: (params) => {
@@ -635,14 +652,16 @@ export const BaseTable = (props) => {
             // 删除选中数据
             deleteSelected: () => deleteRecord(),
             // 导入
-            import: () => importHandle(),
+            import: () => importHandleByApi(),
             // 导出
             export: () => exportHandle(),
+            // 后端导出
+            exportOptionalMode: () => exportHandleByApi(),
             refresh: () => fetchData({ searchValues, pageSize, pageNo: 1 }),
             // 刷新表格(查看当前页数据)
             refreshKeepPage: () => fetchData({ searchValues, pageSize, pageNo: pageIndex }),
         },
-    }));
+    }), [pageIndex, pageSize, searchValues, selectedKeys, records]);
     // 表格选中事件
     const handleRowsSelect = (keys) => {
         if (events === null || events === void 0 ? void 0 : events.rowsSelect) {
@@ -659,6 +678,7 @@ export const BaseTable = (props) => {
             _records = [].concat(_records || records);
             const selectedRecords = _records.filter((_) => _keys.find((key) => _._id === key));
             events.onDataChange({
+                data: _records,
                 state: {
                     total,
                     pageNo: pageIndex,
@@ -678,7 +698,9 @@ export const BaseTable = (props) => {
             ? sortable({
                 value: sort,
                 columns: fields
-                    .filter((field) => field.type !== 'array' && field.type !== 'object')
+                    .filter((field) => field.type !== 'array' &&
+                    field.type !== 'object' &&
+                    !(field === null || field === void 0 ? void 0 : field.name.includes('@')))
                     .map((_) => _.name),
                 onChange: (value, context) => {
                     setState({
@@ -726,8 +748,8 @@ export const BaseTable = (props) => {
             }),
         // 加载、错误信息提示
         autotip({
-            isLoading: loading || !emptyTextRef.current,
-            emptyText: emptyTextRef.current,
+            isLoading,
+            emptyText: emptyText && (React.createElement(EmptyContent, { emptyText: emptyText, component: "table" })),
             // isError: Boolean(tableError),
             // isFound: Boolean(searchKeyword),
             onClear: () => {
@@ -782,8 +804,14 @@ export const BaseTable = (props) => {
             ? 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 exportFields = filterCustomFields({ fields, columnSets });
+    // 搜索框字段按列管理过滤
+    const searchFields = filterCustomFields({ fields, columnSets });
+    // 导出字段按列管理过滤，不过滤自定义列，自定义列只导出映射字段值
+    const exportFields = filterCustomFields({
+        fields,
+        columnSets,
+        isFilterGenre: true,
+    });
     // 表格 columns
     const columns = useMemo(() => {
         const defaultColumns = getColumns(fields, isH5);
@@ -818,12 +846,12 @@ export const BaseTable = (props) => {
                 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, { props: props, index: index, record: record, recordkey: recordkey }))),
+                    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, null,
+                            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'])
@@ -871,9 +899,9 @@ export const BaseTable = (props) => {
                 onSelectCancel === null || onSelectCancel === void 0 ? void 0 : onSelectCancel();
             } }, "\u53D6\u6D88"))));
     /**
-     * 表格导入方法
+     * 后端表格导入方法
      */
-    const importHandle = () => {
+    const importHandleByApi = () => {
         if (!isModel) {
             return alertErrorMessage({
                 message: '当前表格组件绑定了APIs，暂不支持进行数据导入',
@@ -884,31 +912,23 @@ export const BaseTable = (props) => {
                 message: '移动端暂不支持进行数据导入',
             });
         }
-        // 判断数据源是否含有不支持的导入的字段
-        const unsupportFields = fields.some((field) => {
-            if (((field === null || field === void 0 ? void 0 : field.type) === 'array' || (field === null || field === void 0 ? void 0 : field.type) === 'object') &&
-                field['x-required'])
-                return true;
-        });
-        if (unsupportFields) {
-            const modal = Modal.show({
-                size: 's',
-                children: (React.createElement(React.Fragment, null,
-                    React.createElement(Modal.Body, null,
-                        React.createElement(Modal.Message, { icon: "warning", message: "\u5F53\u524D\u8868\u683C\u6682\u4E0D\u652F\u6301\u6570\u636E\u5BFC\u5165", description: "\u5F53\u524D\u8868\u683C\u6709\u6570\u7EC4\u6216\u5BF9\u8C61\u3001\u5730\u7406\u4F4D\u7F6E\u5B57\u6BB5\u8981\u6C42\u5FC5\u586B\uFF0C\u6682\u4E0D\u652F\u6301\u5BFC\u5165\u76F8\u5173\u5B57\u6BB5\u6570\u636E" })),
-                    React.createElement(Modal.Footer, null,
-                        React.createElement(Button, { onClick: () => {
-                                modal.destroy();
-                            } }, "\u53D6\u6D88"),
-                        React.createElement(Button, { type: "primary", onClick: async () => {
-                                modal.destroy();
-                            } }, "\u786E\u8BA4")))),
-                onClose: () => modal.destroy(),
+        setIsImportFileModalByApiVisible(true);
+    };
+    /**
+     * 后端表格导出方法
+     */
+    const exportHandleByApi = () => {
+        if (!isModel) {
+            return alertErrorMessage({
+                message: '当前表格组件绑定了APIs，暂不支持进行数据导出',
             });
         }
-        else {
-            setVisible(true);
+        if (isH5) {
+            return alertErrorMessage({
+                message: '移动端暂不支持进行数据导出',
+            });
         }
+        setIsExportFileModalByApiVisible(true);
     };
     /**
      * 表格导出方法
@@ -939,7 +959,7 @@ export const BaseTable = (props) => {
         },
         del: () => deleteRecord(),
         export: () => exportHandle(),
-        import: () => importHandle(),
+        import: () => importHandleByApi(),
     };
     /**
      * 表格按钮选区默认事件参数
@@ -955,7 +975,7 @@ export const BaseTable = (props) => {
             return slotRender(slots.globalButton);
         }
         else if (enableGlobalButton === undefined) {
-            // 移动端和自定义APIs场景不支持导入功能
+            // 移动端和APIs场景不支持导入功能
             const buttonsList = isH5 || !isModel
                 ? buttons.filter((i) => i.action !== 'import')
                 : buttons;
@@ -967,7 +987,7 @@ export const BaseTable = (props) => {
      * 右上角搜索
      */
     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(exportFields), onClearButtonClick: () => fetchData(), onChange: (tags) => {
+        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;
@@ -1046,7 +1066,7 @@ export const BaseTable = (props) => {
                 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, null,
+                    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 ||
@@ -1087,7 +1107,8 @@ export const BaseTable = (props) => {
             return React.createElement(LoadingTip, { className: "adaptation-table__loading" });
         }
         if (cardList.length === 0 || !dbName) {
-            return (!loading && (React.createElement(Text, { theme: "text", align: "center", className: "adaptation-table__nodata" }, "\u6682\u65E0\u6570\u636E")));
+            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) => {
@@ -1128,23 +1149,70 @@ export const BaseTable = (props) => {
                     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 renderImportFileModal = () => {
-        const supportFields = fields.filter((field) => {
+    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 === null || field === void 0 ? void 0 : field.type) === 'array' ||
-                (field === null || field === void 0 ? void 0 : field.type) === 'object' ||
-                field['x-system'])
+            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;
         });
-        return (visible && (React.createElement(ImportFileModal, { fields: supportFields, visible: visible, datasourceTitle: datasourceTitle, dataBatchCreate: (data, cb) => {
-                dataBatchCreate({ data, cb });
-            }, onCancel: () => {
-                setVisible(false);
+        // 没有数据标识默认加上数据标识字段
+        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" },
@@ -1159,13 +1227,14 @@ export const BaseTable = (props) => {
                     React.createElement(Justify, { className: "adaptation-table__all_check", left: renderH5CheckboxAll(), right: tableSearch && filterType === 'searchbox' && renderSearch() }))),
             renderH5Table()),
         filterType === 'filter' && renderH5Filter(),
-        renderFooter(),
-        renderImportFileModal())) : (React.createElement(React.Fragment, null,
+        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 ${loading ? 'modal-table-loading' : ''}`, recordKey: "_id", records: loading ? [] : records, addons: tableAddons, columns: columns, hideHeader: !emptyTextRef.current }),
+        React.createElement(Table, { className: `modal-table ${isLoading ? 'modal-table-loading' : ''}`, recordKey: "_id", records: isLoading ? [] : records, addons: tableAddons, columns: fields.length > 0 ? columns : [] }),
         renderFooter(),
-        renderImportFileModal()));
+        renderImportFileModalByApi(),
+        renderExportFileModalByApi(),
+        renderInOrOutRecordModeal()));
 };