@nokecy/qc-ui 1.1.10 → 1.1.12
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.
|
@@ -211,20 +211,95 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
211
211
|
onClose();
|
|
212
212
|
}, [snapshotColumnDefs, gridApi, onClose]);
|
|
213
213
|
|
|
214
|
+
/**
|
|
215
|
+
* 加载方案
|
|
216
|
+
* 应用方案到 Grid,并更新表单数据
|
|
217
|
+
*/
|
|
218
|
+
var handleLoadScheme = useCallback( /*#__PURE__*/function () {
|
|
219
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(schemeId) {
|
|
220
|
+
var scheme, gridColumnDefs, columnState;
|
|
221
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
222
|
+
while (1) switch (_context.prev = _context.next) {
|
|
223
|
+
case 0:
|
|
224
|
+
_context.prev = 0;
|
|
225
|
+
_context.next = 3;
|
|
226
|
+
return setCurrentColumnScheme === null || setCurrentColumnScheme === void 0 ? void 0 : setCurrentColumnScheme(gridKey, schemeId);
|
|
227
|
+
case 3:
|
|
228
|
+
// 应用方案到 Grid
|
|
229
|
+
scheme = schemes.find(function (s) {
|
|
230
|
+
return s.id === schemeId;
|
|
231
|
+
});
|
|
232
|
+
if (!(scheme && gridApi)) {
|
|
233
|
+
_context.next = 12;
|
|
234
|
+
break;
|
|
235
|
+
}
|
|
236
|
+
// 【关键修复】先更新 columnDefs(处理分组结构)
|
|
237
|
+
gridColumnDefs = flatConfigToGridState(scheme.columnConfig, originalColumnDefs);
|
|
238
|
+
gridApi.setGridOption('columnDefs', gridColumnDefs);
|
|
239
|
+
|
|
240
|
+
// 等待 columnDefs 更新完成
|
|
241
|
+
_context.next = 9;
|
|
242
|
+
return new Promise(function (resolve) {
|
|
243
|
+
return setTimeout(resolve, 100);
|
|
244
|
+
});
|
|
245
|
+
case 9:
|
|
246
|
+
// 【修复】然后应用列状态(宽度、隐藏、顺序等)
|
|
247
|
+
columnState = flatConfigToColumnState(scheme.columnConfig);
|
|
248
|
+
gridApi.applyColumnState({
|
|
249
|
+
state: columnState,
|
|
250
|
+
applyOrder: true // 强制应用列顺序
|
|
251
|
+
});
|
|
252
|
+
|
|
253
|
+
// 应用过滤器
|
|
254
|
+
if (scheme.filterModel) {
|
|
255
|
+
gridApi.setFilterModel(scheme.filterModel);
|
|
256
|
+
}
|
|
257
|
+
case 12:
|
|
258
|
+
message.success('方案已加载');
|
|
259
|
+
|
|
260
|
+
// 等待Grid状态更新后再刷新表单
|
|
261
|
+
setTimeout(function () {
|
|
262
|
+
if (form) {
|
|
263
|
+
var newData = getColumnData();
|
|
264
|
+
form.setValues({
|
|
265
|
+
items: newData
|
|
266
|
+
});
|
|
267
|
+
}
|
|
268
|
+
}, 100);
|
|
269
|
+
|
|
270
|
+
// 自动关闭弹窗,让用户看到Grid的变化
|
|
271
|
+
onClose();
|
|
272
|
+
_context.next = 20;
|
|
273
|
+
break;
|
|
274
|
+
case 17:
|
|
275
|
+
_context.prev = 17;
|
|
276
|
+
_context.t0 = _context["catch"](0);
|
|
277
|
+
message.error(_context.t0.message || '加载方案失败');
|
|
278
|
+
case 20:
|
|
279
|
+
case "end":
|
|
280
|
+
return _context.stop();
|
|
281
|
+
}
|
|
282
|
+
}, _callee, null, [[0, 17]]);
|
|
283
|
+
}));
|
|
284
|
+
return function (_x) {
|
|
285
|
+
return _ref2.apply(this, arguments);
|
|
286
|
+
};
|
|
287
|
+
}(), [setCurrentColumnScheme, gridKey, schemes, gridApi, originalColumnDefs, form, getColumnData, onClose]);
|
|
288
|
+
|
|
214
289
|
/**
|
|
215
290
|
* 保存列配置
|
|
216
|
-
*
|
|
291
|
+
* 优化逻辑:先保存配置到存储,再通过 handleLoadScheme 统一加载
|
|
217
292
|
*/
|
|
218
|
-
var handleSaveColumns = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function
|
|
219
|
-
var values, flatConfig, configToSave, invalidColumns,
|
|
220
|
-
return _regeneratorRuntime().wrap(function
|
|
221
|
-
while (1) switch (
|
|
293
|
+
var handleSaveColumns = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
294
|
+
var values, flatConfig, configToSave, invalidColumns, filterModel, schemeIdToLoad, defaultScheme, newScheme;
|
|
295
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
296
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
222
297
|
case 0:
|
|
223
298
|
if (form) {
|
|
224
|
-
|
|
299
|
+
_context2.next = 2;
|
|
225
300
|
break;
|
|
226
301
|
}
|
|
227
|
-
return
|
|
302
|
+
return _context2.abrupt("return");
|
|
228
303
|
case 2:
|
|
229
304
|
values = form.values;
|
|
230
305
|
flatConfig = values.items || []; // 检查是否是旧版本数据,如果是则先迁移
|
|
@@ -234,7 +309,7 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
234
309
|
message.info('检测到旧版本配置,已自动迁移到新格式');
|
|
235
310
|
}
|
|
236
311
|
|
|
237
|
-
//
|
|
312
|
+
// 验证数据完整性,过滤掉无效的列配置
|
|
238
313
|
invalidColumns = configToSave.filter(function (item) {
|
|
239
314
|
return item.type === 'column' && item.field !== "" && !item.field;
|
|
240
315
|
});
|
|
@@ -245,68 +320,45 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
245
320
|
return item.type === 'group' || item.type === 'column' && item.field;
|
|
246
321
|
});
|
|
247
322
|
}
|
|
248
|
-
|
|
249
|
-
// 【修复】转换为 AG-Grid 的列定义,传入原始列定义以保留自定义属性
|
|
250
|
-
gridColumnDefs = flatConfigToGridState(configToSave, originalColumnDefs); // 【关键修复】先更新 columnDefs(处理分组结构变化)
|
|
251
|
-
_context.next = 11;
|
|
252
|
-
return new Promise(function (resolve) {
|
|
253
|
-
return setTimeout(resolve, 100);
|
|
254
|
-
});
|
|
255
|
-
case 11:
|
|
256
|
-
// 【修复】然后应用列状态(宽度、隐藏、顺序等)
|
|
257
|
-
columnState = flatConfigToColumnState(configToSave);
|
|
258
|
-
gridApi.applyColumnState({
|
|
259
|
-
state: columnState,
|
|
260
|
-
applyOrder: true // 强制应用列顺序
|
|
261
|
-
});
|
|
262
|
-
|
|
263
|
-
// 【关键修复】等待 Grid 状态更新完成后再保存到方案
|
|
264
|
-
// 使用 await 确保保存完成后再关闭弹窗,避免生产环境竞态条件
|
|
265
|
-
_context.next = 15;
|
|
266
|
-
return new Promise(function (resolve) {
|
|
267
|
-
return setTimeout(resolve, 50);
|
|
268
|
-
});
|
|
269
|
-
case 15:
|
|
270
|
-
_context.prev = 15;
|
|
323
|
+
_context2.prev = 8;
|
|
271
324
|
filterModel = gridApi.getFilterModel();
|
|
272
325
|
if (!currentScheme) {
|
|
273
|
-
|
|
326
|
+
_context2.next = 17;
|
|
274
327
|
break;
|
|
275
328
|
}
|
|
276
|
-
|
|
329
|
+
_context2.next = 13;
|
|
277
330
|
return saveColumnScheme === null || saveColumnScheme === void 0 ? void 0 : saveColumnScheme(gridKey, _objectSpread(_objectSpread({}, currentScheme), {}, {
|
|
278
331
|
columnConfig: configToSave,
|
|
279
332
|
filterModel: filterModel,
|
|
280
333
|
updatedAt: Date.now()
|
|
281
334
|
}));
|
|
282
|
-
case
|
|
335
|
+
case 13:
|
|
336
|
+
schemeIdToLoad = currentScheme.id;
|
|
283
337
|
message.success('列配置已保存到方案');
|
|
284
|
-
|
|
338
|
+
_context2.next = 30;
|
|
285
339
|
break;
|
|
286
|
-
case
|
|
287
|
-
//
|
|
340
|
+
case 17:
|
|
341
|
+
// 如果没有激活的方案,自动创建或更新默认方案
|
|
288
342
|
defaultScheme = schemes.find(function (s) {
|
|
289
343
|
return s.isDefault;
|
|
290
344
|
});
|
|
291
345
|
if (!defaultScheme) {
|
|
292
|
-
|
|
346
|
+
_context2.next = 25;
|
|
293
347
|
break;
|
|
294
348
|
}
|
|
295
|
-
|
|
349
|
+
_context2.next = 21;
|
|
296
350
|
return saveColumnScheme === null || saveColumnScheme === void 0 ? void 0 : saveColumnScheme(gridKey, _objectSpread(_objectSpread({}, defaultScheme), {}, {
|
|
297
351
|
columnConfig: configToSave,
|
|
298
352
|
filterModel: filterModel,
|
|
299
353
|
updatedAt: Date.now()
|
|
300
354
|
}));
|
|
301
|
-
case
|
|
302
|
-
|
|
303
|
-
return setCurrentColumnScheme === null || setCurrentColumnScheme === void 0 ? void 0 : setCurrentColumnScheme(gridKey, defaultScheme.id);
|
|
304
|
-
case 29:
|
|
355
|
+
case 21:
|
|
356
|
+
schemeIdToLoad = defaultScheme.id;
|
|
305
357
|
message.success('列配置已保存到默认方案');
|
|
306
|
-
|
|
358
|
+
_context2.next = 30;
|
|
307
359
|
break;
|
|
308
|
-
case
|
|
309
|
-
//
|
|
360
|
+
case 25:
|
|
361
|
+
// 创建新的默认方案
|
|
310
362
|
newScheme = {
|
|
311
363
|
id: uuidv4(),
|
|
312
364
|
name: '默认配置',
|
|
@@ -318,55 +370,45 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
318
370
|
createdAt: Date.now(),
|
|
319
371
|
updatedAt: Date.now()
|
|
320
372
|
};
|
|
321
|
-
|
|
373
|
+
_context2.next = 28;
|
|
322
374
|
return saveColumnScheme === null || saveColumnScheme === void 0 ? void 0 : saveColumnScheme(gridKey, newScheme);
|
|
323
|
-
case
|
|
324
|
-
|
|
325
|
-
return setCurrentColumnScheme === null || setCurrentColumnScheme === void 0 ? void 0 : setCurrentColumnScheme(gridKey, newScheme.id);
|
|
326
|
-
case 37:
|
|
375
|
+
case 28:
|
|
376
|
+
schemeIdToLoad = newScheme.id;
|
|
327
377
|
message.success('已创建并保存到默认方案');
|
|
328
|
-
case
|
|
329
|
-
|
|
330
|
-
return
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
case 40:
|
|
334
|
-
_context.next = 46;
|
|
378
|
+
case 30:
|
|
379
|
+
_context2.next = 32;
|
|
380
|
+
return handleLoadScheme(schemeIdToLoad);
|
|
381
|
+
case 32:
|
|
382
|
+
_context2.next = 38;
|
|
335
383
|
break;
|
|
336
|
-
case
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
console.error('保存列配置到方案失败:',
|
|
384
|
+
case 34:
|
|
385
|
+
_context2.prev = 34;
|
|
386
|
+
_context2.t0 = _context2["catch"](8);
|
|
387
|
+
console.error('保存列配置到方案失败:', _context2.t0);
|
|
340
388
|
message.error('保存列配置失败');
|
|
341
|
-
case
|
|
342
|
-
// 【修复】保存成功后清除快照
|
|
343
|
-
setSnapshotColumnDefs(null);
|
|
344
|
-
|
|
345
|
-
// 【关键修复】确保在方案保存完成并传播后才关闭弹窗
|
|
346
|
-
onClose();
|
|
347
|
-
case 48:
|
|
389
|
+
case 38:
|
|
348
390
|
case "end":
|
|
349
|
-
return
|
|
391
|
+
return _context2.stop();
|
|
350
392
|
}
|
|
351
|
-
},
|
|
352
|
-
})), [form, gridApi,
|
|
393
|
+
}, _callee2, null, [[8, 34]]);
|
|
394
|
+
})), [form, gridApi, saveColumnScheme, setCurrentColumnScheme, currentScheme, schemes, gridKey, handleLoadScheme]);
|
|
353
395
|
|
|
354
396
|
// 保存为新方案
|
|
355
|
-
var handleSaveScheme = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function
|
|
397
|
+
var handleSaveScheme = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
|
|
356
398
|
var columnConfigToSave, values, gridColumnDefs, columnState, _values, filterModel, newScheme;
|
|
357
|
-
return _regeneratorRuntime().wrap(function
|
|
358
|
-
while (1) switch (
|
|
399
|
+
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
|
400
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
359
401
|
case 0:
|
|
360
402
|
if (schemeName.trim()) {
|
|
361
|
-
|
|
403
|
+
_context3.next = 3;
|
|
362
404
|
break;
|
|
363
405
|
}
|
|
364
406
|
message.warning('请输入方案名称');
|
|
365
|
-
return
|
|
407
|
+
return _context3.abrupt("return");
|
|
366
408
|
case 3:
|
|
367
|
-
|
|
409
|
+
_context3.prev = 3;
|
|
368
410
|
if (!(activeTab === 'columns' && form)) {
|
|
369
|
-
|
|
411
|
+
_context3.next = 17;
|
|
370
412
|
break;
|
|
371
413
|
}
|
|
372
414
|
values = form.values;
|
|
@@ -376,7 +418,7 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
376
418
|
gridApi.setGridOption('columnDefs', gridColumnDefs);
|
|
377
419
|
|
|
378
420
|
// 等待 columnDefs 更新完成
|
|
379
|
-
|
|
421
|
+
_context3.next = 11;
|
|
380
422
|
return new Promise(function (resolve) {
|
|
381
423
|
return setTimeout(resolve, 100);
|
|
382
424
|
});
|
|
@@ -389,12 +431,12 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
389
431
|
});
|
|
390
432
|
|
|
391
433
|
// 等待状态更新
|
|
392
|
-
|
|
434
|
+
_context3.next = 15;
|
|
393
435
|
return new Promise(function (resolve) {
|
|
394
436
|
return setTimeout(resolve, 50);
|
|
395
437
|
});
|
|
396
438
|
case 15:
|
|
397
|
-
|
|
439
|
+
_context3.next = 19;
|
|
398
440
|
break;
|
|
399
441
|
case 17:
|
|
400
442
|
// 如果在"方案管理"标签页,使用当前表单数据
|
|
@@ -414,7 +456,7 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
414
456
|
createdAt: Date.now(),
|
|
415
457
|
updatedAt: Date.now()
|
|
416
458
|
};
|
|
417
|
-
|
|
459
|
+
_context3.next = 23;
|
|
418
460
|
return saveColumnScheme === null || saveColumnScheme === void 0 ? void 0 : saveColumnScheme(gridKey, newScheme);
|
|
419
461
|
case 23:
|
|
420
462
|
message.success('方案保存成功');
|
|
@@ -424,91 +466,19 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
424
466
|
|
|
425
467
|
// 切换到方案管理标签页,显示新创建的方案
|
|
426
468
|
setActiveTab('schemes');
|
|
427
|
-
|
|
469
|
+
_context3.next = 33;
|
|
428
470
|
break;
|
|
429
471
|
case 30:
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
message.error(
|
|
472
|
+
_context3.prev = 30;
|
|
473
|
+
_context3.t0 = _context3["catch"](3);
|
|
474
|
+
message.error(_context3.t0.message || '保存方案失败');
|
|
433
475
|
case 33:
|
|
434
476
|
case "end":
|
|
435
|
-
return
|
|
477
|
+
return _context3.stop();
|
|
436
478
|
}
|
|
437
|
-
},
|
|
479
|
+
}, _callee3, null, [[3, 30]]);
|
|
438
480
|
})), [gridApi, saveColumnScheme, gridKey, schemeName, schemeDescription, activeTab, form, originalColumnDefs]);
|
|
439
481
|
|
|
440
|
-
// 加载方案
|
|
441
|
-
var handleLoadScheme = useCallback( /*#__PURE__*/function () {
|
|
442
|
-
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(schemeId) {
|
|
443
|
-
var scheme, gridColumnDefs, columnState;
|
|
444
|
-
return _regeneratorRuntime().wrap(function _callee3$(_context3) {
|
|
445
|
-
while (1) switch (_context3.prev = _context3.next) {
|
|
446
|
-
case 0:
|
|
447
|
-
_context3.prev = 0;
|
|
448
|
-
_context3.next = 3;
|
|
449
|
-
return setCurrentColumnScheme === null || setCurrentColumnScheme === void 0 ? void 0 : setCurrentColumnScheme(gridKey, schemeId);
|
|
450
|
-
case 3:
|
|
451
|
-
// 应用方案到 Grid
|
|
452
|
-
scheme = schemes.find(function (s) {
|
|
453
|
-
return s.id === schemeId;
|
|
454
|
-
});
|
|
455
|
-
if (!(scheme && gridApi)) {
|
|
456
|
-
_context3.next = 12;
|
|
457
|
-
break;
|
|
458
|
-
}
|
|
459
|
-
// 【关键修复】先更新 columnDefs(处理分组结构)
|
|
460
|
-
gridColumnDefs = flatConfigToGridState(scheme.columnConfig, originalColumnDefs);
|
|
461
|
-
gridApi.setGridOption('columnDefs', gridColumnDefs);
|
|
462
|
-
|
|
463
|
-
// 等待 columnDefs 更新完成
|
|
464
|
-
_context3.next = 9;
|
|
465
|
-
return new Promise(function (resolve) {
|
|
466
|
-
return setTimeout(resolve, 100);
|
|
467
|
-
});
|
|
468
|
-
case 9:
|
|
469
|
-
// 【修复】然后应用列状态(宽度、隐藏、顺序等)
|
|
470
|
-
columnState = flatConfigToColumnState(scheme.columnConfig);
|
|
471
|
-
gridApi.applyColumnState({
|
|
472
|
-
state: columnState,
|
|
473
|
-
applyOrder: true // 强制应用列顺序
|
|
474
|
-
});
|
|
475
|
-
|
|
476
|
-
// 应用过滤器
|
|
477
|
-
if (scheme.filterModel) {
|
|
478
|
-
gridApi.setFilterModel(scheme.filterModel);
|
|
479
|
-
}
|
|
480
|
-
case 12:
|
|
481
|
-
message.success('方案已加载');
|
|
482
|
-
|
|
483
|
-
// 等待Grid状态更新后再刷新表单
|
|
484
|
-
setTimeout(function () {
|
|
485
|
-
if (form) {
|
|
486
|
-
var newData = getColumnData();
|
|
487
|
-
form.setValues({
|
|
488
|
-
items: newData
|
|
489
|
-
});
|
|
490
|
-
}
|
|
491
|
-
}, 100);
|
|
492
|
-
|
|
493
|
-
// 自动关闭弹窗,让用户看到Grid的变化
|
|
494
|
-
onClose();
|
|
495
|
-
_context3.next = 20;
|
|
496
|
-
break;
|
|
497
|
-
case 17:
|
|
498
|
-
_context3.prev = 17;
|
|
499
|
-
_context3.t0 = _context3["catch"](0);
|
|
500
|
-
message.error(_context3.t0.message || '加载方案失败');
|
|
501
|
-
case 20:
|
|
502
|
-
case "end":
|
|
503
|
-
return _context3.stop();
|
|
504
|
-
}
|
|
505
|
-
}, _callee3, null, [[0, 17]]);
|
|
506
|
-
}));
|
|
507
|
-
return function (_x) {
|
|
508
|
-
return _ref4.apply(this, arguments);
|
|
509
|
-
};
|
|
510
|
-
}(), [setCurrentColumnScheme, gridKey, schemes, gridApi, originalColumnDefs, form, getColumnData, onClose]);
|
|
511
|
-
|
|
512
482
|
// 设置默认方案
|
|
513
483
|
var handleSetDefault = useCallback( /*#__PURE__*/function () {
|
|
514
484
|
var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(schemeId) {
|
|
@@ -11,7 +11,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
11
11
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
12
12
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
13
13
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
-
import React, { Fragment, useEffect, useRef, useState, useMemo
|
|
14
|
+
import React, { Fragment, useEffect, useRef, useState, useMemo } from "react";
|
|
15
15
|
import { AgGridReact } from "ag-grid-react";
|
|
16
16
|
import { useField, observer, RecursionField } from "@formily/react";
|
|
17
17
|
import { useFieldSchema } from "@formily/react";
|
|
@@ -24,11 +24,11 @@ import ArrayAddBtn from "./arrayAddBtn";
|
|
|
24
24
|
import PreviewArrayTable from "./preview";
|
|
25
25
|
import { Space } from "antd";
|
|
26
26
|
import Setting from "../ag-grid-plus/setting";
|
|
27
|
-
import { GridPlusContext } from "../ag-grid-plus/context/gridContext";
|
|
28
27
|
import { flatConfigToColumnState, flatConfigToGridState } from "../ag-grid-plus/setting/columnGroupUtils";
|
|
29
28
|
|
|
30
29
|
// 导入 AG-Grid v33 主题
|
|
31
30
|
import { agGridTheme } from "../ag-grid-plus/theme";
|
|
31
|
+
import { useGridSchemes } from "../ag-grid-plus";
|
|
32
32
|
|
|
33
33
|
//@ts-ignore
|
|
34
34
|
var ArrayTableInner = observer(function (props) {
|
|
@@ -73,11 +73,10 @@ var ArrayTableInner = observer(function (props) {
|
|
|
73
73
|
handleRowDragMove = _useRowDrag.handleRowDragMove;
|
|
74
74
|
|
|
75
75
|
// 直接使用 Context 获取方案管理状态
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
currentSchemes =
|
|
80
|
-
columnSchemes = _ref.columnSchemes;
|
|
76
|
+
var _useGridSchemes = useGridSchemes(),
|
|
77
|
+
columnSchemes = _useGridSchemes.columnSchemes,
|
|
78
|
+
querySchemes = _useGridSchemes.querySchemes,
|
|
79
|
+
currentSchemes = _useGridSchemes.currentSchemes;
|
|
81
80
|
|
|
82
81
|
// 获取当前表格的激活方案
|
|
83
82
|
var currentScheme = useMemo(function () {
|
|
@@ -91,132 +90,82 @@ var ArrayTableInner = observer(function (props) {
|
|
|
91
90
|
});
|
|
92
91
|
}, [props.gridKey, currentSchemes, columnSchemes]);
|
|
93
92
|
|
|
94
|
-
// 使用 ref 记录上次应用的方案 ID
|
|
95
|
-
var
|
|
96
|
-
schemeId: null,
|
|
97
|
-
configHash: null
|
|
98
|
-
});
|
|
93
|
+
// 使用 ref 记录上次应用的方案 ID,避免重复应用
|
|
94
|
+
var lastAppliedSchemeIdRef = useRef(null);
|
|
99
95
|
|
|
100
96
|
/**
|
|
101
|
-
*
|
|
97
|
+
* 方案自动加载
|
|
102
98
|
*
|
|
103
|
-
*
|
|
104
|
-
*
|
|
105
|
-
*
|
|
106
|
-
*
|
|
99
|
+
* 参考 ag-gridPlus 优化方案:
|
|
100
|
+
* 1. 使用 Promise 链确保顺序执行,避免竞态条件
|
|
101
|
+
* 2. 使用双重 RAF 确保渲染完成
|
|
102
|
+
* 3. 完整的错误处理和清理机制
|
|
107
103
|
*/
|
|
108
104
|
useEffect(function () {
|
|
109
105
|
// 检查必要条件
|
|
110
106
|
if (!props.gridKey || !gridApiState || !currentScheme) return;
|
|
111
107
|
if (!currentScheme.columnConfig || currentScheme.columnConfig.length === 0) return;
|
|
112
108
|
|
|
113
|
-
//
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
width: col.width,
|
|
122
|
-
hide: col.hide,
|
|
123
|
-
pinned: col.pinned
|
|
124
|
-
};
|
|
125
|
-
})
|
|
126
|
-
});
|
|
109
|
+
// 如果是同一个方案,跳过应用(避免重复应用)
|
|
110
|
+
if (currentScheme.id === lastAppliedSchemeIdRef.current) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
// 使用 Promise 链确保顺序执行,避免竞态条件
|
|
114
|
+
var cancelled = false;
|
|
115
|
+
Promise.resolve().then(function () {
|
|
116
|
+
if (cancelled || !gridApiState) return;
|
|
127
117
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
if (currentGridState.length !== currentScheme.columnConfig.length) {
|
|
133
|
-
isGridStateSameAsScheme = false;
|
|
134
|
-
} else {
|
|
135
|
-
// 比较前3列的关键属性
|
|
136
|
-
for (var i = 0; i < Math.min(3, currentGridState.length); i++) {
|
|
137
|
-
var gridCol = currentGridState[i];
|
|
138
|
-
var schemeCol = currentScheme.columnConfig[i];
|
|
139
|
-
if (schemeCol.type !== 'column') continue;
|
|
118
|
+
// 1. 检查是否包含分组配置
|
|
119
|
+
var hasGroups = currentScheme.columnConfig.some(function (item) {
|
|
120
|
+
return item.type === 'group';
|
|
121
|
+
});
|
|
140
122
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
isGridStateSameAsScheme = false;
|
|
146
|
-
break;
|
|
147
|
-
}
|
|
123
|
+
// 如果包含分组,先更新 columnDefs
|
|
124
|
+
if (hasGroups) {
|
|
125
|
+
var gridColumnDefs = flatConfigToGridState(currentScheme.columnConfig);
|
|
126
|
+
gridApiState.setGridOption('columnDefs', gridColumnDefs);
|
|
148
127
|
}
|
|
149
|
-
}
|
|
150
|
-
// 【关键】跳过应用的条件:
|
|
151
|
-
// 1. Grid 当前状态与方案配置一致(说明已经应用过或刚保存)
|
|
152
|
-
// 2. 方案配置与上次应用的相同(避免重复应用)
|
|
153
|
-
if (isGridStateSameAsScheme || schemeConfigHash === lastAppliedRef.current.configHash) {
|
|
154
|
-
// 更新记录,避免后续误判
|
|
155
|
-
lastAppliedRef.current = {
|
|
156
|
-
schemeId: currentScheme.id,
|
|
157
|
-
configHash: schemeConfigHash
|
|
158
|
-
};
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
128
|
|
|
162
|
-
|
|
163
|
-
var applyColumnStateAndFilter = function applyColumnStateAndFilter() {
|
|
164
|
-
if (!currentScheme || !gridApiState) return;
|
|
129
|
+
// 2. 应用列状态(列顺序、宽度、隐藏、固定等)
|
|
165
130
|
|
|
166
|
-
// 将扁平化的列配置转换为 AG-Grid 列状态
|
|
167
131
|
var columnState = flatConfigToColumnState(currentScheme.columnConfig);
|
|
168
|
-
|
|
169
|
-
// 应用列状态(包括列顺序、宽度、隐藏等)
|
|
170
132
|
gridApiState.applyColumnState({
|
|
171
133
|
state: columnState,
|
|
172
|
-
applyOrder: true
|
|
134
|
+
applyOrder: true
|
|
173
135
|
});
|
|
174
|
-
|
|
136
|
+
}).then(function () {
|
|
137
|
+
// 等待 Grid 状态稳定(使用 requestAnimationFrame 而非固定延迟)
|
|
138
|
+
return new Promise(function (resolve) {
|
|
139
|
+
if (cancelled) {
|
|
140
|
+
resolve();
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
requestAnimationFrame(function () {
|
|
144
|
+
// 双重 RAF 确保渲染完成
|
|
145
|
+
requestAnimationFrame(function () {
|
|
146
|
+
return resolve();
|
|
147
|
+
});
|
|
148
|
+
});
|
|
149
|
+
});
|
|
150
|
+
}).then(function () {
|
|
151
|
+
if (cancelled || !gridApiState) return;
|
|
152
|
+
|
|
153
|
+
// 3. 应用过滤器(在列状态稳定后执行)
|
|
175
154
|
if (currentScheme.filterModel) {
|
|
176
155
|
gridApiState.setFilterModel(currentScheme.filterModel);
|
|
177
156
|
}
|
|
178
157
|
|
|
179
|
-
//
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
};
|
|
184
|
-
};
|
|
185
|
-
|
|
186
|
-
// 使用 requestAnimationFrame 延迟应用
|
|
187
|
-
var rafId = requestAnimationFrame(function () {
|
|
188
|
-
try {
|
|
189
|
-
// 【关键检测】检查是否包含分组配置
|
|
190
|
-
var hasGroups = currentScheme.columnConfig.some(function (item) {
|
|
191
|
-
return item.type === 'group';
|
|
192
|
-
});
|
|
193
|
-
// 【条件更新】只有在包含分组时才更新 columnDefs
|
|
194
|
-
// 原因:array-table 的列是动态生成的,无分组时不应该覆盖动态列定义
|
|
195
|
-
if (hasGroups) {
|
|
196
|
-
var gridColumnDefs = flatConfigToGridState(currentScheme.columnConfig);
|
|
197
|
-
gridApiState.setGridOption('columnDefs', gridColumnDefs);
|
|
198
|
-
|
|
199
|
-
// 等待 columnDefs 更新完成后再应用列状态
|
|
200
|
-
setTimeout(function () {
|
|
201
|
-
try {
|
|
202
|
-
applyColumnStateAndFilter();
|
|
203
|
-
} catch (error) {
|
|
204
|
-
console.error('[ArrayTable] 应用列状态失败:', error);
|
|
205
|
-
}
|
|
206
|
-
}, 100);
|
|
207
|
-
} else {
|
|
208
|
-
// 无分组时,直接应用列状态即可
|
|
209
|
-
|
|
210
|
-
applyColumnStateAndFilter();
|
|
211
|
-
}
|
|
212
|
-
} catch (error) {
|
|
158
|
+
// 记录已应用的方案 ID
|
|
159
|
+
lastAppliedSchemeIdRef.current = currentScheme.id;
|
|
160
|
+
}).catch(function (error) {
|
|
161
|
+
if (!cancelled) {
|
|
213
162
|
console.error('[ArrayTable] 应用方案失败:', error);
|
|
214
163
|
}
|
|
215
164
|
});
|
|
216
165
|
|
|
217
|
-
//
|
|
166
|
+
// 清理函数:取消进行中的操作
|
|
218
167
|
return function () {
|
|
219
|
-
|
|
168
|
+
cancelled = true;
|
|
220
169
|
};
|
|
221
170
|
}, [props.gridKey, gridApiState, currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.id]);
|
|
222
171
|
|
|
@@ -284,8 +233,6 @@ var ArrayTableInner = observer(function (props) {
|
|
|
284
233
|
params.api.hidePopupMenu();
|
|
285
234
|
apiRef.current = params.api;
|
|
286
235
|
setGridApiState(params.api);
|
|
287
|
-
|
|
288
|
-
// 恢复列状态将由 useEffect 处理(使用方案系统)
|
|
289
236
|
},
|
|
290
237
|
suppressColumnVirtualisation: true,
|
|
291
238
|
gridOptions: {
|
|
@@ -333,8 +280,8 @@ var ArrayTableInner = observer(function (props) {
|
|
|
333
280
|
' <span data-ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>' + ' <span data-ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>' + ' <span data-ref="eSortNone" class="ag-header-icon ag-sort-none-icon"></span>' + " </div>" + "</div>"
|
|
334
281
|
}
|
|
335
282
|
},
|
|
336
|
-
getRowId: function getRowId(
|
|
337
|
-
var data =
|
|
283
|
+
getRowId: function getRowId(_ref) {
|
|
284
|
+
var data = _ref.data;
|
|
338
285
|
return data._id || data.id;
|
|
339
286
|
}
|
|
340
287
|
// rowDragEntireRow={true}
|