@teamix/pro 1.2.26 → 1.2.30

package/lib/table/index.js

@@ -38,8 +38,6 @@ var _form = require("../form");
 
 var _actions = require("../actions");
 
-var _lodash = _interopRequireDefault(require("lodash.debounce"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _pageContainer = _interopRequireDefault(require("../page-container"));
@@ -98,7 +96,9 @@ 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; }
 
 var cls = (0, _utils.baseClass)('teamix-pro-table');
-var toJS = _form.formilyReactive.toJS;
+var toJS = _form.formilyReactive.toJS; // 判断是否是 root 组织
+
+var isRoot = (0, _utils.getCookie)('organizationId') === '1';
 /**
  * 处理原生传入的 columns 以便于 选择列 方便处理
  * @param columns 原生传入的 columns
@@ -106,14 +106,24 @@ var toJS = _form.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 = filterColumns) === null || _filterColumns === void 0 ? void 0 : _filterColumns.length) {
+    var _filterColumns2, _initialColumns$;
 
-    if ((filterColumns === null || filterColumns === void 0 ? void 0 : filterColumns.length) === 1) {
+    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) {
@@ -155,7 +165,7 @@ var globalFormatSort = function globalFormatSort(sort) {
 };
 
 var ProTable = function ProTable(props) {
-  var _rowSelection$selecte;
+  var _rowSelection$selecte, _dataFilterForm4;
 
   var header = props.header,
       className = props.className,
@@ -253,10 +263,8 @@ var ProTable = function ProTable(props) {
   var _useState13 = (0, _react.useState)(true),
       _useState14 = _slicedToArray(_useState13, 2),
       customTableLoading = _useState14[0],
-      setCustomTableLoading = _useState14[1]; // 用于存放 Search 组件之前值的 ref
-
+      setCustomTableLoading = _useState14[1];
 
-  var searchValueRef = (0, _react.useRef)('');
   var tableRef = (0, _react.useRef)(null);
   var actionRef = (0, _react.useRef)(); // 传给 table 的过滤后的 columns
 
@@ -306,20 +314,23 @@ var ProTable = function ProTable(props) {
   var _useState23 = (0, _react.useState)(false),
       _useState24 = _slicedToArray(_useState23, 2),
       fullscreenState = _useState24[0],
-      setFullscreenState = _useState24[1]; // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
+      setFullscreenState = _useState24[1]; // 非全屏状态下的
+
+
+  var normalDataFilterFormRef = (0, _react.useRef)();
+  var fullscreenDataFilterFormRef = (0, _react.useRef)();
+  var normalDataFilterForm = normalDataFilterFormRef.current;
+  var fullscreenDataFilterForm = fullscreenDataFilterFormRef.current; // 传给 QueryFilter 的 formRef
 
+  var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef;
+  var dataFilterForm = dataFilterFormRef.current; // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
 
   var _useState25 = (0, _react.useState)(false),
       _useState26 = _slicedToArray(_useState25, 2),
       footerSuctionState = _useState26[0],
-      setFooterSuctionState = _useState26[1];
-  /** 筛选区域 form */
+      setFooterSuctionState = _useState26[1]; // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
 
 
-  var dataFilterForm = (0, _react.useMemo)(function () {
-    return (0, _form.createForm)();
-  }, []); // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
-
   var getFooterSuctionState = function getFooterSuctionState() {
     var containerDom = document.querySelector('.teamix-pro-page-container-scroll-container');
 
@@ -471,26 +482,24 @@ 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;
+      var _actionRef$current3, _actionRef$current3$s, _dataFilterForm;
 
       (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 = dataFilterForm) === null || _dataFilterForm === void 0 ? void 0 : _dataFilterForm.reset();
       setCurrentPage(1);
 
       _request(_defineProperty({}, targetPageKey, 1));
@@ -513,6 +522,8 @@ var ProTable = function ProTable(props) {
     },
     data: data,
     dataFilterForm: dataFilterForm,
+    normalDataFilterForm: normalDataFilterForm,
+    fullscreenDataFilterForm: fullscreenDataFilterForm,
     resetTableMaxBodyHeight: function resetTableMaxBodyHeight() {
       getHeaderHeight().then(function (height) {
         setHeaderHeight(height);
@@ -602,7 +613,7 @@ var ProTable = function ProTable(props) {
   }); // 请求函数
 
   function _request(params, noLoading) {
-    var _actionRef$current$ge, _actionRef$current4, _actionRef$current4$g, _objectSpread2;
+    var _dataFilterForm2, _actionRef$current$ge, _actionRef$current4, _actionRef$current4$g, _objectSpread2;
 
     // 如果没有传 url 且没有 customRequest，直接返回
     if (!url && !customRequest) {
@@ -615,7 +626,7 @@ var ProTable = function ProTable(props) {
 
     var sortParams = targetFormatSort(sort); // 筛选区请求参数
 
-    var dataFilterParams = toJS(dataFilterForm.values); // 列过滤请求参数
+    var dataFilterParams = toJS((_dataFilterForm2 = dataFilterForm) === null || _dataFilterForm2 === void 0 ? void 0 : _dataFilterForm2.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 : {}; // 格式化后的请求参数
 
@@ -667,7 +678,8 @@ var ProTable = function ProTable(props) {
 
   (0, _react.useEffect)(function () {
     // 初始化 actionRef state、callback 此时 actionRef 已初始化完成
-    (0, _utils2.initActionRef)(); // 监听 浏览器变化 更吸底状态
+    (0, _utils2.initActionRef)();
+    dataFilterForm = dataFilterFormRef.current; // 监听 浏览器变化 更吸底状态
 
     if (footerSuction) {
       getFooterSuctionState();
@@ -677,19 +689,21 @@ var ProTable = function ProTable(props) {
       };
     }
 
-    if (requestWhenMount) {
-      // 在请求发送之前 处理漏斗默认数据
-      (0, _utils2.processDefaultFilter)(propsColumns, actionRef, defaultFilterParams);
+    if (propsDataFilter) {
+      var _dataFilterForm3;
 
-      _request();
-    }
+      if (requestWhenMount && ((_dataFilterForm3 = dataFilterForm) === null || _dataFilterForm3 === void 0 ? void 0 : _dataFilterForm3.id)) {
+        // 在请求发送之前 处理漏斗默认数据
+        (0, _utils2.processDefaultFilter)(propsColumns, actionRef, defaultFilterParams);
 
-    var searchName = getSearchName();
+        _request();
+      }
+    } else {
+      if (requestWhenMount) {
+        (0, _utils2.processDefaultFilter)(propsColumns, actionRef, defaultFilterParams);
 
-    if (searchName) {
-      // 如果有初始值，需要赋值
-      var initialValues = toJS(dataFilterForm.initialValues);
-      searchValueRef.current = initialValues[searchName][1];
+        _request();
+      }
     }
 
     return function () {
@@ -703,7 +717,7 @@ var ProTable = function ProTable(props) {
 
       actionRef.current = undefined;
     };
-  }, []);
+  }, [(_dataFilterForm4 = dataFilterForm) === null || _dataFilterForm4 === void 0 ? void 0 : _dataFilterForm4.id]);
 
   function onSort(dataIndex, order) {
     var nextSort = _defineProperty({}, dataIndex, order);
@@ -711,62 +725,27 @@ 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: (0, _lodash.default)(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();
-
-          if (searchName) {
-            var searchValue = values[searchName][1];
+    onFilter: function onFilter(values) {
+      var _actionRef$current5, _actionRef$current5$c;
 
-            if (searchValue === (searchValueRef === null || searchValueRef === void 0 ? void 0 : searchValueRef.current)) {
-              return;
-            }
+      (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onFilter(values)); // 搜索变化时，暂时先清空选择
 
-            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() {
+      var _dataFilterForm5;
+
       (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
-      dataFilterForm.reset();
+      (_dataFilterForm5 = dataFilterForm) === null || _dataFilterForm5 === void 0 ? void 0 : _dataFilterForm5.reset();
       setCurrentPage(1);
 
       _request(_defineProperty({}, targetPageKey, 1));
@@ -781,7 +760,7 @@ var ProTable = function ProTable(props) {
     }
   };
 
-  var renderTable = function renderTable() {
+  var renderTable = function renderTable(isFullScreen) {
     if (propsColumns) {
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)('teamix-pro-table-container', className)
@@ -793,7 +772,7 @@ var ProTable = function ProTable(props) {
         actionRef: actionRef,
         columns: propsColumns,
         dataFilter: dataFilter,
-        dataFilterForm: dataFilterForm,
+        dataFilterFormRef: isFullScreen ? fullscreenDataFilterFormRef : normalDataFilterFormRef,
         rowSelection: rowSelection,
         filterColumnType: filterColumnType
       }), /*#__PURE__*/_react.default.createElement(_components.Table.StickyLock, _objectSpread({
@@ -938,14 +917,16 @@ var ProTable = function ProTable(props) {
   return /*#__PURE__*/_react.default.createElement(_Fullscreen.default, {
     visible: fullscreenState,
     actionRef: actionRef
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: cls({
-      '': true,
-      fullscreen: fullscreenState // 'footer-suction': footerSuctionState && footerSuction,
-
-    }),
-    ref: tableRef
-  }, renderTable(), footerSuctionState && footerSuction && !fullscreenState && /*#__PURE__*/_react.default.createElement(_pageContainer.default.FixedFooter, null, renderFooter()), !(footerSuctionState && footerSuction) && !fullscreenState && renderFooter(), fullscreenState && renderFooter()));
+  }, function (isFullScreen) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: cls({
+        '': true,
+        fullscreen: fullscreenState // 'footer-suction': footerSuctionState && footerSuction,
+
+      }),
+      ref: tableRef
+    }, renderTable(isFullScreen), footerSuctionState && footerSuction && !fullscreenState && /*#__PURE__*/_react.default.createElement(_pageContainer.default.FixedFooter, null, renderFooter()), !(footerSuctionState && footerSuction) && !fullscreenState && renderFooter(), fullscreenState && renderFooter());
+  });
 };
 
 var _default = ProTable;

package/lib/table/index.scss

@@ -114,4 +114,8 @@ $fullscreenPadding: 24px;
 // 后面在基础组件里面覆盖
 .next-table.next-table td .next-table-cell-wrapper {
   text-overflow: unset;
+}
+
+.mb8 {
+  margin-bottom: 8px;
 }

package/lib/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/lib/table/utils/columnRender.js

@@ -145,7 +145,8 @@ var renderCell = function renderCell(value, item, index, record, actionRef) {
   }
 
   var newRender = null;
-  var newDataSource = null; // 如果 render 直接传函数
+  var newDataSource = null;
+  var props = item.props; // 如果 render 直接传函数
 
   if (typeof render === 'function') {
     newRender = function newRender() {
@@ -153,6 +154,23 @@ var renderCell = function renderCell(value, item, index, record, actionRef) {
     };
   } 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);
+    }
   } // 渲染操作组
 
 
@@ -195,13 +213,13 @@ var renderCell = function renderCell(value, item, index, record, actionRef) {
   } // 渲染 ProField
 
 
-  return /*#__PURE__*/_react.default.createElement(_field.default, {
+  return /*#__PURE__*/_react.default.createElement(_field.default, _objectSpread({
     type: valueType || 'text',
     value: value,
     render: newRender,
     dataSource: newDataSource,
     format: format
-  });
+  }, props));
 };
 /**
  * 处理 render 配置项是函数的情况

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix/pro",
-  "version": "1.2.26",
+  "version": "1.2.30",
   "description": "TeamixPro大包",
   "repository": "http://gitlab.alibaba-inc.com/teamix/pro",
   "author": "Velociraptor(迅猛龙)",
@@ -22,9 +22,9 @@
   ],
   "private": false,
   "dependencies": {
-    "@formily/core": "2.0.5",
-    "@formily/react": "2.0.5",
-    "@teamix/formily": "2.0.5-2",
+    "@formily/core": "2.0.8",
+    "@formily/react": "2.0.8",
+    "@teamix/formily": "2.0.8",
     "@teamix/hooks": "^0.1.0",
     "@teamix/pop-confirm": "^1.2.4",
     "@teamix/pro-field": "^1.0.0",