@teamix/pro 1.5.13 → 1.5.16

package/lib/table/index.js

@@ -24,6 +24,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _pageContainer = _interopRequireDefault(require("../page-container"));
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 var _CardView = _interopRequireDefault(require("./components/CardView"));
+var _hooks = require("@teamix/hooks");
+var _util = require("./utils/util");
 var _typing = require("./typing");
 Object.keys(_typing).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -36,7 +38,7 @@ 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", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps"],
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -104,7 +106,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,
@@ -177,15 +179,21 @@ var ProTable = function ProTable(props) {
     _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 = (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];
@@ -227,6 +235,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)({
@@ -513,13 +539,13 @@ var ProTable = function ProTable(props) {
       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];
@@ -755,6 +781,11 @@ var ProTable = function ProTable(props) {
   // 请求函数
   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;
@@ -810,11 +841,11 @@ var ProTable = function ProTable(props) {
             success = res.success;
           if (success === true) {
             // 设置 dataSource、total
-            if (switchViewState === 'table' || params['targetPageKey'] === 1 || isReset || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
+            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)) {
+            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)));
             }
@@ -927,11 +958,13 @@ var ProTable = function ProTable(props) {
         switchCardView: switchCardView,
         defaultView: defaultView,
         autoRefresh: autoRefresh,
-        autoRefreshProps: autoRefreshProps
+        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, dataTeamixSpm),
+        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,
@@ -1043,9 +1076,9 @@ var ProTable = function ProTable(props) {
     }
     if (showPagination && switchViewState === 'table' || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination) && switchViewState === 'card') {
       var _props$paginationProp3;
-      var _ref6 = (_props$paginationProp3 = props === null || props === void 0 ? void 0 : props.paginationProps) !== null && _props$paginationProp3 !== void 0 ? _props$paginationProp3 : {},
-        onPaginationPropsChange = _ref6.onChange,
-        othersPaginationProps = _objectWithoutProperties(_ref6, _excluded2);
+      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,

package/lib/table/typing.d.ts

@@ -168,6 +168,10 @@ export declare type ProTableProps = {
     defaultView?: 'table' | 'card';
     /** 空状态配置 **/
     emptyProps?: EmptyContentProps;
+    /** 是否绑定 url **/
+    bindUrl?: boolean;
+    /** 绑定 url 配置 **/
+    bindUrlProps?: ProTableBindUrlProps;
 } & Omit<TableProps, 'columns'> & ProTableTopAreaProps;
 export declare type rowSelectionType = {
     getProps?: (record: any, index: number) => any;
@@ -315,6 +319,8 @@ export declare type ProTableLayoutProps = {
     defaultView?: 'table' | 'card';
     autoRefresh?: ProTableProps['autoRefresh'];
     autoRefreshProps?: ProTableProps['autoRefreshProps'];
+    bindUrl?: ProTableProps['bindUrl'];
+    bindUrlProps?: ProTableProps['bindUrlProps'];
 } & ProTableTopAreaProps;
 /** columns 列过滤 */
 export declare type ProTableColumnsFilterItemProps = {
@@ -401,4 +407,12 @@ export declare type ProTableCardViewProps = {
     /** 表格分页器参数 **/
     tablePaginationProps?: PaginationProps;
 };
+export declare type ProTableBindUrlProps = {
+    /** 翻页器区域 **/
+    pagination?: boolean;
+    /** 搜索区域 **/
+    filters?: boolean;
+    /** 表格标题过滤器区域 **/
+    headerFilters?: boolean;
+};
 export {};

package/lib/table/utils/columnRender.d.ts

@@ -2,11 +2,11 @@
  * 渲染列的逻辑函数
  */
 import React from 'react';
-import { ProTableColumnProps, ProTableActionType } from '../typing';
+import { ProTableColumnProps, ProTableActionType, ProTableProps } from '../typing';
 /**
  * 增加了 icon 的功能 render title
  */
-export declare const renderColumnsTitle: (item: ProTableColumnProps, actionRef: React.MutableRefObject<ProTableActionType | undefined>) => JSX.Element;
+export declare const renderColumnsTitle: (item: ProTableColumnProps, actionRef: React.MutableRefObject<ProTableActionType | undefined>, bindUrl?: ProTableProps['bindUrl'], bindUrlProps?: ProTableProps['bindUrlProps']) => JSX.Element;
 /**
  * 负责单元格的具体渲染
  */

package/lib/table/utils/columnRender.js

@@ -29,7 +29,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 /**
  * 增加了 icon 的功能 render title
  */
-var renderColumnsTitle = function renderColumnsTitle(item, actionRef) {
+var renderColumnsTitle = function renderColumnsTitle(item, actionRef, bindUrl, bindUrlProps) {
   var filterMode = item.filterMode,
     filters = item.filters,
     dataSource = item.dataSource,
@@ -86,7 +86,9 @@ var renderColumnsTitle = function renderColumnsTitle(item, actionRef) {
     icon: item.tooltipIcon
   }), item.filters && /*#__PURE__*/_react.default.createElement(_Filter.default, {
     column: item,
-    actionRef: actionRef
+    actionRef: actionRef,
+    bindUrl: bindUrl,
+    bindUrlProps: bindUrlProps
   }));
 };
 /**

package/lib/table/utils/genProColumnToColumn.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ProTableColumnProps, ProTableActionType } from '../typing';
+import { ProTableColumnProps, ProTableActionType, ProTableProps } from '../typing';
 import { ColumnProps } from '@alicloudfe/components/types/table';
 declare type FixedColumnProps = ColumnProps & {
     wordBreak?: string;
@@ -9,5 +9,5 @@ declare type FixedColumnProps = ColumnProps & {
  */
 export default function genProColumnToColumn(columns: ProTableColumnProps[], 
 /** 是否渲染骨架屏 */
-showSkeleton: boolean, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any, dataTeamixSpm?: string): FixedColumnProps[];
+showSkeleton: boolean, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any, dataTeamixSpm?: string, bindUrl?: ProTableProps['bindUrl'], bindUrlProps?: ProTableProps['bindUrlProps']): FixedColumnProps[];
 export {};

package/lib/table/utils/genProColumnToColumn.js

@@ -24,6 +24,8 @@ showSkeleton, actionRef) {
   var
   // 用于埋点
   dataTeamixSpm = arguments.length > 4 ? arguments[4] : undefined;
+  var bindUrl = arguments.length > 5 ? arguments[5] : undefined;
+  var bindUrlProps = arguments.length > 6 ? arguments[6] : undefined;
   return columns.map(function (columnProps) {
     var filters = columnProps.filters,
       dataIndex = columnProps.dataIndex,
@@ -47,7 +49,7 @@ showSkeleton, actionRef) {
     }, others), {}, {
       children: children ? genProColumnToColumn(children, showSkeleton, actionRef, context) : undefined,
       dataIndex: dataIndex === null || dataIndex === void 0 ? void 0 : dataIndex.toString(),
-      title: (0, _columnRender.renderColumnsTitle)(columnProps, actionRef),
+      title: (0, _columnRender.renderColumnsTitle)(columnProps, actionRef, bindUrl, bindUrlProps),
       cell: function cell(value, index, record) {
         return (0, _columnRender.renderCell)(value, columnProps, index, record, actionRef, context, dataTeamixSpm);
       }

package/lib/table/utils/util.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ProTableActionType } from '../typing';
+export declare function getUrlStateFilter(urlState: {
+    [key: string]: any;
+}, actionRef: React.MutableRefObject<ProTableActionType | undefined>): void;

package/lib/table/utils/util.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUrlStateFilter = getUrlStateFilter;
+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 getUrlStateFilter(urlState, actionRef) {
+  var _actionRef$current$ge, _actionRef$current, _actionRef$current$ge2, _actionRef$current$ge3, _actionRef$current2, _actionRef$current2$s;
+  var filters = Object.keys(urlState).filter(function (item) {
+    return /^filter.+$/.test(item);
+  });
+  var urlStateParams = Object.fromEntries(filters.map(function (item) {
+    var _item$split, _urlState$item, _urlState$item$join, _urlState$item$split, _urlState$item2, _urlState$item2$split;
+    return [(_item$split = item.split('filter')) === null || _item$split === void 0 ? void 0 : _item$split[1], {
+      params: Array.isArray(urlState === null || urlState === void 0 ? void 0 : urlState[item]) ? urlState === null || urlState === void 0 ? void 0 : (_urlState$item = urlState[item]) === null || _urlState$item === void 0 ? void 0 : (_urlState$item$join = _urlState$item.join) === null || _urlState$item$join === void 0 ? void 0 : _urlState$item$join.call(_urlState$item, ',') : urlState === null || urlState === void 0 ? void 0 : urlState[item],
+      rules: Array.isArray(urlState === null || urlState === void 0 ? void 0 : urlState[item]) ? urlState === null || urlState === void 0 ? void 0 : urlState[item] : (_urlState$item$split = urlState === null || urlState === void 0 ? void 0 : (_urlState$item2 = urlState[item]) === null || _urlState$item2 === void 0 ? void 0 : (_urlState$item2$split = _urlState$item2.split) === null || _urlState$item2$split === void 0 ? void 0 : _urlState$item2$split.call(_urlState$item2, ',')) !== null && _urlState$item$split !== void 0 ? _urlState$item$split : []
+    }];
+  }));
+  var rules = (_actionRef$current$ge = (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$ge2 = _actionRef$current.getState) === null || _actionRef$current$ge2 === void 0 ? void 0 : (_actionRef$current$ge3 = _actionRef$current$ge2.call(_actionRef$current)) === null || _actionRef$current$ge3 === void 0 ? void 0 : _actionRef$current$ge3.filterRules) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : {};
+  // 再设置所有的列筛选状态
+  (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$s = _actionRef$current2.setFilterRules) === null || _actionRef$current2$s === void 0 ? void 0 : _actionRef$current2$s.call(_actionRef$current2, _objectSpread(_objectSpread({}, rules), urlStateParams));
+}

package/lib/xconsole.scss

@@ -74,8 +74,9 @@
   --color-event-p5: rgba(209, 187, 79, 1);
   --color-event-p6: rgba(0, 179, 199, 1);
   --color-event-p7: rgba(0, 146, 199, 1);
-  --color-text1-4: #1A1A1A;
+  --color-text1-4: var(--color-text-1, #1A1A1A);
   --color-text1-3: rgba(51, 51, 51, 1);
+  --color-text1-2: rgba(105,105,105,1);
   --color-notice-7: rgba(88, 154, 219, 1);
   --color-notice-5: rgba(0, 100, 200, 1);
   --color-notice-6: rgba(0, 87, 173, 1);
@@ -487,6 +488,10 @@
 
   --teamix-status-tag-loading-background: var(--G40, #AAAAAA);
 
+  --color-text1-3: #555555;
+  --color-text1-2: #888888;
+
+
   .teamix-pro-lable-icon-tip-icon i {
     color: var(--G40, #AAAAAA);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix/pro",
-  "version": "1.5.13",
+  "version": "1.5.16",
   "description": "TeamixPro大包",
   "keywords": [
     "aliyun",