@nokecy/qc-ui 1.0.82 → 1.0.84

package/dist/esm/ag-grid-plus/setting/MoveNodeModal.js

@@ -0,0 +1,150 @@
+/**
+ * 移动节点弹窗组件
+ * 用于选择目标父节点,支持移动到根级别或其他分组下
+ */
+
+import React, { useMemo } from 'react';
+import { Modal, Tree, message } from 'antd';
+import { FolderOutlined, FileOutlined } from '@ant-design/icons';
+import DraggableModal from "../../draggableModal";
+var MoveNodeModal = function MoveNodeModal(_ref) {
+  var visible = _ref.visible,
+    currentNode = _ref.currentNode,
+    allItems = _ref.allItems,
+    onCancel = _ref.onCancel,
+    onConfirm = _ref.onConfirm;
+  /**
+   * 将扁平数据转换为 Tree 结构
+   */
+  var treeData = useMemo(function () {
+    if (!currentNode) return [];
+
+    // 构建节点Map
+    var nodeMap = new Map();
+    var rootNodes = [];
+
+    // 添加"根级别"选项
+    var rootOption = {
+      key: '__ROOT__',
+      title: '📌 移动到根级别',
+      selectable: true,
+      children: []
+    };
+
+    // 过滤掉当前节点及其所有后代节点
+    var getDescendantIds = function getDescendantIds(nodeId) {
+      var descendants = new Set([nodeId]);
+      var findDescendants = function findDescendants(id) {
+        allItems.forEach(function (item) {
+          if (item.parentId === id) {
+            descendants.add(item.id);
+            findDescendants(item.id);
+          }
+        });
+      };
+      findDescendants(nodeId);
+      return descendants;
+    };
+    var excludedIds = getDescendantIds(currentNode.id);
+    var validItems = allItems.filter(function (item) {
+      return !excludedIds.has(item.id);
+    });
+
+    // 第一遍:创建所有节点
+    validItems.forEach(function (item) {
+      var icon = item.type === 'group' ? /*#__PURE__*/React.createElement(FolderOutlined, null) : /*#__PURE__*/React.createElement(FileOutlined, null);
+
+      // 只有分组节点可选择(作为父节点)
+      var selectable = item.type === 'group';
+      nodeMap.set(item.id, {
+        key: item.id,
+        title: item.headerName,
+        icon: icon,
+        selectable: selectable,
+        children: [],
+        disabled: !selectable // 列节点禁用选择
+      });
+    });
+
+    // 第二遍:构建树形结构
+    validItems.forEach(function (item) {
+      var node = nodeMap.get(item.id);
+      if (!node) return;
+      if (!item.parentId) {
+        // 根级别的分组节点添加到rootOption的children中
+        if (item.type === 'group') {
+          rootOption.children.push(node);
+        }
+      } else {
+        var parent = nodeMap.get(item.parentId);
+        if (parent) {
+          parent.children.push(node);
+        }
+      }
+    });
+
+    // 始终返回rootOption
+    return [rootOption];
+  }, [currentNode, allItems]);
+
+  /**
+   * 处理选择节点
+   */
+  var handleSelect = function handleSelect(selectedKeys) {
+    if (selectedKeys.length === 0) return;
+    var selectedKey = selectedKeys[0];
+
+    // 特殊处理:选择"根级别"
+    if (selectedKey === '__ROOT__') {
+      Modal.confirm({
+        title: '确认移动',
+        content: "\u786E\u5B9A\u8981\u5C06\"".concat(currentNode === null || currentNode === void 0 ? void 0 : currentNode.headerName, "\"\u79FB\u52A8\u5230\u6839\u7EA7\u522B\u5417?"),
+        onOk: function onOk() {
+          onConfirm(undefined); // undefined 表示移动到根级别
+        }
+      });
+      return;
+    }
+
+    // 查找目标节点
+    var targetNode = allItems.find(function (item) {
+      return item.id === selectedKey;
+    });
+    if (!targetNode) {
+      message.error('未找到目标节点');
+      return;
+    }
+
+    // 确认对话框
+    Modal.confirm({
+      title: '确认移动',
+      content: "\u786E\u5B9A\u8981\u5C06\"".concat(currentNode === null || currentNode === void 0 ? void 0 : currentNode.headerName, "\"\u79FB\u52A8\u5230\"").concat(targetNode.headerName, "\"\u4E0B\u5417?"),
+      onOk: function onOk() {
+        onConfirm(selectedKey);
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(DraggableModal, {
+    title: "\u79FB\u52A8\u8282\u70B9: ".concat((currentNode === null || currentNode === void 0 ? void 0 : currentNode.headerName) || ''),
+    open: visible,
+    onCancel: onCancel,
+    footer: null,
+    width: 500
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 16,
+      color: '#666'
+    }
+  }, "\u8BF7\u9009\u62E9\u76EE\u6807\u7236\u8282\u70B9(\u53EA\u80FD\u9009\u62E9\u5206\u7EC4\u8282\u70B9):"), /*#__PURE__*/React.createElement(Tree, {
+    showIcon: true,
+    defaultExpandAll: true,
+    treeData: treeData,
+    onSelect: handleSelect,
+    selectable: true,
+    style: {
+      maxHeight: 400,
+      overflow: 'auto'
+    }
+  }));
+};
+export default MoveNodeModal;

package/dist/esm/ag-grid-plus/setting/NameColumnRenderer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 名称列渲染组件
+ * 用于在 ArrayTable 中展示带缩进的树形结构
+ */
+import React from 'react';
+import type { FlatColumnItem } from './columnGroupTypes';
+interface NameColumnRendererProps {
+    value: string;
+    record: FlatColumnItem;
+    onChange: (value: string) => void;
+    allItems: FlatColumnItem[];
+}
+/**
+ * 名称列渲染组件
+ * 显示节点类型图标、层级缩进和可编辑的名称
+ */
+declare const NameColumnRenderer: React.FC<NameColumnRendererProps>;
+export default NameColumnRenderer;

package/dist/esm/ag-grid-plus/setting/NameColumnRenderer.js

@@ -0,0 +1,87 @@
+/**
+ * 名称列渲染组件
+ * 用于在 ArrayTable 中展示带缩进的树形结构
+ */
+
+import React from 'react';
+import { Input, Tag } from 'antd';
+import { FolderOutlined, FileOutlined } from '@ant-design/icons';
+/**
+ * 名称列渲染组件
+ * 显示节点类型图标、层级缩进和可编辑的名称
+ */
+var NameColumnRenderer = function NameColumnRenderer(_ref) {
+  var value = _ref.value,
+    record = _ref.record,
+    _onChange = _ref.onChange,
+    allItems = _ref.allItems;
+  var type = record.type,
+    level = record.level,
+    _isNew = record._isNew;
+
+  // 计算缩进（每层 20px）
+  var indent = level * 20;
+
+  // 获取缩进符号
+  var getIndentSymbol = function getIndentSymbol() {
+    var _siblings;
+    if (level === 0) return '';
+
+    // 检查是否是父节点的最后一个子节点
+    var siblings = allItems.filter(function (item) {
+      return item.parentId === record.parentId;
+    });
+    var isLast = ((_siblings = siblings[siblings.length - 1]) === null || _siblings === void 0 ? void 0 : _siblings.id) === record.id;
+    return isLast ? '└─ ' : '├─ ';
+  };
+
+  // 节点类型图标
+  var NodeIcon = type === 'group' ? /*#__PURE__*/React.createElement(FolderOutlined, {
+    style: {
+      color: '#1890ff',
+      fontSize: 14
+    }
+  }) : /*#__PURE__*/React.createElement(FileOutlined, {
+    style: {
+      color: '#52c41a',
+      fontSize: 14
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingLeft: indent,
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, level > 0 && /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#999',
+      fontFamily: 'monospace',
+      fontSize: 12,
+      flexShrink: 0
+    }
+  }, getIndentSymbol()), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flexShrink: 0
+    }
+  }, NodeIcon), /*#__PURE__*/React.createElement(Tag, {
+    color: type === 'group' ? 'blue' : 'green',
+    style: {
+      margin: 0,
+      flexShrink: 0
+    }
+  }, type === 'group' ? '分组' : '列'), /*#__PURE__*/React.createElement(Input, {
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(e.target.value);
+    },
+    bordered: false,
+    placeholder: type === 'group' ? '请输入分组名称' : '请输入列名称',
+    style: {
+      flex: 1,
+      background: _isNew ? '#fff7e6' : 'transparent' // 新添加的节点高亮
+    }
+  }));
+};
+export default NameColumnRenderer;

package/dist/esm/ag-grid-plus/setting/columnGroupTypes.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 表头分组配置类型定义
+ * 支持 AG-Grid 的单层和多层表头分组
+ */
+/**
+ * 扁平化列配置项
+ * 用于 UI 展示和编辑，通过 parentId 和 level 维护层级关系
+ */
+export interface FlatColumnItem {
+    /** 唯一标识 */
+    id: string;
+    /** 节点类型 */
+    type: 'group' | 'column';
+    /** 父节点 ID，undefined 表示根级别 */
+    parentId?: string;
+    /** 层级深度，0 为根级别 */
+    level: number;
+    /** 排序序号，用于维护节点顺序 */
+    order: number;
+    /** 显示名称 */
+    headerName: string;
+    /** AG-Grid 分组标识（仅分组类型） */
+    groupId?: string;
+    /** 子列是否必须保持一起（仅分组类型） */
+    marryChildren?: boolean;
+    /** 列字段名（仅列类型） */
+    field?: string;
+    /** 列宽 */
+    width?: number;
+    /** 是否隐藏 */
+    hide?: boolean;
+    /** 固定位置 */
+    pinned?: 'left' | 'right' | 'notPinned';
+    /** 单元格样式类 */
+    cellClass?: string;
+    /** 是否占满剩余空间 */
+    flex?: number;
+    /** 是否显示列过滤按钮 */
+    suppressHeaderFilterButton?: boolean;
+    /** 是否新添加的节点（用于高亮显示） */
+    _isNew?: boolean;
+    /** 分组是否折叠（仅分组类型，临时状态不持久化） */
+    _collapsed?: boolean;
+}
+/**
+ * 旧版本列配置（用于数据迁移）
+ */
+export interface OldColumnState {
+    field: string;
+    headerName: string;
+    groupName?: string;
+    width?: number;
+    hide?: boolean;
+    pinned?: string;
+    cellClass?: string;
+    flex?: number;
+    suppressHeaderFilterButton?: boolean;
+    [key: string]: any;
+}

package/dist/esm/ag-grid-plus/setting/columnGroupTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ag-grid-plus/setting/columnGroupUtils.d.ts

@@ -0,0 +1,75 @@
+/**
+ * 表头分组配置工具函数
+ * 负责 Grid State 与扁平化配置之间的转换
+ */
+import { ColDef, ColGroupDef } from 'ag-grid-community';
+import type { FlatColumnItem, OldColumnState } from './columnGroupTypes';
+/**
+ * 生成唯一 ID
+ */
+export declare const generateId: () => string;
+/**
+ * Grid State → 扁平化配置
+ * 将 AG-Grid 的树形结构转换为扁平化数组，用于 UI 展示和编辑
+ *
+ * @param columnDefs AG-Grid 列定义数组
+ * @returns 扁平化配置数组
+ */
+export declare function gridStateToFlatConfig(columnDefs: (ColDef | ColGroupDef)[]): FlatColumnItem[];
+/**
+ * 扁平化配置 → Grid State
+ * 将扁平化数组重建为 AG-Grid 的树形结构
+ *
+ * @param flatConfig 扁平化配置数组
+ * @returns AG-Grid 列定义数组
+ */
+export declare function flatConfigToGridState(flatConfig: FlatColumnItem[]): (ColDef | ColGroupDef)[];
+/**
+ * 旧版本数据迁移
+ * 将旧的 { groupName } 结构迁移为新的树形结构
+ *
+ * @param oldState 旧版本列配置数组
+ * @returns 扁平化配置数组
+ */
+export declare function migrateOldScheme(oldState: OldColumnState[]): FlatColumnItem[];
+/**
+ * 查找节点的所有后代节点的最后一个索引
+ * 用于在正确位置插入新子节点
+ *
+ * @param items 扁平化配置数组
+ * @param parentId 父节点 ID
+ * @returns 最后一个后代节点的索引，如果没有后代则返回父节点索引
+ */
+export declare function findLastDescendantIndex(items: FlatColumnItem[], parentId: string): number;
+/**
+ * 检查节点是否是其父节点的最后一个子节点
+ * 用于渲染缩进符号（├─ 或 └─）
+ *
+ * @param items 扁平化配置数组
+ * @param item 当前节点
+ * @returns 是否是最后一个子节点
+ */
+export declare function checkIsLastChild(items: FlatColumnItem[], item: FlatColumnItem): boolean;
+/**
+ * 重新计算所有节点的 order
+ * 确保 order 连续且与数组索引一致
+ *
+ * @param items 扁平化配置数组
+ */
+export declare function reorderItems(items: FlatColumnItem[]): void;
+/**
+ * 检查是否包含旧版本的 groupName 字段
+ * 用于判断是否需要数据迁移
+ *
+ * @param data 列配置数据
+ * @returns 是否是旧版本数据
+ */
+export declare function isOldSchemeData(data: any[]): boolean;
+/**
+ * 扁平化配置 → AG-Grid Column State
+ * 将扁平化数组转换为 AG-Grid 的 columnState 格式，用于控制列的顺序和属性
+ *
+ * @param flatConfig 扁平化配置数组
+ * @returns AG-Grid columnState 数组
+ */
+export declare function flatConfigToColumnState(flatConfig: FlatColumnItem[]): any[];

package/dist/esm/ag-grid-plus/setting/columnGroupUtils.js

@@ -0,0 +1,265 @@
+import _uniqueId from "lodash/uniqueId";
+/**
+ * 表头分组配置工具函数
+ * 负责 Grid State 与扁平化配置之间的转换
+ */
+/**
+ * 生成唯一 ID
+ */
+export var generateId = function generateId() {
+  return _uniqueId('col_');
+};
+
+/**
+ * Grid State → 扁平化配置
+ * 将 AG-Grid 的树形结构转换为扁平化数组，用于 UI 展示和编辑
+ *
+ * @param columnDefs AG-Grid 列定义数组
+ * @returns 扁平化配置数组
+ */
+export function gridStateToFlatConfig(columnDefs) {
+  var result = [];
+  var order = 0;
+
+  /**
+   * 递归遍历列定义树
+   */
+  function traverse(items, level, parentId) {
+    items.forEach(function (item) {
+      if (item.children && item.children.length > 0) {
+        // 这是一个分组节点
+        var groupId = generateId();
+        result.push({
+          id: groupId,
+          type: 'group',
+          parentId: parentId,
+          level: level,
+          order: order++,
+          headerName: item.headerName || '未命名分组',
+          groupId: item.groupId || item.field || generateId(),
+          marryChildren: item.marryChildren
+        });
+        // 递归处理子节点
+        traverse(item.children, level + 1, groupId);
+      } else {
+        // 这是一个列节点
+        result.push({
+          id: generateId(),
+          type: 'column',
+          parentId: parentId,
+          level: level,
+          order: order++,
+          field: item.field,
+          headerName: item.headerName || item.field || '未命名列',
+          width: item.width,
+          hide: item.hide,
+          pinned: item.pinned === null ? 'notPinned' : item.pinned,
+          cellClass: item.cellClass,
+          flex: item.flex,
+          suppressHeaderFilterButton: item.suppressHeaderFilterButton
+        });
+      }
+    });
+  }
+  traverse(columnDefs, 0);
+  return result;
+}
+
+/**
+ * 扁平化配置 → Grid State
+ * 将扁平化数组重建为 AG-Grid 的树形结构
+ *
+ * @param flatConfig 扁平化配置数组
+ * @returns AG-Grid 列定义数组
+ */
+export function flatConfigToGridState(flatConfig) {
+  /**
+   * 递归构建树形结构
+   */
+  function buildTree(parentId) {
+    var children = flatConfig.filter(function (item) {
+      return item.parentId === parentId;
+    }).sort(function (a, b) {
+      return a.order - b.order;
+    });
+    return children.map(function (item) {
+      if (item.type === 'group') {
+        // 构建分组节点
+        return {
+          headerName: item.headerName,
+          groupId: item.groupId,
+          field: "".concat(item.groupId, "_header"),
+          // AG-Grid 要求有 field
+          marryChildren: item.marryChildren !== undefined ? item.marryChildren : true,
+          children: buildTree(item.id) // 递归构建子节点
+        };
+      } else {
+        // 构建列节点
+        return {
+          field: item.field,
+          headerName: item.headerName,
+          width: item.width,
+          hide: item.hide,
+          pinned: item.pinned === 'notPinned' ? null : item.pinned,
+          cellClass: item.cellClass,
+          flex: item.flex,
+          suppressHeaderFilterButton: item.suppressHeaderFilterButton
+        };
+      }
+    });
+  }
+  return buildTree();
+}
+
+/**
+ * 旧版本数据迁移
+ * 将旧的 { groupName } 结构迁移为新的树形结构
+ *
+ * @param oldState 旧版本列配置数组
+ * @returns 扁平化配置数组
+ */
+export function migrateOldScheme(oldState) {
+  var groups = new Map();
+  var result = [];
+  var order = 0;
+
+  // 第一遍：创建所有分组节点
+  oldState.forEach(function (col) {
+    if (col.groupName && !groups.has(col.groupName)) {
+      var groupId = generateId();
+      groups.set(col.groupName, groupId);
+      result.push({
+        id: groupId,
+        type: 'group',
+        level: 0,
+        order: order++,
+        headerName: col.groupName,
+        groupId: groupId
+      });
+    }
+  });
+
+  // 第二遍：创建所有列节点
+  oldState.forEach(function (col) {
+    var parentId = col.groupName ? groups.get(col.groupName) : undefined;
+    result.push({
+      id: generateId(),
+      type: 'column',
+      parentId: parentId,
+      level: col.groupName ? 1 : 0,
+      order: order++,
+      field: col.field,
+      headerName: col.headerName,
+      width: col.width,
+      hide: col.hide,
+      pinned: col.pinned === null ? 'notPinned' : col.pinned,
+      cellClass: col.cellClass,
+      flex: col.flex,
+      suppressHeaderFilterButton: col.suppressHeaderFilterButton
+    });
+  });
+  return result;
+}
+
+/**
+ * 查找节点的所有后代节点的最后一个索引
+ * 用于在正确位置插入新子节点
+ *
+ * @param items 扁平化配置数组
+ * @param parentId 父节点 ID
+ * @returns 最后一个后代节点的索引，如果没有后代则返回父节点索引
+ */
+export function findLastDescendantIndex(items, parentId) {
+  var parentIndex = items.findIndex(function (item) {
+    return item.id === parentId;
+  });
+  if (parentIndex === -1) return -1;
+  var lastIndex = parentIndex;
+
+  // 从父节点之后开始查找
+  for (var i = parentIndex + 1; i < items.length; i++) {
+    var item = items[i];
+    // 检查是否是后代节点（通过 level 判断）
+    if (item.level <= items[parentIndex].level) {
+      // 遇到同级或更高级别的节点，说明后代节点已结束
+      break;
+    }
+    lastIndex = i;
+  }
+  return lastIndex;
+}
+
+/**
+ * 检查节点是否是其父节点的最后一个子节点
+ * 用于渲染缩进符号（├─ 或 └─）
+ *
+ * @param items 扁平化配置数组
+ * @param item 当前节点
+ * @returns 是否是最后一个子节点
+ */
+export function checkIsLastChild(items, item) {
+  if (!item.parentId) return false;
+  var siblings = items.filter(function (i) {
+    return i.parentId === item.parentId;
+  });
+  if (siblings.length === 0) return false;
+  var lastSibling = siblings[siblings.length - 1];
+  return lastSibling.id === item.id;
+}
+
+/**
+ * 重新计算所有节点的 order
+ * 确保 order 连续且与数组索引一致
+ *
+ * @param items 扁平化配置数组
+ */
+export function reorderItems(items) {
+  items.forEach(function (item, index) {
+    item.order = index;
+  });
+}
+
+/**
+ * 检查是否包含旧版本的 groupName 字段
+ * 用于判断是否需要数据迁移
+ *
+ * @param data 列配置数据
+ * @returns 是否是旧版本数据
+ */
+export function isOldSchemeData(data) {
+  return data.some(function (item) {
+    return item.groupName !== undefined && item.type === undefined;
+  });
+}
+
+/**
+ * 扁平化配置 → AG-Grid Column State
+ * 将扁平化数组转换为 AG-Grid 的 columnState 格式，用于控制列的顺序和属性
+ *
+ * @param flatConfig 扁平化配置数组
+ * @returns AG-Grid columnState 数组
+ */
+export function flatConfigToColumnState(flatConfig) {
+  return flatConfig.filter(function (item) {
+    return item.type === 'column';
+  }) // 只处理列节点，分组不在 columnState 中
+  .sort(function (a, b) {
+    return a.order - b.order;
+  }) // 按 order 字段排序
+  .map(function (item) {
+    var state = {
+      colId: item.field // 使用 field 作为 colId
+    };
+
+    // 只设置有值的属性，undefined 表示不改变该属性
+    if (item.width !== undefined) state.width = item.width;
+    if (item.hide !== undefined) state.hide = item.hide;
+    if (item.flex !== undefined) state.flex = item.flex;
+
+    // pinned 特殊处理：'notPinned' -> null
+    if (item.pinned !== undefined) {
+      state.pinned = item.pinned === 'notPinned' ? null : item.pinned;
+    }
+    return state;
+  });
+}

package/dist/esm/ag-grid-plus/setting/index.d.ts

@@ -5,6 +5,7 @@ declare const Setting: (props: {
     gridApi?: GridApi<any> | undefined;
     gridApiState?: GridApi<any> | undefined;
     type?: string | undefined;
-    onSaveColumnState: (state: any) => void;
+    onSaveColumnState?: ((state: any) => void) | undefined;
+    schemeManager?: any;
 }) => React.JSX.Element | null;
 export default Setting;

package/dist/esm/ag-grid-plus/setting/index.js

@@ -16,7 +16,8 @@ var Setting = function Setting(props) {
     gridApiState = props.gridApiState,
     onSaveColumnState = props.onSaveColumnState;
   var gridPlusContext = useContext(GridPlusContext);
-  var schemeManager = gridPlusContext === null || gridPlusContext === void 0 ? void 0 : gridPlusContext.schemeManager;
+  // 优先使用外部传入的 schemeManager，否则使用 Context 中的
+  var schemeManager = props.schemeManager || (gridPlusContext === null || gridPlusContext === void 0 ? void 0 : gridPlusContext.schemeManager);
   var querySchemeManager = gridPlusContext === null || gridPlusContext === void 0 ? void 0 : gridPlusContext.querySchemeManager;
   var currentQueryOrder = (gridPlusContext === null || gridPlusContext === void 0 ? void 0 : gridPlusContext.currentQueryOrder) || [];
   var updateQueryOrder = gridPlusContext === null || gridPlusContext === void 0 ? void 0 : gridPlusContext.updateQueryOrder;
@@ -76,7 +77,8 @@ var Setting = function Setting(props) {
     onClose: function onClose() {
       return setColumnSettingVisible(false);
     },
-    onSaveColumnState: onSaveColumnState,
+    onSaveColumnState: onSaveColumnState || function () {} // 保留兼容性，但 formArrayTable 不再使用
+    ,
     schemeManager: schemeManager,
     type: props.type
   }), querySchemeManager && gridApi && updateQueryOrder && /*#__PURE__*/React.createElement(QuerySchemesManager, {

package/dist/esm/ag-grid-plus/storage/SchemeSyncManager.d.ts

@@ -116,7 +116,8 @@ export declare class SchemeSyncManager {
     private applyServerVersion;
     /**
      * 反序列化从后端接收的方案数据
-     * 将 columnState 和 itemsOrder 从 JSON 字符串转换为数组
+     * 将 columnState(后端字段) 映射为 columnConfig 并从 JSON 字符串转换为数组
+     * 将 itemsOrder 从 JSON 字符串转换为数组
      */
     private deserializeSchemesData;
     /**