@nokecy/qc-ui 1.0.82 → 1.0.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/cjs/ag-grid-plus/_utils/processColumnGroups.d.ts +9 -0
  2. package/dist/cjs/ag-grid-plus/_utils/processColumnGroups.js +43 -0
  3. package/dist/cjs/ag-grid-plus/ag-gridPlus.js +252 -121
  4. package/dist/cjs/ag-grid-plus/querySchemes/components/QuerySchemesManager.js +19 -9
  5. package/dist/cjs/ag-grid-plus/querySchemes/hooks/useQuerySchemes.js +25 -3
  6. package/dist/cjs/ag-grid-plus/schemes/components/SchemeSelector.d.ts +1 -1
  7. package/dist/cjs/ag-grid-plus/schemes/components/SchemeSelector.js +1 -1
  8. package/dist/cjs/ag-grid-plus/schemes/hooks/useColumnSchemes.js +60 -14
  9. package/dist/cjs/ag-grid-plus/schemes/storage/localStorageAdapter.js +12 -26
  10. package/dist/cjs/ag-grid-plus/schemes/types.d.ts +8 -5
  11. package/dist/cjs/ag-grid-plus/schemes/utils/validator.js +14 -18
  12. package/dist/cjs/ag-grid-plus/setting/ColumnConfigForm.d.ts +16 -0
  13. package/dist/cjs/ag-grid-plus/setting/ColumnConfigForm.js +348 -0
  14. package/dist/cjs/ag-grid-plus/setting/ColumnConfigTable.d.ts +20 -0
  15. package/dist/cjs/ag-grid-plus/setting/ColumnConfigTable.js +940 -0
  16. package/dist/cjs/ag-grid-plus/setting/ColumnSetting.js +208 -248
  17. package/dist/cjs/ag-grid-plus/setting/MoveNodeModal.d.ts +15 -0
  18. package/dist/cjs/ag-grid-plus/setting/MoveNodeModal.js +160 -0
  19. package/dist/cjs/ag-grid-plus/setting/NameColumnRenderer.d.ts +18 -0
  20. package/dist/cjs/ag-grid-plus/setting/NameColumnRenderer.js +94 -0
  21. package/dist/cjs/ag-grid-plus/setting/columnGroupTypes.d.ts +59 -0
  22. package/dist/cjs/ag-grid-plus/setting/columnGroupTypes.js +5 -0
  23. package/dist/cjs/ag-grid-plus/setting/columnGroupUtils.d.ts +75 -0
  24. package/dist/cjs/ag-grid-plus/setting/columnGroupUtils.js +281 -0
  25. package/dist/cjs/ag-grid-plus/setting/index.d.ts +2 -1
  26. package/dist/cjs/ag-grid-plus/setting/index.js +4 -2
  27. package/dist/cjs/ag-grid-plus/storage/SchemeSyncManager.d.ts +2 -1
  28. package/dist/cjs/ag-grid-plus/storage/SchemeSyncManager.js +11 -8
  29. package/dist/cjs/ag-grid-plus/types.d.ts +2 -0
  30. package/dist/cjs/array-table/index.js +30 -118
  31. package/dist/cjs/draggableModal/index.d.ts +1 -1
  32. package/dist/cjs/draggableModal/index.js +253 -25
  33. package/dist/cjs/draggableModal/style.less +185 -12
  34. package/dist/esm/ag-grid-plus/_utils/processColumnGroups.d.ts +9 -0
  35. package/dist/esm/ag-grid-plus/_utils/processColumnGroups.js +44 -0
  36. package/dist/esm/ag-grid-plus/ag-gridPlus.js +252 -121
  37. package/dist/esm/ag-grid-plus/querySchemes/components/QuerySchemesManager.js +19 -10
  38. package/dist/esm/ag-grid-plus/querySchemes/hooks/useQuerySchemes.js +25 -3
  39. package/dist/esm/ag-grid-plus/schemes/components/SchemeSelector.d.ts +1 -1
  40. package/dist/esm/ag-grid-plus/schemes/components/SchemeSelector.js +1 -1
  41. package/dist/esm/ag-grid-plus/schemes/hooks/useColumnSchemes.js +60 -14
  42. package/dist/esm/ag-grid-plus/schemes/storage/localStorageAdapter.js +13 -27
  43. package/dist/esm/ag-grid-plus/schemes/types.d.ts +8 -5
  44. package/dist/esm/ag-grid-plus/schemes/utils/validator.js +14 -18
  45. package/dist/esm/ag-grid-plus/setting/ColumnConfigForm.d.ts +16 -0
  46. package/dist/esm/ag-grid-plus/setting/ColumnConfigForm.js +338 -0
  47. package/dist/esm/ag-grid-plus/setting/ColumnConfigTable.d.ts +20 -0
  48. package/dist/esm/ag-grid-plus/setting/ColumnConfigTable.js +932 -0
  49. package/dist/esm/ag-grid-plus/setting/ColumnSetting.js +207 -247
  50. package/dist/esm/ag-grid-plus/setting/MoveNodeModal.d.ts +15 -0
  51. package/dist/esm/ag-grid-plus/setting/MoveNodeModal.js +150 -0
  52. package/dist/esm/ag-grid-plus/setting/NameColumnRenderer.d.ts +18 -0
  53. package/dist/esm/ag-grid-plus/setting/NameColumnRenderer.js +87 -0
  54. package/dist/esm/ag-grid-plus/setting/columnGroupTypes.d.ts +59 -0
  55. package/dist/esm/ag-grid-plus/setting/columnGroupTypes.js +1 -0
  56. package/dist/esm/ag-grid-plus/setting/columnGroupUtils.d.ts +75 -0
  57. package/dist/esm/ag-grid-plus/setting/columnGroupUtils.js +265 -0
  58. package/dist/esm/ag-grid-plus/setting/index.d.ts +2 -1
  59. package/dist/esm/ag-grid-plus/setting/index.js +4 -2
  60. package/dist/esm/ag-grid-plus/storage/SchemeSyncManager.d.ts +2 -1
  61. package/dist/esm/ag-grid-plus/storage/SchemeSyncManager.js +11 -8
  62. package/dist/esm/ag-grid-plus/types.d.ts +2 -0
  63. package/dist/esm/array-table/index.js +31 -119
  64. package/dist/esm/draggableModal/index.d.ts +1 -1
  65. package/dist/esm/draggableModal/index.js +254 -27
  66. package/dist/esm/draggableModal/style.less +185 -12
  67. package/dist/umd/qc-ui.min.css +1 -1
  68. package/dist/umd/qc-ui.min.js +1 -1
  69. package/package.json +1 -1
  70. package/dist/cjs/ag-grid-plus/gridManager/index.d.ts +0 -7
  71. package/dist/cjs/ag-grid-plus/gridManager/index.js +0 -40
  72. package/dist/cjs/ag-grid-plus/querySchemes/hooks/useQuerySchemes.refactored.d.ts +0 -7
  73. package/dist/cjs/ag-grid-plus/querySchemes/hooks/useQuerySchemes.refactored.js +0 -32
  74. package/dist/cjs/ag-grid-plus/schemes/hooks/useColumnSchemes.refactored.d.ts +0 -7
  75. package/dist/cjs/ag-grid-plus/schemes/hooks/useColumnSchemes.refactored.js +0 -32
  76. package/dist/cjs/ag-grid-plus/setting/diySetting/index.d.ts +0 -10
  77. package/dist/cjs/ag-grid-plus/setting/diySetting/index.js +0 -268
  78. package/dist/esm/ag-grid-plus/gridManager/index.d.ts +0 -7
  79. package/dist/esm/ag-grid-plus/gridManager/index.js +0 -35
  80. package/dist/esm/ag-grid-plus/querySchemes/hooks/useQuerySchemes.refactored.d.ts +0 -7
  81. package/dist/esm/ag-grid-plus/querySchemes/hooks/useQuerySchemes.refactored.js +0 -27
  82. package/dist/esm/ag-grid-plus/schemes/hooks/useColumnSchemes.refactored.d.ts +0 -7
  83. package/dist/esm/ag-grid-plus/schemes/hooks/useColumnSchemes.refactored.js +0 -27
  84. package/dist/esm/ag-grid-plus/setting/diySetting/index.d.ts +0 -10
  85. package/dist/esm/ag-grid-plus/setting/diySetting/index.js +0 -259
@@ -70,7 +70,7 @@ export function useColumnSchemes(config) {
70
70
  * 加载方案列表
71
71
  */
72
72
  var loadSchemesList = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
73
- var loadedSchemes, schemeToLoad, lastSchemeId;
73
+ var loadedSchemes, schemeToLoad, lastSchemeId, _schemeToLoad$columnC;
74
74
  return _regeneratorRuntime().wrap(function _callee$(_context) {
75
75
  while (1) switch (_context.prev = _context.next) {
76
76
  case 0:
@@ -111,6 +111,12 @@ export function useColumnSchemes(config) {
111
111
 
112
112
  // 3. 应用方案
113
113
  if (schemeToLoad) {
114
+ console.log('[useColumnSchemes] 加载方案完成,准备调用 onSchemeChange:', {
115
+ schemeId: schemeToLoad.id,
116
+ schemeName: schemeToLoad.name,
117
+ hasColumnConfig: !!schemeToLoad.columnConfig,
118
+ columnConfigCount: ((_schemeToLoad$columnC = schemeToLoad.columnConfig) === null || _schemeToLoad$columnC === void 0 ? void 0 : _schemeToLoad$columnC.length) || 0
119
+ });
114
120
  setCurrentScheme(schemeToLoad);
115
121
  onSchemeChange === null || onSchemeChange === void 0 || onSchemeChange(schemeToLoad);
116
122
  }
@@ -218,6 +224,7 @@ export function useColumnSchemes(config) {
218
224
  */
219
225
  var saveScheme = useCallback( /*#__PURE__*/function () {
220
226
  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(updates) {
227
+ var _updates$columnConfig, _updates$columnConfig2, _updatedScheme$column, _updatedScheme$column2, _updatedScheme$column3;
221
228
  var nameValidation, descValidation, updatedScheme, updatedSchemes;
222
229
  return _regeneratorRuntime().wrap(function _callee4$(_context4) {
223
230
  while (1) switch (_context4.prev = _context4.next) {
@@ -229,47 +236,86 @@ export function useColumnSchemes(config) {
229
236
  console.error('[useColumnSchemes] 没有激活的方案');
230
237
  return _context4.abrupt("return");
231
238
  case 3:
239
+ console.log('[useColumnSchemes] saveScheme 被调用:', {
240
+ currentSchemeId: currentScheme.id,
241
+ currentSchemeName: currentScheme.name,
242
+ updates: updates,
243
+ hasColumnConfig: !!(updates !== null && updates !== void 0 && updates.columnConfig),
244
+ columnConfigLength: (updates === null || updates === void 0 || (_updates$columnConfig = updates.columnConfig) === null || _updates$columnConfig === void 0 ? void 0 : _updates$columnConfig.length) || 0,
245
+ columnConfigDetail: updates === null || updates === void 0 || (_updates$columnConfig2 = updates.columnConfig) === null || _updates$columnConfig2 === void 0 ? void 0 : _updates$columnConfig2.map(function (item) {
246
+ return {
247
+ type: item.type,
248
+ headerName: item.headerName,
249
+ field: item.field,
250
+ order: item.order,
251
+ parentId: item.parentId
252
+ };
253
+ })
254
+ });
255
+
256
+ // 验证更新内容
232
257
  if (!(updates !== null && updates !== void 0 && updates.name)) {
233
- _context4.next = 9;
258
+ _context4.next = 10;
234
259
  break;
235
260
  }
236
261
  nameValidation = validateSchemeName(updates.name);
237
262
  if (nameValidation.valid) {
238
- _context4.next = 7;
263
+ _context4.next = 8;
239
264
  break;
240
265
  }
241
266
  throw new Error(nameValidation.error);
242
- case 7:
267
+ case 8:
243
268
  if (!checkDuplicateName(updates.name, schemes, currentScheme.id)) {
244
- _context4.next = 9;
269
+ _context4.next = 10;
245
270
  break;
246
271
  }
247
272
  throw new Error('方案名称已存在');
248
- case 9:
273
+ case 10:
249
274
  if (!(updates !== null && updates !== void 0 && updates.description)) {
250
- _context4.next = 13;
275
+ _context4.next = 14;
251
276
  break;
252
277
  }
253
278
  descValidation = validateSchemeDescription(updates.description);
254
279
  if (descValidation.valid) {
255
- _context4.next = 13;
280
+ _context4.next = 14;
256
281
  break;
257
282
  }
258
283
  throw new Error(descValidation.error);
259
- case 13:
284
+ case 14:
260
285
  updatedScheme = _objectSpread(_objectSpread(_objectSpread({}, currentScheme), updates), {}, {
261
286
  updatedAt: Date.now()
262
287
  });
288
+ console.log('[useColumnSchemes] 准备保存的方案数据:', {
289
+ schemeId: updatedScheme.id,
290
+ schemeName: updatedScheme.name,
291
+ hasColumnConfig: !!updatedScheme.columnConfig,
292
+ columnConfigLength: ((_updatedScheme$column = updatedScheme.columnConfig) === null || _updatedScheme$column === void 0 ? void 0 : _updatedScheme$column.length) || 0,
293
+ columnConfigDetail: (_updatedScheme$column2 = updatedScheme.columnConfig) === null || _updatedScheme$column2 === void 0 ? void 0 : _updatedScheme$column2.map(function (item) {
294
+ return {
295
+ type: item.type,
296
+ headerName: item.headerName,
297
+ field: item.field,
298
+ order: item.order,
299
+ parentId: item.parentId
300
+ };
301
+ })
302
+ });
263
303
  updatedSchemes = schemes.map(function (s) {
264
304
  return s.id === currentScheme.id ? updatedScheme : s;
265
305
  });
266
- _context4.next = 17;
306
+ _context4.next = 19;
267
307
  return saveSchemesToStorage(updatedSchemes);
268
- case 17:
308
+ case 19:
269
309
  setCurrentScheme(updatedScheme);
270
310
  setIsDirty(false);
311
+ console.log('[useColumnSchemes] 方案保存完成,当前 currentScheme:', {
312
+ schemeId: updatedScheme.id,
313
+ schemeName: updatedScheme.name,
314
+ hasColumnConfig: !!updatedScheme.columnConfig,
315
+ columnConfigLength: ((_updatedScheme$column3 = updatedScheme.columnConfig) === null || _updatedScheme$column3 === void 0 ? void 0 : _updatedScheme$column3.length) || 0
316
+ });
271
317
  onSchemeSave === null || onSchemeSave === void 0 || onSchemeSave(updatedScheme);
272
- case 20:
318
+ case 23:
273
319
  case "end":
274
320
  return _context4.stop();
275
321
  }
@@ -284,7 +330,7 @@ export function useColumnSchemes(config) {
284
330
  * 创建新方案
285
331
  */
286
332
  var createScheme = useCallback( /*#__PURE__*/function () {
287
- var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(name, columnState, options) {
333
+ var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(name, columnConfig, options) {
288
334
  var nameValidation, uniqueName, newScheme, updatedSchemes;
289
335
  return _regeneratorRuntime().wrap(function _callee5$(_context5) {
290
336
  while (1) switch (_context5.prev = _context5.next) {
@@ -310,7 +356,7 @@ export function useColumnSchemes(config) {
310
356
  name: uniqueName,
311
357
  createdAt: Date.now(),
312
358
  updatedAt: Date.now(),
313
- columnState: columnState
359
+ columnConfig: columnConfig
314
360
  }, options); // 如果设置为默认方案,取消其他方案的默认标记
315
361
  updatedSchemes = schemes;
316
362
  if (newScheme.isDefault) {
@@ -7,7 +7,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
7
7
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
8
8
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
9
9
  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
10
- import { STORAGE_PREFIX, CURRENT_SCHEME_SUFFIX, LEGACY_STORAGE_PREFIX, MIGRATED_DEFAULT_SCHEME_ID, DEFAULT_SCHEME_NAME, STORAGE_MAX_SIZE } from "../constants";
10
+ import { STORAGE_PREFIX, CURRENT_SCHEME_SUFFIX, LEGACY_STORAGE_PREFIX, STORAGE_MAX_SIZE } from "../constants";
11
11
  /**
12
12
  * LocalStorage 存储适配器实现
13
13
  * 默认的方案存储方式,支持自动迁移旧数据
@@ -55,7 +55,7 @@ export var LocalStorageAdapter = /*#__PURE__*/function () {
55
55
  key: "migrateOldData",
56
56
  value: (function () {
57
57
  var _migrateOldData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(gridId) {
58
- var oldKey, oldData, columnState, migratedScheme;
58
+ var oldKey, oldData;
59
59
  return _regeneratorRuntime().wrap(function _callee$(_context) {
60
60
  while (1) switch (_context.prev = _context.next) {
61
61
  case 0:
@@ -68,35 +68,21 @@ export var LocalStorageAdapter = /*#__PURE__*/function () {
68
68
  return _context.abrupt("return", []);
69
69
  case 4:
70
70
  _context.prev = 4;
71
- columnState = JSON.parse(oldData); // 创建默认方案
72
- migratedScheme = {
73
- id: MIGRATED_DEFAULT_SCHEME_ID,
74
- name: DEFAULT_SCHEME_NAME,
75
- isDefault: true,
76
- isSystem: true,
77
- createdAt: Date.now(),
78
- updatedAt: Date.now(),
79
- columnState: columnState,
80
- description: '由旧版本列配置自动迁移'
81
- }; // 保存到新格式
82
- _context.next = 9;
83
- return this.saveSchemes(gridId, [migratedScheme]);
84
- case 9:
85
- // 可选:保留旧数据作为备份或删除
86
- // localStorage.removeItem(oldKey);
87
-
88
- console.log("[SchemeManager] \u5DF2\u8FC1\u79FB\u65E7\u5217\u914D\u7F6E\u6570\u636E\u5230\u65B9\u6848\u7CFB\u7EDF: ".concat(gridId));
89
- return _context.abrupt("return", [migratedScheme]);
90
- case 13:
91
- _context.prev = 13;
71
+ // 注意:旧数据已无法自动迁移,因为缺少 columnConfig
72
+ // 建议手动处理或提示用户重新配置
73
+ console.warn("[SchemeManager] \u68C0\u6D4B\u5230\u65E7\u683C\u5F0F\u6570\u636E,\u4F46\u65E0\u6CD5\u81EA\u52A8\u8FC1\u79FB: ".concat(gridId));
74
+ console.warn('[SchemeManager] 请手动重新配置列方案');
75
+ return _context.abrupt("return", []);
76
+ case 10:
77
+ _context.prev = 10;
92
78
  _context.t0 = _context["catch"](4);
93
- console.error('[SchemeManager] 迁移旧数据失败:', _context.t0);
79
+ console.error('[SchemeManager] 检查旧数据失败:', _context.t0);
94
80
  return _context.abrupt("return", []);
95
- case 17:
81
+ case 14:
96
82
  case "end":
97
83
  return _context.stop();
98
84
  }
99
- }, _callee, this, [[4, 13]]);
85
+ }, _callee, this, [[4, 10]]);
100
86
  }));
101
87
  function migrateOldData(_x) {
102
88
  return _migrateOldData.apply(this, arguments);
@@ -161,7 +147,7 @@ export var LocalStorageAdapter = /*#__PURE__*/function () {
161
147
  case 9:
162
148
  schemes = JSON.parse(data); // 验证数据完整性
163
149
  return _context2.abrupt("return", schemes.filter(function (scheme) {
164
- return scheme.id && scheme.name && scheme.columnState && Array.isArray(scheme.columnState);
150
+ return scheme.id && scheme.name && scheme.columnConfig && Array.isArray(scheme.columnConfig);
165
151
  }));
166
152
  case 13:
167
153
  _context2.prev = 13;
@@ -1,4 +1,5 @@
1
1
  import { ColumnState } from 'ag-grid-community';
2
+ import type { FlatColumnItem } from '../setting/columnGroupTypes';
2
3
  /**
3
4
  * 列配置方案数据结构
4
5
  */
@@ -15,8 +16,10 @@ export interface ColumnScheme {
15
16
  createdAt: number;
16
17
  /** 更新时间戳 */
17
18
  updatedAt: number;
18
- /** AG-Grid 列状态数据 */
19
- columnState: ColumnState[];
19
+ /** 完整的列配置数据(包含分组层级结构) */
20
+ columnConfig: FlatColumnItem[];
21
+ /** AG-Grid 过滤器模型数据(可选) */
22
+ filterModel?: any;
20
23
  /** 方案描述(可选) */
21
24
  description?: string;
22
25
  /** 标签分类(可选,扩展功能) */
@@ -106,9 +109,9 @@ export interface UseColumnSchemesReturn {
106
109
  /** 保存当前方案(更新现有方案) */
107
110
  saveScheme: (updates?: Partial<ColumnScheme>) => Promise<void>;
108
111
  /** 创建新方案 */
109
- createScheme: (name: string, columnState: ColumnState[], options?: Partial<ColumnScheme>) => Promise<ColumnScheme>;
110
- /** 更新方案信息(不影响 columnState) */
111
- updateScheme: (schemeId: string, updates: Partial<Omit<ColumnScheme, 'id' | 'columnState'>>) => Promise<void>;
112
+ createScheme: (name: string, columnConfig: FlatColumnItem[], options?: Partial<ColumnScheme>) => Promise<ColumnScheme>;
113
+ /** 更新方案信息(不影响 columnConfig) */
114
+ updateScheme: (schemeId: string, updates: Partial<Omit<ColumnScheme, 'id' | 'columnConfig'>>) => Promise<void>;
112
115
  /** 删除方案 */
113
116
  deleteScheme: (schemeId: string) => Promise<void>;
114
117
  /** 重置到方案原始状态 */
@@ -8,35 +8,31 @@ export function validateScheme(scheme, currentColumnDefs) {
8
8
  var invalidColumns = [];
9
9
  var validatedState = [];
10
10
 
11
- // 获取当前有效的列 ID 集合
12
- var validColIds = new Set(currentColumnDefs.filter(function (col) {
11
+ // 获取当前有效的列 field 集合
12
+ var validFields = new Set(currentColumnDefs.filter(function (col) {
13
13
  return col.field || col.colId;
14
14
  }).map(function (col) {
15
15
  return col.field || col.colId;
16
16
  }));
17
17
 
18
- // 验证每个列状态
19
- scheme.columnState.forEach(function (columnState) {
20
- var colId = columnState.colId;
21
- if (!colId) {
22
- warnings.push('发现没有 colId 的列状态');
23
- return;
18
+ // 验证每个列配置项
19
+ scheme.columnConfig.forEach(function (item) {
20
+ // 只验证列类型(非分组),因为分组没有对应的 field
21
+ if (item.type === 'column' && item.field) {
22
+ // 检查列是否仍然存在于表格定义中
23
+ if (!validFields.has(item.field)) {
24
+ invalidColumns.push(item.field);
25
+ warnings.push("\u5217 \"".concat(item.field, "\" \u5728\u5F53\u524D\u8868\u683C\u4E2D\u4E0D\u5B58\u5728"));
26
+ }
24
27
  }
25
-
26
- // 检查列是否仍然存在于表格定义中
27
- if (!validColIds.has(colId)) {
28
- invalidColumns.push(colId);
29
- warnings.push("\u5217 \"".concat(colId, "\" \u5728\u5F53\u524D\u8868\u683C\u4E2D\u4E0D\u5B58\u5728"));
30
- return;
31
- }
32
-
33
- // 列有效,添加到验证后的状态中
34
- validatedState.push(columnState);
35
28
  });
36
29
  var valid = invalidColumns.length === 0;
37
30
  if (!valid) {
38
31
  warnings.push("\u5171\u6709 ".concat(invalidColumns.length, " \u4E2A\u5217\u5728\u5F53\u524D\u8868\u683C\u4E2D\u4E0D\u5B58\u5728\uFF0C\u5DF2\u81EA\u52A8\u8FC7\u6EE4"));
39
32
  }
33
+
34
+ // 注意: validatedState 保持为空数组,因为 columnConfig 不是 ColumnState 格式
35
+ // 如果需要转换,应在调用方进行
40
36
  return {
41
37
  valid: valid,
42
38
  invalidColumns: invalidColumns,
@@ -0,0 +1,16 @@
1
+ /**
2
+ * 列配置表单组件
3
+ * 使用 Formily ArrayTable 展示和编辑列配置
4
+ * 支持表头分组的树形结构展示
5
+ */
6
+ import React from 'react';
7
+ import { Form } from '@formily/core';
8
+ interface ColumnConfigFormProps {
9
+ form: Form;
10
+ onDeleteNode: (nodeId: string) => void;
11
+ }
12
+ /**
13
+ * 列配置表单组件
14
+ */
15
+ declare const ColumnConfigForm: React.FC<ColumnConfigFormProps>;
16
+ export default ColumnConfigForm;
@@ -0,0 +1,338 @@
1
+ /**
2
+ * 列配置表单组件
3
+ * 使用 Formily ArrayTable 展示和编辑列配置
4
+ * 支持表头分组的树形结构展示
5
+ */
6
+
7
+ import React, { useCallback } from 'react';
8
+ import { Button, Popconfirm, Space, Tooltip } from 'antd';
9
+ import { DeleteOutlined, HolderOutlined } from '@ant-design/icons';
10
+ import { FormGrid, FormItem, FormLayout, Input, Select, NumberPicker, Switch } from '@formily/antd-v5';
11
+ import { createSchemaField } from '@formily/react';
12
+ import ArrayTable from "../../array-table";
13
+ import NameColumnRenderer from "./NameColumnRenderer";
14
+ var SchemaField = createSchemaField({
15
+ components: {
16
+ FormItem: FormItem,
17
+ FormGrid: FormGrid,
18
+ Space: Space,
19
+ Input: Input,
20
+ Select: Select,
21
+ ArrayTable: ArrayTable,
22
+ NumberPicker: NumberPicker,
23
+ Switch: Switch
24
+ }
25
+ });
26
+
27
+ /**
28
+ * 自定义排序抓手
29
+ */
30
+ var CustomSortHandle = function CustomSortHandle() {
31
+ return /*#__PURE__*/React.createElement(Tooltip, {
32
+ title: "\u62D6\u52A8\u6392\u5E8F\uFF08\u4EC5\u652F\u6301\u540C\u7EA7\uFF09"
33
+ }, /*#__PURE__*/React.createElement(HolderOutlined, {
34
+ style: {
35
+ fontSize: 16,
36
+ color: '#999',
37
+ cursor: 'move'
38
+ }
39
+ }));
40
+ };
41
+
42
+ /**
43
+ * 列配置表单组件
44
+ */
45
+ var ColumnConfigForm = function ColumnConfigForm(_ref) {
46
+ var form = _ref.form,
47
+ onDeleteNode = _ref.onDeleteNode;
48
+ /**
49
+ * 渲染操作列
50
+ * 根据节点类型显示不同的操作按钮
51
+ */
52
+ var renderActions = useCallback(function (record) {
53
+ var type = record.type,
54
+ id = record.id,
55
+ headerName = record.headerName,
56
+ _isNew = record._isNew;
57
+ if (type === 'group') {
58
+ return /*#__PURE__*/React.createElement(Space, null, _isNew && /*#__PURE__*/React.createElement(Popconfirm, {
59
+ title: "\u786E\u5B9A\u8981\u5220\u9664\u5206\u7EC4\"".concat(headerName, "\"\u53CA\u5176\u6240\u6709\u5B50\u5217\u5417\uFF1F"),
60
+ onConfirm: function onConfirm() {
61
+ return onDeleteNode(id);
62
+ },
63
+ okText: "\u786E\u5B9A",
64
+ cancelText: "\u53D6\u6D88"
65
+ }, /*#__PURE__*/React.createElement(Tooltip, {
66
+ title: "\u5220\u9664\u5206\u7EC4"
67
+ }, /*#__PURE__*/React.createElement(Button, {
68
+ type: "link",
69
+ size: "small",
70
+ danger: true,
71
+ icon: /*#__PURE__*/React.createElement(DeleteOutlined, null)
72
+ }))));
73
+ } else {
74
+ // 列不允许删除
75
+ return null;
76
+ }
77
+ }, [onDeleteNode]);
78
+
79
+ // 配置 ArrayTable 属性
80
+ var tableProps = {
81
+ onRowDrag: true,
82
+ components: {
83
+ SortHandle: CustomSortHandle
84
+ }
85
+ };
86
+ return /*#__PURE__*/React.createElement(FormLayout, null, /*#__PURE__*/React.createElement(SchemaField, null, /*#__PURE__*/React.createElement(SchemaField.Void, {
87
+ "x-component": "FormGrid",
88
+ "x-component-props": {
89
+ maxColumns: [1, 3],
90
+ strictAutoFit: true
91
+ }
92
+ }, /*#__PURE__*/React.createElement(SchemaField.Array, {
93
+ name: "items",
94
+ title: "",
95
+ "x-component": "ArrayTable",
96
+ "x-component-props": tableProps,
97
+ "x-decorator": "FormItem",
98
+ "x-decorator-props": {
99
+ gridSpan: 3
100
+ }
101
+ }, /*#__PURE__*/React.createElement(SchemaField.Object, null, /*#__PURE__*/React.createElement(SchemaField.String, {
102
+ name: "id",
103
+ "x-display": "hidden"
104
+ }), /*#__PURE__*/React.createElement(SchemaField.String, {
105
+ name: "type",
106
+ "x-display": "hidden"
107
+ }), /*#__PURE__*/React.createElement(SchemaField.Number, {
108
+ name: "level",
109
+ "x-display": "hidden"
110
+ }), /*#__PURE__*/React.createElement(SchemaField.Number, {
111
+ name: "order",
112
+ "x-display": "hidden"
113
+ }), /*#__PURE__*/React.createElement(SchemaField.String, {
114
+ name: "parentId",
115
+ "x-display": "hidden"
116
+ }), /*#__PURE__*/React.createElement(SchemaField.String, {
117
+ name: "groupId",
118
+ "x-display": "hidden"
119
+ }), /*#__PURE__*/React.createElement(SchemaField.String, {
120
+ name: "field",
121
+ "x-display": "hidden"
122
+ }), /*#__PURE__*/React.createElement(SchemaField.Boolean, {
123
+ name: "_isNew",
124
+ "x-display": "hidden"
125
+ }), /*#__PURE__*/React.createElement(SchemaField.Void, {
126
+ "x-component": "ArrayTable.Column",
127
+ "x-component-props": {
128
+ width: 60,
129
+ title: '排序',
130
+ align: 'center'
131
+ }
132
+ }, /*#__PURE__*/React.createElement(SchemaField.Void, {
133
+ "x-decorator": "FormItem",
134
+ required: true,
135
+ "x-component": "ArrayTable.SortHandle"
136
+ })), /*#__PURE__*/React.createElement(SchemaField.Void, {
137
+ "x-component": "ArrayTable.Column",
138
+ "x-component-props": {
139
+ width: 200,
140
+ title: '名称'
141
+ }
142
+ }, /*#__PURE__*/React.createElement(SchemaField.String, {
143
+ name: "headerName",
144
+ "x-decorator": "FormItem",
145
+ "x-component": function xComponent(props) {
146
+ var _props$name;
147
+ 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];
148
+ var items = form.values.items || [];
149
+ var record = items[parseInt(index || '0')];
150
+ return /*#__PURE__*/React.createElement(NameColumnRenderer, {
151
+ value: props.value,
152
+ record: record,
153
+ allItems: items,
154
+ onChange: props.onChange
155
+ });
156
+ }
157
+ })), /*#__PURE__*/React.createElement(SchemaField.Void, {
158
+ "x-component": "ArrayTable.Column",
159
+ "x-component-props": {
160
+ width: 180,
161
+ title: '操作',
162
+ align: 'center'
163
+ }
164
+ }, /*#__PURE__*/React.createElement(SchemaField.Void, {
165
+ "x-component": function xComponent(props) {
166
+ var _props$name2;
167
+ 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];
168
+ var items = form.values.items || [];
169
+ var record = items[parseInt(index || '0')];
170
+ if (!record) return null;
171
+ return renderActions(record);
172
+ }
173
+ })), /*#__PURE__*/React.createElement(SchemaField.Void, {
174
+ "x-component": "ArrayTable.Column",
175
+ "x-component-props": {
176
+ width: 100,
177
+ title: '宽度'
178
+ }
179
+ }, /*#__PURE__*/React.createElement(SchemaField.String, {
180
+ name: "width",
181
+ "x-decorator": "FormItem",
182
+ "x-component": function xComponent(props) {
183
+ var _props$name3;
184
+ 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];
185
+ var items = form.values.items || [];
186
+ var record = items[parseInt(index || '0')];
187
+ if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
188
+ return /*#__PURE__*/React.createElement("span", null, "-");
189
+ }
190
+ return /*#__PURE__*/React.createElement(NumberPicker, {
191
+ value: props.value,
192
+ onChange: props.onChange
193
+ });
194
+ }
195
+ })), /*#__PURE__*/React.createElement(SchemaField.Void, {
196
+ "x-component": "ArrayTable.Column",
197
+ "x-component-props": {
198
+ width: 100,
199
+ title: '占满'
200
+ }
201
+ }, /*#__PURE__*/React.createElement(SchemaField.String, {
202
+ name: "flex",
203
+ "x-decorator": "FormItem",
204
+ "x-component": function xComponent(props) {
205
+ var _props$name4;
206
+ 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];
207
+ var items = form.values.items || [];
208
+ var record = items[parseInt(index || '0')];
209
+ if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
210
+ return /*#__PURE__*/React.createElement("span", null, "-");
211
+ }
212
+ return /*#__PURE__*/React.createElement(Select, {
213
+ value: props.value,
214
+ onChange: props.onChange,
215
+ options: [{
216
+ value: 1,
217
+ label: '占满'
218
+ }, {
219
+ value: 0,
220
+ label: '不占满'
221
+ }]
222
+ });
223
+ }
224
+ })), /*#__PURE__*/React.createElement(SchemaField.Void, {
225
+ "x-component": "ArrayTable.Column",
226
+ "x-component-props": {
227
+ width: 100,
228
+ title: '固定'
229
+ }
230
+ }, /*#__PURE__*/React.createElement(SchemaField.String, {
231
+ name: "pinned",
232
+ "x-decorator": "FormItem",
233
+ "x-component": function xComponent(props) {
234
+ var _props$name5;
235
+ 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];
236
+ var items = form.values.items || [];
237
+ var record = items[parseInt(index || '0')];
238
+ if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
239
+ return /*#__PURE__*/React.createElement("span", null, "-");
240
+ }
241
+ return /*#__PURE__*/React.createElement(Select, {
242
+ value: props.value,
243
+ onChange: props.onChange,
244
+ options: [{
245
+ value: 'left',
246
+ label: '左固定'
247
+ }, {
248
+ value: 'right',
249
+ label: '右固定'
250
+ }, {
251
+ value: 'notPinned',
252
+ label: '不固定'
253
+ }]
254
+ });
255
+ }
256
+ })), /*#__PURE__*/React.createElement(SchemaField.Void, {
257
+ "x-component": "ArrayTable.Column",
258
+ "x-component-props": {
259
+ width: 80,
260
+ title: '隐藏',
261
+ align: 'center'
262
+ }
263
+ }, /*#__PURE__*/React.createElement(SchemaField.String, {
264
+ name: "hide",
265
+ "x-decorator": "FormItem",
266
+ "x-component": function xComponent(props) {
267
+ var _props$name6;
268
+ 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];
269
+ var items = form.values.items || [];
270
+ var record = items[parseInt(index || '0')];
271
+ if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
272
+ return /*#__PURE__*/React.createElement("span", null, "-");
273
+ }
274
+ return /*#__PURE__*/React.createElement(Switch, {
275
+ checked: props.value,
276
+ onChange: props.onChange
277
+ });
278
+ }
279
+ })), /*#__PURE__*/React.createElement(SchemaField.Void, {
280
+ "x-component": "ArrayTable.Column",
281
+ "x-component-props": {
282
+ width: 120,
283
+ title: '布局'
284
+ }
285
+ }, /*#__PURE__*/React.createElement(SchemaField.String, {
286
+ name: "cellClass",
287
+ "x-decorator": "FormItem",
288
+ "x-component": function xComponent(props) {
289
+ var _props$name7;
290
+ 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];
291
+ var items = form.values.items || [];
292
+ var record = items[parseInt(index || '0')];
293
+ if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
294
+ return /*#__PURE__*/React.createElement("span", null, "-");
295
+ }
296
+ return /*#__PURE__*/React.createElement(Select, {
297
+ value: props.value || 'custom-cell-left',
298
+ onChange: props.onChange,
299
+ options: [{
300
+ value: 'custom-cell-left',
301
+ label: '左对齐'
302
+ }, {
303
+ value: 'custom-cell-right',
304
+ label: '右对齐'
305
+ }, {
306
+ value: 'custom-cell-centered',
307
+ label: '居中'
308
+ }]
309
+ });
310
+ }
311
+ })), /*#__PURE__*/React.createElement(SchemaField.Void, {
312
+ "x-component": "ArrayTable.Column",
313
+ "x-component-props": {
314
+ width: 100,
315
+ title: '列过滤',
316
+ align: 'center'
317
+ }
318
+ }, /*#__PURE__*/React.createElement(SchemaField.String, {
319
+ name: "suppressHeaderFilterButton",
320
+ "x-decorator": "FormItem",
321
+ "x-component": function xComponent(props) {
322
+ var _props$name8;
323
+ 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];
324
+ var items = form.values.items || [];
325
+ var record = items[parseInt(index || '0')];
326
+ if ((record === null || record === void 0 ? void 0 : record.type) !== 'column') {
327
+ return /*#__PURE__*/React.createElement("span", null, "-");
328
+ }
329
+ return /*#__PURE__*/React.createElement(Switch, {
330
+ checked: !props.value,
331
+ onChange: function onChange(checked) {
332
+ return props.onChange(!checked);
333
+ }
334
+ });
335
+ }
336
+ })))))));
337
+ };
338
+ export default ColumnConfigForm;
@@ -0,0 +1,20 @@
1
+ /**
2
+ * 列配置表格组件
3
+ * 使用简单的 Ant Design Table 替代 Formily ArrayTable
4
+ * 通过 React useState 直接管理数据状态,确保 type 字段不会丢失
5
+ */
6
+ import React from 'react';
7
+ import type { FlatColumnItem } from './columnGroupTypes';
8
+ interface ColumnConfigTableProps {
9
+ /** 扁平化的列配置数据 */
10
+ items: FlatColumnItem[];
11
+ /** 数据变更回调 */
12
+ onChange: (items: FlatColumnItem[]) => void;
13
+ /** 简化模式 - 隐藏分组相关功能 (用于 formArrayTable) */
14
+ simple?: boolean;
15
+ }
16
+ /**
17
+ * 列配置表格组件
18
+ */
19
+ declare const ColumnConfigTable: React.FC<ColumnConfigTableProps>;
20
+ export default ColumnConfigTable;