@nokecy/qc-ui 1.0.81 → 1.0.83

package/dist/esm/ag-grid-plus/schemes/utils/validator.js

@@ -8,35 +8,31 @@ export function validateScheme(scheme, currentColumnDefs) {
   var invalidColumns = [];
   var validatedState = [];
 
-  // 获取当前有效的列 ID 集合
-  var validColIds = new Set(currentColumnDefs.filter(function (col) {
+  // 获取当前有效的列 field 集合
+  var validFields = new Set(currentColumnDefs.filter(function (col) {
     return col.field || col.colId;
   }).map(function (col) {
     return col.field || col.colId;
   }));
 
-  // 验证每个列状态
-  scheme.columnState.forEach(function (columnState) {
-    var colId = columnState.colId;
-    if (!colId) {
-      warnings.push('发现没有 colId 的列状态');
-      return;
+  // 验证每个列配置项
+  scheme.columnConfig.forEach(function (item) {
+    // 只验证列类型(非分组),因为分组没有对应的 field
+    if (item.type === 'column' && item.field) {
+      // 检查列是否仍然存在于表格定义中
+      if (!validFields.has(item.field)) {
+        invalidColumns.push(item.field);
+        warnings.push("\u5217 \"".concat(item.field, "\" \u5728\u5F53\u524D\u8868\u683C\u4E2D\u4E0D\u5B58\u5728"));
+      }
     }
-
-    // 检查列是否仍然存在于表格定义中
-    if (!validColIds.has(colId)) {
-      invalidColumns.push(colId);
-      warnings.push("\u5217 \"".concat(colId, "\" \u5728\u5F53\u524D\u8868\u683C\u4E2D\u4E0D\u5B58\u5728"));
-      return;
-    }
-
-    // 列有效，添加到验证后的状态中
-    validatedState.push(columnState);
   });
   var valid = invalidColumns.length === 0;
   if (!valid) {
     warnings.push("\u5171\u6709 ".concat(invalidColumns.length, " \u4E2A\u5217\u5728\u5F53\u524D\u8868\u683C\u4E2D\u4E0D\u5B58\u5728\uFF0C\u5DF2\u81EA\u52A8\u8FC7\u6EE4"));
   }
+
+  // 注意: validatedState 保持为空数组,因为 columnConfig 不是 ColumnState 格式
+  // 如果需要转换,应在调用方进行
   return {
     valid: valid,
     invalidColumns: invalidColumns,

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

@@ -0,0 +1,16 @@
+/**
+ * 列配置表单组件
+ * 使用 Formily ArrayTable 展示和编辑列配置
+ * 支持表头分组的树形结构展示
+ */
+import React from 'react';
+import { Form } from '@formily/core';
+interface ColumnConfigFormProps {
+    form: Form;
+    onDeleteNode: (nodeId: string) => void;
+}
+/**
+ * 列配置表单组件
+ */
+declare const ColumnConfigForm: React.FC<ColumnConfigFormProps>;
+export default ColumnConfigForm;

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

@@ -0,0 +1,338 @@
+/**
+ * 列配置表单组件
+ * 使用 Formily ArrayTable 展示和编辑列配置
+ * 支持表头分组的树形结构展示
+ */
+
+import React, { useCallback } from 'react';
+import { Button, Popconfirm, Space, Tooltip } from 'antd';
+import { DeleteOutlined, HolderOutlined } from '@ant-design/icons';
+import { FormGrid, FormItem, FormLayout, Input, Select, NumberPicker, Switch } from '@formily/antd-v5';
+import { createSchemaField } from '@formily/react';
+import ArrayTable from "../../array-table";
+import NameColumnRenderer from "./NameColumnRenderer";
+var SchemaField = createSchemaField({
+  components: {
+    FormItem: FormItem,
+    FormGrid: FormGrid,
+    Space: Space,
+    Input: Input,
+    Select: Select,
+    ArrayTable: ArrayTable,
+    NumberPicker: NumberPicker,
+    Switch: Switch
+  }
+});
+
+/**
+ * 自定义排序抓手
+ */
+var CustomSortHandle = function CustomSortHandle() {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: "\u62D6\u52A8\u6392\u5E8F\uFF08\u4EC5\u652F\u6301\u540C\u7EA7\uFF09"
+  }, /*#__PURE__*/React.createElement(HolderOutlined, {
+    style: {
+      fontSize: 16,
+      color: '#999',
+      cursor: 'move'
+    }
+  }));
+};
+
+/**
+ * 列配置表单组件
+ */
+var ColumnConfigForm = function ColumnConfigForm(_ref) {
+  var form = _ref.form,
+    onDeleteNode = _ref.onDeleteNode;
+  /**
+   * 渲染操作列
+   * 根据节点类型显示不同的操作按钮
+   */
+  var renderActions = useCallback(function (record) {
+    var type = record.type,
+      id = record.id,
+      headerName = record.headerName,
+      _isNew = record._isNew;
+    if (type === 'group') {
+      return /*#__PURE__*/React.createElement(Space, null, _isNew && /*#__PURE__*/React.createElement(Popconfirm, {
+        title: "\u786E\u5B9A\u8981\u5220\u9664\u5206\u7EC4\"".concat(headerName, "\"\u53CA\u5176\u6240\u6709\u5B50\u5217\u5417\uFF1F"),
+        onConfirm: function onConfirm() {
+          return onDeleteNode(id);
+        },
+        okText: "\u786E\u5B9A",
+        cancelText: "\u53D6\u6D88"
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        title: "\u5220\u9664\u5206\u7EC4"
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "link",
+        size: "small",
+        danger: true,
+        icon: /*#__PURE__*/React.createElement(DeleteOutlined, null)
+      }))));
+    } else {
+      // 列不允许删除
+      return null;
+    }
+  }, [onDeleteNode]);
+
+  // 配置 ArrayTable 属性
+  var tableProps = {
+    onRowDrag: true,
+    components: {
+      SortHandle: CustomSortHandle
+    }
+  };
+  return /*#__PURE__*/React.createElement(FormLayout, null, /*#__PURE__*/React.createElement(SchemaField, null, /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "FormGrid",
+    "x-component-props": {
+      maxColumns: [1, 3],
+      strictAutoFit: true
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.Array, {
+    name: "items",
+    title: "",
+    "x-component": "ArrayTable",
+    "x-component-props": tableProps,
+    "x-decorator": "FormItem",
+    "x-decorator-props": {
+      gridSpan: 3
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.Object, null, /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "id",
+    "x-display": "hidden"
+  }), /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "type",
+    "x-display": "hidden"
+  }), /*#__PURE__*/React.createElement(SchemaField.Number, {
+    name: "level",
+    "x-display": "hidden"
+  }), /*#__PURE__*/React.createElement(SchemaField.Number, {
+    name: "order",
+    "x-display": "hidden"
+  }), /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "parentId",
+    "x-display": "hidden"
+  }), /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "groupId",
+    "x-display": "hidden"
+  }), /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "field",
+    "x-display": "hidden"
+  }), /*#__PURE__*/React.createElement(SchemaField.Boolean, {
+    name: "_isNew",
+    "x-display": "hidden"
+  }), /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 60,
+      title: '排序',
+      align: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-decorator": "FormItem",
+    required: true,
+    "x-component": "ArrayTable.SortHandle"
+  })), /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 200,
+      title: '名称'
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "headerName",
+    "x-decorator": "FormItem",
+    "x-component": function xComponent(props) {
+      var _props$name;
+      var index = (_props$name = props.name) === null || _props$name === void 0 || (_props$name = _props$name.toString().match(/\d+/)) === null || _props$name === void 0 ? void 0 : _props$name[0];
+      var items = form.values.items || [];
+      var record = items[parseInt(index || '0')];
+      return /*#__PURE__*/React.createElement(NameColumnRenderer, {
+        value: props.value,
+        record: record,
+        allItems: items,
+        onChange: props.onChange
+      });
+    }
+  })), /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 180,
+      title: '操作',
+      align: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": function xComponent(props) {
+      var _props$name2;
+      var index = (_props$name2 = props.name) === null || _props$name2 === void 0 || (_props$name2 = _props$name2.toString().match(/\d+/)) === null || _props$name2 === void 0 ? void 0 : _props$name2[0];
+      var items = form.values.items || [];
+      var record = items[parseInt(index || '0')];
+      if (!record) return null;
+      return renderActions(record);
+    }
+  })), /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 100,
+      title: '宽度'
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "width",
+    "x-decorator": "FormItem",
+    "x-component": function xComponent(props) {
+      var _props$name3;
+      var index = (_props$name3 = props.name) === null || _props$name3 === void 0 || (_props$name3 = _props$name3.toString().match(/\d+/)) === null || _props$name3 === void 0 ? void 0 : _props$name3[0];
+      var items = form.values.items || [];
+      var record = items[parseInt(index || '0')];
+      if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
+        return /*#__PURE__*/React.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/React.createElement(NumberPicker, {
+        value: props.value,
+        onChange: props.onChange
+      });
+    }
+  })), /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 100,
+      title: '占满'
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "flex",
+    "x-decorator": "FormItem",
+    "x-component": function xComponent(props) {
+      var _props$name4;
+      var index = (_props$name4 = props.name) === null || _props$name4 === void 0 || (_props$name4 = _props$name4.toString().match(/\d+/)) === null || _props$name4 === void 0 ? void 0 : _props$name4[0];
+      var items = form.values.items || [];
+      var record = items[parseInt(index || '0')];
+      if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
+        return /*#__PURE__*/React.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/React.createElement(Select, {
+        value: props.value,
+        onChange: props.onChange,
+        options: [{
+          value: 1,
+          label: '占满'
+        }, {
+          value: 0,
+          label: '不占满'
+        }]
+      });
+    }
+  })), /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 100,
+      title: '固定'
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "pinned",
+    "x-decorator": "FormItem",
+    "x-component": function xComponent(props) {
+      var _props$name5;
+      var index = (_props$name5 = props.name) === null || _props$name5 === void 0 || (_props$name5 = _props$name5.toString().match(/\d+/)) === null || _props$name5 === void 0 ? void 0 : _props$name5[0];
+      var items = form.values.items || [];
+      var record = items[parseInt(index || '0')];
+      if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
+        return /*#__PURE__*/React.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/React.createElement(Select, {
+        value: props.value,
+        onChange: props.onChange,
+        options: [{
+          value: 'left',
+          label: '左固定'
+        }, {
+          value: 'right',
+          label: '右固定'
+        }, {
+          value: 'notPinned',
+          label: '不固定'
+        }]
+      });
+    }
+  })), /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 80,
+      title: '隐藏',
+      align: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "hide",
+    "x-decorator": "FormItem",
+    "x-component": function xComponent(props) {
+      var _props$name6;
+      var index = (_props$name6 = props.name) === null || _props$name6 === void 0 || (_props$name6 = _props$name6.toString().match(/\d+/)) === null || _props$name6 === void 0 ? void 0 : _props$name6[0];
+      var items = form.values.items || [];
+      var record = items[parseInt(index || '0')];
+      if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
+        return /*#__PURE__*/React.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/React.createElement(Switch, {
+        checked: props.value,
+        onChange: props.onChange
+      });
+    }
+  })), /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 120,
+      title: '布局'
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "cellClass",
+    "x-decorator": "FormItem",
+    "x-component": function xComponent(props) {
+      var _props$name7;
+      var index = (_props$name7 = props.name) === null || _props$name7 === void 0 || (_props$name7 = _props$name7.toString().match(/\d+/)) === null || _props$name7 === void 0 ? void 0 : _props$name7[0];
+      var items = form.values.items || [];
+      var record = items[parseInt(index || '0')];
+      if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
+        return /*#__PURE__*/React.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/React.createElement(Select, {
+        value: props.value || 'custom-cell-left',
+        onChange: props.onChange,
+        options: [{
+          value: 'custom-cell-left',
+          label: '左对齐'
+        }, {
+          value: 'custom-cell-right',
+          label: '右对齐'
+        }, {
+          value: 'custom-cell-centered',
+          label: '居中'
+        }]
+      });
+    }
+  })), /*#__PURE__*/React.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 100,
+      title: '列过滤',
+      align: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(SchemaField.String, {
+    name: "suppressHeaderFilterButton",
+    "x-decorator": "FormItem",
+    "x-component": function xComponent(props) {
+      var _props$name8;
+      var index = (_props$name8 = props.name) === null || _props$name8 === void 0 || (_props$name8 = _props$name8.toString().match(/\d+/)) === null || _props$name8 === void 0 ? void 0 : _props$name8[0];
+      var items = form.values.items || [];
+      var record = items[parseInt(index || '0')];
+      if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
+        return /*#__PURE__*/React.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/React.createElement(Switch, {
+        checked: !props.value,
+        onChange: function onChange(checked) {
+          return props.onChange(!checked);
+        }
+      });
+    }
+  })))))));
+};
+export default ColumnConfigForm;

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

@@ -0,0 +1,20 @@
+/**
+ * 列配置表格组件
+ * 使用简单的 Ant Design Table 替代 Formily ArrayTable
+ * 通过 React useState 直接管理数据状态,确保 type 字段不会丢失
+ */
+import React from 'react';
+import type { FlatColumnItem } from './columnGroupTypes';
+interface ColumnConfigTableProps {
+    /** 扁平化的列配置数据 */
+    items: FlatColumnItem[];
+    /** 数据变更回调 */
+    onChange: (items: FlatColumnItem[]) => void;
+    /** 简化模式 - 隐藏分组相关功能 (用于 formArrayTable) */
+    simple?: boolean;
+}
+/**
+ * 列配置表格组件
+ */
+declare const ColumnConfigTable: React.FC<ColumnConfigTableProps>;
+export default ColumnConfigTable;