@nokecy/qc-ui 1.1.1 → 1.1.3
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.
- package/dist/cjs/ag-grid-plus/setting/ColumnSetting.js +16 -4
- package/dist/cjs/ag-grid-plus/setting/columnGroupUtils.js +3 -0
- package/dist/cjs/draggableModal/index.js +26 -3
- package/dist/esm/ag-grid-plus/setting/ColumnSetting.js +16 -4
- package/dist/esm/ag-grid-plus/setting/columnGroupUtils.js +3 -0
- package/dist/esm/draggableModal/index.js +27 -4
- package/dist/umd/qc-ui.min.js +1 -1
- package/package.json +1 -1
|
@@ -225,7 +225,7 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
225
225
|
* 将扁平化配置转换回 Grid State 并应用到 AG-Grid
|
|
226
226
|
*/
|
|
227
227
|
var handleSaveColumns = (0, _react.useCallback)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
228
|
-
var values, flatConfig, configToSave, gridColumnDefs, columnState;
|
|
228
|
+
var values, flatConfig, configToSave, invalidColumns, gridColumnDefs, columnState;
|
|
229
229
|
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
230
230
|
while (1) switch (_context2.prev = _context2.next) {
|
|
231
231
|
case 0:
|
|
@@ -243,16 +243,28 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
243
243
|
_antd.message.info('检测到旧版本配置,已自动迁移到新格式');
|
|
244
244
|
}
|
|
245
245
|
|
|
246
|
+
// 【修复】验证数据完整性,过滤掉无效的列配置
|
|
247
|
+
invalidColumns = configToSave.filter(function (item) {
|
|
248
|
+
return item.type === 'column' && !item.field;
|
|
249
|
+
});
|
|
250
|
+
if (invalidColumns.length > 0) {
|
|
251
|
+
_antd.message.warning("\u68C0\u6D4B\u5230 ".concat(invalidColumns.length, " \u4E2A\u5217\u7F3A\u5C11 field \u5B57\u6BB5\uFF0C\u5DF2\u81EA\u52A8\u8FC7\u6EE4"));
|
|
252
|
+
console.warn('[ColumnSetting] 无效的列配置:', invalidColumns);
|
|
253
|
+
configToSave = configToSave.filter(function (item) {
|
|
254
|
+
return item.type === 'group' || item.type === 'column' && item.field;
|
|
255
|
+
});
|
|
256
|
+
}
|
|
257
|
+
|
|
246
258
|
// 【修复】转换为 AG-Grid 的列定义,传入原始列定义以保留自定义属性
|
|
247
259
|
gridColumnDefs = (0, _columnGroupUtils.flatConfigToGridState)(configToSave, originalColumnDefs); // 【关键修复】先更新 columnDefs(处理分组结构变化)
|
|
248
260
|
gridApi.setGridOption('columnDefs', gridColumnDefs);
|
|
249
261
|
|
|
250
262
|
// 等待 columnDefs 更新完成
|
|
251
|
-
_context2.next =
|
|
263
|
+
_context2.next = 12;
|
|
252
264
|
return new Promise(function (resolve) {
|
|
253
265
|
return setTimeout(resolve, 100);
|
|
254
266
|
});
|
|
255
|
-
case
|
|
267
|
+
case 12:
|
|
256
268
|
// 【修复】然后应用列状态(宽度、隐藏、顺序等)
|
|
257
269
|
columnState = (0, _columnGroupUtils.flatConfigToColumnState)(configToSave);
|
|
258
270
|
gridApi.applyColumnState({
|
|
@@ -344,7 +356,7 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
344
356
|
|
|
345
357
|
// message.success 已经在上面的逻辑中处理了
|
|
346
358
|
onClose();
|
|
347
|
-
case
|
|
359
|
+
case 17:
|
|
348
360
|
case "end":
|
|
349
361
|
return _context2.stop();
|
|
350
362
|
}
|
|
@@ -322,6 +322,9 @@ function flatConfigToColumnState(flatConfig) {
|
|
|
322
322
|
return flatConfig.filter(function (item) {
|
|
323
323
|
return item.type === 'column';
|
|
324
324
|
}) // 只处理列节点,分组不在 columnState 中
|
|
325
|
+
.filter(function (item) {
|
|
326
|
+
return item.field;
|
|
327
|
+
}) // 【修复】过滤掉没有 field 的列,防止 colId 为 undefined
|
|
325
328
|
.sort(function (a, b) {
|
|
326
329
|
return a.order - b.order;
|
|
327
330
|
}) // 按 order 字段排序
|
|
@@ -9,7 +9,7 @@ var _antd = require("antd");
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _reactDraggable = _interopRequireDefault(require("react-draggable"));
|
|
11
11
|
require("./style.less");
|
|
12
|
-
var _excluded = ["wrapClassName", "width"];
|
|
12
|
+
var _excluded = ["wrapClassName", "width", "open"];
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
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); }
|
|
15
15
|
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; }
|
|
@@ -67,10 +67,24 @@ var DraggableModal = function DraggableModal(props) {
|
|
|
67
67
|
modalPosition = _useState12[0],
|
|
68
68
|
setModalPosition = _useState12[1];
|
|
69
69
|
|
|
70
|
-
// 解构 props,分离出 wrapClassName
|
|
70
|
+
// 解构 props,分离出 wrapClassName 和 open
|
|
71
71
|
var propsWrapClassName = props.wrapClassName,
|
|
72
72
|
width = props.width,
|
|
73
|
+
open = props.open,
|
|
73
74
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
75
|
+
|
|
76
|
+
// 修复 AgGrid 等组件在 Modal 中高度不展开的问题
|
|
77
|
+
// 当 Modal 打开时触发 window resize 事件
|
|
78
|
+
(0, _react.useEffect)(function () {
|
|
79
|
+
if (open) {
|
|
80
|
+
// 使用 requestAnimationFrame 和 setTimeout 确保 DOM 完全渲染
|
|
81
|
+
requestAnimationFrame(function () {
|
|
82
|
+
setTimeout(function () {
|
|
83
|
+
window.dispatchEvent(new Event('resize'));
|
|
84
|
+
}, 100);
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
}, [open]);
|
|
74
88
|
var _onStart = function onStart(_event, uiData) {
|
|
75
89
|
var _draggleRef$current;
|
|
76
90
|
var _window$document$docu = window.document.documentElement,
|
|
@@ -167,12 +181,20 @@ var DraggableModal = function DraggableModal(props) {
|
|
|
167
181
|
x: newLeft,
|
|
168
182
|
y: newTop
|
|
169
183
|
});
|
|
184
|
+
|
|
185
|
+
// 触发 window resize 事件,通知内部组件(如 AgGrid)重新计算尺寸
|
|
186
|
+
window.dispatchEvent(new Event('resize'));
|
|
170
187
|
};
|
|
171
188
|
var handleMouseUp = function handleMouseUp() {
|
|
172
189
|
setIsResizing(false);
|
|
173
190
|
setResizeDirection('');
|
|
174
191
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
175
192
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
193
|
+
|
|
194
|
+
// 拖拽结束后再次触发 resize 事件,确保内部组件完全更新
|
|
195
|
+
setTimeout(function () {
|
|
196
|
+
window.dispatchEvent(new Event('resize'));
|
|
197
|
+
}, 50);
|
|
176
198
|
};
|
|
177
199
|
document.addEventListener('mousemove', handleMouseMove);
|
|
178
200
|
document.addEventListener('mouseup', handleMouseUp);
|
|
@@ -183,7 +205,8 @@ var DraggableModal = function DraggableModal(props) {
|
|
|
183
205
|
var mergedWrapClassName = [propsWrapClassName, resizingClass].filter(Boolean).join(' ');
|
|
184
206
|
return /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
|
|
185
207
|
maskClosable: false,
|
|
186
|
-
width: width
|
|
208
|
+
width: width,
|
|
209
|
+
open: open
|
|
187
210
|
}, restProps, {
|
|
188
211
|
wrapClassName: mergedWrapClassName,
|
|
189
212
|
title: /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -216,7 +216,7 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
216
216
|
* 将扁平化配置转换回 Grid State 并应用到 AG-Grid
|
|
217
217
|
*/
|
|
218
218
|
var handleSaveColumns = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
|
|
219
|
-
var values, flatConfig, configToSave, gridColumnDefs, columnState;
|
|
219
|
+
var values, flatConfig, configToSave, invalidColumns, gridColumnDefs, columnState;
|
|
220
220
|
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
221
221
|
while (1) switch (_context2.prev = _context2.next) {
|
|
222
222
|
case 0:
|
|
@@ -234,16 +234,28 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
234
234
|
message.info('检测到旧版本配置,已自动迁移到新格式');
|
|
235
235
|
}
|
|
236
236
|
|
|
237
|
+
// 【修复】验证数据完整性,过滤掉无效的列配置
|
|
238
|
+
invalidColumns = configToSave.filter(function (item) {
|
|
239
|
+
return item.type === 'column' && !item.field;
|
|
240
|
+
});
|
|
241
|
+
if (invalidColumns.length > 0) {
|
|
242
|
+
message.warning("\u68C0\u6D4B\u5230 ".concat(invalidColumns.length, " \u4E2A\u5217\u7F3A\u5C11 field \u5B57\u6BB5\uFF0C\u5DF2\u81EA\u52A8\u8FC7\u6EE4"));
|
|
243
|
+
console.warn('[ColumnSetting] 无效的列配置:', invalidColumns);
|
|
244
|
+
configToSave = configToSave.filter(function (item) {
|
|
245
|
+
return item.type === 'group' || item.type === 'column' && item.field;
|
|
246
|
+
});
|
|
247
|
+
}
|
|
248
|
+
|
|
237
249
|
// 【修复】转换为 AG-Grid 的列定义,传入原始列定义以保留自定义属性
|
|
238
250
|
gridColumnDefs = flatConfigToGridState(configToSave, originalColumnDefs); // 【关键修复】先更新 columnDefs(处理分组结构变化)
|
|
239
251
|
gridApi.setGridOption('columnDefs', gridColumnDefs);
|
|
240
252
|
|
|
241
253
|
// 等待 columnDefs 更新完成
|
|
242
|
-
_context2.next =
|
|
254
|
+
_context2.next = 12;
|
|
243
255
|
return new Promise(function (resolve) {
|
|
244
256
|
return setTimeout(resolve, 100);
|
|
245
257
|
});
|
|
246
|
-
case
|
|
258
|
+
case 12:
|
|
247
259
|
// 【修复】然后应用列状态(宽度、隐藏、顺序等)
|
|
248
260
|
columnState = flatConfigToColumnState(configToSave);
|
|
249
261
|
gridApi.applyColumnState({
|
|
@@ -335,7 +347,7 @@ var ColumnSetting = function ColumnSetting(_ref) {
|
|
|
335
347
|
|
|
336
348
|
// message.success 已经在上面的逻辑中处理了
|
|
337
349
|
onClose();
|
|
338
|
-
case
|
|
350
|
+
case 17:
|
|
339
351
|
case "end":
|
|
340
352
|
return _context2.stop();
|
|
341
353
|
}
|
|
@@ -306,6 +306,9 @@ export function flatConfigToColumnState(flatConfig) {
|
|
|
306
306
|
return flatConfig.filter(function (item) {
|
|
307
307
|
return item.type === 'column';
|
|
308
308
|
}) // 只处理列节点,分组不在 columnState 中
|
|
309
|
+
.filter(function (item) {
|
|
310
|
+
return item.field;
|
|
311
|
+
}) // 【修复】过滤掉没有 field 的列,防止 colId 为 undefined
|
|
309
312
|
.sort(function (a, b) {
|
|
310
313
|
return a.order - b.order;
|
|
311
314
|
}) // 按 order 字段排序
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _excluded = ["wrapClassName", "width"];
|
|
1
|
+
var _excluded = ["wrapClassName", "width", "open"];
|
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
@@ -9,7 +9,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
9
9
|
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; } }
|
|
10
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
11
|
import { Modal } from 'antd';
|
|
12
|
-
import React, { useRef, useState } from 'react';
|
|
12
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
13
13
|
import Draggable from 'react-draggable';
|
|
14
14
|
import "./style.less";
|
|
15
15
|
|
|
@@ -58,10 +58,24 @@ var DraggableModal = function DraggableModal(props) {
|
|
|
58
58
|
modalPosition = _useState12[0],
|
|
59
59
|
setModalPosition = _useState12[1];
|
|
60
60
|
|
|
61
|
-
// 解构 props,分离出 wrapClassName
|
|
61
|
+
// 解构 props,分离出 wrapClassName 和 open
|
|
62
62
|
var propsWrapClassName = props.wrapClassName,
|
|
63
63
|
width = props.width,
|
|
64
|
+
open = props.open,
|
|
64
65
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
66
|
+
|
|
67
|
+
// 修复 AgGrid 等组件在 Modal 中高度不展开的问题
|
|
68
|
+
// 当 Modal 打开时触发 window resize 事件
|
|
69
|
+
useEffect(function () {
|
|
70
|
+
if (open) {
|
|
71
|
+
// 使用 requestAnimationFrame 和 setTimeout 确保 DOM 完全渲染
|
|
72
|
+
requestAnimationFrame(function () {
|
|
73
|
+
setTimeout(function () {
|
|
74
|
+
window.dispatchEvent(new Event('resize'));
|
|
75
|
+
}, 100);
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
}, [open]);
|
|
65
79
|
var _onStart = function onStart(_event, uiData) {
|
|
66
80
|
var _draggleRef$current;
|
|
67
81
|
var _window$document$docu = window.document.documentElement,
|
|
@@ -158,12 +172,20 @@ var DraggableModal = function DraggableModal(props) {
|
|
|
158
172
|
x: newLeft,
|
|
159
173
|
y: newTop
|
|
160
174
|
});
|
|
175
|
+
|
|
176
|
+
// 触发 window resize 事件,通知内部组件(如 AgGrid)重新计算尺寸
|
|
177
|
+
window.dispatchEvent(new Event('resize'));
|
|
161
178
|
};
|
|
162
179
|
var handleMouseUp = function handleMouseUp() {
|
|
163
180
|
setIsResizing(false);
|
|
164
181
|
setResizeDirection('');
|
|
165
182
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
166
183
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
184
|
+
|
|
185
|
+
// 拖拽结束后再次触发 resize 事件,确保内部组件完全更新
|
|
186
|
+
setTimeout(function () {
|
|
187
|
+
window.dispatchEvent(new Event('resize'));
|
|
188
|
+
}, 50);
|
|
167
189
|
};
|
|
168
190
|
document.addEventListener('mousemove', handleMouseMove);
|
|
169
191
|
document.addEventListener('mouseup', handleMouseUp);
|
|
@@ -174,7 +196,8 @@ var DraggableModal = function DraggableModal(props) {
|
|
|
174
196
|
var mergedWrapClassName = [propsWrapClassName, resizingClass].filter(Boolean).join(' ');
|
|
175
197
|
return /*#__PURE__*/React.createElement(Modal, _extends({
|
|
176
198
|
maskClosable: false,
|
|
177
|
-
width: width
|
|
199
|
+
width: width,
|
|
200
|
+
open: open
|
|
178
201
|
}, restProps, {
|
|
179
202
|
wrapClassName: mergedWrapClassName,
|
|
180
203
|
title: /*#__PURE__*/React.createElement("div", {
|