@teamix/pro 1.4.24 → 1.4.25-bugfix.2

package/es/table/index.js

@@ -1,42 +1,26 @@
-var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree"];
-
+var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestConfig", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps", "bindUrlProps", "bindUrl"],
+  _excluded2 = ["onChange"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { Table, Checkbox } from '@alicloudfe/components';
 import Pagination from './components/Pagination';
 import genProColumnToColumn from './utils/genProColumnToColumn';
-import { getGlobalConfig, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, usePrefixCls, getTestRequestData, getTestRequestParams } from '@teamix/utils';
+import { getGlobalConfig, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, usePrefixCls, getTestRequestData, getTestRequestParams, getTargetValue } from '@teamix/utils';
 import { ProSkeletonRaw as Skeleton } from '../skeleton';
 import './index.scss';
 import Layout from './components/Layout';
@@ -45,11 +29,14 @@ import getTableProps from './utils/getTableProps';
 import getTableSortIcons from './utils/getTableSortIcons';
 import useTableSelection from './utils/useTableSelection';
 import FullScreen from './components/ToolBar/Fullscreen';
-import EmptyContent from './components/EmptyContent';
+import { EmptyContent } from '@teamix/pro-field';
 import { ProActionGroup } from '../actions';
 import classNames from 'classnames';
 import ProPageContainer from '../page-container';
 import debounce from 'lodash.debounce';
+import CardView from './components/CardView';
+import { useUrlState } from '@teamix/hooks';
+import { getUrlStateFilter } from './utils/util';
 export * from './typing';
 var cls = usePrefixCls('teamix-pro-table');
 /**
@@ -57,225 +44,231 @@ var cls = usePrefixCls('teamix-pro-table');
  * @param columns 原生传入的 columns
  * @returns
  */
-
 var processColumns = function processColumns(columns, initialColumns) {
   var _getGlobalConfig;
-
   var globalFilterColumns = (_getGlobalConfig = getGlobalConfig('ProTable')) === null || _getGlobalConfig === void 0 ? void 0 : _getGlobalConfig.filterColumns;
   var filterColumns = columns.filter(function (item) {
-    return item.columnFilters !== false && (item === null || item === void 0 ? void 0 : item.hidden) !== true && (!globalFilterColumns || globalFilterColumns(item));
-  }); // 处理只剩一列批量选择的情况下宽度错乱问题
-
+    return item.columnFilters !== false && (item === null || item === void 0 ? void 0 : item.hidden) !== true && (!globalFilterColumns || globalFilterColumns(_objectSpread({}, item)));
+  });
+  // 处理只剩一列批量选择的情况下宽度错乱问题
   if (filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) {
     var _initialColumns$;
-
     if ((filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) === 1) {
       var _filterColumns$, _filterColumns$2;
-
       if ((_filterColumns$ = filterColumns[0]) === null || _filterColumns$ === void 0 ? void 0 : _filterColumns$.width) {
         delete filterColumns[0].width;
       }
-
       if ((_filterColumns$2 = filterColumns[0]) === null || _filterColumns$2 === void 0 ? void 0 : _filterColumns$2.lock) {
         filterColumns[0].lock = false;
       }
     } else if (((_initialColumns$ = initialColumns[0]) === null || _initialColumns$ === void 0 ? void 0 : _initialColumns$.columnFilters) !== false) {
       var _initialColumns$2, _initialColumns$3;
-
       if ((_initialColumns$2 = initialColumns[0]) === null || _initialColumns$2 === void 0 ? void 0 : _initialColumns$2.width) {
         filterColumns[0].width = initialColumns[0].width;
       }
-
       if ((_initialColumns$3 = initialColumns[0]) === null || _initialColumns$3 === void 0 ? void 0 : _initialColumns$3.lock) {
         filterColumns[0].lock = initialColumns[0].lock;
       }
     }
   }
-
   return filterColumns;
 };
 /** 默认请求翻页参数 */
-
-
 var globalPageKey = 'currentPage';
 var globalPageSizeKey = 'pageSize';
-
 var globalFormatSort = function globalFormatSort(sort) {
   if (Object.keys(sort).length > 0) {
     return {
       sort: sort
     };
   }
-
   return {};
 };
-
 var ProTable = function ProTable(props) {
-  var _rowSelection$selecte;
-
+  var _urlState$currentPage, _rowSelection$selecte;
   var header = props.header,
-      className = props.className,
-      tableClassName = props.tableClassName,
-      mainAction = props.mainAction,
-      extra = props.extra,
-      propsDataFilter = props.dataFilter,
-      afterDataFilter = props.afterDataFilter,
-      toolBar = props.toolBar,
-      propsColumns = props.columns,
-      useRowSelection = props.useRowSelection,
-      propsRowSelection = props.rowSelection,
-      onChangeRowSelection = props.onChangeRowSelection,
-      getRowSelection = props.getRowSelection,
-      primaryKey = props.primaryKey,
-      footerAction = props.footerAction,
-      footer = props.footer,
-      url = props.url,
-      pageKey = props.pageKey,
-      pageSizeKey = props.pageSizeKey,
-      _props$method = props.method,
-      method = _props$method === void 0 ? 'get' : _props$method,
-      _props$params = props.params,
-      propsParams = _props$params === void 0 ? {} : _props$params,
-      formatSort = props.formatSort,
-      _props$formatParams = props.formatParams,
-      formatParams = _props$formatParams === void 0 ? function (params) {
-    return params;
-  } : _props$formatParams,
-      formatResult = props.formatResult,
-      _props$requestWhenMou = props.requestWhenMount,
-      requestWhenMount = _props$requestWhenMou === void 0 ? true : _props$requestWhenMou,
-      _props$showPagination = props.showPagination,
-      showPagination = _props$showPagination === void 0 ? true : _props$showPagination,
-      _props$pageSizeList = props.pageSizeList,
-      pageSizeList = _props$pageSizeList === void 0 ? [5, 10, 20, 50, 100] : _props$pageSizeList,
-      responsivePaginationType = props.responsivePaginationType,
-      _props$showSkeleton = props.showSkeleton,
-      propsShowSkeleton = _props$showSkeleton === void 0 ? true : _props$showSkeleton,
-      _props$skeletonSize = props.skeletonSize,
-      skeletonSize = _props$skeletonSize === void 0 ? 5 : _props$skeletonSize,
-      propsActionRef = props.actionRef,
-      propsDataSource = props.dataSource,
-      _props$filterDebounce = props.filterDebounce,
-      filterDebounce = _props$filterDebounce === void 0 ? 300 : _props$filterDebounce,
-      _props$footerSuction = props.footerSuction,
-      footerSuction = _props$footerSuction === void 0 ? false : _props$footerSuction,
-      _props$autoRefresh = props.autoRefresh,
-      autoRefresh = _props$autoRefresh === void 0 ? function () {
-    return false;
-  } : _props$autoRefresh,
-      customRequest = props.customRequest,
-      _props$filterColumnTy = props.filterColumnType,
-      filterColumnType = _props$filterColumnTy === void 0 ? 'auto' : _props$filterColumnTy,
-      defaultFilterParams = props.defaultFilterParams,
-      _props$reserveSelecte = props.reserveSelectedRecords,
-      reserveSelectedRecords = _props$reserveSelecte === void 0 ? false : _props$reserveSelecte,
-      _props$size = props.size,
-      propsSize = _props$size === void 0 ? 'medium' : _props$size,
-      disableSelectAll = props.disableSelectAll,
-      context = props.context,
-      _props$fixedTableBody = props.fixedTableBody,
-      fixedTableBody = _props$fixedTableBody === void 0 ? false : _props$fixedTableBody,
-      isTree = props.isTree,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
+    className = props.className,
+    tableClassName = props.tableClassName,
+    mainAction = props.mainAction,
+    extra = props.extra,
+    propsDataFilter = props.dataFilter,
+    afterDataFilter = props.afterDataFilter,
+    toolBar = props.toolBar,
+    propsColumns = props.columns,
+    useRowSelection = props.useRowSelection,
+    propsRowSelection = props.rowSelection,
+    onChangeRowSelection = props.onChangeRowSelection,
+    getRowSelection = props.getRowSelection,
+    primaryKey = props.primaryKey,
+    footerAction = props.footerAction,
+    footer = props.footer,
+    url = props.url,
+    pageKey = props.pageKey,
+    pageSizeKey = props.pageSizeKey,
+    _props$method = props.method,
+    method = _props$method === void 0 ? 'get' : _props$method,
+    _props$params = props.params,
+    propsParams = _props$params === void 0 ? {} : _props$params,
+    formatSort = props.formatSort,
+    _props$formatParams = props.formatParams,
+    formatParams = _props$formatParams === void 0 ? function (params) {
+      return params;
+    } : _props$formatParams,
+    formatResult = props.formatResult,
+    requestConfig = props.requestConfig,
+    _props$requestWhenMou = props.requestWhenMount,
+    requestWhenMount = _props$requestWhenMou === void 0 ? true : _props$requestWhenMou,
+    _props$showPagination = props.showPagination,
+    showPagination = _props$showPagination === void 0 ? true : _props$showPagination,
+    _props$pageSizeList = props.pageSizeList,
+    pageSizeList = _props$pageSizeList === void 0 ? [5, 10, 20, 50, 100] : _props$pageSizeList,
+    responsivePaginationType = props.responsivePaginationType,
+    _props$showSkeleton = props.showSkeleton,
+    propsShowSkeleton = _props$showSkeleton === void 0 ? true : _props$showSkeleton,
+    _props$skeletonSize = props.skeletonSize,
+    skeletonSize = _props$skeletonSize === void 0 ? 5 : _props$skeletonSize,
+    propsActionRef = props.actionRef,
+    propsDataSource = props.dataSource,
+    _props$filterDebounce = props.filterDebounce,
+    filterDebounce = _props$filterDebounce === void 0 ? 300 : _props$filterDebounce,
+    _props$footerSuction = props.footerSuction,
+    footerSuction = _props$footerSuction === void 0 ? false : _props$footerSuction,
+    _props$autoRefresh = props.autoRefresh,
+    autoRefresh = _props$autoRefresh === void 0 ? false : _props$autoRefresh,
+    autoRefreshProps = props.autoRefreshProps,
+    customRequest = props.customRequest,
+    _props$filterColumnTy = props.filterColumnType,
+    filterColumnType = _props$filterColumnTy === void 0 ? 'auto' : _props$filterColumnTy,
+    defaultFilterParams = props.defaultFilterParams,
+    _props$reserveSelecte = props.reserveSelectedRecords,
+    reserveSelectedRecords = _props$reserveSelecte === void 0 ? false : _props$reserveSelecte,
+    _props$size = props.size,
+    propsSize = _props$size === void 0 ? 'medium' : _props$size,
+    disableSelectAll = props.disableSelectAll,
+    context = props.context,
+    _props$fixedTableBody = props.fixedTableBody,
+    fixedTableBody = _props$fixedTableBody === void 0 ? false : _props$fixedTableBody,
+    isTree = props.isTree,
+    _props$toolBarAutoWid = props.toolBarAutoWidth,
+    toolBarAutoWidth = _props$toolBarAutoWid === void 0 ? true : _props$toolBarAutoWid,
+    dataTeamixSpm = props['data-teamix-spm'],
+    _props$switchCardView = props.switchCardView,
+    switchCardView = _props$switchCardView === void 0 ? false : _props$switchCardView,
+    cardViewProps = props.cardViewProps,
+    _props$defaultView = props.defaultView,
+    defaultView = _props$defaultView === void 0 ? 'table' : _props$defaultView,
+    emptyProps = props.emptyProps,
+    bindUrlProps = props.bindUrlProps,
+    bindUrl = props.bindUrl,
+    otherProps = _objectWithoutProperties(props, _excluded);
   var targetPageKey = pageKey || globalPageKey;
   var targetPageSizeKey = pageSizeKey || globalPageSizeKey;
   var targetFormatSort = formatSort || globalFormatSort;
-
-  var _useState = useState(1),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentPage = _useState2[0],
-      setCurrentPage = _useState2[1];
-
-  var _useState3 = useState(props.pageSize || 10),
-      _useState4 = _slicedToArray(_useState3, 2),
-      pageSize = _useState4[0],
-      setPageSize = _useState4[1];
-
+  var _ref = bindUrl ? useUrlState() : [],
+    _ref2 = _slicedToArray(_ref, 2),
+    urlState = _ref2[0],
+    setUrlState = _ref2[1];
+  var _useState = useState((_urlState$currentPage = urlState === null || urlState === void 0 ? void 0 : urlState.currentPage) !== null && _urlState$currentPage !== void 0 ? _urlState$currentPage : 1),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  var _useState3 = useState((urlState === null || urlState === void 0 ? void 0 : urlState.pageSize) || props.pageSize || 10),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageSize = _useState4[0],
+    setPageSize = _useState4[1];
   var _useState5 = useState(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      total = _useState6[0],
-      setTotal = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    total = _useState6[0],
+    setTotal = _useState6[1];
   var _useState7 = useState(propsDataSource !== null && propsDataSource !== void 0 ? propsDataSource : []),
-      _useState8 = _slicedToArray(_useState7, 2),
-      data = _useState8[0],
-      setData = _useState8[1];
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    data = _useState8[0],
+    _setData = _useState8[1];
   var _useState9 = useState(props.sort || {}),
-      _useState10 = _slicedToArray(_useState9, 2),
-      sort = _useState10[0],
-      setSort = _useState10[1];
-
-  var _useState11 = useState(!propsDataSource && requestWhenMount && propsShowSkeleton),
-      _useState12 = _slicedToArray(_useState11, 2),
-      showSkeleton = _useState12[0],
-      setShowSkeleton = _useState12[1]; // 首次加载，渲染骨架屏
-
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    sort = _useState10[0],
+    setSort = _useState10[1];
+  var _useState11 = useState(!propsDataSource && requestWhenMount && propsShowSkeleton && !!url),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showSkeleton = _useState12[0],
+    setShowSkeleton = _useState12[1]; // 首次加载，渲染骨架屏
   var skeletonDataSource = new Array(skeletonSize).fill({});
-  var requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data'; // 如果使用 customRequest 的话，内置 loading
-
+  var requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data';
+  // 如果使用 customRequest 的话，内置 loading
   var _useState13 = useState(requestWhenMount),
-      _useState14 = _slicedToArray(_useState13, 2),
-      customTableLoading = _useState14[0],
-      setCustomTableLoading = _useState14[1];
-
+    _useState14 = _slicedToArray(_useState13, 2),
+    customTableLoading = _useState14[0],
+    setCustomTableLoading = _useState14[1];
   var tableRef = useRef(null);
-  var actionRef = useRef(); // 传给 table 的过滤后的 columns
-
+  var actionRef = useRef();
+  // 传给 table 的过滤后的 columns
   var _useState15 = useState(processColumns(propsColumns !== null && propsColumns !== void 0 ? propsColumns : [], propsColumns)),
-      _useState16 = _slicedToArray(_useState15, 2),
-      filteredColumns = _useState16[0],
-      setFilteredColumns = _useState16[1];
-
+    _useState16 = _slicedToArray(_useState15, 2),
+    filteredColumns = _useState16[0],
+    setFilteredColumns = _useState16[1];
   var _useState17 = useState(propsSize),
-      _useState18 = _slicedToArray(_useState17, 2),
-      size = _useState18[0],
-      _setSize = _useState18[1];
-
+    _useState18 = _slicedToArray(_useState17, 2),
+    size = _useState18[0],
+    _setSize = _useState18[1];
   var _useState19 = useState(true),
-      _useState20 = _slicedToArray(_useState19, 2),
-      showLoading = _useState20[0],
-      setShowLoading = _useState20[1]; // 存储能够被 on 监听到的 ProTable 状态
+    _useState20 = _slicedToArray(_useState19, 2),
+    showLoading = _useState20[0],
+    setShowLoading = _useState20[1];
+  // 表格内部用作存储的 Ref，标识 Table 组件是否被第一次渲染。用作 useUrlState filter 第一次渲染时使用 state 数据请求
+  var dataRef = useRef({
+    flag: true
+  });
+  useEffect(function () {
+    if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.pagination) !== false) {
+      if ((urlState === null || urlState === void 0 ? void 0 : urlState.currentPage) !== currentPage) {
+        setUrlState === null || setUrlState === void 0 ? void 0 : setUrlState({
+          currentPage: currentPage
+        });
+      }
+      if ((urlState === null || urlState === void 0 ? void 0 : urlState.pageSize) !== pageSize) {
+        setUrlState === null || setUrlState === void 0 ? void 0 : setUrlState({
+          pageSize: pageSize
+        });
+      }
+    }
+  }, [currentPage, pageSize, urlState]);
+  // 存储能够被 on 监听到的 ProTable 状态
   // 因为只做存储用。不需要更新视图以及需要同步更改。所以不使用 setState 更新
-
-
   var _useState21 = useState({
-    fullScreenState: false,
-    filterRules: {},
-    filterColumns: []
-  }),
-      _useState22 = _slicedToArray(_useState21, 1),
-      actionRefState = _useState22[0]; // 存储 on 监听事件
-
-
+      fullScreenState: false,
+      filterRules: {},
+      filterColumns: []
+    }),
+    _useState22 = _slicedToArray(_useState21, 1),
+    actionRefState = _useState22[0];
+  // 存储 on 监听事件
   var _useState23 = useState({
-    fullScreenState: {}
-  }),
-      _useState24 = _slicedToArray(_useState23, 1),
-      actionRefCallback = _useState24[0]; // 存储定时器 id
-
-
+      fullScreenState: {}
+    }),
+    _useState24 = _slicedToArray(_useState23, 1),
+    actionRefCallback = _useState24[0];
+  // 存储定时器 id
   var autoRefreshTimerRef = useRef();
   var onResize = null;
+  // useEffect(() => {
+  //   setShowSkeleton(propsShowSkeleton);
+  // }, [propsShowSkeleton]);
+  // useEffect(() => {
+  //   console.log('传入的props变化', propsLoading);
+  //   setShowLoading(propsLoading ?? false);
+  // }, [propsLoading]);
   useEffect(function () {
     var _propsDataFilter$sche, _propsDataFilter$sche2;
-
     getHeaderHeight(fullscreenState);
     getFooterSuctionState();
-
     if (window.onresize) {
       onResize = window.onresize;
       window.onresize = debounce(function () {
         var _onResize;
-
         (_onResize = onResize) === null || _onResize === void 0 ? void 0 : _onResize();
-
         if (footerSuction) {
           getFooterSuctionState();
         }
-
         if (fixedTableBody) {
           getHeaderHeight(fullscreenState);
         }
@@ -285,44 +278,35 @@ var ProTable = function ProTable(props) {
         if (footerSuction) {
           getFooterSuctionState();
         }
-
         if (fixedTableBody) {
           getHeaderHeight(fullscreenState);
         }
       }, 500);
-    } // 如果不传 dataFilter，则在这里初始化请求
-
-
+    }
+    // 如果不传 dataFilter，则在这里初始化请求
     var hasDataFilter = (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche = propsDataFilter.schema) === null || _propsDataFilter$sche === void 0 ? void 0 : _propsDataFilter$sche.length) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche2 = propsDataFilter.schema) === null || _propsDataFilter$sche2 === void 0 ? void 0 : _propsDataFilter$sche2.length) > 0;
-
     if (requestWhenMount && !hasDataFilter) {
       processDefaultFilter(propsColumns, actionRef, defaultFilterParams);
-
       _request();
     }
-
     return function () {
       if (onResize) {
         window.onresize = onResize;
       } else {
         window.onresize = null;
       }
-
       if (autoRefreshTimerRef.current) {
         clearTimeout(autoRefreshTimerRef.current);
       }
-
       actionRef.current = undefined;
     };
-  }, []); // 获取header高度，用作全屏吸底吸底高度计算以及固定body高度计算（滚动条在底部）
-
+  }, []);
+  // 获取header高度，用作全屏吸底吸底高度计算以及固定body高度计算（滚动条在底部）
   var getHeaderHeight = function getHeaderHeight(isFullscreen, offset) {
     var _tableDom$getElements, _tableDom$getElements2, _document$querySelect, _document$querySelect2, _document$querySelect3;
-
     if (!fixedTableBody) {
       return;
     }
-
     var tableDom = tableRef.current;
     var headerDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements = tableDom.getElementsByClassName('teamix-pro-table-layout')) === null || _tableDom$getElements === void 0 ? void 0 : _tableDom$getElements[0];
     var basePrefix = usePrefixCls('', {
@@ -331,95 +315,90 @@ var ProTable = function ProTable(props) {
     var tableHeaderDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements2 = tableDom.getElementsByClassName(basePrefix('table-header-inner'))) === null || _tableDom$getElements2 === void 0 ? void 0 : _tableDom$getElements2[0];
     var pageContainerDom = document.querySelector('.teamix-pro-page-container-header');
     var teamixNavDom = document.querySelector('.teamix-nav-console');
-    var footerRowSelectionDom = document.querySelector('.teamix-pro-page-container-footer'); // 这边不能直接取 next-table-body
-
+    var footerRowSelectionDom = document.querySelector('.teamix-pro-page-container-footer');
+    // 这边不能直接取 next-table-body
     var tableBodyDom = (_document$querySelect = document.querySelector('.teamix-pro-table')) === null || _document$querySelect === void 0 ? void 0 : (_document$querySelect2 = _document$querySelect.getElementsByTagName('table')) === null || _document$querySelect2 === void 0 ? void 0 : (_document$querySelect3 = _document$querySelect2[1]) === null || _document$querySelect3 === void 0 ? void 0 : _document$querySelect3.parentNode;
     var headerFixedTopSectionDom = document.querySelector('.teamix-pro-page-container-fixed-top');
     setTimeout(function () {
       var _headerDom$offsetHeig, _tableHeaderDom$offse;
-
-      var headerHeight = (_headerDom$offsetHeig = headerDom === null || headerDom === void 0 ? void 0 : headerDom.offsetHeight) !== null && _headerDom$offsetHeig !== void 0 ? _headerDom$offsetHeig : 0; // table表头默认一行。即42px
-
+      var headerHeight = (_headerDom$offsetHeig = headerDom === null || headerDom === void 0 ? void 0 : headerDom.offsetHeight) !== null && _headerDom$offsetHeig !== void 0 ? _headerDom$offsetHeig : 0;
+      // table表头默认一行。即42px
       var tableHeaderHeight = (_tableHeaderDom$offse = tableHeaderDom === null || tableHeaderDom === void 0 ? void 0 : tableHeaderDom.offsetHeight) !== null && _tableHeaderDom$offse !== void 0 ? _tableHeaderDom$offse : 42;
-      var footerRowSelectionHeight = (footerRowSelectionDom === null || footerRowSelectionDom === void 0 ? void 0 : footerRowSelectionDom.offsetHeight) || 50; // 固定表格主体高度
-
+      var footerRowSelectionHeight = (footerRowSelectionDom === null || footerRowSelectionDom === void 0 ? void 0 : footerRowSelectionDom.offsetHeight) || 50;
+      // 固定表格主体高度
       if (fixedTableBody && !isFullscreen) {
         var _pageContainerDom$off, _teamixNavDom$offsetH;
-
         // 16px 为 padding
         var pageHeaderHeight = ((_pageContainerDom$off = pageContainerDom === null || pageContainerDom === void 0 ? void 0 : pageContainerDom.offsetHeight) !== null && _pageContainerDom$off !== void 0 ? _pageContainerDom$off : 0) + 16;
-        var teamixNavHeight = (_teamixNavDom$offsetH = teamixNavDom === null || teamixNavDom === void 0 ? void 0 : teamixNavDom.offsetHeight) !== null && _teamixNavDom$offsetH !== void 0 ? _teamixNavDom$offsetH : 0; // 1 为预留值，js无法取出精确高度，会被四舍五入
-
+        var teamixNavHeight = (_teamixNavDom$offsetH = teamixNavDom === null || teamixNavDom === void 0 ? void 0 : teamixNavDom.offsetHeight) !== null && _teamixNavDom$offsetH !== void 0 ? _teamixNavDom$offsetH : 0;
+        // 1 为预留值，js无法取出精确高度，会被四舍五入
         var offsetHeaderHeight = headerHeight + tableHeaderHeight + pageHeaderHeight + teamixNavHeight + footerRowSelectionHeight + 16 + (offset !== null && offset !== void 0 ? offset : 0) + 1;
-
-        if (tableBodyDom.clientHeight < tableBodyDom.scrollHeight) {
+        if (switchViewState === 'card') {
+          offsetHeaderHeight = offsetHeaderHeight - tableHeaderHeight - footerRowSelectionHeight;
+        }
+        if ((tableBodyDom === null || tableBodyDom === void 0 ? void 0 : tableBodyDom.clientHeight) < (tableBodyDom === null || tableBodyDom === void 0 ? void 0 : tableBodyDom.scrollHeight)) {
           setFooterSuctionState(true);
         } else {
           setFooterSuctionState(false);
-        } // 如果有切换区tab，那么重新计算
-
-
+        }
+        // 如果有切换区tab，那么重新计算
         if (headerFixedTopSectionDom.clientHeight) {
           var _headerFixedTopSectio;
-
-          var headerFixedTopSectionHeight = (_headerFixedTopSectio = headerFixedTopSectionDom.clientHeight) !== null && _headerFixedTopSectio !== void 0 ? _headerFixedTopSectio : 0; // const clientTableBodyHeight =
+          var headerFixedTopSectionHeight = (_headerFixedTopSectio = headerFixedTopSectionDom.clientHeight) !== null && _headerFixedTopSectio !== void 0 ? _headerFixedTopSectio : 0;
+          // const clientTableBodyHeight =
           //   document.body.clientHeight - offsetHeaderHeight;
-
           setHeaderHeight(headerFixedTopSectionHeight + teamixNavHeight + footerRowSelectionHeight + tableHeaderHeight + 1);
           return;
         }
-
         setHeaderHeight(offsetHeaderHeight);
       } else {
         // 24px 为 padding
         setHeaderHeight(headerHeight + tableHeaderHeight + footerRowSelectionHeight + 24 + (offset !== null && offset !== void 0 ? offset : 0) + 1);
       }
     }, 50);
-  }; // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
-
-
+  };
+  // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
   var _useState25 = useState(0),
-      _useState26 = _slicedToArray(_useState25, 2),
-      headerHeight = _useState26[0],
-      setHeaderHeight = _useState26[1]; // 全屏显示 className
-
-
+    _useState26 = _slicedToArray(_useState25, 2),
+    headerHeight = _useState26[0],
+    setHeaderHeight = _useState26[1];
+  // 全屏显示 className
   var _useState27 = useState(false),
-      _useState28 = _slicedToArray(_useState27, 2),
-      fullscreenState = _useState28[0],
-      setFullscreenState = _useState28[1]; // 切换全屏搜索开关
-
-
+    _useState28 = _slicedToArray(_useState27, 2),
+    fullscreenState = _useState28[0],
+    setFullscreenState = _useState28[1];
+  // 切换视角
+  var _useState29 = useState(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+    _useState30 = _slicedToArray(_useState29, 2),
+    switchViewState = _useState30[0],
+    setSwitchViewState = _useState30[1];
+  // 切换全屏搜索开关
   var filterEnableRef = useRef({
     fullscreen: false,
     normal: true
-  }); // 非全屏状态下的
-
+  });
+  // 非全屏状态下的
   var normalDataFilterFormRef = useRef();
   var fullscreenDataFilterFormRef = useRef();
   var normalDataFilterForm = normalDataFilterFormRef.current;
-  var fullscreenDataFilterForm = fullscreenDataFilterFormRef.current; // 传给 QueryFilter 的 formRef
-
-  var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef; // let dataFilterForm = dataFilterFormRef.current;
+  var fullscreenDataFilterForm = fullscreenDataFilterFormRef.current;
+  // 传给 QueryFilter 的 formRef
+  var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef;
+  // let dataFilterForm = dataFilterFormRef.current;
   // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
-
-  var _useState29 = useState(false),
-      _useState30 = _slicedToArray(_useState29, 2),
-      footerSuctionState = _useState30[0],
-      setFooterSuctionState = _useState30[1]; // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
-
-
+  var _useState31 = useState(false),
+    _useState32 = _slicedToArray(_useState31, 2),
+    footerSuctionState = _useState32[0],
+    setFooterSuctionState = _useState32[1];
+  // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
   var getFooterSuctionState = function getFooterSuctionState() {
     if (!footerSuction) {
       return;
     }
-
     var containerDom = document.querySelector('.teamix-pro-page-container-scroll-container');
-
     if (containerDom) {
       var offsetHeight = containerDom.offsetHeight;
       var scrollHeight = containerDom.scrollHeight;
-
       if (offsetHeight < scrollHeight) {
         setFooterSuctionState(true);
       } else {
@@ -431,35 +410,28 @@ var ProTable = function ProTable(props) {
         setFooterSuctionState(true);
       }
     }
-  }; // rowSelection 相关
-
-
+  };
+  // rowSelection 相关
   var rowSelectionHook = useTableSelection(_objectSpread(_objectSpread({}, propsRowSelection), {}, {
     // 当初始出现骨架屏的时候，不可选择
     getProps: function getProps(record, index) {
       var result = {};
-
       if (propsRowSelection === null || propsRowSelection === void 0 ? void 0 : propsRowSelection.getProps) {
         result = propsRowSelection.getProps(record, index);
       }
-
       if (showSkeleton && result) {
         result.disabled = true;
       }
-
       return result;
     },
     titleProps: function titleProps() {
       var result = {};
-
       if (propsRowSelection === null || propsRowSelection === void 0 ? void 0 : propsRowSelection.titleProps) {
         result = propsRowSelection.titleProps();
       }
-
       if (showSkeleton || disableSelectAll) {
         result.disabled = true;
       }
-
       return result;
     },
     onChange: onChangeRowSelection
@@ -468,21 +440,19 @@ var ProTable = function ProTable(props) {
   var selectedCount = (rowSelection === null || rowSelection === void 0 ? void 0 : (_rowSelection$selecte = rowSelection.selectedRowKeys) === null || _rowSelection$selecte === void 0 ? void 0 : _rowSelection$selecte.length) || 0;
   useEffect(function () {
     getRowSelection && getRowSelection(rowSelectionHook);
-  }, [rowSelectionHook]); // 获取 table 左下角 checkbox 属性
-
+  }, [rowSelectionHook]);
+  // 获取 table 左下角 checkbox 属性
   function getCheckAllProps() {
     var _rowSelection$onChang = rowSelection.onChange,
-        _onChange = _rowSelection$onChang === void 0 ? function () {} : _rowSelection$onChang,
-        _rowSelection$onSelec = rowSelection.onSelectAll,
-        onSelectAll = _rowSelection$onSelec === void 0 ? function () {} : _rowSelection$onSelec,
-        _rowSelection$selecte2 = rowSelection.selectedRowKeys,
-        selectedRowKeys = _rowSelection$selecte2 === void 0 ? [] : _rowSelection$selecte2,
-        getProps = rowSelection.getProps;
-
+      _onChange = _rowSelection$onChang === void 0 ? function () {} : _rowSelection$onChang,
+      _rowSelection$onSelec = rowSelection.onSelectAll,
+      onSelectAll = _rowSelection$onSelec === void 0 ? function () {} : _rowSelection$onSelec,
+      _rowSelection$selecte2 = rowSelection.selectedRowKeys,
+      selectedRowKeys = _rowSelection$selecte2 === void 0 ? [] : _rowSelection$selecte2,
+      getProps = rowSelection.getProps;
     var dataSource = data;
     var allRowKeys = dataSource.filter(function (d, i) {
       var _getProps;
-
       return getProps ? !((_getProps = getProps(d, i)) === null || _getProps === void 0 ? void 0 : _getProps.disabled) : true;
     }).map(function (d) {
       return getDeepValue(primaryKey || 'id', d);
@@ -498,15 +468,12 @@ var ProTable = function ProTable(props) {
           result.push.apply(result, _toConsumableArray(allRowKeys.filter(function (k) {
             return !selectedRowKeys.includes(k);
           })));
-
           _onChange(result, dataSource);
-
           onSelectAll(check, dataSource);
         } else {
           _onChange(selectedRowKeys.filter(function (k) {
             return !allRowKeys.includes(k);
           }), []);
-
           onSelectAll(check, []);
         }
       },
@@ -514,7 +481,6 @@ var ProTable = function ProTable(props) {
       checked: nowCheckedKeys.length !== 0 && nowCheckedKeys.length === allRowKeys.length
     };
   }
-
   useEffect(function () {
     if (typeof propsActionRef === 'function' && actionRef.current) {
       // @ts-ignore
@@ -523,18 +489,17 @@ var ProTable = function ProTable(props) {
   }, [propsActionRef]);
   useEffect(function () {
     var _actionRef$current, _actionRef$current$se;
-
     var columns = processColumns(propsColumns !== null && propsColumns !== void 0 ? propsColumns : [], propsColumns);
     setFilteredColumns(columns);
     (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setState) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, 'filterColumns', columns);
-  }, [propsColumns]); // dataSource 受控
-
+  }, [propsColumns]);
+  // dataSource 受控
   useEffect(function () {
     if (propsDataSource) {
-      setData(propsDataSource);
+      _setData(propsDataSource);
     }
-  }, [propsDataSource]); // 初始化 ActionRef。
-
+  }, [propsDataSource]);
+  // 初始化 ActionRef。
   initActionRef(actionRef, {
     getState: function getState() {
       return actionRefState;
@@ -550,32 +515,28 @@ var ProTable = function ProTable(props) {
       if (!actionRefCallback[state]) {
         actionRefCallback[state] = {};
       }
-
       actionRefCallback[state][name] = fun;
     },
     off: function off(name) {
-      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-            k = _ref2[0],
-            v = _ref2[1];
-
-        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 1),
-              k = _ref4[0];
-
+      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          k = _ref4[0],
+          v = _ref4[1];
+        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 1),
+            k = _ref6[0];
           return k !== name;
         }));
         return [k, filterV];
       }));
     }
-  }); // 绑定 Actions
-
+  });
+  // 绑定 Actions
   useActionType(actionRef, {
     fullScreen: function fullScreen() {
       var _actionRef$current2, _actionRef$current2$s;
-
-      var state = !fullscreenState; // 全屏时需要重新计算header高度
-
+      var state = !fullscreenState;
+      // 全屏时需要重新计算header高度
       setFullscreenState(state);
       getHeaderHeight(state);
       actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$s = _actionRef$current2.setState) === null || _actionRef$current2$s === void 0 ? void 0 : _actionRef$current2$s.call(_actionRef$current2, 'fullScreenState', state);
@@ -583,12 +544,10 @@ var ProTable = function ProTable(props) {
     },
     setColumn: function setColumn(newColumns) {
       var _actionRef$current3, _actionRef$current3$s;
-
       var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var columns = processColumns(newColumns, propsColumns);
       setFilteredColumns(columns);
       (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$s = _actionRef$current3.setState) === null || _actionRef$current3$s === void 0 ? void 0 : _actionRef$current3$s.call(_actionRef$current3, 'filterColumns', columns);
-
       if (update) {
         emit('refreshFilterState', newColumns);
       }
@@ -598,34 +557,46 @@ var ProTable = function ProTable(props) {
       _setSize(mode);
     },
     refresh: function refresh(params) {
-      return _request(params);
+      // card视角的刷新等于重新请求
+      if (switchViewState === 'card' && !propsDataSource) {
+        setCurrentPage(1);
+        _request(_objectSpread(_objectSpread({}, params), {}, _defineProperty({}, targetPageKey, 1)), undefined, undefined, true);
+        setShowSkeleton(true);
+      } else {
+        _request(params);
+      }
     },
     request: function request(params) {
       // 如果请求中还有翻页相关信息，需要自动设置到指定页
       if (params === null || params === void 0 ? void 0 : params[targetPageKey]) {
         setCurrentPage(params[targetPageKey]);
       }
-
       if (params === null || params === void 0 ? void 0 : params[targetPageSizeKey]) {
         setPageSize(params[targetPageSizeKey]);
       }
-
       _request(params);
     },
     reset: function reset() {
       var _actionRef$current4, _actionRef$current4$s, _dataFilterFormRef$cu;
-
-      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset()); // 清空列过滤参数
-
+      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
+      // 清空列过滤参数
       (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$s = _actionRef$current4.setFilterRules) === null || _actionRef$current4$s === void 0 ? void 0 : _actionRef$current4$s.call(_actionRef$current4, {});
       (_dataFilterFormRef$cu = dataFilterFormRef.current) === null || _dataFilterFormRef$cu === void 0 ? void 0 : _dataFilterFormRef$cu.reset();
       setCurrentPage(1);
-
-      _request(_defineProperty({}, targetPageKey, 1));
+      _request(_defineProperty({}, targetPageKey, 1), undefined, undefined, true);
     },
     resetPage: function resetPage() {
       setCurrentPage(1);
     },
+    nextPage: function nextPage() {
+      var _props$paginationProp, _props$paginationProp2;
+      var newCurrentPage = currentPage + 1;
+      setCurrentPage(newCurrentPage);
+      props === null || props === void 0 ? void 0 : (_props$paginationProp = props.paginationProps) === null || _props$paginationProp === void 0 ? void 0 : (_props$paginationProp2 = _props$paginationProp.onChange) === null || _props$paginationProp2 === void 0 ? void 0 : _props$paginationProp2.call(_props$paginationProp, newCurrentPage, {});
+      if (!propsDataSource) {
+        _request(_defineProperty({}, targetPageKey, newCurrentPage));
+      }
+    },
     rowSelection: rowSelection,
     clearRowSelection: function clearRowSelection() {
       rowSelectionHook.setSelectedRowKeys([]);
@@ -645,35 +616,84 @@ var ProTable = function ProTable(props) {
     normalDataFilterForm: normalDataFilterForm,
     fullscreenDataFilterForm: fullscreenDataFilterForm,
     filterEnableRef: filterEnableRef,
+    setData: function setData(data) {
+      _setData(data);
+    },
     resetTableMaxBodyHeight: function resetTableMaxBodyHeight(offset) {
       getHeaderHeight(fullscreenState, offset);
+    },
+    switchView: function switchView(view) {
+      setSwitchViewState(view);
+      if (!propsDataSource) {
+        setCurrentPage(1);
+      }
+      if (view === 'table') {
+        setPageSize(pageSize !== null && pageSize !== void 0 ? pageSize : 20);
+        if (!propsDataSource) {
+          var _request4;
+          setShowSkeleton(true);
+          _request((_request4 = {}, _defineProperty(_request4, targetPageSizeKey, pageSize !== null && pageSize !== void 0 ? pageSize : 20), _defineProperty(_request4, targetPageKey, 1), _request4));
+        }
+      }
+      if (view === 'card') {
+        var _cardViewProps$pageSi;
+        setPageSize((_cardViewProps$pageSi = cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.pageSize) !== null && _cardViewProps$pageSi !== void 0 ? _cardViewProps$pageSi : 12);
+        if (!propsDataSource) {
+          var _cardViewProps$pageSi2, _request5;
+          setShowSkeleton(true);
+          _request((_request5 = {}, _defineProperty(_request5, targetPageSizeKey, (_cardViewProps$pageSi2 = cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.pageSize) !== null && _cardViewProps$pageSi2 !== void 0 ? _cardViewProps$pageSi2 : 12), _defineProperty(_request5, targetPageKey, 1), _request5));
+        }
+      }
+      getHeaderHeight(fullscreenState);
+    },
+    setAutoRefreshTimers: function setAutoRefreshTimers(timers) {
+      clearTimeout(autoRefreshTimerRef.current);
+      autoRefreshTimerRef.current = null;
+      autoRefreshTimerRef.current = setTimeout(function () {
+        var _actionRef$current5, _actionRef$current5$r;
+        (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$r = _actionRef$current5.refresh) === null || _actionRef$current5$r === void 0 ? void 0 : _actionRef$current5$r.call(_actionRef$current5);
+      }, timers);
+      emit('PRO_TABLE_REFRESH_TIMER_FLAG', timers);
+    },
+    clearAutoRefreshTimers: function clearAutoRefreshTimers() {
+      clearTimeout(autoRefreshTimerRef.current);
+      autoRefreshTimerRef.current = null;
     }
-  }); // 将 Actions 绑定到传入的 propsActionRef 中
-
+  });
+  // 将 Actions 绑定到传入的 propsActionRef 中
   if (propsActionRef) {
     propsActionRef.current = actionRef.current;
   }
-
   function onFormatResult(next) {
-    var _next$data;
-
     props.onFormatResult && props.onFormatResult(next);
-    var time = autoRefresh ? autoRefresh(next.data) : false;
-
+    var time = 0;
+    if (autoRefresh) {
+      time = 60 * 1000;
+    }
+    if (autoRefresh && typeof autoRefresh !== 'boolean') {
+      time = autoRefresh ? autoRefresh(next.data) : 0;
+    }
     if (Number.isInteger(time) && time >= 1000) {
       autoRefreshTimerRef.current = setTimeout(function () {
         // 自动刷新不显示 loading
         _request({}, true);
       }, Number(time));
-    } // 设置 dataSource、total
-
-
-    setData(next.data || []);
-    setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
+      emit('PRO_TABLE_REFRESH_TIMER_FLAG', Number(time));
+    }
+    // 设置 dataSource、total
+    if (switchViewState === 'table' || currentPage === 1 || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
+      var _next$data;
+      _setData(next.data || []);
+      setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
+    }
+    if (switchViewState === 'card' && currentPage !== 1 && !(cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
+      var _next$data2;
+      _setData([].concat(_toConsumableArray(data), _toConsumableArray(next.data || [])));
+      setTotal(total + (next.total || ((_next$data2 = next.data) === null || _next$data2 === void 0 ? void 0 : _next$data2.length)));
+    }
     setShowSkeleton(false);
-  } // 请求表格数据工具函数
-
-
+  }
+  // 请求表格数据工具函数
   var getData = useRequest(function (params) {
     return _defineProperty({
       url: url,
@@ -682,13 +702,13 @@ var ProTable = function ProTable(props) {
   }, {
     // 使用 request 方法代替 fetch
     requestMethod: function requestMethod(params) {
-      return utilResquest(params);
+      // 支持使用 requestConfig 自定义请求配置
+      return utilResquest(_objectSpread(_objectSpread({}, params), requestConfig));
     },
     manual: true,
     onSuccess: function onSuccess(result) {
       props.onSuccess && props.onSuccess(result);
       var nextData = result;
-
       if (formatResult) {
         if (typeof formatResult === 'function') {
           nextData = formatResult(result) || {};
@@ -698,9 +718,12 @@ var ProTable = function ProTable(props) {
             data: getDeepValue(formatResult.data, result) || [],
             total: isNaN(dataTotal) ? 0 : Number(dataTotal)
           };
+        } else if (typeof formatResult === 'string') {
+          nextData = getTargetValue(formatResult, {
+            res: result
+          });
         }
       }
-
       if (nextData instanceof Promise) {
         nextData.then(function (res) {
           onFormatResult(res);
@@ -709,62 +732,67 @@ var ProTable = function ProTable(props) {
         });
       } else {
         onFormatResult(nextData);
-      } // 重新计算是否需要吸底
-
-
+      }
+      // 重新计算是否需要吸底
       if (footerSuction) {
         getFooterSuctionState();
       }
-
       if (fixedTableBody) {
         getHeaderHeight(fullscreenState);
       }
     },
     onError: function onError(error) {
       setShowSkeleton(false);
-
       if (props.onError) {
         props.onError(error);
-      } else {// Message.error(error.toString());
-      } // 重新计算是否需要吸底
-
-
+      } else {
+        // Message.error(error.toString());
+      }
+      // 重新计算是否需要吸底
       if (footerSuction) {
         getFooterSuctionState();
       }
-
       if (fixedTableBody) {
         getHeaderHeight(fullscreenState);
       }
     }
-  }); // 请求函数
-
-  function _request(params, noLoading, filterParams) {
-    var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current5, _actionRef$current5$g, _objectSpread2;
-
+  });
+  // 请求函数
+  function _request(params, noLoading, filterParams, isReset) {
+    var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current6, _actionRef$current6$g, _objectSpread3;
+    // 首次渲染表格，获取 urlState 上的 表头 filter 数据
+    if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.headerFilters) !== false && dataRef.current.flag) {
+      getUrlStateFilter(urlState !== null && urlState !== void 0 ? urlState : {}, actionRef);
+      dataRef.current.flag = false;
+    }
     // 如果没有传 url 且没有 customRequest，直接返回
     if (!url && !customRequest) {
       return;
     }
-
     var nextShowLoading = !noLoading;
-    nextShowLoading !== showLoading && setShowLoading(nextShowLoading); // 请求前需要优先清空列过滤条件
+    nextShowLoading !== showLoading && setShowLoading(nextShowLoading);
+    // 请求前需要优先清空列过滤条件
     // actionRef.current?.setFilterRules?.({});
-
-    var sortParams = targetFormatSort(sort); // 筛选区请求参数
-
-    var dataFilterParams = filterParams !== null && filterParams !== void 0 ? filterParams : (_dataFilterFormRef$cu2 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu2 === void 0 ? void 0 : _dataFilterFormRef$cu2.values; // 列过滤请求参数
-
-    var columnsFilterParams = (_actionRef$current$ge = (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$g = _actionRef$current5.getFilterRules) === null || _actionRef$current5$g === void 0 ? void 0 : _actionRef$current5$g.call(_actionRef$current5)) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : {}; // 格式化后的请求参数
-
-    var requestData = formatParams(_objectSpread(_objectSpread({}, !showPagination ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, dataFilterParams), propsParams), sortParams), columnsFilterParams) : _objectSpread(_objectSpread(_objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, targetPageKey, currentPage), _defineProperty(_objectSpread2, targetPageSizeKey, pageSize), _objectSpread2), dataFilterParams), propsParams), sortParams), columnsFilterParams)), params));
-
+    var sortParams = targetFormatSort(sort);
+    // 筛选区请求参数
+    var dataFilterParams = filterParams !== null && filterParams !== void 0 ? filterParams : (_dataFilterFormRef$cu2 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu2 === void 0 ? void 0 : _dataFilterFormRef$cu2.values;
+    // 列过滤请求参数
+    var columnsFilterParams = (_actionRef$current$ge = (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$g = _actionRef$current6.getFilterRules) === null || _actionRef$current6$g === void 0 ? void 0 : _actionRef$current6$g.call(_actionRef$current6)) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : {};
+    // 格式化后的请求参数
+    var requestData = {};
+    var preParams = _objectSpread(_objectSpread({}, !showPagination ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, dataFilterParams), propsParams), sortParams), columnsFilterParams) : _objectSpread(_objectSpread(_objectSpread(_objectSpread((_objectSpread3 = {}, _defineProperty(_objectSpread3, targetPageKey, currentPage), _defineProperty(_objectSpread3, targetPageSizeKey, pageSize), _objectSpread3), dataFilterParams), propsParams), sortParams), columnsFilterParams)), params);
+    if (typeof formatParams === 'string') {
+      requestData = getTargetValue(formatParams, {
+        params: preParams
+      });
+    } else {
+      requestData = formatParams(preParams);
+    }
     if (requestData) {
       if (autoRefreshTimerRef.current) {
         clearTimeout(autoRefreshTimerRef.current);
         autoRefreshTimerRef.current = null;
       }
-
       if (!(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.searchUndefined)) {
         Object.keys(requestData).forEach(function (key) {
           if (requestData[key] === undefined) {
@@ -772,110 +800,110 @@ var ProTable = function ProTable(props) {
           }
         });
       }
-
       if (!(propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.searchEmptyString)) {
         Object.keys(requestData).forEach(function (key) {
           if (requestData[key] === '') {
             delete requestData[key];
           }
         });
-      } // 如果使用自定义请求
-
-
+      }
+      // 如果使用自定义请求
       if (customRequest && typeof customRequest === 'function') {
-        setCustomTableLoading(true);
+        if (isReset) {
+          setShowSkeleton(true);
+        } else {
+          setCustomTableLoading(true);
+        }
         customRequest(requestData).then(function (res) {
-          var data = res.data,
-              total = res.total,
-              success = res.success;
-
+          var dataRes = res.data,
+            totalRes = res.total,
+            success = res.success;
           if (success === true) {
             // 设置 dataSource、total
-            setData(data || []);
-            setTotal(total || (data === null || data === void 0 ? void 0 : data.length));
+            if (switchViewState === 'table' || params[targetPageKey] === 1 || isReset || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
+              _setData(dataRes || []);
+              setTotal(totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length));
+            }
+            if (switchViewState === 'card' && params[targetPageKey] !== 1 && !isReset && !(cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
+              _setData([].concat(_toConsumableArray(data), _toConsumableArray(dataRes || [])));
+              setTotal(total + (totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length)));
+            }
             setShowSkeleton(false);
             setCustomTableLoading(false);
-          } // 重新计算是否需要吸底
-
-
+          }
+          // 重新计算是否需要吸底
           if (footerSuction) {
             getFooterSuctionState();
           }
-
           if (fixedTableBody) {
             getHeaderHeight(fullscreenState);
-          } // customRequest 中支持 autoRefresh
-
-
-          var time = autoRefresh ? autoRefresh(data) : false;
-
+          }
+          // customRequest 中支持 autoRefresh
+          var time = 0;
+          if (autoRefresh) {
+            time = 60 * 1000;
+          }
+          if (autoRefresh && typeof autoRefresh !== 'boolean') {
+            time = autoRefresh ? autoRefresh(data) : 0;
+          }
           if (Number.isInteger(time) && time >= 1000) {
             autoRefreshTimerRef.current = setTimeout(function () {
               // 自动刷新不显示 loading
-              _request(requestData, true);
+              _request({}, true);
             }, Number(time));
+            emit('PRO_TABLE_REFRESH_TIMER_FLAG', Number(time));
           }
+        }).finally(function () {
+          setCustomTableLoading(false);
         });
       } else {
         getData.run(requestData);
       }
     }
   }
-
   function onSort(dataIndex, order) {
     var nextSort = _defineProperty({}, dataIndex, order);
-
     setSort(nextSort);
-
     _request(targetFormatSort(nextSort));
-  } // 处理 dataFilter 中的 onFilter、onReset
-
-
+  }
+  // 处理 dataFilter 中的 onFilter、onReset
   var dataFilter = _objectSpread(_objectSpread({
     mode: 'inline',
     forceClear: true
   }, propsDataFilter), {}, {
     onInit: (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onInit) || requestWhenMount ? function (values) {
       var _propsDataFilter$onIn;
-
       // 表单初始化请求处理
       propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$onIn = propsDataFilter.onInit) === null || _propsDataFilter$onIn === void 0 ? void 0 : _propsDataFilter$onIn.call(propsDataFilter, values);
       !fullscreenState && requestWhenMount && _request({}, false, values);
       return true;
     } : undefined,
     onFilter: function onFilter(values) {
-      var _actionRef$current6, _actionRef$current6$c;
-
+      var _actionRef$current7, _actionRef$current7$c;
       // 全屏状态，判断全屏表单onFilter是否禁用
       if (fullscreenState && !filterEnableRef.current.fullscreen) {
         filterEnableRef.current.fullscreen = true;
         return;
-      } // 非全屏状态，判断普通表单onFiler是否禁用
-
-
+      }
+      // 非全屏状态，判断普通表单onFiler是否禁用
       if (!fullscreenState && !filterEnableRef.current.normal) {
         filterEnableRef.current.normal = true;
         return;
       }
-
-      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values)); // 搜索变化时，暂时先清空选择
-
-      (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$c = _actionRef$current6.clearRowSelection) === null || _actionRef$current6$c === void 0 ? void 0 : _actionRef$current6$c.call(_actionRef$current6);
+      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values));
+      // 搜索变化时，暂时先清空选择
+      (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$c = _actionRef$current7.clearRowSelection) === null || _actionRef$current7$c === void 0 ? void 0 : _actionRef$current7$c.call(_actionRef$current7);
       setCurrentPage(1);
-
       _request(_defineProperty({}, targetPageKey, 1), false, values);
     },
     onReset: function onReset(values) {
       var _dataFilterFormRef$cu3;
-
       (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
       (_dataFilterFormRef$cu3 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu3 === void 0 ? void 0 : _dataFilterFormRef$cu3.reset();
       setCurrentPage(1);
-
       _request(_defineProperty({}, targetPageKey, 1), false, values);
     }
   });
-
   var getTableLoading = function getTableLoading() {
     if (!customRequest) {
       return showLoading && !showSkeleton && (getData.loading || props.loading);
@@ -883,14 +911,14 @@ var ProTable = function ProTable(props) {
       return showLoading && !showSkeleton && (customTableLoading || props.loading);
     }
   };
-
   var renderTable = function renderTable(isFullScreen) {
     if (propsColumns) {
       return /*#__PURE__*/React.createElement("div", {
         className: classNames('teamix-pro-table-container', className, 'teamix-test-request'),
         "data-teamix-test-request": "url=".concat(url, "&formatResult=").concat(!!formatResult),
         "data-teamix-test-params": getTestRequestParams(propsParams),
-        "data-teamix-test-data": getTestRequestData(propsColumns)
+        "data-teamix-test-data": getTestRequestData(propsColumns),
+        "data-teamix-spm": dataTeamixSpm
       }, /*#__PURE__*/React.createElement(Layout, {
         header: header,
         mainAction: mainAction,
@@ -902,11 +930,20 @@ var ProTable = function ProTable(props) {
         afterDataFilter: afterDataFilter,
         dataFilterFormRef: isFullScreen ? fullscreenDataFilterFormRef : normalDataFilterFormRef,
         rowSelection: rowSelection,
-        filterColumnType: filterColumnType
-      }), /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
+        filterColumnType: filterColumnType,
+        fullScreenState: isFullScreen,
+        toolBarAutoWidth: toolBarAutoWidth,
+        dataTeamixSpm: dataTeamixSpm,
+        switchCardView: switchCardView,
+        defaultView: defaultView,
+        autoRefresh: autoRefresh,
+        autoRefreshProps: autoRefreshProps,
+        bindUrlProps: bindUrlProps,
+        bindUrl: bindUrl
+      }), switchViewState === 'table' && /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
         hasBorder: false,
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
-        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context),
+        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps),
         loading: getTableLoading(),
         className: classNames('teamix-pro-table', tableClassName, {
           'with-row-select': rowSelection,
@@ -918,11 +955,21 @@ var ProTable = function ProTable(props) {
         sort: sort,
         primaryKey: primaryKey,
         rowSelection: rowSelection,
-        emptyContent: /*#__PURE__*/React.createElement(EmptyContent, null),
+        emptyContent: /*#__PURE__*/React.createElement(EmptyContent, _objectSpread({}, emptyProps)),
         sortIcons: getTableSortIcons(),
         fixedHeader: fullscreenState || fixedTableBody,
         maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
-      }, pickProps(getTableProps(), otherProps))));
+      }, pickProps(getTableProps(), otherProps))), switchViewState === 'card' && /*#__PURE__*/React.createElement(CardView, {
+        dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
+        showSkeleton: showSkeleton,
+        loading: getTableLoading(),
+        originColumns: propsColumns,
+        cardViewProps: cardViewProps,
+        scrollHeight: fullscreenState || fixedTableBody ? "calc(100vh - ".concat(headerHeight, "px)") : undefined,
+        actionRef: actionRef,
+        context: context,
+        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context)
+      }));
     } else {
       // 不传 columns 直接返回原始 Table
       return /*#__PURE__*/React.createElement(Table, _objectSpread({
@@ -930,67 +977,53 @@ var ProTable = function ProTable(props) {
       }, pickProps(getTableProps(), otherProps)));
     }
   };
-
   var renderFooterAction = function renderFooterAction() {
     var _footerAction$actions;
-
     if (_typeof(footerAction) === 'object' && (footerAction === null || footerAction === void 0 ? void 0 : (_footerAction$actions = footerAction.actions) === null || _footerAction$actions === void 0 ? void 0 : _footerAction$actions.length) >= 0) {
       // 默认 context
       var defaultContext = {
         action: actionRef.current,
         rowSelection: rowSelection
-      }; // 未选择的时候所有 button 默认 disabled
-
+      };
+      // 未选择的时候所有 button 默认 disabled
       var targetActions = footerAction.actions.map(function (action) {
         return _objectSpread(_objectSpread({}, action), {}, {
           disabled: (action === null || action === void 0 ? void 0 : action.disabled) || selectedCount === 0
         });
       });
-
       var targetFooterActions = _objectSpread(_objectSpread({}, footerAction), {}, {
         actions: targetActions
       });
-
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer-action')
       }, /*#__PURE__*/React.createElement(ProActionGroup, _objectSpread(_objectSpread({}, targetFooterActions), {}, {
-        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context)
+        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context),
+        "data-teamix-spm": dataTeamixSpm ? "".concat(dataTeamixSpm, "-footerAction") : undefined
       })));
     } else return footerAction;
   };
-
   var renderFooter = function renderFooter() {
     function onChangePagination(currentPage) {
       var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
       // 翻页默认清空选择
       if (!reserveSelectedRecords) {
-        var _actionRef$current7, _actionRef$current7$c;
-
-        (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$c = _actionRef$current7.clearRowSelection) === null || _actionRef$current7$c === void 0 ? void 0 : _actionRef$current7$c.call(_actionRef$current7);
+        var _actionRef$current8, _actionRef$current8$c;
+        (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$c = _actionRef$current8.clearRowSelection) === null || _actionRef$current8$c === void 0 ? void 0 : _actionRef$current8$c.call(_actionRef$current8);
       }
-
       setCurrentPage(currentPage);
-
       _request(_objectSpread(_defineProperty({}, targetPageKey, currentPage), params));
     }
-
     function onChangePaginationSize(currentPageSize) {
-      var _request5;
-
+      var _request8;
       // 翻页默认清空选择
       if (!reserveSelectedRecords) {
-        var _actionRef$current8, _actionRef$current8$c;
-
-        (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$c = _actionRef$current8.clearRowSelection) === null || _actionRef$current8$c === void 0 ? void 0 : _actionRef$current8$c.call(_actionRef$current8);
+        var _actionRef$current9, _actionRef$current9$c;
+        (_actionRef$current9 = actionRef.current) === null || _actionRef$current9 === void 0 ? void 0 : (_actionRef$current9$c = _actionRef$current9.clearRowSelection) === null || _actionRef$current9$c === void 0 ? void 0 : _actionRef$current9$c.call(_actionRef$current9);
       }
-
       setPageSize(currentPageSize);
       setCurrentPage(1);
-
-      _request((_request5 = {}, _defineProperty(_request5, targetPageSizeKey, currentPageSize), _defineProperty(_request5, targetPageKey, 1), _request5));
+      _request((_request8 = {}, _defineProperty(_request8, targetPageSizeKey, currentPageSize), _defineProperty(_request8, targetPageKey, 1), _request8));
     }
-
     function renderRowSelection() {
       if (rowSelection) {
         if (showSkeleton) {
@@ -1000,28 +1033,43 @@ var ProTable = function ProTable(props) {
         } else {
           return /*#__PURE__*/React.createElement("div", {
             className: cls('footer-left-wrapper')
-          }, rowSelection.mode !== 'single' && /*#__PURE__*/React.createElement(Checkbox, _objectSpread({
+          }, /*#__PURE__*/React.createElement(React.Fragment, null, rowSelection.mode !== 'single' && /*#__PURE__*/React.createElement(Checkbox, _objectSpread({
             className: cls("footer-checkbox-".concat(size))
           }, getCheckAllProps())), footerAction && renderFooterAction(), /*#__PURE__*/React.createElement("span", {
             className: cls('selected-msg')
           }, getMessage('selected', {
             count: selectedCount
-          })));
+          }))));
+        }
+      } else if (footerAction) {
+        if (showSkeleton) {
+          return /*#__PURE__*/React.createElement("div", {
+            className: cls('footer-left-wrapper')
+          }, /*#__PURE__*/React.createElement(Skeleton.Footer.Operation, null));
+        } else {
+          return /*#__PURE__*/React.createElement("div", {
+            className: cls('footer-left-wrapper')
+          }, footerAction && renderFooterAction());
         }
       }
     }
-
-    if (showPagination) {
+    if (showPagination && switchViewState === 'table' || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination) && switchViewState === 'card') {
+      var _props$paginationProp3;
+      var _ref8 = (_props$paginationProp3 = props === null || props === void 0 ? void 0 : props.paginationProps) !== null && _props$paginationProp3 !== void 0 ? _props$paginationProp3 : {},
+        onPaginationPropsChange = _ref8.onChange,
+        othersPaginationProps = _objectWithoutProperties(_ref8, _excluded2);
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer', {
-          'footer-has-rowSelection': rowSelection
+          'footer-has-rowSelection': rowSelection,
+          'footer-has-action': footerAction
         })
       }, renderRowSelection(), /*#__PURE__*/React.createElement("div", {
         className: cls('footer-right-wrapper')
       }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : /*#__PURE__*/React.createElement(React.Fragment, null, data.length > 0 && /*#__PURE__*/React.createElement(Pagination, _objectSpread({
         className: cls('pagination'),
-        onChange: function onChange(number) {
-          return onChangePagination(number);
+        onChange: function onChange(number, e) {
+          onChangePagination(number);
+          onPaginationPropsChange === null || onPaginationPropsChange === void 0 ? void 0 : onPaginationPropsChange(number, e);
         },
         total: total,
         responsivePaginationType: responsivePaginationType,
@@ -1040,8 +1088,8 @@ var ProTable = function ProTable(props) {
         onPageSizeChange: function onPageSizeChange(number) {
           return onChangePaginationSize(number);
         }
-      }, props.paginationProps)))));
-    } else if (!showPagination) {
+      }, othersPaginationProps)))));
+    } else if (!showPagination && (footerAction || rowSelection || useRowSelection)) {
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer', {
           'footer-has-rowSelection': rowSelection
@@ -1050,20 +1098,18 @@ var ProTable = function ProTable(props) {
         className: cls('footer-right-wrapper')
       }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : footer));
     }
-  }; // 判断是否需要吸底
-
-
+  };
+  // 判断是否需要吸底
   var fixFooterState = useMemo(function () {
     if (fullscreenState) {
+      // TODO XXX
       return false;
     }
-
     if (fixedTableBody || footerSuction) {
       if (footerSuctionState) {
         return true;
       }
     }
-
     return false;
   }, [fullscreenState, fixedTableBody, footerSuction, footerSuctionState]);
   return /*#__PURE__*/React.createElement(FullScreen, {
@@ -1073,12 +1119,11 @@ var ProTable = function ProTable(props) {
     return /*#__PURE__*/React.createElement("div", {
       className: cls({
         '': true,
-        fullscreen: fullscreenState // 'footer-suction': footerSuctionState && footerSuction,
-
+        fullscreen: isFullScreen
+        // 'footer-suction': footerSuctionState && footerSuction,
       }),
       ref: tableRef
     }, renderTable(isFullScreen), fixFooterState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
   });
 };
-
 export default ProTable;