@nokecy/qc-ui 1.1.11 → 1.1.13

package/dist/esm/array-table/index.js

@@ -11,7 +11,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { Fragment, useEffect, useRef, useState, useMemo, useContext } from "react";
+import React, { Fragment, useEffect, useRef, useState, useMemo } from "react";
 import { AgGridReact } from "ag-grid-react";
 import { useField, observer, RecursionField } from "@formily/react";
 import { useFieldSchema } from "@formily/react";
@@ -24,11 +24,11 @@ import ArrayAddBtn from "./arrayAddBtn";
 import PreviewArrayTable from "./preview";
 import { Space } from "antd";
 import Setting from "../ag-grid-plus/setting";
-import { GridPlusContext } from "../ag-grid-plus/context/gridContext";
 import { flatConfigToColumnState, flatConfigToGridState } from "../ag-grid-plus/setting/columnGroupUtils";
 
 // 导入 AG-Grid v33 主题
 import { agGridTheme } from "../ag-grid-plus/theme";
+import { useGridSchemes } from "../ag-grid-plus";
 
 //@ts-ignore
 var ArrayTableInner = observer(function (props) {
@@ -73,11 +73,10 @@ var ArrayTableInner = observer(function (props) {
     handleRowDragMove = _useRowDrag.handleRowDragMove;
 
   // 直接使用 Context 获取方案管理状态
-  // ArrayTable 外层已经提供了完整的 GridPlusContext.Provider
-  var context = useContext(GridPlusContext);
-  var _ref = context || {},
-    currentSchemes = _ref.currentSchemes,
-    columnSchemes = _ref.columnSchemes;
+  var _useGridSchemes = useGridSchemes(),
+    columnSchemes = _useGridSchemes.columnSchemes,
+    querySchemes = _useGridSchemes.querySchemes,
+    currentSchemes = _useGridSchemes.currentSchemes;
 
   // 获取当前表格的激活方案
   var currentScheme = useMemo(function () {
@@ -91,134 +90,94 @@ var ArrayTableInner = observer(function (props) {
     });
   }, [props.gridKey, currentSchemes, columnSchemes]);
 
-  // 使用 ref 记录上次应用的方案 ID 和配置哈希，避免重复应用
-  var lastAppliedRef = useRef({
-    schemeId: null,
-    configHash: null
+  // 使用 ref 记录上次应用的方案状态，避免重复应用
+  var lastAppliedSchemeRef = useRef({
+    id: null,
+    updatedAt: null
   });
 
   /**
-   * 【关键修复】在页面刷新或切换方案时自动恢复列方案
+   * 方案自动加载
    *
-   * 监听 currentScheme 和 gridApiState 的变化，当方案和 Grid API 都准备好时，
-   * 自动应用方案中保存的列状态（列顺序、宽度、隐藏等）
-   *
-   * 关键优化：比较 Grid 当前状态和方案配置，只在真正不一致时才应用
+   * 参考 ag-gridPlus 优化方案：
+   * 1. 使用 Promise 链确保顺序执行，避免竞态条件
+   * 2. 使用双重 RAF 确保渲染完成
+   * 3. 完整的错误处理和清理机制
    */
   useEffect(function () {
     // 检查必要条件
     if (!props.gridKey || !gridApiState || !currentScheme) return;
     if (!currentScheme.columnConfig || currentScheme.columnConfig.length === 0) return;
 
-    // 【修复】计算方案配置的哈希
-    var schemeConfigHash = JSON.stringify({
-      id: currentScheme.id,
-      columnCount: currentScheme.columnConfig.length,
-      // 使用前3列的完整配置作为哈希的一部分（包含顺序、宽度、隐藏等）
-      firstCols: currentScheme.columnConfig.slice(0, 3).map(function (col) {
-        return {
-          field: col.field,
-          width: col.width,
-          hide: col.hide,
-          pinned: col.pinned
-        };
-      })
-    });
+    // 【关键修复】检查方案是否真正变化（比对 ID 和 updatedAt）
+    // 只有当方案 ID 变化，或者同一方案但 updatedAt 变化时，才重新应用
+    var isSameScheme = currentScheme.id === lastAppliedSchemeRef.current.id;
+    var isSameVersion = currentScheme.updatedAt === lastAppliedSchemeRef.current.updatedAt;
+    if (isSameScheme && isSameVersion) {
+      return;
+    }
+    if (isSameScheme && !isSameVersion) {}
+    // 使用 Promise 链确保顺序执行，避免竞态条件
+    var cancelled = false;
+    Promise.resolve().then(function () {
+      if (cancelled || !gridApiState) return;
 
-    // 【关键修复】比较方案配置和 Grid 当前状态
-    // 检查前3列的关键属性是否一致（跳过字段名差异）
-    var currentGridState = gridApiState.getColumnState();
-    var isGridStateSameAsScheme = true;
-    if (currentGridState.length !== currentScheme.columnConfig.length) {
-      isGridStateSameAsScheme = false;
-    } else {
-      // 比较前3列的关键属性
-      for (var i = 0; i < Math.min(3, currentGridState.length); i++) {
-        var gridCol = currentGridState[i];
-        var schemeCol = currentScheme.columnConfig[i];
-        if (schemeCol.type !== 'column') continue;
+      // 1. 检查是否包含分组配置
+      var hasGroups = currentScheme.columnConfig.some(function (item) {
+        return item.type === 'group';
+      });
 
-        // 比较关键属性（field/colId, width, hide, pinned）
-        if (gridCol.colId !== schemeCol.field || Math.abs((gridCol.width || 0) - (schemeCol.width || 0)) > 5 ||
-        // 允许5px误差
-        gridCol.hide !== schemeCol.hide || gridCol.pinned !== schemeCol.pinned) {
-          isGridStateSameAsScheme = false;
-          break;
-        }
+      // 如果包含分组，先更新 columnDefs
+      if (hasGroups) {
+        var gridColumnDefs = flatConfigToGridState(currentScheme.columnConfig);
+        gridApiState.setGridOption('columnDefs', gridColumnDefs);
       }
-    }
-    // 【关键】跳过应用的条件:
-    // 1. Grid 当前状态与方案配置一致（说明已经应用过或刚保存）
-    // 2. 方案配置与上次应用的相同（避免重复应用）
-    if (isGridStateSameAsScheme || schemeConfigHash === lastAppliedRef.current.configHash) {
-      // 更新记录,避免后续误判
-      lastAppliedRef.current = {
-        schemeId: currentScheme.id,
-        configHash: schemeConfigHash
-      };
-      return;
-    }
 
-    // 【提取函数】应用列状态和过滤器
-    var applyColumnStateAndFilter = function applyColumnStateAndFilter() {
-      if (!currentScheme || !gridApiState) return;
+      // 2. 应用列状态（列顺序、宽度、隐藏、固定等）
 
-      // 将扁平化的列配置转换为 AG-Grid 列状态
       var columnState = flatConfigToColumnState(currentScheme.columnConfig);
-
-      // 应用列状态（包括列顺序、宽度、隐藏等）
       gridApiState.applyColumnState({
         state: columnState,
-        applyOrder: true // 强制应用列顺序
+        applyOrder: true
       });
-      // 如果方案中包含过滤器配置，也一并应用
+    }).then(function () {
+      // 等待 Grid 状态稳定（使用 requestAnimationFrame 而非固定延迟）
+      return new Promise(function (resolve) {
+        if (cancelled) {
+          resolve();
+          return;
+        }
+        requestAnimationFrame(function () {
+          // 双重 RAF 确保渲染完成
+          requestAnimationFrame(function () {
+            return resolve();
+          });
+        });
+      });
+    }).then(function () {
+      if (cancelled || !gridApiState) return;
+
+      // 3. 应用过滤器（在列状态稳定后执行）
       if (currentScheme.filterModel) {
         gridApiState.setFilterModel(currentScheme.filterModel);
       }
 
-      // 记录本次应用的配置哈希
-      lastAppliedRef.current = {
-        schemeId: currentScheme.id,
-        configHash: schemeConfigHash
+      // 【关键修复】记录已应用的方案状态（ID + updatedAt）
+      lastAppliedSchemeRef.current = {
+        id: currentScheme.id,
+        updatedAt: currentScheme.updatedAt
       };
-    };
-
-    // 使用 requestAnimationFrame 延迟应用
-    var rafId = requestAnimationFrame(function () {
-      try {
-        // 【关键检测】检查是否包含分组配置
-        var hasGroups = currentScheme.columnConfig.some(function (item) {
-          return item.type === 'group';
-        });
-        // 【条件更新】只有在包含分组时才更新 columnDefs
-        // 原因：array-table 的列是动态生成的，无分组时不应该覆盖动态列定义
-        if (hasGroups) {
-          var gridColumnDefs = flatConfigToGridState(currentScheme.columnConfig);
-          gridApiState.setGridOption('columnDefs', gridColumnDefs);
-
-          // 等待 columnDefs 更新完成后再应用列状态
-          setTimeout(function () {
-            try {
-              applyColumnStateAndFilter();
-            } catch (error) {
-              console.error('[ArrayTable] 应用列状态失败:', error);
-            }
-          }, 100);
-        } else {
-          // 无分组时，直接应用列状态即可
-
-          applyColumnStateAndFilter();
-        }
-      } catch (error) {
+    }).catch(function (error) {
+      if (!cancelled) {
         console.error('[ArrayTable] 应用方案失败:', error);
       }
     });
 
-    // 清理函数：取消待执行的 RAF
+    // 清理函数：取消进行中的操作
     return function () {
-      cancelAnimationFrame(rafId);
+      cancelled = true;
     };
-  }, [props.gridKey, gridApiState, currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.id]);
+  }, [props.gridKey, gridApiState, currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.id, currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.updatedAt]);
 
   //@ts-ignore
   if (columns.length > 0) {
@@ -284,8 +243,6 @@ var ArrayTableInner = observer(function (props) {
       params.api.hidePopupMenu();
       apiRef.current = params.api;
       setGridApiState(params.api);
-
-      // 恢复列状态将由 useEffect 处理（使用方案系统）
     },
     suppressColumnVirtualisation: true,
     gridOptions: {
@@ -333,8 +290,8 @@ var ArrayTableInner = observer(function (props) {
         '    <span data-ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>' + '    <span data-ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>' + '    <span data-ref="eSortNone" class="ag-header-icon ag-sort-none-icon"></span>' + "  </div>" + "</div>"
       }
     },
-    getRowId: function getRowId(_ref2) {
-      var data = _ref2.data;
+    getRowId: function getRowId(_ref) {
+      var data = _ref.data;
       return data._id || data.id;
     }
     // rowDragEntireRow={true}