@teamix/pro 1.2.26 → 1.2.27

package/es/table/components/ToolBar/FullScreenIcon.js

@@ -27,17 +27,11 @@ var FullScreenIcon = function FullScreenIcon(props) {
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      fullscreen = _useState4[0],
-      setFullscreen = _useState4[1]; // 点击全屏
+      fullscreen = _useState2[0],
+      setFullscreen = _useState2[1]; // 点击全屏
 
 
   var allScreenHandle = function allScreenHandle() {
-    setVisible(false);
     setTimeout(function () {
       var _actionRef$current, _actionRef$current$fu;
 
@@ -55,7 +49,8 @@ var FullScreenIcon = function FullScreenIcon(props) {
   }, []); // 监听全屏变化
 
   (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$o = _actionRef$current3.on) === null || _actionRef$current3$o === void 0 ? void 0 : _actionRef$current3$o.call(_actionRef$current3, function (state) {
-    setFullscreen(state);
+    // console.log('dataFilterForm', actionRef.current?.dataFilterForm);
+    setFullscreen(state); // actionRef.current?.dataFilterForm?.setValues(formValues);
   }, 'fullScreenState', 'fullscreenIcon');
   return /*#__PURE__*/React.createElement(Button, {
     iconSize: "small",

package/es/table/components/ToolBar/Fullscreen.js

@@ -7,28 +7,37 @@ var FullScreen = function FullScreen(props) {
   var children = props.children,
       visible = props.visible,
       actionRef = props.actionRef;
+  var _actionRef$current = actionRef.current,
+      normalDataFilterForm = _actionRef$current.normalDataFilterForm,
+      fullscreenDataFilterForm = _actionRef$current.fullscreenDataFilterForm;
 
   function closeByESC(e) {
     if (visible && e.code === 'Escape') {
-      var _actionRef$current, _actionRef$current$se, _actionRef$current2, _actionRef$current2$f;
+      var _actionRef$current2, _actionRef$current2$s, _actionRef$current3, _actionRef$current3$f;
 
-      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setFullScreenState) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, false);
-      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.fullScreen) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2);
+      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$s = _actionRef$current2.setFullScreenState) === null || _actionRef$current2$s === void 0 ? void 0 : _actionRef$current2$s.call(_actionRef$current2, false);
+      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$f = _actionRef$current3.fullScreen) === null || _actionRef$current3$f === void 0 ? void 0 : _actionRef$current3$f.call(_actionRef$current3);
     }
   } // 监听esc按钮
 
 
   useEffect(function () {
-    var _actionRef$current3, _actionRef$current3$s;
+    var _actionRef$current4, _actionRef$current4$s;
 
-    actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$s = _actionRef$current3.setFullScreenState) === null || _actionRef$current3$s === void 0 ? void 0 : _actionRef$current3$s.call(_actionRef$current3, visible);
+    actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$s = _actionRef$current4.setFullScreenState) === null || _actionRef$current4$s === void 0 ? void 0 : _actionRef$current4$s.call(_actionRef$current4, visible);
     window.addEventListener('keydown', closeByESC);
     return function () {
       window.removeEventListener('keydown', closeByESC);
     };
-  }, [visible]); // 全屏开启之后
+  }, [visible]);
+
+  var afterClose = function afterClose() {
+    normalDataFilterForm === null || normalDataFilterForm === void 0 ? void 0 : normalDataFilterForm.setValues(fullscreenDataFilterForm.values);
+  }; // 全屏开启之后
+
 
   var afterOpen = function afterOpen() {
+    fullscreenDataFilterForm.setValues(normalDataFilterForm.values);
     Message.show({
       type: 'notice',
       content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, getMessage('press')), /*#__PURE__*/React.createElement("span", {
@@ -40,13 +49,15 @@ var FullScreen = function FullScreen(props) {
     });
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(Overlay, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children(false), /*#__PURE__*/React.createElement(Overlay, {
     canCloseByOutSideClick: false,
     align: "cc cc",
     cache: true,
     v2: false,
     disableScroll: true,
     shouldUpdatePosition: true,
+    afterClose: afterClose,
+    afterOpen: afterOpen,
     animation: {
       in: 'fadeIn',
       out: 'fadeOut'
@@ -55,15 +66,14 @@ var FullScreen = function FullScreen(props) {
     wrapperStyle: {
       zIndex: 999
     },
-    afterOpen: afterOpen,
     onRequestClose: function onRequestClose() {
-      var _actionRef$current4, _actionRef$current4$f;
+      var _actionRef$current5, _actionRef$current5$f;
 
-      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$f = _actionRef$current4.fullScreen) === null || _actionRef$current4$f === void 0 ? void 0 : _actionRef$current4$f.call(_actionRef$current4);
+      actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$f = _actionRef$current5.fullScreen) === null || _actionRef$current5$f === void 0 ? void 0 : _actionRef$current5$f.call(_actionRef$current5);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "teamix-pro-table-full-screen"
-  }, children)));
+  }, children(true))));
 };
 
 export default FullScreen;

package/es/table/index.js

@@ -32,11 +32,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Table, Checkbox } from '@alicloudfe/components';
 import Pagination from './components/Pagination';
 import genProColumnToColumn from './utils/genProColumnToColumn';
-import { baseClass, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps } from '@teamix/utils';
+import { baseClass, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, getCookie } from '@teamix/utils';
 import { ProSkeletonRaw as Skeleton } from '../skeleton';
 import './index.scss';
 import Layout from './components/Layout';
@@ -46,14 +46,15 @@ import getTableSortIcons from './utils/getTableSortIcons';
 import useTableSelection from './utils/useTableSelection';
 import FullScreen from './components/ToolBar/Fullscreen';
 import EmptyContent from './components/EmptyContent';
-import { createForm, formilyReactive } from '../form';
+import { formilyReactive } from '../form';
 import { ProActionGroup } from '../actions';
-import debounce from 'lodash.debounce';
 import classNames from 'classnames';
 import ProPageContainer from '../page-container';
 export * from './typing';
 var cls = baseClass('teamix-pro-table');
-var toJS = formilyReactive.toJS;
+var toJS = formilyReactive.toJS; // 判断是否是 root 组织
+
+var isRoot = getCookie('organizationId') === '1';
 /**
  * 处理原生传入的 columns 以便于 选择列 方便处理
  * @param columns 原生传入的 columns
@@ -61,14 +62,24 @@ var toJS = formilyReactive.toJS;
  */
 
 var processColumns = function processColumns(columns, initialColumns) {
+  var _filterColumns;
+
   var filterColumns = columns.filter(function (item) {
     return item.columnFilters !== false;
-  }); // 处理只剩一列批量选择的情况下宽度错乱问题
+  });
+
+  if (isRoot) {
+    // root 组织下不显示标签管理
+    filterColumns = filterColumns.filter(function (item) {
+      return item.valueType !== 'selectGroup';
+    });
+  } // 处理只剩一列批量选择的情况下宽度错乱问题
 
-  if (filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) {
-    var _initialColumns$;
 
-    if ((filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) === 1) {
+  if ((_filterColumns = filterColumns) === null || _filterColumns === void 0 ? void 0 : _filterColumns.length) {
+    var _filterColumns2, _initialColumns$;
+
+    if (((_filterColumns2 = filterColumns) === null || _filterColumns2 === void 0 ? void 0 : _filterColumns2.length) === 1) {
       var _filterColumns$, _filterColumns$2;
 
       if ((_filterColumns$ = filterColumns[0]) === null || _filterColumns$ === void 0 ? void 0 : _filterColumns$.width) {
@@ -208,10 +219,8 @@ var ProTable = function ProTable(props) {
   var _useState13 = useState(true),
       _useState14 = _slicedToArray(_useState13, 2),
       customTableLoading = _useState14[0],
-      setCustomTableLoading = _useState14[1]; // 用于存放 Search 组件之前值的 ref
-
+      setCustomTableLoading = _useState14[1];
 
-  var searchValueRef = useRef('');
   var tableRef = useRef(null);
   var actionRef = useRef(); // 传给 table 的过滤后的 columns
 
@@ -261,20 +270,23 @@ var ProTable = function ProTable(props) {
   var _useState23 = useState(false),
       _useState24 = _slicedToArray(_useState23, 2),
       fullscreenState = _useState24[0],
-      setFullscreenState = _useState24[1]; // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
+      setFullscreenState = _useState24[1]; // 非全屏状态下的
+
+
+  var normalDataFilterFormRef = useRef();
+  var fullscreenDataFilterFormRef = useRef();
+  var normalDataFilterForm = normalDataFilterFormRef.current;
+  var fullscreenDataFilterForm = fullscreenDataFilterFormRef.current; // 传给 QueryFilter 的 formRef
 
+  var dataFilterFormRef = fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef;
+  var dataFilterForm = dataFilterFormRef.current; // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
 
   var _useState25 = useState(false),
       _useState26 = _slicedToArray(_useState25, 2),
       footerSuctionState = _useState26[0],
-      setFooterSuctionState = _useState26[1];
-  /** 筛选区域 form */
+      setFooterSuctionState = _useState26[1]; // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
 
 
-  var dataFilterForm = useMemo(function () {
-    return createForm();
-  }, []); // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
-
   var getFooterSuctionState = function getFooterSuctionState() {
     var containerDom = document.querySelector('.teamix-pro-page-container-scroll-container');
 
@@ -426,18 +438,16 @@ var ProTable = function ProTable(props) {
       return _request(params);
     },
     request: function request(params) {
-      if (dataFilterForm.validate()) {
-        // 如果请求中还有翻页相关信息，需要自动设置到指定页
-        if (params === null || params === void 0 ? void 0 : params[targetPageKey]) {
-          setCurrentPage(params[targetPageKey]);
-        }
-
-        if (params === null || params === void 0 ? void 0 : params[targetPageSizeKey]) {
-          setPageSize(params[targetPageSizeKey]);
-        }
+      // 如果请求中还有翻页相关信息，需要自动设置到指定页
+      if (params === null || params === void 0 ? void 0 : params[targetPageKey]) {
+        setCurrentPage(params[targetPageKey]);
+      }
 
-        _request(params);
+      if (params === null || params === void 0 ? void 0 : params[targetPageSizeKey]) {
+        setPageSize(params[targetPageSizeKey]);
       }
+
+      _request(params);
     },
     reset: function reset() {
       var _actionRef$current3, _actionRef$current3$s;
@@ -445,7 +455,7 @@ var ProTable = function ProTable(props) {
       (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset()); // 清空列过滤参数
 
       (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$s = _actionRef$current3.setFilterRules) === null || _actionRef$current3$s === void 0 ? void 0 : _actionRef$current3$s.call(_actionRef$current3, {});
-      dataFilterForm.reset();
+      dataFilterForm === null || dataFilterForm === void 0 ? void 0 : dataFilterForm.reset();
       setCurrentPage(1);
 
       _request(_defineProperty({}, targetPageKey, 1));
@@ -468,6 +478,8 @@ var ProTable = function ProTable(props) {
     },
     data: data,
     dataFilterForm: dataFilterForm,
+    normalDataFilterForm: normalDataFilterForm,
+    fullscreenDataFilterForm: fullscreenDataFilterForm,
     resetTableMaxBodyHeight: function resetTableMaxBodyHeight() {
       getHeaderHeight().then(function (height) {
         setHeaderHeight(height);
@@ -570,7 +582,7 @@ var ProTable = function ProTable(props) {
 
     var sortParams = targetFormatSort(sort); // 筛选区请求参数
 
-    var dataFilterParams = toJS(dataFilterForm.values); // 列过滤请求参数
+    var dataFilterParams = toJS(dataFilterForm === null || dataFilterForm === void 0 ? void 0 : dataFilterForm.values); // 列过滤请求参数
 
     var columnsFilterParams = (_actionRef$current$ge = (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$g = _actionRef$current4.getFilterRules) === null || _actionRef$current4$g === void 0 ? void 0 : _actionRef$current4$g.call(_actionRef$current4)) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : {}; // 格式化后的请求参数
 
@@ -639,14 +651,6 @@ var ProTable = function ProTable(props) {
       _request();
     }
 
-    var searchName = getSearchName();
-
-    if (searchName) {
-      // 如果有初始值，需要赋值
-      var initialValues = toJS(dataFilterForm.initialValues);
-      searchValueRef.current = initialValues[searchName][1];
-    }
-
     return function () {
       if (autoRefreshTimerRef.current) {
         clearTimeout(autoRefreshTimerRef.current);
@@ -666,62 +670,25 @@ var ProTable = function ProTable(props) {
     setSort(nextSort);
 
     _request(targetFormatSort(nextSort));
-  } // 找到 Search 组件对应的 name
-
-
-  var getSearchName = function getSearchName() {
-    var _dataFilter$schema;
-
-    if ((dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.schema) && ((_dataFilter$schema = dataFilter.schema) === null || _dataFilter$schema === void 0 ? void 0 : _dataFilter$schema.length) > 0) {
-      var searchSchema = dataFilter.schema.find(function (item) {
-        return item.component === 'Search';
-      });
-
-      if (searchSchema) {
-        var searchName = searchSchema.name;
-        return searchName;
-      }
-    }
-  }; // 处理 dataFilter 中的 onFilter、onReset
+  } // 处理 dataFilter 中的 onFilter、onReset
 
 
   var dataFilter = _objectSpread(_objectSpread({
     mode: 'inline'
   }, propsDataFilter), {}, {
-    onFilter: debounce(function (values) {
-      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values));
-
-      if (dataFilterForm.validate()) {
-        var _actionRef$current5, _actionRef$current5$c;
-
-        /**
-         * 针对 inline 模式下的 Search 组件做特殊处理
-         * 当切换条件且输入内容为空的时候，类似[a, ''] => [b, ''] 不触发请求
-         */
-        if (dataFilter.mode === 'inline') {
-          var searchName = getSearchName();
+    onFilter: function onFilter(values) {
+      var _actionRef$current5, _actionRef$current5$c;
 
-          if (searchName) {
-            var searchValue = values[searchName][1];
+      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values)); // 搜索变化时，暂时先清空选择
 
-            if (searchValue === (searchValueRef === null || searchValueRef === void 0 ? void 0 : searchValueRef.current)) {
-              return;
-            }
-
-            searchValueRef.current = searchValue;
-          }
-        } // 搜索变化时，暂时先清空选择
-
-
-        (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$c = _actionRef$current5.clearRowSelection) === null || _actionRef$current5$c === void 0 ? void 0 : _actionRef$current5$c.call(_actionRef$current5);
-        setCurrentPage(1);
+      (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$c = _actionRef$current5.clearRowSelection) === null || _actionRef$current5$c === void 0 ? void 0 : _actionRef$current5$c.call(_actionRef$current5);
+      setCurrentPage(1);
 
-        _request(_defineProperty({}, targetPageKey, 1));
-      }
-    }, filterDebounce),
+      _request(_defineProperty({}, targetPageKey, 1));
+    },
     onReset: function onReset() {
       (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
-      dataFilterForm.reset();
+      dataFilterForm === null || dataFilterForm === void 0 ? void 0 : dataFilterForm.reset();
       setCurrentPage(1);
 
       _request(_defineProperty({}, targetPageKey, 1));
@@ -736,7 +703,7 @@ var ProTable = function ProTable(props) {
     }
   };
 
-  var renderTable = function renderTable() {
+  var renderTable = function renderTable(isFullScreen) {
     if (propsColumns) {
       return /*#__PURE__*/React.createElement("div", {
         className: classNames('teamix-pro-table-container', className)
@@ -748,7 +715,7 @@ var ProTable = function ProTable(props) {
         actionRef: actionRef,
         columns: propsColumns,
         dataFilter: dataFilter,
-        dataFilterForm: dataFilterForm,
+        dataFilterFormRef: isFullScreen ? fullscreenDataFilterFormRef : normalDataFilterFormRef,
         rowSelection: rowSelection,
         filterColumnType: filterColumnType
       }), /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
@@ -893,14 +860,16 @@ var ProTable = function ProTable(props) {
   return /*#__PURE__*/React.createElement(FullScreen, {
     visible: fullscreenState,
     actionRef: actionRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cls({
-      '': true,
-      fullscreen: fullscreenState // 'footer-suction': footerSuctionState && footerSuction,
-
-    }),
-    ref: tableRef
-  }, renderTable(), footerSuctionState && footerSuction && !fullscreenState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !(footerSuctionState && footerSuction) && !fullscreenState && renderFooter(), fullscreenState && renderFooter()));
+  }, function (isFullScreen) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls({
+        '': true,
+        fullscreen: fullscreenState // 'footer-suction': footerSuctionState && footerSuction,
+
+      }),
+      ref: tableRef
+    }, renderTable(isFullScreen), footerSuctionState && footerSuction && !fullscreenState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !(footerSuctionState && footerSuction) && !fullscreenState && renderFooter(), fullscreenState && renderFooter());
+  });
 };
 
 export default ProTable;

package/es/table/typing.d.ts

@@ -3,7 +3,7 @@
  */
 import { ColumnProps, TableProps } from '@alicloudfe/components/types/table';
 import { ProFieldType, ProFieldRenderProps, ProFieldDataSourceItem } from '../field';
-import { IFilterProps } from '../form';
+import { QueryFilterProps } from '../form';
 import { ProActionGroupProps, ProActionButtonProps } from '../actions';
 import { PaginationProps } from '@alicloudfe/components/types/pagination';
 import { HeaderProps as ProTableHeaderProps } from '@teamix/utils';
@@ -56,6 +56,8 @@ export declare type ProTableColumnProps = {
     dataIndex?: string | string[];
     /** 指定 valueType 为日期时间格式时，可以格式化日期时间 */
     format?: string;
+    /** ProField 其他配置项 */
+    props?: any;
 } & Omit<ColumnProps, 'filters' | 'dataIndex' | 'filtersMode'>;
 export declare type ProColumnProps = ProTableColumnProps;
 export declare type ProTableProps = {
@@ -105,7 +107,10 @@ export declare type ProTableProps = {
     footerAction?: ProActionGroupProps | React.ReactNode;
     /** 表格底部（右层）配置 */
     footer?: React.ReactNode;
-    /** 筛选区自动搜索的防抖时间（毫秒） */
+    /**
+     * @deprecated 已废弃 建议用 dataFilter 中的 filterDebounce 代替
+     * 筛选区自动搜索的防抖时间（毫秒）
+     */
     filterDebounce?: number;
     /** ProTable action 的引用，便于手动触发一些方法  */
     actionRef?: React.MutableRefObject<ProTableActionType | undefined>;
@@ -185,6 +190,8 @@ export declare type ProTableActionType = {
     resetPage?: () => void;
     /** 获取数据过滤区表单实例 */
     dataFilterForm?: FormType;
+    normalDataFilterForm?: FormType;
+    fullscreenDataFilterForm?: FormType;
     /** 表格当前的数据 */
     data?: any[];
 } & ProTableActionTypeMutations;
@@ -219,17 +226,12 @@ export declare type ProTableActionTypeState = {
     [key: string]: any;
 };
 export declare type ProTableDataFilterProps = {
-    /** 展示形式 */
-    mode?: 'inline' | 'panel';
-    /** mode='panel' 时是否默认展开 */
-    expand?: boolean;
-    /** 搜索时是否传入值为undefined的参数，默认不传 */
     searchUndefined?: boolean;
     /** 搜索时是否传入值为空字符串的参数，默认不传 */
     searchEmptyString?: boolean;
     /** 自定义内容 */
     content?: React.ReactNode;
-} & IFilterProps;
+} & QueryFilterProps;
 export declare type dataFilterProps = ProTableDataFilterProps;
 export declare type ProTableTopAreaProps = {
     /** 标题区 */
@@ -242,8 +244,8 @@ export declare type ProTableTopAreaProps = {
     extra?: ProActionButtonProps | React.ReactNode | React.ReactNode[];
     /** 数据过滤区 */
     dataFilter?: ProTableDataFilterProps;
-    /** 数据过滤区 form 表单模型 */
-    dataFilterForm?: FormType;
+    /** 传给 QueryFilter 的 formRef */
+    dataFilterFormRef?: any;
     /** 排序、筛选列展示状态 */
     filterColumnType?: 'dialog' | 'dropdown' | 'auto';
 };

package/es/table/utils/columnRender.js

@@ -132,7 +132,8 @@ export var renderCell = function renderCell(value, item, index, record, actionRe
   }
 
   var newRender = null;
-  var newDataSource = null; // 如果 render 直接传函数
+  var newDataSource = null;
+  var props = item.props; // 如果 render 直接传函数
 
   if (typeof render === 'function') {
     newRender = function newRender() {
@@ -140,6 +141,23 @@ export var renderCell = function renderCell(value, item, index, record, actionRe
     };
   } else {
     newRender = processBuriedPoint(processRenderFunction(render, value, index, record), record, value, index);
+
+    if (valueType === 'selectGroup') {
+      newRender = _objectSpread(_objectSpread({
+        maxShowNumber: 1,
+        foldText: 'more',
+        editOnClick: function editOnClick() {},
+        edit: true
+      }, newRender), {}, {
+        ellipsis: false
+      });
+      props = _objectSpread({
+        valueAlias: {
+          value: 'TagValue',
+          key: 'TagKey'
+        }
+      }, props);
+    }
   } // 渲染操作组
 
 
@@ -182,13 +200,13 @@ export var renderCell = function renderCell(value, item, index, record, actionRe
   } // 渲染 ProField
 
 
-  return /*#__PURE__*/React.createElement(ProField, {
+  return /*#__PURE__*/React.createElement(ProField, _objectSpread({
     type: valueType || 'text',
     value: value,
     render: newRender,
     dataSource: newDataSource,
     format: format
-  });
+  }, props));
 };
 /**
  * 处理 render 配置项是函数的情况

package/lib/form/Filter/AdvancedFilter.js

@@ -72,7 +72,7 @@ var AdvancedFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
       props: {
         breakpoints: [480, 720, 990, 1200, Infinity],
         maxColumns: [1, 2, 3, 3, 4],
-        maxWidth: [480, 360, 330, 330, 300],
+        maxWidth: [480, 360, 330, 400],
         columnGap: 16,
         rowGap: 12
       },

package/lib/form/Filter/Layout.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { QueryFilterLayoutProps } from '../typing';
+import './layout.scss';
+declare const QueryFilterLayout: React.FC<QueryFilterLayoutProps>;
+export { QueryFilterLayout };

package/lib/form/Filter/Layout.js

@@ -0,0 +1,102 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryFilterLayout = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@alicloudfe/components");
+
+var _icon = _interopRequireDefault(require("@teamix/icon"));
+
+var _utils = require("@teamix/utils");
+
+require("./layout.scss");
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var QueryFilterLayout = function QueryFilterLayout(_ref) {
+  var className = _ref.className,
+      addonBefore = _ref.addonBefore,
+      addonAfter = _ref.addonAfter,
+      inlineContent = _ref.inlineContent,
+      panelContent = _ref.panelContent,
+      count = _ref.count,
+      expand = _ref.expand,
+      onExpand = _ref.onExpand,
+      children = _ref.children;
+  var prefixCls = (0, _utils.usePrefixCls)('', {
+    prefix: 'teamix-pro-form-query-filter-layout'
+  });
+
+  var _useState = (0, _react.useState)(!!expand),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var onClick = (0, _react.useCallback)(function () {
+    setVisible(!visible);
+    onExpand === null || onExpand === void 0 ? void 0 : onExpand(!visible);
+  }, [visible]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(prefixCls, className)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-inline")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-left")
+  }, addonBefore ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-addonBefore")
+  }, addonBefore) : null, inlineContent, (0, _utils.isValid)(panelContent) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-toggle")
+  }, /*#__PURE__*/_react.default.createElement(_components.Badge, {
+    count: count,
+    style: _objectSpread({
+      backgroundColor: 'var(--color-brand1-6, #0064c8)',
+      color: 'var(--color-white, #fff)'
+    }, visible ? {
+      display: 'none'
+    } : {})
+  }, /*#__PURE__*/_react.default.createElement(_components.Button, {
+    onClick: onClick
+  }, visible ? /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "up-line"
+  }) : /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "filter-line"
+  }), (0, _utils.getMessage)('advancedFilter')))) : null), addonAfter ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-addonAfter")
+  }, addonAfter) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-panel"), visible && (0, _utils.isValid)(panelContent) ? '' : "".concat(prefixCls, "-panel-hidden"))
+  }, panelContent), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixCls, "-children")
+  }, children));
+};
+
+exports.QueryFilterLayout = QueryFilterLayout;