@arim-aisdc/public-components 2.3.39 → 2.3.41

package/dist/components/TableMax/components/ColumnEdit/index.less

@@ -1,72 +1,72 @@
-.table-max-cell-wrapper {
-  // display: inline-block;
-  width: 100%;
-  padding: 0 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  box-sizing: border-box !important;
-
-  .ellipsis {
-    display: inline;
-  }
-
-  .numberRangeWrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .custom-dark-select,
-  .custom-dark-picker,
-  .custom-dark-input-number,
-  .custom-dark-input,
-  .custom-dark-input-affix-wrapper,
-  .custom-dark-switch {
-    background-color: @global-curd-input-background-color;
-  }
-
-  .custom-dark-switch-checked {
-    background-color: @global-primary-color;
-  }
-
-  .custom-dark-picker-clear,
-  .custom-dark-select-clear {
-    background-color: @global-curd-input-background-color;
-  }
-
-  .custom-light-select,
-  .custom-light-picker,
-  .custom-light-input-number,
-  .custom-light-input,
-  .custom-light-input-affix-wrapper,
-  .custom-light-switch {
-    background-color: @global-curd-input-background-color;
-  }
-
-  .custom-light-switch-checked {
-    background-color: @global-primary-color;
-  }
-
-  .custom-light-picker-clear,
-  .custom-light-select-clear {
-    background-color: @global-curd-input-background-color;
-  }
-}
-
-.tableMaxCellTooltip {
-  .custom-dark-tooltip-inner,
-  .custom-light-tooltip-inner,
-  .ant-tooltip-inner {
-    background-color: @tableTooltipBgc;
-  }
-
-  .custom-dark-tooltip-arrow,
-  .custom-light-tooltip-arrow,
-  .ant-tooltip-arrow {
-    .custom-dark-tooltip-arrow-content::before,
-    .custom-light-tooltip-arrow-content::before,
-    .ant-tooltip-arrow-content::before {
-      background: @tableTooltipBgc;
-    }
-  }
-}
+.table-max-cell-wrapper {
+  // display: inline-block;
+  width: 100%;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box !important;
+
+  .ellipsis {
+    display: inline;
+  }
+
+  .numberRangeWrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .custom-dark-select,
+  .custom-dark-picker,
+  .custom-dark-input-number,
+  .custom-dark-input,
+  .custom-dark-input-affix-wrapper,
+  .custom-dark-switch {
+    background-color: @global-curd-input-background-color;
+  }
+
+  .custom-dark-switch-checked {
+    background-color: @global-primary-color;
+  }
+
+  .custom-dark-picker-clear,
+  .custom-dark-select-clear {
+    background-color: @global-curd-input-background-color;
+  }
+
+  .custom-light-select,
+  .custom-light-picker,
+  .custom-light-input-number,
+  .custom-light-input,
+  .custom-light-input-affix-wrapper,
+  .custom-light-switch {
+    background-color: @global-curd-input-background-color;
+  }
+
+  .custom-light-switch-checked {
+    background-color: @global-primary-color;
+  }
+
+  .custom-light-picker-clear,
+  .custom-light-select-clear {
+    background-color: @global-curd-input-background-color;
+  }
+}
+
+.tableMaxCellTooltip {
+  .custom-dark-tooltip-inner,
+  .custom-light-tooltip-inner,
+  .ant-tooltip-inner {
+    background-color: @tableTooltipBgc;
+  }
+
+  .custom-dark-tooltip-arrow,
+  .custom-light-tooltip-arrow,
+  .ant-tooltip-arrow {
+    .custom-dark-tooltip-arrow-content::before,
+    .custom-light-tooltip-arrow-content::before,
+    .ant-tooltip-arrow-content::before {
+      background: @tableTooltipBgc;
+    }
+  }
+}

package/dist/components/TableMax/components/ColumnFilterV2/DateRange/index.less

@@ -1,24 +1,24 @@
-.date-range-filter-wrapper {
-  padding: 8px 12px;
-  .split-wapper {
-    margin: 5px 0px 0px;
-    height: 2px;
-    display: flex;
-    justify-content: center;
-
-    .horizontal-line {
-      height: 2px;
-      display: inline-block;
-      background: @tableColor4;
-      width: 8px;
-    }
-  }
-
-  .end-time {
-    margin: 5px 0px 0px;
-  }
-
-  > div {
-    width: 100%;
-  }
-}
+.date-range-filter-wrapper {
+  padding: 8px 12px;
+  .split-wapper {
+    margin: 5px 0px 0px;
+    height: 2px;
+    display: flex;
+    justify-content: center;
+
+    .horizontal-line {
+      height: 2px;
+      display: inline-block;
+      background: @tableColor4;
+      width: 8px;
+    }
+  }
+
+  .end-time {
+    margin: 5px 0px 0px;
+  }
+
+  > div {
+    width: 100%;
+  }
+}

package/dist/components/TableMax/components/ColumnFilterV2/Filter.d.ts

@@ -1,6 +1,7 @@
 import { Column } from '@tanstack/react-table';
 import React from 'react';
 type IProps = {
+    getDynamicFilterOptionsFn: Function;
     column: Column<any, unknown>;
     onCloseFilterPanel: () => void;
     manualFiltering: boolean;

package/dist/components/TableMax/components/ColumnFilterV2/Filter.js

@@ -13,20 +13,27 @@ import { AutoComplete, DatePicker, Input, InputNumber } from 'antd';
 import dayjs from 'dayjs';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { FilterType, defaultDateFormat, isEmpty } from '.';
+import { FilterType, defaultDateFormat, isEmpty, uniqueByField } from '.';
+import { FilterOperator } from "../../type";
 import { DateRange } from "./DateRange";
 import MultipleSelect from "./MultipleSelect";
 import NumberRange from "./NumberRange";
 import SingleSelect from "./SingleSelect";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Filter = function Filter(_ref) {
-  var column = _ref.column,
+  var getDynamicFilterOptionsFn = _ref.getDynamicFilterOptionsFn,
+    column = _ref.column,
     onCloseFilterPanel = _ref.onCloseFilterPanel,
     manualFiltering = _ref.manualFiltering;
   var columnDef = column === null || column === void 0 ? void 0 : column.columnDef;
   // 筛选组件类型
-  var filterType = columnDef.filterType,
+  var id = columnDef.id,
+    accessorKey = columnDef.accessorKey,
+    filterType = columnDef.filterType,
     filterOptions = columnDef.filterOptions,
+    dynamicFilterOptionsLabelFn = columnDef.dynamicFilterOptionsLabelFn,
+    dynamicFilterOptionsLabelField = columnDef.dynamicFilterOptionsLabelField,
+    dynamicFilterOptionsValueField = columnDef.dynamicFilterOptionsValueField,
     getFilterOptionsFn = columnDef.getFilterOptionsFn,
     _columnDef$isFilterOp = columnDef.isFilterOptionsFrontSearch,
     isFilterOptionsFrontSearch = _columnDef$isFilterOp === void 0 ? false : _columnDef$isFilterOp;
@@ -46,6 +53,16 @@ var Filter = function Filter(_ref) {
     apiLoading = _useState6[0],
     setApiLoading = _useState6[1];
 
+  // 动态接口可选值
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dynamicApiOptions = _useState8[0],
+    setDynamicApiOptions = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    dynamicApiLoading = _useState10[0],
+    setDynamicApiLoading = _useState10[1];
+
   // 修改表格筛选参数
   var handleChangeFilterValue = function handleChangeFilterValue(value) {
     var newValue = value;
@@ -91,6 +108,9 @@ var Filter = function Filter(_ref) {
     changeFilterValueWithDebounce(value);
     setColumnFilterValue(value);
   };
+  var loading = useMemo(function () {
+    return apiLoading || dynamicApiLoading;
+  }, [apiLoading, dynamicApiLoading]);
 
   // 最终展示的可选值
   var options = useMemo(function () {
@@ -102,10 +122,14 @@ var Filter = function Filter(_ref) {
     if (filterOptions) {
       return filterOptions;
     }
-    // 接口获取的可选值
+    // 列配置接口获取的可选值
     if (getFilterOptionsFn && Array.isArray(apiOptions)) {
       return apiOptions;
     }
+    // 动态接口获取的可选值
+    if (getDynamicFilterOptionsFn && Array.isArray(dynamicApiOptions)) {
+      return dynamicApiOptions;
+    }
     // 后端筛选时，不再填充可选值
     if (manualFiltering) {
       return [];
@@ -119,17 +143,17 @@ var Filter = function Filter(_ref) {
         label: item + ''
       };
     });
-  }, [column.getFacetedUniqueValues(), filterOptions, manualFiltering, apiOptions]);
+  }, [column.getFacetedUniqueValues(), filterOptions, manualFiltering, apiOptions, dynamicApiOptions]);
 
   // 调用接口获取可选值
   var fetchOptions = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
-      var res;
+      var res, _ref3, _ref4, filterField, valueField, filter, _res, uniqueData, _options;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (!getFilterOptionsFn) {
-              _context.next = 13;
+              _context.next = 15;
               break;
             }
             _context.prev = 1;
@@ -148,16 +172,55 @@ var Filter = function Filter(_ref) {
             setApiOptions([]);
           case 12:
             setApiLoading(false);
-          case 13:
+            _context.next = 33;
+            break;
+          case 15:
+            if (!getDynamicFilterOptionsFn) {
+              _context.next = 33;
+              break;
+            }
+            setDynamicApiLoading(true);
+            _context.prev = 17;
+            filterField = (_ref3 = dynamicFilterOptionsLabelField !== null && dynamicFilterOptionsLabelField !== void 0 ? dynamicFilterOptionsLabelField : id) !== null && _ref3 !== void 0 ? _ref3 : accessorKey;
+            valueField = (_ref4 = dynamicFilterOptionsValueField !== null && dynamicFilterOptionsValueField !== void 0 ? dynamicFilterOptionsValueField : id) !== null && _ref4 !== void 0 ? _ref4 : accessorKey;
+            filter = inputValue ? {
+              field: filterField,
+              operator: FilterOperator.Contains,
+              value: inputValue
+            } : undefined;
+            _context.next = 23;
+            return getDynamicFilterOptionsFn(filter, filterField, inputValue);
+          case 23:
+            _res = _context.sent;
+            uniqueData = uniqueByField(_res, [valueField]);
+            _options = uniqueData.map(function (item) {
+              var _ref5, _ref6, _dynamicFilterOptions;
+              var label = (_ref5 = (_ref6 = (_dynamicFilterOptions = dynamicFilterOptionsLabelFn === null || dynamicFilterOptionsLabelFn === void 0 ? void 0 : dynamicFilterOptionsLabelFn(item)) !== null && _dynamicFilterOptions !== void 0 ? _dynamicFilterOptions : item === null || item === void 0 ? void 0 : item[dynamicFilterOptionsLabelField]) !== null && _ref6 !== void 0 ? _ref6 : item === null || item === void 0 ? void 0 : item[id]) !== null && _ref5 !== void 0 ? _ref5 : item === null || item === void 0 ? void 0 : item[accessorKey];
+              var value = item === null || item === void 0 ? void 0 : item[valueField];
+              return {
+                label: label,
+                value: value
+              };
+            });
+            setDynamicApiOptions(_options);
+            _context.next = 32;
+            break;
+          case 29:
+            _context.prev = 29;
+            _context.t1 = _context["catch"](17);
+            setDynamicApiOptions([]);
+          case 32:
+            setDynamicApiLoading(false);
+          case 33:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[1, 9]]);
+      }, _callee, null, [[1, 9], [17, 29]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [getFilterOptionsFn]);
+  }(), [getFilterOptionsFn, getDynamicFilterOptionsFn]);
   var onSearch = useCallback(debounce(function (value) {
     // console.log('onSearch', value);
     fetchOptions(value);
@@ -165,8 +228,8 @@ var Filter = function Filter(_ref) {
   useEffect(function () {
     if ([FilterType.SingleSelect, FilterType.MultiSelect].includes(filterType)) {
       // 打开后自动获取可选值
-      var _ref3 = columnFilterValue || {},
-        optionsParam = _ref3.optionsParam;
+      var _ref7 = columnFilterValue || {},
+        optionsParam = _ref7.optionsParam;
       fetchOptions(optionsParam);
     }
   }, []);
@@ -276,7 +339,7 @@ var Filter = function Filter(_ref) {
           options: options,
           isFrontSearch: isFilterOptionsFrontSearch,
           onCloseFilterPanel: onCloseFilterPanel,
-          loading: apiLoading
+          loading: loading
         });
       case FilterType.MultiSelect:
       default:
@@ -285,7 +348,7 @@ var Filter = function Filter(_ref) {
           onChange: handleChangeSelectFilterValue,
           onSearch: onSearch,
           options: options,
-          loading: apiLoading,
+          loading: loading,
           isFrontSearch: isFilterOptionsFrontSearch,
           onCloseFilterPanel: onCloseFilterPanel
         });

package/dist/components/TableMax/components/ColumnFilterV2/MultipleSelect/index.less

@@ -1,32 +1,32 @@
-.tableMax-filter-multipleSelect {
-  width: 212px;
-  .tableMax-filter-multipleSelect-header {
-    border-bottom: 1px solid @tableColor7;
-    padding: 8px 12px;
-  }
-  .tableMax-filter-multipleSelect-body {
-    height: 220px;
-    overflow-y: auto;
-    padding: 4px 12px;
-    .loading {
-      height: 100%;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .ant-checkbox-group {
-      display: flex;
-      flex-direction: column;
-      .ant-checkbox-wrapper {
-        line-height: 24px;
-      }
-    }
-  }
-  .tableMax-filter-multipleSelect-footer {
-    border-top: 1px solid @tableColor7;
-    padding: 8px 12px;
-    display: flex;
-    justify-content: space-between;
-  }
-}
+.tableMax-filter-multipleSelect {
+  width: 212px;
+  .tableMax-filter-multipleSelect-header {
+    border-bottom: 1px solid @tableColor7;
+    padding: 8px 12px;
+  }
+  .tableMax-filter-multipleSelect-body {
+    height: 220px;
+    overflow-y: auto;
+    padding: 4px 12px;
+    .loading {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .ant-checkbox-group {
+      display: flex;
+      flex-direction: column;
+      .ant-checkbox-wrapper {
+        line-height: 24px;
+      }
+    }
+  }
+  .tableMax-filter-multipleSelect-footer {
+    border-top: 1px solid @tableColor7;
+    padding: 8px 12px;
+    display: flex;
+    justify-content: space-between;
+  }
+}

package/dist/components/TableMax/components/ColumnFilterV2/NumberRange/index.less

@@ -1,27 +1,27 @@
-.table-filter-number-range-wrapper {
-  display: flex;
-  flex-direction: column;
-  .table-filter-number-range-body {
-    display: flex;
-    flex-direction: column;
-    width: 188px;
-    padding: 8px 12px;
-    .split-wrapper {
-      margin: 5px 0px;
-      display: flex;
-      justify-content: center;
-      .horizontal-line {
-        height: 2px;
-        display: inline-block;
-        background: @tableColor4;
-        width: 12px;
-      }
-    }
-  }
-  .table-filter-number-range-footer {
-    display: flex;
-    justify-content: space-between;
-    border-top: 1px solid @tableColor4;
-    padding: 8px 12px;
-  }
-}
+.table-filter-number-range-wrapper {
+  display: flex;
+  flex-direction: column;
+  .table-filter-number-range-body {
+    display: flex;
+    flex-direction: column;
+    width: 188px;
+    padding: 8px 12px;
+    .split-wrapper {
+      margin: 5px 0px;
+      display: flex;
+      justify-content: center;
+      .horizontal-line {
+        height: 2px;
+        display: inline-block;
+        background: @tableColor4;
+        width: 12px;
+      }
+    }
+  }
+  .table-filter-number-range-footer {
+    display: flex;
+    justify-content: space-between;
+    border-top: 1px solid @tableColor4;
+    padding: 8px 12px;
+  }
+}

package/dist/components/TableMax/components/ColumnFilterV2/SingleSelect/index.less

@@ -1,43 +1,43 @@
-.tableMax-filter-singleSelect {
-  box-sizing: border-box;
-  width: 212px;
-  .tableMax-filter-singleSelect-header {
-    border-bottom: 1px solid @tableColor7;
-    padding: 8px 12px;
-  }
-  .tableMax-filter-singleSelect-body {
-    height: 220px;
-    overflow-y: auto;
-    padding: 4px 12px;
-    .loading {
-      height: 100%;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .item {
-      padding: 2px 4px;
-      cursor: pointer;
-      border-radius: 2px;
-      height: 20px;
-      font-size: 14px;
-      line-height: 20px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .item:hover {
-      background-color: @tableColor8;
-    }
-    .selected {
-      background-color: @tableColor8;
-    }
-  }
-  .tableMax-filter-singleSelect-footer {
-    border-top: 1px solid @tableColor7;
-    padding: 8px 12px;
-    display: flex;
-    justify-content: space-between;
-  }
-}
+.tableMax-filter-singleSelect {
+  box-sizing: border-box;
+  width: 212px;
+  .tableMax-filter-singleSelect-header {
+    border-bottom: 1px solid @tableColor7;
+    padding: 8px 12px;
+  }
+  .tableMax-filter-singleSelect-body {
+    height: 220px;
+    overflow-y: auto;
+    padding: 4px 12px;
+    .loading {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .item {
+      padding: 2px 4px;
+      cursor: pointer;
+      border-radius: 2px;
+      height: 20px;
+      font-size: 14px;
+      line-height: 20px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .item:hover {
+      background-color: @tableColor8;
+    }
+    .selected {
+      background-color: @tableColor8;
+    }
+  }
+  .tableMax-filter-singleSelect-footer {
+    border-top: 1px solid @tableColor7;
+    padding: 8px 12px;
+    display: flex;
+    justify-content: space-between;
+  }
+}

package/dist/components/TableMax/components/ColumnFilterV2/index.d.ts

@@ -30,8 +30,10 @@ export type IFilterFnEnum = {
     [key in FilterType]: FilterFnType;
 };
 export declare function setDefaultFilterFn(columns: TableMaxColumnType[]): TableMaxColumnType[];
-export declare function ColumnFilter({ column, manualFiltering }: {
+export declare function ColumnFilter({ column, manualFiltering, getDynamicFilterOptionsFn }: {
     column: Column<any, unknown>;
     manualFiltering: boolean;
+    getDynamicFilterOptionsFn: Function;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function isEmpty(value: any): boolean;
+export declare function uniqueByField(arr: any, field: any): any;

package/dist/components/TableMax/components/ColumnFilterV2/index.js

@@ -64,7 +64,8 @@ export function setDefaultFilterFn(columns) {
 }
 export function ColumnFilter(_ref) {
   var column = _ref.column,
-    manualFiltering = _ref.manualFiltering;
+    manualFiltering = _ref.manualFiltering,
+    getDynamicFilterOptionsFn = _ref.getDynamicFilterOptionsFn;
   var _useConfig = useConfig(),
     root = _useConfig.root;
   var _useState = useState(false),
@@ -84,10 +85,10 @@ export function ColumnFilter(_ref) {
       setFilterPanelVisible(false);
     };
     if (filterPanelVisible) {
-      window.addEventListener('click', clickHandler);
+      window.addEventListener('mousedown', clickHandler);
     }
     return function () {
-      window.removeEventListener('click', clickHandler);
+      window.removeEventListener('mousedown', clickHandler);
     };
   }, [filterPanelVisible]);
 
@@ -148,7 +149,11 @@ export function ColumnFilter(_ref) {
       onClick: function onClick(e) {
         return e.stopPropagation();
       },
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
       children: /*#__PURE__*/_jsx(Filter, {
+        getDynamicFilterOptionsFn: getDynamicFilterOptionsFn,
         column: column,
         onCloseFilterPanel: handleClosePanel,
         manualFiltering: manualFiltering
@@ -160,4 +165,15 @@ export function isEmpty(value) {
   if (value) return false;
   if (value === false || value === 0) return false;
   return true;
+}
+export function uniqueByField(arr, field) {
+  var map = new Map();
+  return arr.filter(function (item) {
+    var key = item[field];
+    if (!map.has(key)) {
+      map.set(key, true);
+      return true;
+    }
+    return false;
+  });
 }