@teamix/pro 1.6.0-beta.4 → 1.6.0-beta.6

package/lib/table/index.js

@@ -5,24 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {};
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _components = require("@alicloudfe/components");
-var _Pagination = _interopRequireDefault(require("./components/Pagination"));
-var _genProColumnToColumn = _interopRequireDefault(require("./utils/genProColumnToColumn"));
+var _hooks = require("@teamix/hooks");
+var _proField = require("@teamix/pro-field");
 var _utils = require("@teamix/utils");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _react = _interopRequireWildcard(require("react"));
+var _actions = require("../actions");
+var _pageContainer = _interopRequireDefault(require("../page-container"));
 var _skeleton = require("../skeleton");
-require("./index.scss");
+var _aspect = require("../utils/aspect");
+var _CardView = _interopRequireDefault(require("./components/CardView"));
 var _Layout = _interopRequireDefault(require("./components/Layout"));
+var _Pagination = _interopRequireDefault(require("./components/Pagination"));
+var _Fullscreen = _interopRequireDefault(require("./components/ToolBar/Fullscreen"));
+require("./index.scss");
 var _utils2 = require("./utils");
+var _genProColumnToColumn = _interopRequireDefault(require("./utils/genProColumnToColumn"));
 var _getTableProps = _interopRequireDefault(require("./utils/getTableProps"));
 var _getTableSortIcons = _interopRequireDefault(require("./utils/getTableSortIcons"));
 var _useTableSelection = _interopRequireDefault(require("./utils/useTableSelection"));
-var _Fullscreen = _interopRequireDefault(require("./components/ToolBar/Fullscreen"));
-var _EmptyContent = _interopRequireDefault(require("./components/EmptyContent"));
-var _actions2 = require("../actions");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _pageContainer = _interopRequireDefault(require("../page-container"));
-var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _util = require("./utils/util");
 var _typing = require("./typing");
 Object.keys(_typing).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -35,19 +39,16 @@ Object.keys(_typing).forEach(function (key) {
     }
   });
 });
-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", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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", "autoRedirect", "useMaxData"],
+  _excluded2 = ["onChange"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -56,8 +57,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 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; }
 var cls = (0, _utils.usePrefixCls)('teamix-pro-table');
-
 /**
  * 处理原生传入的 columns 以便于 选择列 方便处理
  * @param columns 原生传入的 columns
@@ -67,7 +70,7 @@ var processColumns = function processColumns(columns, initialColumns) {
   var _getGlobalConfig;
   var globalFilterColumns = (_getGlobalConfig = (0, _utils.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) {
@@ -92,7 +95,6 @@ var processColumns = function processColumns(columns, initialColumns) {
   }
   return filterColumns;
 };
-
 /** 默认请求翻页参数 */
 var globalPageKey = 'currentPage';
 var globalPageSizeKey = 'pageSize';
@@ -105,7 +107,7 @@ var globalFormatSort = function globalFormatSort(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,
@@ -154,9 +156,8 @@ var ProTable = function ProTable(props) {
     _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,
+    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,
@@ -170,15 +171,33 @@ var ProTable = function ProTable(props) {
     _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,
+    _props$autoRedirect = props.autoRedirect,
+    autoRedirect = _props$autoRedirect === void 0 ? true : _props$autoRedirect,
+    useMaxData = props.useMaxData,
     otherProps = _objectWithoutProperties(props, _excluded);
   var targetPageKey = pageKey || globalPageKey;
   var targetPageSizeKey = pageSizeKey || globalPageSizeKey;
   var targetFormatSort = formatSort || globalFormatSort;
-  var _useState = (0, _react.useState)(1),
+  var _ref = bindUrl ? (0, _hooks.useUrlState)() : [],
+    _ref2 = _slicedToArray(_ref, 2),
+    urlState = _ref2[0],
+    setUrlState = _ref2[1];
+  var _useState = (0, _react.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 = (0, _react.useState)(props.pageSize || 10),
+  var _useState3 = (0, _react.useState)((urlState === null || urlState === void 0 ? void 0 : urlState.pageSize) || props.pageSize || 10),
     _useState4 = _slicedToArray(_useState3, 2),
     pageSize = _useState4[0],
     setPageSize = _useState4[1];
@@ -189,7 +208,7 @@ var ProTable = function ProTable(props) {
   var _useState7 = (0, _react.useState)(propsDataSource !== null && propsDataSource !== void 0 ? propsDataSource : []),
     _useState8 = _slicedToArray(_useState7, 2),
     data = _useState8[0],
-    setData = _useState8[1];
+    _setData = _useState8[1];
   var _useState9 = (0, _react.useState)(props.sort || {}),
     _useState10 = _slicedToArray(_useState9, 2),
     sort = _useState10[0],
@@ -220,7 +239,24 @@ var ProTable = function ProTable(props) {
     _useState20 = _slicedToArray(_useState19, 2),
     showLoading = _useState20[0],
     setShowLoading = _useState20[1];
-
+  // 表格内部用作存储的 Ref，标识 Table 组件是否被第一次渲染。用作 useUrlState filter 第一次渲染时使用 state 数据请求
+  var dataRef = (0, _react.useRef)({
+    flag: true
+  });
+  (0, _react.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 = (0, _react.useState)({
@@ -230,17 +266,22 @@ var ProTable = function ProTable(props) {
     }),
     _useState22 = _slicedToArray(_useState21, 1),
     actionRefState = _useState22[0];
-
   // 存储 on 监听事件
   var _useState23 = (0, _react.useState)({
       fullScreenState: {}
     }),
     _useState24 = _slicedToArray(_useState23, 1),
     actionRefCallback = _useState24[0];
-
   // 存储定时器 id
   var autoRefreshTimerRef = (0, _react.useRef)();
   var onResize = null;
+  // useEffect(() => {
+  //   setShowSkeleton(propsShowSkeleton);
+  // }, [propsShowSkeleton]);
+  // useEffect(() => {
+  //   console.log('传入的props变化', propsLoading);
+  //   setShowLoading(propsLoading ?? false);
+  // }, [propsLoading]);
   (0, _react.useEffect)(function () {
     var _propsDataFilter$sche, _propsDataFilter$sche2;
     getHeaderHeight(fullscreenState);
@@ -267,7 +308,6 @@ var ProTable = function ProTable(props) {
         }
       }, 500);
     }
-
     // 如果不传 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) {
@@ -286,7 +326,6 @@ var ProTable = function ProTable(props) {
       actionRef.current = undefined;
     };
   }, []);
-
   // 获取header高度，用作全屏吸底吸底高度计算以及固定body高度计算（滚动条在底部）
   var getHeaderHeight = function getHeaderHeight(isFullscreen, offset) {
     var _tableDom$getElements, _tableDom$getElements2, _document$querySelect, _document$querySelect2, _document$querySelect3;
@@ -317,23 +356,22 @@ var ProTable = function ProTable(props) {
         // 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 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，那么重新计算
         if (headerFixedTopSectionDom.clientHeight) {
           var _headerFixedTopSectio;
           var headerFixedTopSectionHeight = (_headerFixedTopSectio = headerFixedTopSectionDom.clientHeight) !== null && _headerFixedTopSectio !== void 0 ? _headerFixedTopSectio : 0;
-
           // const clientTableBodyHeight =
           //   document.body.clientHeight - offsetHeaderHeight;
-
           setHeaderHeight(headerFixedTopSectionHeight + teamixNavHeight + footerRowSelectionHeight + tableHeaderHeight + 1);
           return;
         }
@@ -344,40 +382,44 @@ var ProTable = function ProTable(props) {
       }
     }, 50);
   };
-
   // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
   var _useState25 = (0, _react.useState)(0),
     _useState26 = _slicedToArray(_useState25, 2),
     headerHeight = _useState26[0],
     setHeaderHeight = _useState26[1];
-
   // 全屏显示 className
   var _useState27 = (0, _react.useState)(false),
     _useState28 = _slicedToArray(_useState27, 2),
     fullscreenState = _useState28[0],
     setFullscreenState = _useState28[1];
+  // 切换视角
+  var _useState29 = (0, _react.useState)(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+    _useState30 = _slicedToArray(_useState29, 2),
+    switchViewState = _useState30[0],
+    setSwitchViewState = _useState30[1];
   // 切换全屏搜索开关
   var filterEnableRef = (0, _react.useRef)({
     fullscreen: false,
     normal: true
   });
-
+  // 全局状态 ： 大数据截断
+  var globalUseMaxData = (0, _react.useMemo)(function () {
+    var _getGlobalConfig2;
+    return (_getGlobalConfig2 = (0, _utils.getGlobalConfig)('ProTable')) === null || _getGlobalConfig2 === void 0 ? void 0 : _getGlobalConfig2.useMaxData;
+  }, []);
   // 非全屏状态下的
   var normalDataFilterFormRef = (0, _react.useRef)();
   var fullscreenDataFilterFormRef = (0, _react.useRef)();
   var normalDataFilterForm = normalDataFilterFormRef.current;
   var fullscreenDataFilterForm = fullscreenDataFilterFormRef.current;
-
   // 传给 QueryFilter 的 formRef
   var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef;
   // let dataFilterForm = dataFilterFormRef.current;
-
   // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
-  var _useState29 = (0, _react.useState)(false),
-    _useState30 = _slicedToArray(_useState29, 2),
-    footerSuctionState = _useState30[0],
-    setFooterSuctionState = _useState30[1];
-
+  var _useState31 = (0, _react.useState)(false),
+    _useState32 = _slicedToArray(_useState31, 2),
+    footerSuctionState = _useState32[0],
+    setFooterSuctionState = _useState32[1];
   // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
   var getFooterSuctionState = function getFooterSuctionState() {
     if (!footerSuction) {
@@ -399,7 +441,6 @@ var ProTable = function ProTable(props) {
       }
     }
   };
-
   // rowSelection 相关
   var rowSelectionHook = (0, _useTableSelection.default)(_objectSpread(_objectSpread({}, propsRowSelection), {}, {
     // 当初始出现骨架屏的时候，不可选择
@@ -430,17 +471,15 @@ var ProTable = function ProTable(props) {
   (0, _react.useEffect)(function () {
     getRowSelection && getRowSelection(rowSelectionHook);
   }, [rowSelectionHook]);
-
   // 获取 table 左下角 checkbox 属性
   function getCheckAllProps() {
-    var _ref = rowSelection,
-      _ref$onChange = _ref.onChange,
-      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onSelectAll = _ref.onSelectAll,
-      onSelectAll = _ref$onSelectAll === void 0 ? function () {} : _ref$onSelectAll,
-      _ref$selectedRowKeys = _ref.selectedRowKeys,
-      selectedRowKeys = _ref$selectedRowKeys === void 0 ? [] : _ref$selectedRowKeys,
-      getProps = _ref.getProps;
+    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;
     var dataSource = data;
     var allRowKeys = dataSource.filter(function (d, i) {
       var _getProps;
@@ -484,14 +523,12 @@ var ProTable = function ProTable(props) {
     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 受控
   (0, _react.useEffect)(function () {
     if (propsDataSource) {
-      setData(propsDataSource);
+      _setData(propsDataSource);
     }
   }, [propsDataSource]);
-
   // 初始化 ActionRef。
   (0, _utils2.initActionRef)(actionRef, {
     getState: function getState() {
@@ -511,20 +548,19 @@ var ProTable = function ProTable(props) {
       actionRefCallback[state][name] = fun;
     },
     off: function off(name) {
-      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          k = _ref3[0],
-          v = _ref3[1];
-        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 1),
-            k = _ref5[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
   (0, _utils2.useActionType)(actionRef, {
     fullScreen: function fullScreen() {
@@ -551,7 +587,14 @@ 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) {
       // 如果请求中还有翻页相关信息，需要自动设置到指定页
@@ -570,11 +613,20 @@ var ProTable = function ProTable(props) {
       (_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([]);
@@ -594,31 +646,94 @@ 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);
+      (0, _utils2.emit)('PRO_TABLE_REFRESH_TIMER_FLAG', timers);
+    },
+    clearAutoRefreshTimers: function clearAutoRefreshTimers() {
+      clearTimeout(autoRefreshTimerRef.current);
+      autoRefreshTimerRef.current = null;
     }
   });
-
   // 将 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;
+    // 如果开启了 autoRedirect 当当前页数不为1，并且data为空的时候，重定向到第一页
+    if (autoRedirect) {
+      var _next$data;
+      if (!(next === null || next === void 0 ? void 0 : (_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length) && currentPage > 1) {
+        setCurrentPage(1);
+        setShowLoading(true);
+        setTimeout(function () {
+          _request(_defineProperty({}, targetPageKey, 1));
+        });
+      }
+    }
+    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));
+      (0, _utils2.emit)('PRO_TABLE_REFRESH_TIMER_FLAG', Number(time));
     }
     // 设置 dataSource、total
-    setData(next.data || []);
-    setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
+    if (switchViewState === 'table' || currentPage === 1 || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
+      var _next$data2;
+      _setData(next.data || []);
+      setTotal(next.total || ((_next$data2 = next.data) === null || _next$data2 === void 0 ? void 0 : _next$data2.length));
+    }
+    if (switchViewState === 'card' && currentPage !== 1 && !(cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
+      var _next$data3;
+      _setData([].concat(_toConsumableArray(data), _toConsumableArray(next.data || [])));
+      setTotal(total + (next.total || ((_next$data3 = next.data) === null || _next$data3 === void 0 ? void 0 : _next$data3.length)));
+    }
     setShowSkeleton(false);
   }
-
   // 请求表格数据工具函数
   var getData = (0, _utils.useRequest)(function (params) {
     return _defineProperty({
@@ -644,6 +759,10 @@ var ProTable = function ProTable(props) {
             data: (0, _utils.getDeepValue)(formatResult.data, result) || [],
             total: isNaN(dataTotal) ? 0 : Number(dataTotal)
           };
+        } else if (typeof formatResult === 'string') {
+          nextData = (0, _utils.getTargetValue)(formatResult, {
+            res: result
+          });
         }
       }
       if (nextData instanceof Promise) {
@@ -679,10 +798,14 @@ var ProTable = function ProTable(props) {
       }
     }
   });
-
   // 请求函数
-  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) {
+      (0, _util.getUrlStateFilter)(urlState !== null && urlState !== void 0 ? urlState : {}, actionRef);
+      dataRef.current.flag = false;
+    }
     // 如果没有传 url 且没有 customRequest，直接返回
     if (!url && !customRequest) {
       return;
@@ -695,10 +818,17 @@ var ProTable = function ProTable(props) {
     // 筛选区请求参数
     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 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 = 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 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 = (0, _utils.getTargetValue)(formatParams, {
+        params: preParams
+      });
+    } else {
+      requestData = formatParams(preParams);
+    }
     if (requestData) {
       if (autoRefreshTimerRef.current) {
         clearTimeout(autoRefreshTimerRef.current);
@@ -720,19 +850,38 @@ var ProTable = function ProTable(props) {
       }
       // 如果使用自定义请求
       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,
+          var dataRes = res.data,
+            totalRes = res.total,
             success = res.success;
           if (success === true) {
+            // 如果开启了 autoRedirect 当当前页数不为1，并且data为空的时候，重定向到第一页
+            if (autoRedirect) {
+              if (!(dataRes === null || dataRes === void 0 ? void 0 : dataRes.length) && currentPage > 1) {
+                setCurrentPage(1);
+                setShowLoading(true);
+                setTimeout(function () {
+                  _request(_defineProperty({}, targetPageKey, 1));
+                });
+              }
+            }
             // 设置 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();
@@ -740,15 +889,23 @@ var ProTable = function ProTable(props) {
           if (fixedTableBody) {
             getHeaderHeight(fullscreenState);
           }
-
           // customRequest 中支持 autoRefresh
-          var time = autoRefresh ? autoRefresh(data) : false;
+          var time = 0;
+          if (autoRefresh) {
+            time = 60 * 1000;
+          }
+          if (autoRefresh && typeof autoRefresh !== 'boolean') {
+            time = autoRefresh ? autoRefresh(dataRes) : 0;
+          }
           if (Number.isInteger(time) && time >= 1000) {
             autoRefreshTimerRef.current = setTimeout(function () {
               // 自动刷新不显示 loading
-              _request(requestData, true);
+              _request({}, true);
             }, Number(time));
+            (0, _utils2.emit)('PRO_TABLE_REFRESH_TIMER_FLAG', Number(time));
           }
+        }).finally(function () {
+          setCustomTableLoading(false);
         });
       } else {
         getData.run(requestData);
@@ -760,7 +917,6 @@ var ProTable = function ProTable(props) {
     setSort(nextSort);
     _request(targetFormatSort(nextSort));
   }
-
   // 处理 dataFilter 中的 onFilter、onReset
   var dataFilter = _objectSpread(_objectSpread({
     mode: 'inline',
@@ -774,7 +930,7 @@ var ProTable = function ProTable(props) {
       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;
@@ -787,9 +943,8 @@ var ProTable = function ProTable(props) {
       }
       (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);
+      (_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);
-      console.log('currentPageSize1', pageSize);
       _request(_defineProperty({}, targetPageKey, 1), false, values);
     },
     onReset: function onReset(values) {
@@ -797,7 +952,6 @@ var ProTable = function ProTable(props) {
       (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);
-      console.log('currentPageSize2', pageSize);
       _request(_defineProperty({}, targetPageKey, 1), false, values);
     }
   });
@@ -811,10 +965,8 @@ var ProTable = function ProTable(props) {
   var renderTable = function renderTable(isFullScreen) {
     if (propsColumns) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('teamix-pro-table-container', className, 'teamix-test-request'),
-        "data-teamix-test-request": "url=".concat(url, "&formatResult=").concat(!!formatResult),
-        "data-teamix-test-params": (0, _utils.getTestRequestParams)(propsParams),
-        "data-teamix-test-data": (0, _utils.getTestRequestData)(propsColumns)
+        className: (0, _classnames.default)('teamix-pro-table-container', className),
+        "data-teamix-spm": dataTeamixSpm
       }, /*#__PURE__*/_react.default.createElement(_Layout.default, {
         header: header,
         mainAction: mainAction,
@@ -827,11 +979,19 @@ var ProTable = function ProTable(props) {
         dataFilterFormRef: isFullScreen ? fullscreenDataFilterFormRef : normalDataFilterFormRef,
         rowSelection: rowSelection,
         filterColumnType: filterColumnType,
-        fullScreenState: isFullScreen
-      }), /*#__PURE__*/_react.default.createElement(_components.Table.StickyLock, _extends({
+        fullScreenState: isFullScreen,
+        toolBarAutoWidth: toolBarAutoWidth,
+        dataTeamixSpm: dataTeamixSpm,
+        switchCardView: switchCardView,
+        defaultView: defaultView,
+        autoRefresh: autoRefresh,
+        autoRefreshProps: autoRefreshProps,
+        bindUrlProps: bindUrlProps,
+        bindUrl: bindUrl
+      }), switchViewState === 'table' && /*#__PURE__*/_react.default.createElement(_components.Table.StickyLock, _objectSpread({
         hasBorder: false,
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
-        columns: (0, _genProColumnToColumn.default)(filteredColumns, showSkeleton, actionRef, context),
+        columns: (0, _genProColumnToColumn.default)(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps),
         loading: getTableLoading(),
         className: (0, _classnames.default)('teamix-pro-table', tableClassName, {
           'with-row-select': rowSelection,
@@ -843,22 +1003,33 @@ var ProTable = function ProTable(props) {
         sort: sort,
         primaryKey: primaryKey,
         rowSelection: rowSelection,
-        emptyContent: /*#__PURE__*/_react.default.createElement(_EmptyContent.default, null),
+        emptyContent: /*#__PURE__*/_react.default.createElement(_proField.EmptyContent, _objectSpread({}, emptyProps)),
         sortIcons: (0, _getTableSortIcons.default)(),
         fixedHeader: fullscreenState || fixedTableBody,
         maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
-        // 过滤出可以传到 Table 的 Props
-      }, (0, _utils.pickProps)((0, _getTableProps.default)(), otherProps))));
+      }, (0, _utils.pickProps)((0, _getTableProps.default)(), otherProps))), switchViewState === 'card' && /*#__PURE__*/_react.default.createElement(_CardView.default, {
+        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: (0, _genProColumnToColumn.default)(filteredColumns, showSkeleton, actionRef, context),
+        emptyProps: emptyProps,
+        emptyContent: otherProps === null || otherProps === void 0 ? void 0 : otherProps.emptyContent
+      }));
     } else {
       // 不传 columns 直接返回原始 Table
-      return /*#__PURE__*/_react.default.createElement(_components.Table, _extends({
+      return /*#__PURE__*/_react.default.createElement(_components.Table, _objectSpread({
         className: cls()
       }, (0, _utils.pickProps)((0, _getTableProps.default)(), otherProps)));
     }
   };
   var renderFooterAction = function renderFooterAction() {
-    var _actions;
-    if (_typeof(footerAction) === 'object' && (footerAction === null || footerAction === void 0 ? void 0 : (_actions = footerAction.actions) === null || _actions === void 0 ? void 0 : _actions.length) >= 0) {
+    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,
@@ -875,8 +1046,9 @@ var ProTable = function ProTable(props) {
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer-action')
-      }, /*#__PURE__*/_react.default.createElement(_actions2.ProActionGroup, _extends({}, targetFooterActions, {
-        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context)
+      }, /*#__PURE__*/_react.default.createElement(_actions.ProActionGroup, _objectSpread(_objectSpread({}, targetFooterActions), {}, {
+        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context),
+        "data-teamix-spm": dataTeamixSpm ? "".concat(dataTeamixSpm, "-footerAction") : undefined
       })));
     } else return footerAction;
   };
@@ -885,22 +1057,22 @@ var ProTable = function ProTable(props) {
       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 _request10;
       // 翻页默认清空选择
       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((_request10 = {}, _defineProperty(_request10, targetPageSizeKey, currentPageSize), _defineProperty(_request10, targetPageKey, 1), _request10));
     }
     function renderRowSelection() {
       if (rowSelection) {
@@ -911,13 +1083,13 @@ var ProTable = function ProTable(props) {
         } else {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: cls('footer-left-wrapper')
-          }, rowSelection.mode !== 'single' && /*#__PURE__*/_react.default.createElement(_components.Checkbox, _extends({
+          }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, rowSelection.mode !== 'single' && /*#__PURE__*/_react.default.createElement(_components.Checkbox, _objectSpread({
             className: cls("footer-checkbox-".concat(size))
           }, getCheckAllProps())), footerAction && renderFooterAction(), /*#__PURE__*/_react.default.createElement("span", {
             className: cls('selected-msg')
           }, (0, _utils.getMessage)('selected', {
             count: selectedCount
-          })));
+          }))));
         }
       } else if (footerAction) {
         if (showSkeleton) {
@@ -931,7 +1103,11 @@ var ProTable = function ProTable(props) {
         }
       }
     }
-    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.default.createElement("div", {
         className: cls('footer', {
           'footer-has-rowSelection': rowSelection,
@@ -939,21 +1115,16 @@ var ProTable = function ProTable(props) {
         })
       }, renderRowSelection(), /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer-right-wrapper')
-      }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Pagination, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, _extends({
+      }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Pagination, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, _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
+        responsivePaginationType: responsivePaginationType,
         // shape="arrow-only"
         // pageSizePosition="end"
-        ,
-        totalRender: function totalRender(total) {
-          return (0, _utils.getMessage)('total', {
-            total: new Intl.NumberFormat().format(total)
-          });
-        },
         pageSize: pageSize,
         current: currentPage,
         pageSizeList: pageSizeList,
@@ -961,9 +1132,10 @@ var ProTable = function ProTable(props) {
         type: total / pageSize <= 2 ? 'simple' : 'normal',
         onPageSizeChange: function onPageSizeChange(number) {
           return onChangePaginationSize(number);
-        }
-      }, props.paginationProps)))));
-    } else if (!showPagination) {
+        },
+        useMaxData: globalUseMaxData !== null && globalUseMaxData !== void 0 ? globalUseMaxData : useMaxData
+      }, othersPaginationProps)))));
+    } else if (!showPagination && (footerAction || rowSelection || useRowSelection)) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: cls('footer', {
           'footer-has-rowSelection': rowSelection
@@ -973,10 +1145,10 @@ var ProTable = function ProTable(props) {
       }, showSkeleton ? /*#__PURE__*/_react.default.createElement(_skeleton.ProSkeletonRaw.Footer.Pagination, null) : footer));
     }
   };
-
   // 判断是否需要吸底
   var fixFooterState = (0, _react.useMemo)(function () {
     if (fullscreenState) {
+      // TODO XXX
       return false;
     }
     if (fixedTableBody || footerSuction) {
@@ -993,13 +1165,12 @@ var ProTable = function ProTable(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: cls({
         '': true,
-        fullscreen: fullscreenState
+        fullscreen: isFullScreen
         // 'footer-suction': footerSuctionState && footerSuction,
       }),
-
       ref: tableRef
     }, renderTable(isFullScreen), fixFooterState && /*#__PURE__*/_react.default.createElement(_pageContainer.default.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
   });
 };
-var _default = ProTable;
+var _default = (0, _aspect.ProComponentAspect)(ProTable, 'ProTable');
 exports.default = _default;