@teamix/pro 1.5.13 → 1.5.15

package/es/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/es/table/utils/util.js

@@ -0,0 +1,19 @@
+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; }
+export 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/es/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/lib/actions/dialog.js

@@ -218,7 +218,7 @@ function useDialogAction(action, actionContext, hasForm) {
       className: (0, _classnames.default)('teamix-pro-dialog-footer-description', getFooterAlignClass(isDrawer, footerAlign))
     }, renderDialogFooterDescription(footerDescription)))), _defineProperty(_objectSpread2, "footerAlign", footerAlign), _defineProperty(_objectSpread2, "className", (0, _classnames.default)('teamix-pro-action-dialog', {
       'has-footer-description': !!footerDescription
-    })), _defineProperty(_objectSpread2, "footer", addContextForReactNode(footer, dialogContext)), _objectSpread2), containerProps), containerOtherProps);
+    })), _defineProperty(_objectSpread2, isDrawer ? 'renderFooter' : 'footer', addContextForReactNode(footer, dialogContext)), _objectSpread2), containerProps), containerOtherProps);
     // TODO Drawer 基础组件未支持此配置，日后支持，并修改onOk、onCancel写法
     if ((!dialogType || dialogType === 'dialog') && hideFooter) {
       quickShowProps['footer'] = !hideFooter;

package/lib/actions/index.scss

@@ -10,7 +10,7 @@
   }
 
   &.teamix-pro-actions-type-button {
-    & > button {
+    & > button,& > span {
       &:not(:last-child) {
         margin-right: var(--s-2);
       }

package/lib/card/index.scss

@@ -1,3 +1,5 @@
+@import "xconsole";
+
 .teamix-pro-card {
   width: 100%;
 

package/lib/card/xconsole.scss

@@ -0,0 +1,3 @@
+.theme-xconsole {
+
+}

package/lib/global.scss

@@ -1,4 +1,5 @@
 @import "./xconsole.scss";
+@import "next-xconsole";
 // transition 切换主题优化，暂时先写到 pro 里，后面加到基础组件里
 
 // table 行背景色

package/lib/index.d.ts

@@ -28,5 +28,5 @@ export * from './table';
 export * from './sidebar';
 export * from './utils';
 export * from './timeline';
-declare const version = "1.5.13";
+declare const version = "1.5.15";
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, TeamixIcon, hooks, nocode, templates, utils, };

package/lib/index.js

@@ -280,7 +280,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 if (!((_window = window) === null || _window === void 0 ? void 0 : _window.TEAMIXPRO_WITHOUT_ICON)) {
   _icon.default.setConfig(_utils.default.getTeamixIconConfig());
 }
-var version = '1.5.13';
+var version = '1.5.15';
 // By TeamixTest
 exports.version = version;
 window.postMessage({

package/lib/next-xconsole.scss

@@ -0,0 +1,34 @@
+.theme-xconsole {
+  //.next-drawer-header {
+  //  color: var(--color-text-1, #1A1A1A)
+  //}
+  //.next-message.next-message-success.next-toast .next-message-title {
+  //  color: var(--color-text-1, #1A1A1A)
+  //}
+
+  --message-success-color-border-toast: var(--color-border-4, #E5E5E5);
+
+  /* --card-border-color: var(--color-text1-4, #E3E4E6); */
+  --card-border-color: var(--color-border-4, #E5E5E5);
+  /* --tab-pure-divider-border-color: var(--color-text1-4, #e5e5e5); */
+  --tab-pure-divider-border-color: var(--color-border-4, #E5E5E5);
+  --drawer-title-border-color: var(--color-border-4, #E5E5E5);
+
+  --popup-local-border-color: var(--color-border-4, #E5E5E5);
+
+  --btn-pure-normal-bg-disabled: var(--color-fill-2, #F7F7F7);
+  --checkbox-disabled-bg-color: var(--color-border-1, #D9D9D9);
+
+  --btn-pure-normal-border-color-disabled: var(--color-border-1, #D9D9D9);
+  --btn-pure-primary-border-color-disabled: var(--color-border-1, #D9D9D9);
+
+  --tab-item-margin-lr-size-m: 16px;
+  --tab-pure-hover-bg: transparent;
+
+  --progress-line-underlay-color: var(--color-border-4, #E5E5E5);
+  --range-normal-unselected-color: var(--color-border-4, #E5E5E5);
+
+  .next-formily-item-inset {
+    border: 1px solid var(--color-border-1, #D9D9D9);
+  }
+}

package/lib/nocode/configurators/ProTable.js

@@ -6,28 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _common = require("./common");
 var initialValues = {
-  columns: [{
-    dataIndex: 'instanceName',
-    title: '实例ID/实例名称'
-  }, {
-    dataIndex: 'organizationName',
-    title: '组织',
-    tooltip: '我这一列是可以被复制的～',
-    render: {
-      copy: true
-    }
-  }],
-  url: 'https://oneapi.alibaba-inc.com/mock/teamix-pro/api/getTableResource',
-  formatResult: {
-    data: 'data',
-    total: 'pageInfo.total'
-  },
-  mainAction: {
-    actions: [{
-      key: 'action',
-      children: '操作按钮'
-    }]
-  }
+  columns: []
 };
 var defaultValues = {
   showSkeleton: true,

package/lib/nocode/pages/index.js

@@ -54,32 +54,7 @@ var PageMap = {
 // 全部页面模板默认初始值
 exports.PageMap = PageMap;
 var PageDefaultInitialValues = {
-  LIST: {
-    header: {
-      title: '页面标题'
-    },
-    content: {
-      header: {
-        title: '表格标题'
-      },
-      columns: [{
-        dataIndex: 'instanceName',
-        title: '实例ID/实例名称'
-      }, {
-        dataIndex: 'organizationName',
-        title: '组织',
-        tooltip: '我这一列是可以被复制的～',
-        render: {
-          copy: true
-        }
-      }],
-      url: 'https://oneapi.alibaba-inc.com/mock/teamix-pro/api/getTableResource',
-      formatResult: {
-        data: 'data',
-        total: 'pageInfo.total'
-      }
-    }
-  },
+  LIST: {},
   DETAIL: {},
   FORM: {}
 };

package/lib/page-header/index.scss

@@ -1,3 +1,4 @@
+@import "xconsole";
 $prefix: 'teamix-pro-page-header';
 
 .#{$prefix} {
@@ -12,7 +13,7 @@ $prefix: 'teamix-pro-page-header';
     justify-content: space-between;
     align-items: center;
     min-height: 18px;
-    height: var(--layout-header-height, auto);
+    height: auto;
     margin-bottom: var(--s-2, 8px);
 
     &.with-description {

package/lib/page-header/xconsole.scss

@@ -0,0 +1,5 @@
+.theme-xconsole {
+  .teamix-pro-page-header .teamix-pro-page-header-title{
+    color: var(--color-text-1, #1A1A1A);
+  }
+}

package/lib/table/components/Filter/index.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import './index.scss';
-import { ProTableColumnProps, ProTableActionType } from '../../typing';
+import { ProTableColumnProps, ProTableActionType, ProTableProps } from '../../typing';
 declare type ProTableFilterProps = {
     column: ProTableColumnProps;
     actionRef: React.MutableRefObject<ProTableActionType | undefined>;
     switchCardView?: 'table' | 'card';
+    bindUrl?: ProTableProps['bindUrl'];
+    bindUrlProps?: ProTableProps['bindUrlProps'];
 };
-declare const Filter: React.FC<ProTableFilterProps>;
-export default Filter;
+declare const _default: React.NamedExoticComponent<ProTableFilterProps>;
+export default _default;

package/lib/table/components/Filter/index.js

@@ -10,6 +10,7 @@ var _icon = _interopRequireDefault(require("@teamix/icon"));
 var _components = require("@alicloudfe/components");
 var _utils = require("@teamix/utils");
 require("./index.scss");
+var _hooks = require("@teamix/hooks");
 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); }
 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; }
@@ -30,13 +31,20 @@ var CheckboxItem = _components.Menu.CheckboxItem;
 var cls = (0, _utils.usePrefixCls)('teamix-pro-table-toolbar-filter');
 var RadioItem = _components.Menu.RadioItem;
 var Filter = function Filter(props) {
+  var _urlState$split, _urlState, _urlState$split2;
   var column = props.column,
     actionRef = props.actionRef,
-    switchCardView = props.switchCardView;
+    switchCardView = props.switchCardView,
+    bindUrlProps = props.bindUrlProps,
+    bindUrl = props.bindUrl;
   var _column$filtersWidth = column.filtersWidth,
     filtersWidth = _column$filtersWidth === void 0 ? 130 : _column$filtersWidth;
+  var _useUrlState = (0, _hooks.useUrlState)(),
+    _useUrlState2 = _slicedToArray(_useUrlState, 2),
+    urlState = _useUrlState2[0],
+    setUrlState = _useUrlState2[1];
   // 选中过滤项
-  var _useState = (0, _react.useState)([]),
+  var _useState = (0, _react.useState)((_urlState$split = urlState === null || urlState === void 0 ? void 0 : (_urlState = urlState["filter".concat(column === null || column === void 0 ? void 0 : column.dataIndex)]) === null || _urlState === void 0 ? void 0 : (_urlState$split2 = _urlState.split) === null || _urlState$split2 === void 0 ? void 0 : _urlState$split2.call(_urlState, ',')) !== null && _urlState$split !== void 0 ? _urlState$split : []),
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
@@ -48,7 +56,10 @@ var Filter = function Filter(props) {
     var _actionRef$current$ge, _actionRef$current, _actionRef$current$ge2, _actionRef$current$ge3, _actionRef$current$ge4, _actionRef$current$ge5;
     // 从全局状态中读取上次存储的条件
     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$ge4 = _actionRef$current$ge3.filterRules) === null || _actionRef$current$ge4 === void 0 ? void 0 : (_actionRef$current$ge5 = _actionRef$current$ge4[column.dataIndex]) === null || _actionRef$current$ge5 === void 0 ? void 0 : _actionRef$current$ge5.rules) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : [];
-    setSelected(rules);
+    // 全局状态中需要有值才赋值。优先级：全局状态 > urlState
+    if (rules && rules.length > 0) {
+      setSelected(rules);
+    }
   }, []);
   // 获取过滤项
   var filters = (0, _react.useMemo)(function () {
@@ -75,6 +86,72 @@ var Filter = function Filter(props) {
     // console.log(filters);
     return filters;
   }, []);
+  // 点击确定回调
+  var onFilterOk = function onFilterOk() {
+    var _actionRef$current2, _actionRef$current2$f, _actionRef$current$ge6, _actionRef$current3, _actionRef$current3$g, _actionRef$current3$g2, _actionRef$current4, _actionRef$current4$s, _actionRef$current5, _actionRef$current7, _actionRef$current7$r, _actionRef$current8, _actionRef$current8$r, _actionRef$current9, _actionRef$current9$c;
+    (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.filterDataSource) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2, column.dataIndex);
+    // 先获取此列的param
+    var param = '';
+    if (column.beforeFilter) {
+      var _column$beforeFilter;
+      param = (_column$beforeFilter = column.beforeFilter) === null || _column$beforeFilter === void 0 ? void 0 : _column$beforeFilter.call(column, selected);
+    } else {
+      param = selected.join(',');
+    }
+    // 需要带上其他所有的信息
+    var rules = (_actionRef$current$ge6 = (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$g = _actionRef$current3.getState) === null || _actionRef$current3$g === void 0 ? void 0 : (_actionRef$current3$g2 = _actionRef$current3$g.call(_actionRef$current3)) === null || _actionRef$current3$g2 === void 0 ? void 0 : _actionRef$current3$g2.filterRules) !== null && _actionRef$current$ge6 !== void 0 ? _actionRef$current$ge6 : {};
+    // 再设置所有的列筛选状态
+    (_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, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
+      rules: selected,
+      params: param
+    })));
+    var targetPageKey = 'currentPage';
+    var pageInfo = (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : _actionRef$current5.pageInfo;
+    if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
+      targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
+    }
+    if (switchCardView === 'card') {
+      var _actionRef$current6, _actionRef$current6$s;
+      (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$s = _actionRef$current6.setData) === null || _actionRef$current6$s === void 0 ? void 0 : _actionRef$current6$s.call(_actionRef$current6, []);
+    }
+    // 发送请求
+    (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$r = _actionRef$current7.request) === null || _actionRef$current7$r === void 0 ? void 0 : _actionRef$current7$r.call(_actionRef$current7, _defineProperty({}, targetPageKey, 1));
+    (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$r = _actionRef$current8.resetPage) === null || _actionRef$current8$r === void 0 ? void 0 : _actionRef$current8$r.call(_actionRef$current8);
+    // 清空表格选择
+    (_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);
+    setVisible(false);
+    // 设置 url
+    if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.headerFilters) !== false && (urlState === null || urlState === void 0 ? void 0 : urlState["filter".concat(column === null || column === void 0 ? void 0 : column.dataIndex)]) !== selected.join(',')) {
+      setUrlState(_defineProperty({}, "filter".concat(column === null || column === void 0 ? void 0 : column.dataIndex), selected.join(',')));
+    }
+  };
+  // 重置回调
+  var onFilterReset = function onFilterReset() {
+    var _actionRef$current$ge7, _actionRef$current10, _actionRef$current10$, _actionRef$current10$2, _actionRef$current11, _actionRef$current11$, _actionRef$current12, _actionRef$current12$;
+    setSelected([]);
+    var rules = (_actionRef$current$ge7 = (_actionRef$current10 = actionRef.current) === null || _actionRef$current10 === void 0 ? void 0 : (_actionRef$current10$ = _actionRef$current10.getState) === null || _actionRef$current10$ === void 0 ? void 0 : (_actionRef$current10$2 = _actionRef$current10$.call(_actionRef$current10)) === null || _actionRef$current10$2 === void 0 ? void 0 : _actionRef$current10$2.filterRules) !== null && _actionRef$current$ge7 !== void 0 ? _actionRef$current$ge7 : {};
+    (_actionRef$current11 = actionRef.current) === null || _actionRef$current11 === void 0 ? void 0 : (_actionRef$current11$ = _actionRef$current11.setFilterRules) === null || _actionRef$current11$ === void 0 ? void 0 : _actionRef$current11$.call(_actionRef$current11, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
+      rules: [],
+      params: ''
+    })));
+    (_actionRef$current12 = actionRef.current) === null || _actionRef$current12 === void 0 ? void 0 : (_actionRef$current12$ = _actionRef$current12.filterDataSource) === null || _actionRef$current12$ === void 0 ? void 0 : _actionRef$current12$.call(_actionRef$current12, column.dataIndex);
+    if (selected.length > 0) {
+      var _actionRef$current13, _actionRef$current14, _actionRef$current14$, _actionRef$current15, _actionRef$current15$, _actionRef$current16, _actionRef$current16$;
+      var targetPageKey = 'currentPage';
+      var pageInfo = (_actionRef$current13 = actionRef.current) === null || _actionRef$current13 === void 0 ? void 0 : _actionRef$current13.pageInfo;
+      if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
+        targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
+      }
+      // 发送请求
+      (_actionRef$current14 = actionRef.current) === null || _actionRef$current14 === void 0 ? void 0 : (_actionRef$current14$ = _actionRef$current14.request) === null || _actionRef$current14$ === void 0 ? void 0 : _actionRef$current14$.call(_actionRef$current14, _defineProperty({}, targetPageKey, 1));
+      (_actionRef$current15 = actionRef.current) === null || _actionRef$current15 === void 0 ? void 0 : (_actionRef$current15$ = _actionRef$current15.resetPage) === null || _actionRef$current15$ === void 0 ? void 0 : _actionRef$current15$.call(_actionRef$current15);
+      // 清空表格选择
+      (_actionRef$current16 = actionRef.current) === null || _actionRef$current16 === void 0 ? void 0 : (_actionRef$current16$ = _actionRef$current16.clearRowSelection) === null || _actionRef$current16$ === void 0 ? void 0 : _actionRef$current16$.call(_actionRef$current16);
+      if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.headerFilters) !== false) {
+        setUrlState(_defineProperty({}, "filter".concat(column === null || column === void 0 ? void 0 : column.dataIndex), undefined));
+      }
+    }
+  };
   // 渲染单选
   var renderSingle = function renderSingle() {
     return filters === null || filters === void 0 ? void 0 : filters.map(function (_ref3) {
@@ -154,71 +231,15 @@ var Filter = function Filter(props) {
     className: cls({
       btn: true
     }),
-    onClick: function onClick() {
-      var _actionRef$current2, _actionRef$current2$f, _actionRef$current$ge6, _actionRef$current3, _actionRef$current3$g, _actionRef$current3$g2, _actionRef$current4, _actionRef$current4$s, _actionRef$current5, _actionRef$current7, _actionRef$current7$r, _actionRef$current8, _actionRef$current8$r, _actionRef$current9, _actionRef$current9$c;
-      (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.filterDataSource) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2, column.dataIndex);
-      // 先获取此列的param
-      var param = '';
-      if (column.beforeFilter) {
-        var _column$beforeFilter;
-        param = (_column$beforeFilter = column.beforeFilter) === null || _column$beforeFilter === void 0 ? void 0 : _column$beforeFilter.call(column, selected);
-      } else {
-        param = selected.join(',');
-      }
-      // 需要带上其他所有的信息
-      var rules = (_actionRef$current$ge6 = (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$g = _actionRef$current3.getState) === null || _actionRef$current3$g === void 0 ? void 0 : (_actionRef$current3$g2 = _actionRef$current3$g.call(_actionRef$current3)) === null || _actionRef$current3$g2 === void 0 ? void 0 : _actionRef$current3$g2.filterRules) !== null && _actionRef$current$ge6 !== void 0 ? _actionRef$current$ge6 : {};
-      // 再设置所有的列筛选状态
-      (_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, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
-        rules: selected,
-        params: param
-      })));
-      var targetPageKey = 'currentPage';
-      var pageInfo = (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : _actionRef$current5.pageInfo;
-      if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
-        targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
-      }
-      if (switchCardView === 'card') {
-        var _actionRef$current6, _actionRef$current6$s;
-        (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$s = _actionRef$current6.setData) === null || _actionRef$current6$s === void 0 ? void 0 : _actionRef$current6$s.call(_actionRef$current6, []);
-      }
-      // 发送请求
-      (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$r = _actionRef$current7.request) === null || _actionRef$current7$r === void 0 ? void 0 : _actionRef$current7$r.call(_actionRef$current7, _defineProperty({}, targetPageKey, 1));
-      (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$r = _actionRef$current8.resetPage) === null || _actionRef$current8$r === void 0 ? void 0 : _actionRef$current8$r.call(_actionRef$current8);
-      // 清空表格选择
-      (_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);
-      setVisible(false);
-    }
+    onClick: onFilterOk
   }, (0, _utils.getMessage)('ok')), /*#__PURE__*/_react.default.createElement(_components.Button, {
     type: "normal",
     size: "small",
     className: cls({
       btn: true
     }),
-    onClick: function onClick() {
-      var _actionRef$current$ge7, _actionRef$current10, _actionRef$current10$, _actionRef$current10$2, _actionRef$current11, _actionRef$current11$, _actionRef$current12, _actionRef$current12$;
-      setSelected([]);
-      var rules = (_actionRef$current$ge7 = (_actionRef$current10 = actionRef.current) === null || _actionRef$current10 === void 0 ? void 0 : (_actionRef$current10$ = _actionRef$current10.getState) === null || _actionRef$current10$ === void 0 ? void 0 : (_actionRef$current10$2 = _actionRef$current10$.call(_actionRef$current10)) === null || _actionRef$current10$2 === void 0 ? void 0 : _actionRef$current10$2.filterRules) !== null && _actionRef$current$ge7 !== void 0 ? _actionRef$current$ge7 : {};
-      (_actionRef$current11 = actionRef.current) === null || _actionRef$current11 === void 0 ? void 0 : (_actionRef$current11$ = _actionRef$current11.setFilterRules) === null || _actionRef$current11$ === void 0 ? void 0 : _actionRef$current11$.call(_actionRef$current11, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
-        rules: [],
-        params: ''
-      })));
-      (_actionRef$current12 = actionRef.current) === null || _actionRef$current12 === void 0 ? void 0 : (_actionRef$current12$ = _actionRef$current12.filterDataSource) === null || _actionRef$current12$ === void 0 ? void 0 : _actionRef$current12$.call(_actionRef$current12, column.dataIndex);
-      if (selected.length > 0) {
-        var _actionRef$current13, _actionRef$current14, _actionRef$current14$, _actionRef$current15, _actionRef$current15$, _actionRef$current16, _actionRef$current16$;
-        var targetPageKey = 'currentPage';
-        var pageInfo = (_actionRef$current13 = actionRef.current) === null || _actionRef$current13 === void 0 ? void 0 : _actionRef$current13.pageInfo;
-        if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
-          targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
-        }
-        // 发送请求
-        (_actionRef$current14 = actionRef.current) === null || _actionRef$current14 === void 0 ? void 0 : (_actionRef$current14$ = _actionRef$current14.request) === null || _actionRef$current14$ === void 0 ? void 0 : _actionRef$current14$.call(_actionRef$current14, _defineProperty({}, targetPageKey, 1));
-        (_actionRef$current15 = actionRef.current) === null || _actionRef$current15 === void 0 ? void 0 : (_actionRef$current15$ = _actionRef$current15.resetPage) === null || _actionRef$current15$ === void 0 ? void 0 : _actionRef$current15$.call(_actionRef$current15);
-        // 清空表格选择
-        (_actionRef$current16 = actionRef.current) === null || _actionRef$current16 === void 0 ? void 0 : (_actionRef$current16$ = _actionRef$current16.clearRowSelection) === null || _actionRef$current16$ === void 0 ? void 0 : _actionRef$current16$.call(_actionRef$current16);
-      }
-      // setVisible(!visible);
-    }
+    onClick: onFilterReset
   }, (0, _utils.getMessage)('reset'))))));
 };
-var _default = Filter;
+var _default = /*#__PURE__*/(0, _react.memo)(Filter);
 exports.default = _default;

package/lib/table/components/Layout/index.js

@@ -12,7 +12,7 @@ var _form = require("../../../form");
 var _ToolBar = _interopRequireDefault(require("../ToolBar"));
 var _QuickAction = _interopRequireDefault(require("../QuickAction"));
 require("./index.scss");
-var _excluded = ["header", "mainAction", "extra", "actionRef", "dataFilter", "dataFilterFormRef", "afterDataFilter", "rowSelection", "toolBar", "dataTeamixSpm"];
+var _excluded = ["header", "mainAction", "extra", "actionRef", "dataFilter", "dataFilterFormRef", "afterDataFilter", "rowSelection", "toolBar", "dataTeamixSpm", "bindUrl", "bindUrlProps"];
 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); }
 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; }
@@ -34,6 +34,8 @@ var Layout = function Layout(props) {
     rowSelection = props.rowSelection,
     toolBar = props.toolBar,
     dataTeamixSpm = props.dataTeamixSpm,
+    bindUrl = props.bindUrl,
+    bindUrlProps = props.bindUrlProps,
     otherProps = _objectWithoutProperties(props, _excluded);
   // 渲染主操作区
   var renderMainAction = function renderMainAction() {
@@ -112,7 +114,8 @@ var Layout = function Layout(props) {
             (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.onExpand) && (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.onExpand(expand));
           },
           addonBefore: renderMainAction(),
-          addonAfter: renderAddonAfter()
+          addonAfter: renderAddonAfter(),
+          bindUrl: bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.filters) !== false
         }, dataFilter)), afterDataFilter && /*#__PURE__*/_react.default.createElement("div", {
           className: "mb8 ".concat(cls('after-data-filter-wrapper'))
         }, afterDataFilter));

package/lib/table/components/Layout/index.scss

@@ -43,5 +43,6 @@ $prefix: 'teamix-pro-table-layout';
   &-addon-after-wrapper {
     display: flex;
     align-items: center;
+    margin-bottom: 8px;
   }
 }

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 _useUrlState = (0, _hooks.useUrlState)(),
+    _useUrlState2 = _slicedToArray(_useUrlState, 2),
+    urlState = _useUrlState2[0],
+    setUrlState = _useUrlState2[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({
+          currentPage: currentPage
+        });
+      }
+      if ((urlState === null || urlState === void 0 ? void 0 : urlState.pageSize) !== pageSize) {
+        setUrlState({
+          pageSize: pageSize
+        });
+      }
+    }
+  }, [currentPage, pageSize, urlState]);
   // 存储能够被 on 监听到的 ProTable 状态
   // 因为只做存储用。不需要更新视图以及需要同步更改。所以不使用 setState 更新
   var _useState21 = (0, _react.useState)({
@@ -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, actionRef);
+      dataRef.current.flag = false;
+    }
     // 如果没有传 url 且没有 customRequest，直接返回
     if (!url && !customRequest) {
       return;
@@ -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,

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 {};