@nokecy/qc-ui 1.0.86 → 1.0.88

package/dist/cjs/ag-grid-plus/ag-gridPlus.js

@@ -241,145 +241,79 @@ function AgGridPlus(props) {
     };
   }, []);
 
+  // 【修复】缓存第一次数据用于类型推断,避免 rowData 更新时重新计算 colDefs
+  // 原因: getTableColumns 只需要第一行数据来推断列的数据类型(数字列自动求和)
+  //      类型推断应该只在初始化时进行一次,后续数据更新不应改变列定义
+  var firstRowDataRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    // 只在首次有数据时保存
+    if (!firstRowDataRef.current && rowData.length > 0) {
+      firstRowDataRef.current = rowData[0];
+      console.log('[AgGridPlus] 保存首行数据用于类型推断:', firstRowDataRef.current);
+    }
+  }, [rowData]);
+
   // 测试列数据
   // const restData = [{"id":"47","field":"code","headerName":"编码","width":110,"hide":false,"cellClass":"custom-cell-left","suppressHeaderFilterButton":true,"colId":"code","pinned":null,"sort":null,"sortIndex":null,"aggFunc":null,"rowGroup":false,"rowGroupIndex":null,"pivot":false,"pivotIndex":null,"flex":null},{"id":"48","field":"name","headerName":"名称","width":110,"hide":false,"cellClass":"custom-cell-left","suppressHeaderFilterButton":true,"colId":"name","pinned":null,"sort":null,"sortIndex":null,"aggFunc":null,"rowGroup":false,"rowGroupIndex":null,"pivot":false,"pivotIndex":null,"flex":null},{"id":"49","field":"abbName","headerName":"简称","width":110,"hide":false,"cellClass":"custom-cell-left","suppressHeaderFilterButton":true,"colId":"abbName","pinned":null,"sort":null,"sortIndex":null,"aggFunc":null,"rowGroup":false,"rowGroupIndex":null,"pivot":false,"pivotIndex":null,"flex":null},{"id":"50","field":"address","headerName":"地址","width":662,"hide":false,"cellClass":"custom-cell-left","suppressHeaderFilterButton":true,"colId":"address","pinned":null,"sort":null,"sortIndex":null,"aggFunc":null,"rowGroup":false,"rowGroupIndex":null,"pivot":false,"pivotIndex":null,"flex":1},{"id":"51","field":"creator","headerName":"创建人","width":90,"hide":false,"cellClass":"custom-cell-left","suppressHeaderFilterButton":true,"colId":"creator","pinned":null,"sort":null,"sortIndex":null,"aggFunc":null,"rowGroup":false,"rowGroupIndex":null,"pivot":false,"pivotIndex":null,"flex":null},{"id":"52","field":"creationTime","headerName":"创建时间","width":160,"hide":false,"cellClass":"custom-cell-left","suppressHeaderFilterButton":true,"colId":"creationTime","pinned":null,"sort":null,"sortIndex":null,"aggFunc":null,"rowGroup":false,"rowGroupIndex":null,"pivot":false,"pivotIndex":null,"flex":null},{"id":"53","field":"lastModifier","headerName":"最后修改人","width":90,"hide":false,"cellClass":"custom-cell-left","suppressHeaderFilterButton":true,"colId":"lastModifier","pinned":null,"sort":null,"sortIndex":null,"aggFunc":null,"rowGroup":false,"rowGroupIndex":null,"pivot":false,"pivotIndex":null,"flex":null},{"id":"54","field":"lastModificationTime","headerName":"最后修改时间","width":160,"hide":false,"cellClass":"custom-cell-left","suppressHeaderFilterButton":true,"colId":"lastModificationTime","pinned":null,"sort":null,"sortIndex":null,"aggFunc":null,"rowGroup":false,"rowGroupIndex":null,"pivot":false,"pivotIndex":null,"flex":null},{"id":"55","field":"","headerName":"操作","width":160,"hide":false,"cellClass":"custom-cell-left","suppressHeaderFilterButton":true,"colId":"0","pinned":"right","sort":null,"sortIndex":null,"aggFunc":null,"rowGroup":false,"rowGroupIndex":null,"pivot":false,"pivotIndex":null,"flex":null}]
 
   // 加载列方案
+  // 仅用于设置列样式,不改变列结构
+  // 列结构(包括分组)由 useEffect #2 通过 setGridOption("columnDefs") 处理
   (0, _react.useEffect)(function () {
     var _columnSchemeManager$;
     if (!gridKey || !apiRef.current) return;
 
-    // 优先使用方案中的 columnConfig（用户在列配置界面调整后的数据）
+    // 只有当有 columnConfig 时才设置列样式
     if (columnSchemeManager !== null && columnSchemeManager !== void 0 && (_columnSchemeManager$ = columnSchemeManager.currentScheme) !== null && _columnSchemeManager$ !== void 0 && _columnSchemeManager$.columnConfig) {
-      // 【关键修复】检查是否包含分组结构
-      var hasGroups = columnSchemeManager.currentScheme.columnConfig.some(function (item) {
-        return item.type === 'group';
+      var _require = require("./setting/columnGroupUtils"),
+        flatConfigToColumnState = _require.flatConfigToColumnState;
+      var _columnState = flatConfigToColumnState(columnSchemeManager.currentScheme.columnConfig);
+      console.log('[AgGridPlus] useEffect #1: 设置列样式', {
+        gridKey: gridKey,
+        schemeId: columnSchemeManager.currentScheme.id,
+        schemeName: columnSchemeManager.currentScheme.name,
+        columnCount: _columnState.length
       });
+      setColumnCellClass(handelgridPlusColumnState(_columnState));
 
-      // 如果包含分组结构,跳过 applyColumnState
-      // 原因: 分组结构由下面的 useEffect #2 通过 setGridOption("columnDefs") 处理
-      // applyColumnState 只能设置列属性,会把分组子列当作独立列,破坏分组结构
-      if (hasGroups) {
-        console.log('[AgGridPlus] useEffect #1: 检测到分组结构,跳过 applyColumnState');
-
-        // 仍然需要设置列样式
-        var _require = require("./setting/columnGroupUtils"),
-          _flatConfigToColumnState = _require.flatConfigToColumnState;
-        var _columnState = _flatConfigToColumnState(columnSchemeManager.currentScheme.columnConfig);
-        setColumnCellClass(handelgridPlusColumnState(_columnState));
-        return;
-      }
-
-      // 没有分组时,使用 applyColumnState 应用列配置
-      var _require2 = require("./setting/columnGroupUtils"),
-        flatConfigToColumnState = _require2.flatConfigToColumnState;
-      var _columnState2 = flatConfigToColumnState(columnSchemeManager.currentScheme.columnConfig);
-      setColumnCellClass(handelgridPlusColumnState(_columnState2));
-      var timer = setTimeout(function () {
-        var _apiRef$current;
-        (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.applyColumnState({
-          state: _columnState2,
-          applyOrder: true
-        });
-      }, 10);
-      return function () {
-        return clearTimeout(timer);
-      };
+      // 【重要】不再调用 applyColumnState
+      // 原因:
+      // 1. 如果有分组,applyColumnState 会破坏分组结构
+      // 2. 列顺序、宽度、隐藏等属性已由 useEffect #2 的 setGridOption("columnDefs") 应用
+      // 3. 这里只负责设置列样式(cellClass)
     }
-    // 后备方案：使用旧的 gridPlusColumnState
-    else if (gridPlusColumnState !== null && gridPlusColumnState !== void 0 && gridPlusColumnState[gridKey]) {
-      var currentState = gridPlusColumnState[gridKey];
-      setColumnCellClass(handelgridPlusColumnState(currentState));
-      var _timer = setTimeout(function () {
-        var _apiRef$current2;
-        (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.applyColumnState({
-          state: currentState,
-          applyOrder: true
-        });
-      }, 10);
-      return function () {
-        return clearTimeout(_timer);
-      };
-    }
-  }, [gridKey, columnSchemeManager === null || columnSchemeManager === void 0 || (_columnSchemeManager$2 = columnSchemeManager.currentScheme) === null || _columnSchemeManager$2 === void 0 ? void 0 : _columnSchemeManager$2.columnConfig, gridPlusColumnState]);
+  }, [gridKey, columnSchemeManager === null || columnSchemeManager === void 0 || (_columnSchemeManager$2 = columnSchemeManager.currentScheme) === null || _columnSchemeManager$2 === void 0 ? void 0 : _columnSchemeManager$2.columnConfig]);
 
-  // 同步 apiRef 和 currentScheme,确保方案在两者都准备好时应用
+  // 【修复】使用 applyColumnState 来应用列的顺序、宽度、隐藏等状态
+  // applyColumnState 是 AG-Grid 推荐的方式，专门用于控制列状态
   (0, _react.useEffect)(function () {
-    var _currentScheme$column;
     var currentScheme = columnSchemeManager === null || columnSchemeManager === void 0 ? void 0 : columnSchemeManager.currentScheme;
-
-    // 两个依赖都不存在时,直接返回
     if (!apiRef.current || !currentScheme) {
-      console.log('[AgGridPlus] useEffect: 等待依赖准备', {
-        hasApiRef: !!apiRef.current,
-        hasCurrentScheme: !!currentScheme
-      });
       return;
     }
-    console.log('[AgGridPlus] useEffect: 两个依赖都准备好,应用方案', {
-      schemeId: currentScheme.id,
-      schemeName: currentScheme.name,
-      hasColumnConfig: !!currentScheme.columnConfig,
-      columnConfigCount: ((_currentScheme$column = currentScheme.columnConfig) === null || _currentScheme$column === void 0 ? void 0 : _currentScheme$column.length) || 0
-    });
-    var timer = setTimeout(function () {
-      // 优先使用 columnConfig(包含完整的分组结构)
-      if (currentScheme.columnConfig) {
-        var _require3 = require("./setting/columnGroupUtils"),
-          flatConfigToGridState = _require3.flatConfigToGridState;
-        var gridColumnDefs = flatConfigToGridState(currentScheme.columnConfig);
-        console.log('[AgGridPlus] useEffect: 应用方案的 columnConfig:', {
-          columnConfig: currentScheme.columnConfig,
-          columnConfigLength: currentScheme.columnConfig.length,
-          gridColumnDefs: gridColumnDefs,
-          gridColumnDefsLength: gridColumnDefs.length,
-          columnConfigDetail: currentScheme.columnConfig.map(function (item) {
-            return {
-              type: item.type,
-              field: item.field,
-              headerName: item.headerName,
-              order: item.order,
-              parentId: item.parentId
-            };
-          }),
-          gridColumnDefsDetail: gridColumnDefs.map(function (def, idx) {
-            var _def$children;
-            return {
-              index: idx,
-              field: def.field,
-              headerName: def.headerName,
-              groupId: def.groupId,
-              children: (_def$children = def.children) === null || _def$children === void 0 ? void 0 : _def$children.length
-            };
-          })
-        });
 
-        // 1. 先设置列定义(包含分组结构)
-        if (apiRef.current) {
-          apiRef.current.setGridOption("columnDefs", gridColumnDefs);
+    // 如果有 columnConfig，使用 applyColumnState 应用列状态
+    if (currentScheme.columnConfig && currentScheme.columnConfig.length > 0) {
+      var _require2 = require("./setting/columnGroupUtils"),
+        flatConfigToColumnState = _require2.flatConfigToColumnState;
+      var _columnState2 = flatConfigToColumnState(currentScheme.columnConfig);
 
-          // 等待 columnDefs 应用完成后再设置过滤器
-          // 原因: setGridOption("columnDefs") 会触发 Grid 重新渲染,可能重置内部状态
-          // 必须在下一个渲染周期后应用 filterModel,否则会被覆盖
-          if (currentScheme.filterModel) {
-            requestAnimationFrame(function () {
-              if (apiRef.current) {
-                console.log('[AgGridPlus] 应用过滤器状态:', currentScheme.filterModel);
-                apiRef.current.setFilterModel(currentScheme.filterModel);
-              }
-            });
-          }
-        }
+      // 使用 applyColumnState 应用列状态
+      // applyOrder: true 表示按照 state 数组的顺序重新排列列
+      apiRef.current.applyColumnState({
+        state: _columnState2,
+        applyOrder: true
+      });
+    }
 
-        // 2. 【重要修改】使用 columnConfig 时，不应用 columnState
-        // 原因：columnConfig 已经包含了完整的列配置（宽度、隐藏、顺序、分组等）
-        // 如果再应用 columnState，会导致分组子列被视为独立列，破坏分组结构
-        console.log('[AgGridPlus] useEffect: 使用 columnConfig，跳过 columnState 应用');
-      }
-    }, 10);
-    return function () {
-      return clearTimeout(timer);
-    };
+    // 应用过滤器状态
+    if (currentScheme.filterModel) {
+      setTimeout(function () {
+        if (apiRef.current) {
+          apiRef.current.setFilterModel(currentScheme.filterModel);
+        }
+      }, 50); // 延迟稍长一点，等待 columnState 应用完成
+    }
   }, [apiRef.current, columnSchemeManager === null || columnSchemeManager === void 0 ? void 0 : columnSchemeManager.currentScheme]);
   (0, _react.useEffect)(function () {
     setRowData(dataSource || propRowData || []);
@@ -541,11 +475,22 @@ function AgGridPlus(props) {
   };
 
   // 计算所有列定义(包括隐藏的列)
+  // 【修复】移除 rowData 依赖,使用缓存的首行数据进行类型推断
   var allColDefs = (0, _react.useMemo)(function () {
-    var cols = getTableColumns(rowData);
+    var dataForTypeInference = firstRowDataRef.current || (rowData.length > 0 ? rowData[0] : {});
+    var cols = getTableColumns([dataForTypeInference]);
     allColDefsRef.current = cols; // 同步更新 ref
+
+    console.log('[AgGridPlus] allColDefs 重新计算:', {
+      childrenCount: _react.default.Children.count(children),
+      hasPropsColumnDefs: !!props.columnDefs,
+      extensibleColumnsCount: Object.keys(extensibleColumns || {}).length,
+      gridKey: gridKey,
+      colsCount: cols.length,
+      usingCachedData: !!firstRowDataRef.current
+    });
     return cols;
-  }, [_react.default.Children.count(children), props.columnDefs, extensibleColumns, rowData, gridKey]);
+  }, [_react.default.Children.count(children), props.columnDefs, extensibleColumns, gridKey]);
 
   // 稳定化 gridParams 和 sortColumn 的引用
   var stableGridParams = (0, _react.useMemo)(function () {
@@ -600,7 +545,7 @@ function AgGridPlus(props) {
     };
   }, [propsRowSelection, enableClickSelection]);
   var onGridReady = (0, _react.useCallback)(function (params) {
-    var _columnSchemeManager$3, _columnSchemeManager$4, _columnSchemeManager$5, _apiRef$current3;
+    var _columnSchemeManager$3, _columnSchemeManager$4, _columnSchemeManager$5, _apiRef$current;
     console.log('[AgGridPlus] onGridReady 被调用:', {
       hasColumnSchemeManager: !!columnSchemeManager,
       hasCurrentScheme: !!(columnSchemeManager !== null && columnSchemeManager !== void 0 && columnSchemeManager.currentScheme),
@@ -612,7 +557,7 @@ function AgGridPlus(props) {
     onReady && onReady(params);
     ///@ts-ignore
     dataSource && setRowData(dataSource);
-    setColumnState((_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 ? void 0 : _apiRef$current3.getColumnState());
+    setColumnState((_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.getColumnState());
     sortChanged(params.api);
     setReady(true);
 
@@ -637,7 +582,7 @@ function AgGridPlus(props) {
         sorter: getSort(stableSortColumn)
       });
       requestRef.current(params, undefined, queryFilter).then(function (response) {
-        var _apiRef$current4;
+        var _apiRef$current2;
         // 验证响应数据格式
         if (!response || _typeof(response) !== 'object') {
           throw new _errors.GridPlusError('服务器返回数据格式错误', _errors.ErrorType.DATA_FORMAT_ERROR, _errors.ErrorSeverity.HIGH, {
@@ -653,7 +598,7 @@ function AgGridPlus(props) {
         var rowCount = response.total;
         setRowData(rowData);
         // 刷新所有单元格
-        (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 || _apiRef$current4.refreshCells({
+        (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.refreshCells({
           force: true
         });
         setPagination(function (prev) {
@@ -927,8 +872,8 @@ function AgGridPlus(props) {
       });
     }
     if (!allColDefs || displayedData.length === 0) {
-      var _apiRef$current5;
-      (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 || _apiRef$current5.setGridOption('pinnedBottomRowData', undefined);
+      var _apiRef$current3;
+      (_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 || _apiRef$current3.setGridOption('pinnedBottomRowData', undefined);
       return;
     }
     var calcColFields = allColDefs.filter(function (col) {
@@ -942,16 +887,30 @@ function AgGridPlus(props) {
       };
     });
     if (calcColFields.length > 0) {
-      var _apiRef$current6;
+      var _apiRef$current4;
       var calculatedValues = calculatefun(calcColFields, displayedData);
-      (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 || _apiRef$current6.setGridOption('pinnedBottomRowData', calculatedValues);
+      (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 || _apiRef$current4.setGridOption('pinnedBottomRowData', calculatedValues);
     }
   }, [allColDefs, calculatefun]);
   var onFilterChanged = function onFilterChanged(event) {
     calculateSum();
   };
   var colDefs = (0, _react.useMemo)(function () {
-    var columnDefs = getTableColumns(rowData);
+    var currentScheme = columnSchemeManager === null || columnSchemeManager === void 0 ? void 0 : columnSchemeManager.currentScheme;
+
+    // 【修复】优先使用方案的 columnConfig，避免被默认逻辑覆盖
+    if (currentScheme !== null && currentScheme !== void 0 && currentScheme.columnConfig && currentScheme.columnConfig.length > 0) {
+      var _require3 = require("./setting/columnGroupUtils"),
+        flatConfigToGridState = _require3.flatConfigToGridState;
+      var gridColumnDefs = flatConfigToGridState(currentScheme.columnConfig);
+      return gridColumnDefs;
+    }
+
+    // 【默认逻辑】没有方案配置时，使用原有的列定义生成逻辑
+    // 使用缓存的首行数据进行类型推断,而不是当前的 rowData
+    // 这样 rowData 更新时不会触发 colDefs 重新计算
+    var dataForTypeInference = firstRowDataRef.current || (rowData.length > 0 ? rowData[0] : {});
+    var columnDefs = getTableColumns([dataForTypeInference]);
 
     // 递归应用 columnCellClass 配置
     var applyCellConfig = function applyCellConfig(col) {
@@ -984,7 +943,7 @@ function AgGridPlus(props) {
     });
     var processedColumns = (0, _processColumnGroups.default)(columnDefs);
     return processedColumns;
-  }, [_react.default.Children.count(children), props.columnDefs, extensibleColumns, columnCellClass, rowData]);
+  }, [columnSchemeManager === null || columnSchemeManager === void 0 ? void 0 : columnSchemeManager.currentScheme, _react.default.Children.count(children), props.columnDefs, extensibleColumns, columnCellClass]);
 
   // 构建查询表单项（带 order 属性）
   var queryFormItems = (0, _react.useMemo)(function () {
@@ -1141,8 +1100,8 @@ function AgGridPlus(props) {
     rowSelection: rowSelectionConfig,
     onDragStopped: function onDragStopped(e) {
       if (apiRef.current) {
-        var _apiRef$current7;
-        var _columnState3 = (_apiRef$current7 = apiRef.current) === null || _apiRef$current7 === void 0 ? void 0 : _apiRef$current7.getColumnState();
+        var _apiRef$current5;
+        var _columnState3 = (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.getColumnState();
         setColumnState(_columnState3);
 
         // onColumnStateChanged && onColumnStateChanged(columnState)

package/dist/cjs/ag-grid-plus/setting/ColumnSetting.js

@@ -249,12 +249,12 @@ var ColumnSetting = function ColumnSetting(_ref) {
 
           // 等待 Grid 状态更新完成后再保存到方案
           setTimeout( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-            var updatedState, filterModel, defaultScheme, newScheme;
+            var updatedState, filterModel, defaultScheme, _newScheme$columnConf, newScheme;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
                   if (!(schemeManager && gridKey)) {
-                    _context.next = 28;
+                    _context.next = 29;
                     break;
                   }
                   _context.prev = 1;
@@ -287,7 +287,7 @@ var ColumnSetting = function ColumnSetting(_ref) {
                     filterModel: filterModel
                   });
                 case 8:
-                  _context.next = 23;
+                  _context.next = 24;
                   break;
                 case 10:
                   // 如果没有激活的方案，查找或创建"默认配置"方案
@@ -308,7 +308,7 @@ var ColumnSetting = function ColumnSetting(_ref) {
                     filterModel: filterModel
                   });
                 case 16:
-                  _context.next = 23;
+                  _context.next = 24;
                   break;
                 case 18:
                   _context.next = 20;
@@ -321,20 +321,29 @@ var ColumnSetting = function ColumnSetting(_ref) {
                   });
                 case 20:
                   newScheme = _context.sent;
-                  _context.next = 23;
+                  console.log('[ColumnSetting] 创建默认方案成功,准备应用:', {
+                    schemeId: newScheme.id,
+                    schemeName: newScheme.name,
+                    hasColumnConfig: !!newScheme.columnConfig,
+                    columnConfigLength: ((_newScheme$columnConf = newScheme.columnConfig) === null || _newScheme$columnConf === void 0 ? void 0 : _newScheme$columnConf.length) || 0
+                  });
+
+                  // 【修复】直接加载方案,确保立即应用
+                  // loadScheme 会设置 currentScheme 并触发 onSchemeChange
+                  _context.next = 24;
                   return schemeManager.loadScheme(newScheme.id);
-                case 23:
-                  _context.next = 28;
+                case 24:
+                  _context.next = 29;
                   break;
-                case 25:
-                  _context.prev = 25;
+                case 26:
+                  _context.prev = 26;
                   _context.t0 = _context["catch"](1);
                   console.error('[ColumnSetting] 保存列配置到方案失败:', _context.t0);
-                case 28:
+                case 29:
                 case "end":
                   return _context.stop();
               }
-            }, _callee, null, [[1, 25]]);
+            }, _callee, null, [[1, 26]]);
           })), 50);
 
           // 保存成功后清除备份