@nokecy/qc-ui 1.0.81 → 1.0.83

package/dist/cjs/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/cjs/ag-grid-plus/setting/ColumnConfigForm.js

@@ -0,0 +1,348 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _antdV = require("@formily/antd-v5");
+var _react2 = require("@formily/react");
+var _arrayTable = _interopRequireDefault(require("../../array-table"));
+var _NameColumnRenderer = _interopRequireDefault(require("./NameColumnRenderer"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * 列配置表单组件
+ * 使用 Formily ArrayTable 展示和编辑列配置
+ * 支持表头分组的树形结构展示
+ */
+
+var SchemaField = (0, _react2.createSchemaField)({
+  components: {
+    FormItem: _antdV.FormItem,
+    FormGrid: _antdV.FormGrid,
+    Space: _antd.Space,
+    Input: _antdV.Input,
+    Select: _antdV.Select,
+    ArrayTable: _arrayTable.default,
+    NumberPicker: _antdV.NumberPicker,
+    Switch: _antdV.Switch
+  }
+});
+
+/**
+ * 自定义排序抓手
+ */
+var CustomSortHandle = function CustomSortHandle() {
+  return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    title: "\u62D6\u52A8\u6392\u5E8F\uFF08\u4EC5\u652F\u6301\u540C\u7EA7\uFF09"
+  }, /*#__PURE__*/_react.default.createElement(_icons.HolderOutlined, {
+    style: {
+      fontSize: 16,
+      color: '#999',
+      cursor: 'move'
+    }
+  }));
+};
+
+/**
+ * 列配置表单组件
+ */
+var ColumnConfigForm = function ColumnConfigForm(_ref) {
+  var form = _ref.form,
+    onDeleteNode = _ref.onDeleteNode;
+  /**
+   * 渲染操作列
+   * 根据节点类型显示不同的操作按钮
+   */
+  var renderActions = (0, _react.useCallback)(function (record) {
+    var type = record.type,
+      id = record.id,
+      headerName = record.headerName,
+      _isNew = record._isNew;
+    if (type === 'group') {
+      return /*#__PURE__*/_react.default.createElement(_antd.Space, null, _isNew && /*#__PURE__*/_react.default.createElement(_antd.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.default.createElement(_antd.Tooltip, {
+        title: "\u5220\u9664\u5206\u7EC4"
+      }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        type: "link",
+        size: "small",
+        danger: true,
+        icon: /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null)
+      }))));
+    } else {
+      // 列不允许删除
+      return null;
+    }
+  }, [onDeleteNode]);
+
+  // 配置 ArrayTable 属性
+  var tableProps = {
+    onRowDrag: true,
+    components: {
+      SortHandle: CustomSortHandle
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_antdV.FormLayout, null, /*#__PURE__*/_react.default.createElement(SchemaField, null, /*#__PURE__*/_react.default.createElement(SchemaField.Void, {
+    "x-component": "FormGrid",
+    "x-component-props": {
+      maxColumns: [1, 3],
+      strictAutoFit: true
+    }
+  }, /*#__PURE__*/_react.default.createElement(SchemaField.Array, {
+    name: "items",
+    title: "",
+    "x-component": "ArrayTable",
+    "x-component-props": tableProps,
+    "x-decorator": "FormItem",
+    "x-decorator-props": {
+      gridSpan: 3
+    }
+  }, /*#__PURE__*/_react.default.createElement(SchemaField.Object, null, /*#__PURE__*/_react.default.createElement(SchemaField.String, {
+    name: "id",
+    "x-display": "hidden"
+  }), /*#__PURE__*/_react.default.createElement(SchemaField.String, {
+    name: "type",
+    "x-display": "hidden"
+  }), /*#__PURE__*/_react.default.createElement(SchemaField.Number, {
+    name: "level",
+    "x-display": "hidden"
+  }), /*#__PURE__*/_react.default.createElement(SchemaField.Number, {
+    name: "order",
+    "x-display": "hidden"
+  }), /*#__PURE__*/_react.default.createElement(SchemaField.String, {
+    name: "parentId",
+    "x-display": "hidden"
+  }), /*#__PURE__*/_react.default.createElement(SchemaField.String, {
+    name: "groupId",
+    "x-display": "hidden"
+  }), /*#__PURE__*/_react.default.createElement(SchemaField.String, {
+    name: "field",
+    "x-display": "hidden"
+  }), /*#__PURE__*/_react.default.createElement(SchemaField.Boolean, {
+    name: "_isNew",
+    "x-display": "hidden"
+  }), /*#__PURE__*/_react.default.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 60,
+      title: '排序',
+      align: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(SchemaField.Void, {
+    "x-decorator": "FormItem",
+    required: true,
+    "x-component": "ArrayTable.SortHandle"
+  })), /*#__PURE__*/_react.default.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 200,
+      title: '名称'
+    }
+  }, /*#__PURE__*/_react.default.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.default.createElement(_NameColumnRenderer.default, {
+        value: props.value,
+        record: record,
+        allItems: items,
+        onChange: props.onChange
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 180,
+      title: '操作',
+      align: 'center'
+    }
+  }, /*#__PURE__*/_react.default.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.default.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 100,
+      title: '宽度'
+    }
+  }, /*#__PURE__*/_react.default.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.default.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/_react.default.createElement(_antdV.NumberPicker, {
+        value: props.value,
+        onChange: props.onChange
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 100,
+      title: '占满'
+    }
+  }, /*#__PURE__*/_react.default.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.default.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/_react.default.createElement(_antdV.Select, {
+        value: props.value,
+        onChange: props.onChange,
+        options: [{
+          value: 1,
+          label: '占满'
+        }, {
+          value: 0,
+          label: '不占满'
+        }]
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 100,
+      title: '固定'
+    }
+  }, /*#__PURE__*/_react.default.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.default.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/_react.default.createElement(_antdV.Select, {
+        value: props.value,
+        onChange: props.onChange,
+        options: [{
+          value: 'left',
+          label: '左固定'
+        }, {
+          value: 'right',
+          label: '右固定'
+        }, {
+          value: 'notPinned',
+          label: '不固定'
+        }]
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 80,
+      title: '隐藏',
+      align: 'center'
+    }
+  }, /*#__PURE__*/_react.default.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.default.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/_react.default.createElement(_antdV.Switch, {
+        checked: props.value,
+        onChange: props.onChange
+      });
+    }
+  })), /*#__PURE__*/_react.default.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 120,
+      title: '布局'
+    }
+  }, /*#__PURE__*/_react.default.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.default.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/_react.default.createElement(_antdV.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.default.createElement(SchemaField.Void, {
+    "x-component": "ArrayTable.Column",
+    "x-component-props": {
+      width: 100,
+      title: '列过滤',
+      align: 'center'
+    }
+  }, /*#__PURE__*/_react.default.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.default.createElement("span", null, "-");
+      }
+      return /*#__PURE__*/_react.default.createElement(_antdV.Switch, {
+        checked: !props.value,
+        onChange: function onChange(checked) {
+          return props.onChange(!checked);
+        }
+      });
+    }
+  })))))));
+};
+var _default = exports.default = ColumnConfigForm;

package/dist/cjs/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;