@nokecy/qc-ui 1.0.81 → 1.0.83

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

@@ -51,7 +51,7 @@ var getSort = function getSort(columnState) {
   return columnState ? "".concat(columnState.colId, " ").concat(columnState.sort) : "";
 };
 function AgGridPlus(props) {
-  var _querySchemeManager$c;
+  var _columnSchemeManager$2, _querySchemeManager$c;
   var style = props.style,
     loadingProps = props.loading,
     gridParams = props.params,
@@ -165,12 +165,16 @@ function AgGridPlus(props) {
     storageAdapter: globalColumnAdapter || columnSchemeStorageAdapter,
     enableAutoSave: true,
     onSchemeChange: function onSchemeChange(scheme) {
-      if (scheme && apiRef.current) {
-        apiRef.current.applyColumnState({
-          state: scheme.columnState,
-          applyOrder: true
-        });
-      }
+      console.log('[AgGridPlus] onSchemeChange 被调用:', {
+        hasScheme: !!scheme,
+        hasApiRef: !!apiRef.current,
+        schemeId: scheme === null || scheme === void 0 ? void 0 : scheme.id,
+        schemeName: scheme === null || scheme === void 0 ? void 0 : scheme.name,
+        hasColumnConfig: !!(scheme !== null && scheme !== void 0 && scheme.columnConfig)
+      });
+
+      // 注意: 方案应用已由 useEffect 处理
+      // useEffect 会在 apiRef 和 currentScheme 都准备好时自动应用方案
     }
   }) : undefined;
 
@@ -235,37 +239,114 @@ function AgGridPlus(props) {
 
   // 加载列方案
   useEffect(function () {
-    if (!gridPlusColumnState || !gridKey || !apiRef.current) return;
-    var currentState = gridPlusColumnState[gridKey];
-    if (!currentState) return;
-    setColumnCellClass(handelgridPlusColumnState(currentState));
-    var timer = setTimeout(function () {
-      var _apiRef$current;
-      (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.applyColumnState({
-        state: currentState,
-        applyOrder: true
-      });
-    }, 10);
-    return function () {
-      return clearTimeout(timer);
-    };
-  }, [gridPlusColumnState, gridKey]);
+    var _columnSchemeManager$;
+    if (!gridKey || !apiRef.current) return;
 
-  // 当 gridApi 就绪且有当前方案时，应用列方案
+    // 优先使用方案中的 columnConfig（用户在列配置界面调整后的数据）
+    if (columnSchemeManager !== null && columnSchemeManager !== void 0 && (_columnSchemeManager$ = columnSchemeManager.currentScheme) !== null && _columnSchemeManager$ !== void 0 && _columnSchemeManager$.columnConfig) {
+      var _require = require("./setting/columnGroupUtils"),
+        flatConfigToColumnState = _require.flatConfigToColumnState;
+      var _columnState = flatConfigToColumnState(columnSchemeManager.currentScheme.columnConfig);
+      setColumnCellClass(handelgridPlusColumnState(_columnState));
+      var timer = setTimeout(function () {
+        var _apiRef$current;
+        (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.applyColumnState({
+          state: _columnState,
+          applyOrder: true
+        });
+      }, 10);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    // 后备方案：使用旧的 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]);
+
+  // 同步 apiRef 和 currentScheme,确保方案在两者都准备好时应用
   useEffect(function () {
+    var _currentScheme$column;
     var currentScheme = columnSchemeManager === null || columnSchemeManager === void 0 ? void 0 : columnSchemeManager.currentScheme;
-    if (!apiRef.current || !currentScheme) return;
-    var timer = setTimeout(function () {
-      var _apiRef$current2;
-      (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.applyColumnState({
-        state: currentScheme.columnState,
-        applyOrder: true
+
+    // 两个依赖都不存在时,直接返回
+    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 _require2 = require("./setting/columnGroupUtils"),
+          flatConfigToGridState = _require2.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);
+        }
+
+        // 2. 【重要修改】使用 columnConfig 时，不应用 columnState
+        // 原因：columnConfig 已经包含了完整的列配置（宽度、隐藏、顺序、分组等）
+        // 如果再应用 columnState，会导致分组子列被视为独立列，破坏分组结构
+        console.log('[AgGridPlus] useEffect: 使用 columnConfig，跳过 columnState 应用');
+      }
+
+      // 应用过滤器状态
+      if (currentScheme.filterModel && apiRef.current) {
+        apiRef.current.setFilterModel(currentScheme.filterModel);
+      }
     }, 10);
     return function () {
       return clearTimeout(timer);
     };
-  }, [columnSchemeManager === null || columnSchemeManager === void 0 ? void 0 : columnSchemeManager.currentScheme]);
+  }, [apiRef.current, columnSchemeManager === null || columnSchemeManager === void 0 ? void 0 : columnSchemeManager.currentScheme]);
   useEffect(function () {
     setRowData(dataSource || propRowData || []);
   }, [dataSource, propRowData]);
@@ -301,96 +382,116 @@ function AgGridPlus(props) {
     return colDef.customCellRenderer(params);
   };
 
-  // 获取表格列定义
-  var getTableColumns = function getTableColumns(rowDataList) {
-    var data = rowDataList.length > 0 ? rowDataList[0] : {};
-    var columnProps = React.Children.map(children, function (child, index) {
-      return _objectSpread({}, child.props);
-    });
-    var columnDefs = !columnProps ? props.columnDefs ? props.columnDefs : [] : columnProps;
-    columnDefs = columnDefs.map(function (col) {
-      var dataType = getDataType(data, col.field || '', col.valueEnum);
-      if (col.valueEnum && Array.isArray(col.valueEnum)) {
-        var _defaultItems$0$value, _defaultItems$;
-        // 统计默认值
-        var valueEnum = col.valueEnum; // 保存引用以便TypeScript理解
-        var defaultItems = valueEnum.filter(function (item) {
-          return item.default;
+  // 辅助函数: 处理单个列配置
+  var processColumnConfig = function processColumnConfig(col, data) {
+    var dataType = getDataType(data, col.field || '', col.valueEnum);
+    if (col.valueEnum && Array.isArray(col.valueEnum)) {
+      var _defaultItems$0$value, _defaultItems$;
+      // 统计默认值
+      var valueEnum = col.valueEnum; // 保存引用以便TypeScript理解
+      var defaultItems = valueEnum.filter(function (item) {
+        return item.default;
+      });
+      var isMultiple = defaultItems.length > 1;
+      var defaultValue = isMultiple ? defaultItems.map(function (item) {
+        return item.value;
+      }) : (_defaultItems$0$value = (_defaultItems$ = defaultItems[0]) === null || _defaultItems$ === void 0 ? void 0 : _defaultItems$.value) !== null && _defaultItems$0$value !== void 0 ? _defaultItems$0$value : undefined;
+      var valueFormatter = function valueFormatter(params) {
+        var match = valueEnum.find(function (item) {
+          return item.value == params.value;
         });
-        var isMultiple = defaultItems.length > 1;
-        var defaultValue = isMultiple ? defaultItems.map(function (item) {
-          return item.value;
-        }) : (_defaultItems$0$value = (_defaultItems$ = defaultItems[0]) === null || _defaultItems$ === void 0 ? void 0 : _defaultItems$.value) !== null && _defaultItems$0$value !== void 0 ? _defaultItems$0$value : undefined;
-        var valueFormatter = function valueFormatter(params) {
+        return match ? match.label : params.value;
+      };
+      return _objectSpread(_objectSpread(_objectSpread({}, dataType), col), {}, {
+        cellRenderer: function cellRenderer(params) {
           var match = valueEnum.find(function (item) {
             return item.value == params.value;
           });
-          return match ? match.label : params.value;
-        };
-        return _objectSpread(_objectSpread(_objectSpread({}, dataType), col), {}, {
-          cellRenderer: function cellRenderer(params) {
-            var match = valueEnum.find(function (item) {
-              return item.value == params.value;
-            });
-            if (match) {
-              var color = match.color || '#ffffff';
-              return /*#__PURE__*/React.createElement("span", {
-                style: {
-                  color: color,
-                  backgroundColor: 'transparent',
-                  fontWeight: 500
-                }
-              }, match.label);
-            }
-            return params.value;
-          },
-          filterParams: _objectSpread(_objectSpread({}, col.filterParams || {}), {}, {
-            valueFormatter: valueFormatter
-          }),
-          searchComponent: Select,
-          searchComponentProps: {
-            options: col.valueEnum.map(function (item) {
-              return {
-                label: item.label,
-                value: item.value
-              };
-            }),
-            mode: isMultiple ? "multiple" : undefined,
-            defaultValue: defaultValue
-          }
-        });
-      }
-      if (col.type || typeof col.cellRenderer == "string") {
-        return _objectSpread({}, col);
-      }
-      //@ts-ignore
-      if (col !== null && col !== void 0 && col.ellipsis) {
-        return _objectSpread(_objectSpread({}, col), {}, {
-          cellRenderer: function cellRenderer(_ref) {
-            var value = _ref.value;
-            return /*#__PURE__*/React.createElement(Text, {
-              ellipsis: {
-                tooltip: value
-              },
+          if (match) {
+            var color = match.color || '#ffffff';
+            return /*#__PURE__*/React.createElement("span", {
               style: {
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
+                color: color,
+                backgroundColor: 'transparent',
+                fontWeight: 500
               }
-            }, value);
+            }, match.label);
           }
-        });
-      }
-      if (col.cellRenderer) {
-        return _objectSpread(_objectSpread({}, col), {}, {
-          customCellRenderer: col.cellRenderer,
-          cellRenderer: cellRenderer
-        });
-      }
-      return _objectSpread(_objectSpread(_objectSpread({}, dataType), col), {}, {
+          return params.value;
+        },
+        filterParams: _objectSpread(_objectSpread({}, col.filterParams || {}), {}, {
+          valueFormatter: valueFormatter
+        }),
+        searchComponent: Select,
+        searchComponentProps: {
+          options: col.valueEnum.map(function (item) {
+            return {
+              label: item.label,
+              value: item.value
+            };
+          }),
+          mode: isMultiple ? "multiple" : undefined,
+          defaultValue: defaultValue
+        }
+      });
+    }
+    if (col.type || typeof col.cellRenderer == "string") {
+      return _objectSpread({}, col);
+    }
+    //@ts-ignore
+    if (col !== null && col !== void 0 && col.ellipsis) {
+      return _objectSpread(_objectSpread({}, col), {}, {
+        cellRenderer: function cellRenderer(_ref) {
+          var value = _ref.value;
+          return /*#__PURE__*/React.createElement(Text, {
+            ellipsis: {
+              tooltip: value
+            },
+            style: {
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center'
+            }
+          }, value);
+        }
+      });
+    }
+    if (col.cellRenderer) {
+      return _objectSpread(_objectSpread({}, col), {}, {
         customCellRenderer: col.cellRenderer,
         cellRenderer: cellRenderer
       });
+    }
+    return _objectSpread(_objectSpread(_objectSpread({}, dataType), col), {}, {
+      customCellRenderer: col.cellRenderer,
+      cellRenderer: cellRenderer
+    });
+  };
+
+  // 获取表格列定义
+  var getTableColumns = function getTableColumns(rowDataList) {
+    var data = rowDataList.length > 0 ? rowDataList[0] : {};
+    var columnProps = React.Children.map(children, function (child, index) {
+      return _objectSpread({}, child.props);
+    });
+    var columnDefs = !columnProps ? props.columnDefs ? props.columnDefs : [] : columnProps;
+
+    // 递归处理列配置（包括分组的 children）
+    var processColumnDefRecursively = function processColumnDefRecursively(col) {
+      // 如果有 children（分组列），递归处理每个子列
+      if (col.children && Array.isArray(col.children)) {
+        return _objectSpread(_objectSpread({}, col), {}, {
+          children: col.children.map(function (child) {
+            return processColumnDefRecursively(child);
+          })
+        });
+      }
+
+      // 处理普通列
+      return processColumnConfig(col, data);
+    };
+    columnDefs = columnDefs.map(function (col) {
+      return processColumnDefRecursively(col);
     });
     extensibleColumns && gridKey && extensibleColumns[gridKey] && extensibleColumns[gridKey].map(function (column) {
       columnDefs.push({
@@ -464,9 +565,15 @@ function AgGridPlus(props) {
       enableClickSelection: false
     };
   }, [propsRowSelection, enableClickSelection]);
-  console.log('[AgGridPlus] rowSelection config:', JSON.stringify(rowSelectionConfig));
   var onGridReady = useCallback(function (params) {
-    var _apiRef$current3;
+    var _columnSchemeManager$3, _columnSchemeManager$4, _columnSchemeManager$5, _apiRef$current3;
+    console.log('[AgGridPlus] onGridReady 被调用:', {
+      hasColumnSchemeManager: !!columnSchemeManager,
+      hasCurrentScheme: !!(columnSchemeManager !== null && columnSchemeManager !== void 0 && columnSchemeManager.currentScheme),
+      currentSchemeId: columnSchemeManager === null || columnSchemeManager === void 0 || (_columnSchemeManager$3 = columnSchemeManager.currentScheme) === null || _columnSchemeManager$3 === void 0 ? void 0 : _columnSchemeManager$3.id,
+      currentSchemeName: columnSchemeManager === null || columnSchemeManager === void 0 || (_columnSchemeManager$4 = columnSchemeManager.currentScheme) === null || _columnSchemeManager$4 === void 0 ? void 0 : _columnSchemeManager$4.name,
+      hasColumnConfig: !!(columnSchemeManager !== null && columnSchemeManager !== void 0 && (_columnSchemeManager$5 = columnSchemeManager.currentScheme) !== null && _columnSchemeManager$5 !== void 0 && _columnSchemeManager$5.columnConfig)
+    });
     apiRef.current = params.api;
     onReady && onReady(params);
     ///@ts-ignore
@@ -474,7 +581,10 @@ function AgGridPlus(props) {
     setColumnState((_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 ? void 0 : _apiRef$current3.getColumnState());
     sortChanged(params.api);
     setReady(true);
-  }, [dataSource]);
+
+    // 注意: 方案应用已由 useEffect 处理,无需在这里重复应用
+    // useEffect 会在 apiRef 和 currentScheme 都准备好时自动应用方案
+  }, [dataSource, columnSchemeManager]);
   var onRequest = useCallback(function (queryFilter) {
     if (!requestRef.current) return;
     setLoading(true);
@@ -577,9 +687,6 @@ function AgGridPlus(props) {
     if (prevDeps.paginationCurrent !== pagination.current) changedDeps.push('pagination.current');
     if (prevDeps.paginationPageSize !== pagination.pageSize) changedDeps.push('pagination.pageSize');
     if (prevDeps.stableSortColumn !== stableSortColumn) changedDeps.push('stableSortColumn');
-    if (changedDeps.length > 0) {
-      console.log('🔍 useEffect 依赖项变化:', changedDeps.join(', '));
-    }
     depsRef.current = {
       ready: ready,
       stableQueryFilter: stableQueryFilter,
@@ -811,21 +918,34 @@ function AgGridPlus(props) {
   };
   var colDefs = useMemo(function () {
     var columnDefs = getTableColumns(rowData);
-    columnDefs = columnDefs.map(function (i) {
-      var cellConfig = columnCellClass[i.field];
+
+    // 递归应用 columnCellClass 配置
+    var applyCellConfig = function applyCellConfig(col) {
+      // 如果有 children,递归处理
+      if (col.children && Array.isArray(col.children)) {
+        return _objectSpread(_objectSpread({}, col), {}, {
+          children: col.children.map(applyCellConfig).filter(function (x) {
+            return !x.hideInTable;
+          })
+        });
+      }
+
+      // 处理普通列
+      var cellConfig = columnCellClass[col.field];
       if (cellConfig) {
         if (cellConfig.cellClass) {
-          i.cellClass = cellConfig.cellClass;
+          col.cellClass = cellConfig.cellClass;
         }
         if (cellConfig.groupName) {
-          i.groupName = cellConfig.groupName;
+          col.groupName = cellConfig.groupName;
         }
         if (cellConfig.suppressHeaderFilterButton !== undefined) {
-          i.suppressHeaderFilterButton = !cellConfig.suppressHeaderFilterButton;
+          col.suppressHeaderFilterButton = !cellConfig.suppressHeaderFilterButton;
         }
       }
-      return i;
-    }).filter(function (x) {
+      return col;
+    };
+    columnDefs = columnDefs.map(applyCellConfig).filter(function (x) {
       return !x.hideInTable;
     });
     var processedColumns = processColumnGroups(columnDefs);
@@ -845,11 +965,6 @@ function AgGridPlus(props) {
         order: (_col$searchSort = col.searchSort) !== null && _col$searchSort !== void 0 ? _col$searchSort : 999
       }, col);
     })) || [];
-    console.log('[AgGridPlus] queryFormItems构建:', {
-      allColDefsLength: allColDefs === null || allColDefs === void 0 ? void 0 : allColDefs.length,
-      queryFormItemsLength: items.length,
-      queryFormItems: items
-    });
     return items;
   }, [allColDefs]);
 
@@ -993,8 +1108,8 @@ function AgGridPlus(props) {
     onDragStopped: function onDragStopped(e) {
       if (apiRef.current) {
         var _apiRef$current7;
-        var _columnState = (_apiRef$current7 = apiRef.current) === null || _apiRef$current7 === void 0 ? void 0 : _apiRef$current7.getColumnState();
-        setColumnState(_columnState);
+        var _columnState2 = (_apiRef$current7 = apiRef.current) === null || _apiRef$current7 === void 0 ? void 0 : _apiRef$current7.getColumnState();
+        setColumnState(_columnState2);
 
         // onColumnStateChanged && onColumnStateChanged(columnState)
       }