@nokecy/qc-ui-components 0.0.0-stage → 2.0.0-beta.1

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

@@ -0,0 +1,389 @@
+"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 _formilyAntd = require("@nokecy/formily-antd");
+var _formilyReact = require("@nokecy/formily-react");
+var _index = _interopRequireDefault(require("../../array-table/index"));
+var _columnGroupUtils = require("./columnGroupUtils");
+var _NameColumnRenderer = _interopRequireDefault(require("./NameColumnRenderer"));
+var _jsxRuntime = require("react/jsx-runtime");
+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, _formilyReact.createSchemaField)({
+  components: {
+    FormItem: _formilyAntd.FormItem,
+    FormGrid: _formilyAntd.FormGrid,
+    Space: _antd.Space,
+    Input: _formilyAntd.Input,
+    Select: _formilyAntd.Select,
+    ArrayTable: _index.default,
+    NumberPicker: _formilyAntd.NumberPicker,
+    Switch: _formilyAntd.Switch
+  }
+});
+
+/**
+ * 自定义排序抓手
+ */
+var CustomSortHandle = function CustomSortHandle() {
+  var _theme$useToken = _antd.theme.useToken(),
+    token = _theme$useToken.token; // 颜色取主题 token,跟随亮/暗主题 @author nokecy
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+    title: "\u62D6\u52A8\u6392\u5E8F\uFF08\u4EC5\u652F\u6301\u540C\u7EA7\uFF09",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.HolderOutlined, {
+      style: {
+        fontSize: 16,
+        color: token.colorTextTertiary,
+        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__*/(0, _jsxRuntime.jsx)(_antd.Space, {
+        children: _isNew && /*#__PURE__*/(0, _jsxRuntime.jsx)(_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",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+            title: "\u5220\u9664\u5206\u7EC4",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+              type: "link",
+              size: "small",
+              danger: true,
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteOutlined, {})
+            })
+          })
+        })
+      });
+    } else {
+      // 列不允许删除
+      return null;
+    }
+  }, [onDeleteNode]);
+
+  // 配置 ArrayTable 属性
+  var tableProps = {
+    onRowDrag: true,
+    components: {
+      SortHandle: CustomSortHandle
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formilyAntd.FormLayout, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+        "x-component": "FormGrid",
+        "x-component-props": {
+          maxColumns: [1, 3],
+          strictAutoFit: true
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Array, {
+          name: "items",
+          title: "",
+          "x-component": "ArrayTable",
+          "x-component-props": tableProps,
+          "x-decorator": "FormItem",
+          "x-decorator-props": {
+            gridSpan: 3
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(SchemaField.Object, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.String, {
+              name: "id",
+              "x-display": "hidden"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.String, {
+              name: "type",
+              "x-display": "hidden"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Number, {
+              name: "level",
+              "x-display": "hidden"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Number, {
+              name: "order",
+              "x-display": "hidden"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.String, {
+              name: "parentId",
+              "x-display": "hidden"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.String, {
+              name: "groupId",
+              "x-display": "hidden"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.String, {
+              name: "field",
+              "x-display": "hidden"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.String, {
+              name: "colId",
+              "x-display": "hidden"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Boolean, {
+              name: "_isNew",
+              "x-display": "hidden"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+              "x-component": "ArrayTable.Column",
+              "x-component-props": {
+                width: 60,
+                title: '排序',
+                align: 'center'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+                "x-decorator": "FormItem",
+                required: true,
+                "x-component": "ArrayTable.SortHandle"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+              "x-component": "ArrayTable.Column",
+              "x-component-props": {
+                width: 200,
+                title: '名称'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)(_NameColumnRenderer.default, {
+                    value: props.value,
+                    record: record,
+                    allItems: items,
+                    onChange: props.onChange
+                  });
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+              "x-component": "ArrayTable.Column",
+              "x-component-props": {
+                width: 180,
+                title: '操作',
+                align: 'center'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+              "x-component": "ArrayTable.Column",
+              "x-component-props": {
+                width: 100,
+                title: '宽度'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)("span", {
+                      children: "-"
+                    });
+                  }
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formilyAntd.NumberPicker, {
+                    value: props.value,
+                    onChange: props.onChange
+                  });
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+              "x-component": "ArrayTable.Column",
+              "x-component-props": {
+                width: 100,
+                title: '占满'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)("span", {
+                      children: "-"
+                    });
+                  }
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formilyAntd.Select, {
+                    value: props.value,
+                    onChange: props.onChange,
+                    options: [{
+                      value: 1,
+                      label: '占满'
+                    }, {
+                      value: 0,
+                      label: '不占满'
+                    }]
+                  });
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+              "x-component": "ArrayTable.Column",
+              "x-component-props": {
+                width: 100,
+                title: '固定'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)("span", {
+                      children: "-"
+                    });
+                  }
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formilyAntd.Select, {
+                    value: props.value,
+                    onChange: props.onChange,
+                    options: [{
+                      value: 'left',
+                      label: '左固定'
+                    }, {
+                      value: 'right',
+                      label: '右固定'
+                    }, {
+                      value: 'notPinned',
+                      label: '不固定'
+                    }]
+                  });
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+              "x-component": "ArrayTable.Column",
+              "x-component-props": {
+                width: 80,
+                title: '隐藏',
+                align: 'center'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)("span", {
+                      children: "-"
+                    });
+                  }
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formilyAntd.Switch, {
+                    checked: props.value,
+                    onChange: props.onChange
+                  });
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+              "x-component": "ArrayTable.Column",
+              "x-component-props": {
+                width: 120,
+                title: '布局'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)("span", {
+                      children: "-"
+                    });
+                  }
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formilyAntd.Select, {
+                    value: (0, _columnGroupUtils.normalizeCellAlign)(props.value),
+                    onChange: props.onChange,
+                    options: [{
+                      value: 'custom-cell-left',
+                      label: '左对齐'
+                    }, {
+                      value: 'custom-cell-right',
+                      label: '右对齐'
+                    }, {
+                      value: 'custom-cell-centered',
+                      label: '居中'
+                    }]
+                  });
+                }
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SchemaField.Void, {
+              "x-component": "ArrayTable.Column",
+              "x-component-props": {
+                width: 100,
+                title: '列过滤',
+                align: 'center'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(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__*/(0, _jsxRuntime.jsx)("span", {
+                      children: "-"
+                    });
+                  }
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formilyAntd.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,19 @@
+/**
+ * 列配置表格组件 - AG-Grid 版本
+ * 使用 AG-Grid 替代 Ant Design Table,性能更优
+ */
+import React from 'react';
+import type { ICellRendererParams } from 'ag-grid-community';
+import type { FlatColumnItem } from './columnGroupTypes';
+interface ColumnConfigTableAGProps {
+    items: FlatColumnItem[];
+    onChange: (items: FlatColumnItem[]) => void;
+    simple?: boolean;
+    scrollY?: number;
+    /** 不可隐藏的业务列标识（列定义声明 lockVisible），其「隐藏」开关禁用且恒为显示 */
+    lockedColumnIds?: string[];
+}
+/** Switch 渲染器工厂 */
+export declare const createSwitchRenderer: (field: keyof FlatColumnItem) => (props: ICellRendererParams<FlatColumnItem>) => React.JSX.Element;
+declare const ColumnConfigTable: React.FC<ColumnConfigTableAGProps>;
+export default ColumnConfigTable;