@nokecy/qc-ui 1.1.4 → 1.1.5
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/ColumnConfigTable.d.ts +4 -12
- package/dist/cjs/ag-grid-plus/setting/ColumnConfigTable.js +607 -869
- package/dist/cjs/ag-grid-plus/setting/ColumnSetting.js +6 -1
- package/dist/cjs/ag-grid-plus/setting/DebounceInputs.d.ts +39 -0
- package/dist/cjs/ag-grid-plus/setting/DebounceInputs.js +144 -0
- package/dist/cjs/ag-grid-plus/setting/QuerySchemeManager.js +356 -291
- package/dist/cjs/ag-grid-plus/setting/columnGroupTypes.d.ts +4 -0
- package/dist/cjs/ag-grid-plus/setting/index.js +1 -1
- package/dist/cjs/ag-grid-plus/setting/performanceMonitor.d.ts +9 -0
- package/dist/cjs/ag-grid-plus/setting/performanceMonitor.js +48 -0
- package/dist/esm/ag-grid-plus/setting/ColumnConfigTable.d.ts +4 -12
- package/dist/esm/ag-grid-plus/setting/ColumnConfigTable.js +611 -872
- package/dist/esm/ag-grid-plus/setting/ColumnSetting.js +6 -1
- package/dist/esm/ag-grid-plus/setting/DebounceInputs.d.ts +39 -0
- package/dist/esm/ag-grid-plus/setting/DebounceInputs.js +136 -0
- package/dist/esm/ag-grid-plus/setting/QuerySchemeManager.js +360 -294
- package/dist/esm/ag-grid-plus/setting/columnGroupTypes.d.ts +4 -0
- package/dist/esm/ag-grid-plus/setting/index.js +1 -1
- package/dist/esm/ag-grid-plus/setting/performanceMonitor.d.ts +9 -0
- package/dist/esm/ag-grid-plus/setting/performanceMonitor.js +42 -0
- package/dist/umd/qc-ui.min.js +1 -1
- package/package.json +1 -1
|
@@ -5,338 +5,533 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
|
-
var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
|
|
9
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
9
|
var _antd = require("antd");
|
|
11
10
|
var _icons = require("@ant-design/icons");
|
|
12
|
-
var
|
|
13
|
-
var _reactDndHtml5Backend = require("react-dnd-html5-backend");
|
|
11
|
+
var _agGridReact = require("ag-grid-react");
|
|
14
12
|
var _columnGroupUtils = require("./columnGroupUtils");
|
|
15
|
-
var
|
|
16
|
-
var
|
|
13
|
+
var _DebounceInputs = require("./DebounceInputs");
|
|
14
|
+
var _theme = require("../theme");
|
|
17
15
|
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); }
|
|
18
16
|
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; }
|
|
19
|
-
function
|
|
17
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
18
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
19
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
20
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
20
21
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
22
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
22
23
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
23
24
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
24
25
|
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); }
|
|
25
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
26
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
27
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
28
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
29
|
-
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); }
|
|
30
|
-
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; }
|
|
31
|
-
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; }
|
|
32
26
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
33
27
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
34
28
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
35
29
|
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; }
|
|
36
30
|
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; } }
|
|
37
31
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /**
|
|
38
|
-
* 列配置表格组件
|
|
39
|
-
*
|
|
40
|
-
* 通过 React useState 直接管理数据状态,确保 type 字段不会丢失
|
|
41
|
-
*/
|
|
42
|
-
var DRAG_TYPE = 'COLUMN_ROW';
|
|
43
|
-
/**
|
|
44
|
-
* 受控的名称输入组件 - 解决光标跳出问题
|
|
45
|
-
* 通过内部维护输入状态,只在失去焦点时同步到父组件
|
|
32
|
+
* 列配置表格组件 - AG-Grid 版本
|
|
33
|
+
* 使用 AG-Grid 替代 Ant Design Table,性能更优
|
|
46
34
|
*/
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
setLocalValue(e.target.value);
|
|
65
|
-
};
|
|
35
|
+
// ==================== Cell Renderers ====================
|
|
36
|
+
|
|
37
|
+
/** 类型标签 */
|
|
38
|
+
var TypeCellRenderer = function TypeCellRenderer(props) {
|
|
39
|
+
var item = props.data;
|
|
40
|
+
if (!item) return null;
|
|
41
|
+
if (item.type === 'group') {
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Tag, {
|
|
43
|
+
color: "blue",
|
|
44
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.FolderOutlined, null)
|
|
45
|
+
}, "\u5206\u7EC4");
|
|
46
|
+
}
|
|
47
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Tag, {
|
|
48
|
+
color: "green",
|
|
49
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.FileOutlined, null)
|
|
50
|
+
}, "\u5217");
|
|
51
|
+
};
|
|
66
52
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
53
|
+
/** 名称列 (带拖拽图标和缩进) */
|
|
54
|
+
var NameCellRenderer = function NameCellRenderer(props) {
|
|
55
|
+
var item = props.data;
|
|
56
|
+
if (!item) return null;
|
|
57
|
+
var paddingLeft = (item.level || 0) * 20;
|
|
58
|
+
|
|
59
|
+
// 从 props 中获取自定义参数
|
|
60
|
+
var _ref = props,
|
|
61
|
+
expandedKeys = _ref.expandedKeys,
|
|
62
|
+
onToggleExpand = _ref.onToggleExpand,
|
|
63
|
+
allItems = _ref.allItems;
|
|
64
|
+
|
|
65
|
+
// 检查是否有子节点
|
|
66
|
+
var hasChildren = allItems === null || allItems === void 0 ? void 0 : allItems.some(function (i) {
|
|
67
|
+
return i.parentId === item.id;
|
|
68
|
+
});
|
|
69
|
+
var isExpanded = expandedKeys === null || expandedKeys === void 0 ? void 0 : expandedKeys.has(item.id);
|
|
70
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
71
|
+
style: {
|
|
72
|
+
display: 'flex',
|
|
73
|
+
alignItems: 'center',
|
|
74
|
+
gap: 8,
|
|
75
|
+
paddingLeft: paddingLeft
|
|
71
76
|
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
77
|
+
}, item.type === 'group' && hasChildren ? /*#__PURE__*/_react.default.createElement("span", {
|
|
78
|
+
onClick: function onClick() {
|
|
79
|
+
return onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand(item.id);
|
|
80
|
+
},
|
|
81
|
+
style: {
|
|
82
|
+
cursor: 'pointer',
|
|
83
|
+
width: 16,
|
|
84
|
+
display: 'inline-block'
|
|
78
85
|
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
86
|
+
}, isExpanded ? '▼' : '▶') : /*#__PURE__*/_react.default.createElement("span", {
|
|
87
|
+
style: {
|
|
88
|
+
width: 16,
|
|
89
|
+
display: 'inline-block'
|
|
90
|
+
}
|
|
91
|
+
}), /*#__PURE__*/_react.default.createElement(_icons.HolderOutlined, {
|
|
92
|
+
style: {
|
|
93
|
+
color: '#999',
|
|
94
|
+
cursor: 'grab'
|
|
95
|
+
}
|
|
96
|
+
}), /*#__PURE__*/_react.default.createElement(_antd.Input, {
|
|
97
|
+
value: item.headerName || '',
|
|
98
|
+
onChange: function onChange(e) {
|
|
99
|
+
if (props.node) {
|
|
100
|
+
props.node.setDataValue('headerName', e.target.value);
|
|
101
|
+
}
|
|
102
|
+
},
|
|
85
103
|
bordered: false,
|
|
86
|
-
placeholder:
|
|
104
|
+
placeholder: "\u8F93\u5165\u540D\u79F0",
|
|
87
105
|
style: {
|
|
88
|
-
flex: 1
|
|
89
|
-
|
|
106
|
+
flex: 1
|
|
107
|
+
}
|
|
108
|
+
}));
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
/** 宽度输入 */
|
|
112
|
+
var WidthCellRenderer = function WidthCellRenderer(props) {
|
|
113
|
+
var item = props.data;
|
|
114
|
+
if (!item || item.type !== 'column') return /*#__PURE__*/_react.default.createElement("span", null, "-");
|
|
115
|
+
return /*#__PURE__*/_react.default.createElement(_DebounceInputs.DebounceNumberInput, {
|
|
116
|
+
value: item.width || 150,
|
|
117
|
+
onChange: function onChange(val) {
|
|
118
|
+
if (props.node) {
|
|
119
|
+
props.node.setDataValue('width', val);
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
min: 50,
|
|
123
|
+
max: 1000,
|
|
124
|
+
style: {
|
|
125
|
+
width: '100%'
|
|
90
126
|
}
|
|
91
127
|
});
|
|
92
128
|
};
|
|
93
129
|
|
|
94
|
-
/**
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
var
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
130
|
+
/** Switch 渲染器工厂 */
|
|
131
|
+
var createSwitchRenderer = function createSwitchRenderer(field) {
|
|
132
|
+
return function (props) {
|
|
133
|
+
var item = props.data;
|
|
134
|
+
if (!item || item.type !== 'column') return /*#__PURE__*/_react.default.createElement("span", null, "-");
|
|
135
|
+
|
|
136
|
+
// 获取字段值
|
|
137
|
+
var fieldValue = item[field];
|
|
138
|
+
|
|
139
|
+
// 只检查布尔值
|
|
140
|
+
var isChecked = fieldValue === true;
|
|
141
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Switch, {
|
|
142
|
+
checked: isChecked,
|
|
143
|
+
onChange: function onChange(checked) {
|
|
144
|
+
if (props.node) {
|
|
145
|
+
// 保存时统一为布尔值
|
|
146
|
+
props.node.setDataValue(field, checked);
|
|
147
|
+
}
|
|
111
148
|
},
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
149
|
+
size: "small"
|
|
150
|
+
});
|
|
151
|
+
};
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
/** 列过滤按钮渲染器 (注意:suppressHeaderFilterButton 字段为 true 时表示"禁用"过滤按钮) */
|
|
155
|
+
var SuppressFilterButtonRenderer = function SuppressFilterButtonRenderer(props) {
|
|
156
|
+
var item = props.data;
|
|
157
|
+
if (!item || item.type !== 'column') return /*#__PURE__*/_react.default.createElement("span", null, "-");
|
|
158
|
+
|
|
159
|
+
// 注意:suppressHeaderFilterButton = true 表示"禁用"过滤按钮
|
|
160
|
+
// 所以 Switch 显示需要取反:checked 表示"启用"过滤
|
|
161
|
+
var isFilterEnabled = !item.suppressHeaderFilterButton;
|
|
162
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Switch, {
|
|
163
|
+
checked: isFilterEnabled,
|
|
164
|
+
onChange: function onChange(checked) {
|
|
165
|
+
if (props.node) {
|
|
166
|
+
// 取反保存:checked=true 表示启用过滤,保存为 false
|
|
167
|
+
props.node.setDataValue('suppressHeaderFilterButton', !checked);
|
|
116
168
|
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
169
|
+
},
|
|
170
|
+
size: "small"
|
|
171
|
+
});
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
/** Select 下拉框渲染器 */
|
|
175
|
+
var FlexCellRenderer = function FlexCellRenderer(props) {
|
|
176
|
+
var item = props.data;
|
|
177
|
+
if (!item || item.type !== 'column') return /*#__PURE__*/_react.default.createElement("span", null, "-");
|
|
178
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Select, {
|
|
179
|
+
value: item.flex || 0,
|
|
180
|
+
onChange: function onChange(val) {
|
|
181
|
+
if (props.node) {
|
|
182
|
+
props.node.setDataValue('flex', val);
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
style: {
|
|
186
|
+
width: '100%'
|
|
187
|
+
},
|
|
188
|
+
options: [{
|
|
189
|
+
value: 1,
|
|
190
|
+
label: '占满'
|
|
191
|
+
}, {
|
|
192
|
+
value: 0,
|
|
193
|
+
label: '不占满'
|
|
194
|
+
}],
|
|
195
|
+
size: "small"
|
|
196
|
+
});
|
|
197
|
+
};
|
|
198
|
+
var PinnedCellRenderer = function PinnedCellRenderer(props) {
|
|
199
|
+
var item = props.data;
|
|
200
|
+
if (!item || item.type !== 'column') return /*#__PURE__*/_react.default.createElement("span", null, "-");
|
|
201
|
+
|
|
202
|
+
// 标准化 pinned 值 - 处理旧版本的 notPinned
|
|
203
|
+
var normalizedValue = !item.pinned || item.pinned === 'notPinned' ? 'none' : item.pinned;
|
|
204
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Select, {
|
|
205
|
+
value: normalizedValue,
|
|
206
|
+
onChange: function onChange(val) {
|
|
207
|
+
if (props.node) {
|
|
208
|
+
// 保存时将 none 转换为 undefined 或 null
|
|
209
|
+
props.node.setDataValue('pinned', val === 'none' ? null : val);
|
|
150
210
|
}
|
|
151
|
-
}
|
|
152
|
-
_useDrop2 = _slicedToArray(_useDrop, 2),
|
|
153
|
-
drop = _useDrop2[1];
|
|
154
|
-
drag(drop(ref));
|
|
155
|
-
return /*#__PURE__*/_react.default.createElement("tr", _extends({
|
|
156
|
-
ref: ref
|
|
157
|
-
}, restProps, {
|
|
211
|
+
},
|
|
158
212
|
style: {
|
|
159
|
-
|
|
160
|
-
|
|
213
|
+
width: '100%'
|
|
214
|
+
},
|
|
215
|
+
options: [{
|
|
216
|
+
value: 'none',
|
|
217
|
+
label: '不固定'
|
|
218
|
+
}, {
|
|
219
|
+
value: 'left',
|
|
220
|
+
label: '左侧'
|
|
221
|
+
}, {
|
|
222
|
+
value: 'right',
|
|
223
|
+
label: '右侧'
|
|
224
|
+
}],
|
|
225
|
+
size: "small"
|
|
226
|
+
});
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
/** 操作列 */
|
|
230
|
+
var ActionCellRenderer = function ActionCellRenderer(props) {
|
|
231
|
+
var item = props.data;
|
|
232
|
+
if (!item) return null;
|
|
233
|
+
|
|
234
|
+
// 从 props 中获取自定义参数
|
|
235
|
+
var _ref2 = props,
|
|
236
|
+
onDelete = _ref2.onDelete,
|
|
237
|
+
onAddChildGroup = _ref2.onAddChildGroup,
|
|
238
|
+
simple = _ref2.simple;
|
|
239
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Space, {
|
|
240
|
+
size: "small"
|
|
241
|
+
}, !simple && item.type === 'group' && /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
242
|
+
type: "link",
|
|
243
|
+
size: "small",
|
|
244
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.FolderAddOutlined, null),
|
|
245
|
+
onClick: function onClick() {
|
|
246
|
+
return onAddChildGroup === null || onAddChildGroup === void 0 ? void 0 : onAddChildGroup(item.id);
|
|
161
247
|
}
|
|
162
|
-
}),
|
|
248
|
+
}, "\u6DFB\u52A0\u5B50\u5206\u7EC4"), item.type === 'group' && /*#__PURE__*/_react.default.createElement(_antd.Popconfirm, {
|
|
249
|
+
title: "\u5220\u9664\u5206\u7EC4\u540E,\u5176\u5B50\u9879\u5C06\u79FB\u81F3\u6839\u7EA7\u522B,\u786E\u5B9A\u5220\u9664\u5417?",
|
|
250
|
+
onConfirm: function onConfirm() {
|
|
251
|
+
return onDelete === null || onDelete === void 0 ? void 0 : onDelete(item.id);
|
|
252
|
+
}
|
|
253
|
+
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
254
|
+
type: "link",
|
|
255
|
+
danger: true,
|
|
256
|
+
size: "small",
|
|
257
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null)
|
|
258
|
+
}, "\u5220\u9664")));
|
|
163
259
|
};
|
|
164
260
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
*/
|
|
261
|
+
// ==================== 主组件 ====================
|
|
262
|
+
|
|
168
263
|
var ColumnConfigTable = function ColumnConfigTable(_ref3) {
|
|
169
264
|
var items = _ref3.items,
|
|
170
265
|
onChange = _ref3.onChange,
|
|
171
266
|
_ref3$simple = _ref3.simple,
|
|
172
267
|
simple = _ref3$simple === void 0 ? false : _ref3$simple,
|
|
173
|
-
scrollY = _ref3.scrollY
|
|
174
|
-
|
|
175
|
-
var
|
|
268
|
+
_ref3$scrollY = _ref3.scrollY,
|
|
269
|
+
scrollY = _ref3$scrollY === void 0 ? 480 : _ref3$scrollY;
|
|
270
|
+
var _useState = (0, _react.useState)(items),
|
|
271
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
272
|
+
localItems = _useState2[0],
|
|
273
|
+
setLocalItems = _useState2[1];
|
|
274
|
+
var _useState3 = (0, _react.useState)(new Set()),
|
|
176
275
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
tableHeight = _useState10[0],
|
|
195
|
-
setTableHeight = _useState10[1];
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* 同步更新本地状态和通知父组件
|
|
199
|
-
*/
|
|
276
|
+
expandedKeys = _useState4[0],
|
|
277
|
+
setExpandedKeys = _useState4[1];
|
|
278
|
+
var gridApiRef = (0, _react.useRef)();
|
|
279
|
+
|
|
280
|
+
// 同步外部数据
|
|
281
|
+
_react.default.useEffect(function () {
|
|
282
|
+
setLocalItems(items);
|
|
283
|
+
// 默认展开所有分组
|
|
284
|
+
var allGroupIds = items.filter(function (item) {
|
|
285
|
+
return item.type === 'group';
|
|
286
|
+
}).map(function (item) {
|
|
287
|
+
return item.id;
|
|
288
|
+
});
|
|
289
|
+
setExpandedKeys(new Set(allGroupIds));
|
|
290
|
+
}, [items]);
|
|
291
|
+
|
|
292
|
+
// 更新数据并同步到父组件
|
|
200
293
|
var updateItems = (0, _react.useCallback)(function (newItems) {
|
|
201
|
-
|
|
202
|
-
(
|
|
203
|
-
setLocalItems(_toConsumableArray(newItems));
|
|
204
|
-
onChange(_toConsumableArray(newItems));
|
|
294
|
+
setLocalItems(newItems);
|
|
295
|
+
onChange(newItems);
|
|
205
296
|
}, [onChange]);
|
|
206
297
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
var debouncedUpdateItems = (0, _react.useMemo)(function () {
|
|
212
|
-
return (0, _debounce2.default)(function (newItems) {
|
|
213
|
-
(0, _columnGroupUtils.reorderItems)(newItems);
|
|
214
|
-
onChange(_toConsumableArray(newItems));
|
|
215
|
-
}, 300);
|
|
216
|
-
}, [onChange]);
|
|
298
|
+
// Grid 准备完成
|
|
299
|
+
var onGridReady = (0, _react.useCallback)(function (params) {
|
|
300
|
+
gridApiRef.current = params.api;
|
|
301
|
+
}, []);
|
|
217
302
|
|
|
218
|
-
//
|
|
219
|
-
(0, _react.
|
|
220
|
-
|
|
221
|
-
|
|
303
|
+
// 递归获取节点的所有子孙节点ID
|
|
304
|
+
var getAllDescendantIds = (0, _react.useCallback)(function (nodeId) {
|
|
305
|
+
var descendants = new Set();
|
|
306
|
+
var findDescendants = function findDescendants(id) {
|
|
307
|
+
localItems.forEach(function (item) {
|
|
308
|
+
if (item.parentId === id) {
|
|
309
|
+
descendants.add(item.id);
|
|
310
|
+
findDescendants(item.id); // 递归查找子孙
|
|
311
|
+
}
|
|
312
|
+
});
|
|
222
313
|
};
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
314
|
+
findDescendants(nodeId);
|
|
315
|
+
return descendants;
|
|
316
|
+
}, [localItems]);
|
|
317
|
+
|
|
318
|
+
// 递归更新节点及其所有子孙节点的 level
|
|
319
|
+
var updateNodeLevels = (0, _react.useCallback)(function (items, nodeId, newLevel) {
|
|
320
|
+
return items.map(function (item) {
|
|
321
|
+
if (item.id === nodeId) {
|
|
322
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
323
|
+
level: newLevel
|
|
324
|
+
});
|
|
325
|
+
}
|
|
326
|
+
// 如果是子节点,递归更新
|
|
327
|
+
if (item.parentId === nodeId) {
|
|
328
|
+
return updateNodeLevels([_objectSpread(_objectSpread({}, item), {}, {
|
|
329
|
+
level: newLevel + 1
|
|
330
|
+
})], item.id, newLevel + 1)[0];
|
|
331
|
+
}
|
|
332
|
+
return item;
|
|
333
|
+
});
|
|
334
|
+
}, []);
|
|
335
|
+
|
|
336
|
+
// 行拖拽结束
|
|
337
|
+
var onRowDragEnd = (0, _react.useCallback)(function (event) {
|
|
338
|
+
var _event$overNode;
|
|
339
|
+
var movingNode = event.node.data;
|
|
340
|
+
var overNode = (_event$overNode = event.overNode) === null || _event$overNode === void 0 ? void 0 : _event$overNode.data;
|
|
341
|
+
if (!movingNode || !overNode || movingNode.id === overNode.id) return;
|
|
342
|
+
|
|
343
|
+
// 检查是否拖动到分组上(移入分组)
|
|
344
|
+
if (overNode.type === 'group') {
|
|
345
|
+
// 防止将分组拖入其子孙节点
|
|
346
|
+
if (movingNode.type === 'group') {
|
|
347
|
+
var descendantIds = getAllDescendantIds(movingNode.id);
|
|
348
|
+
if (descendantIds.has(overNode.id)) {
|
|
349
|
+
_antd.message.error('不能将分组移入其子孙节点');
|
|
350
|
+
return;
|
|
254
351
|
}
|
|
255
352
|
}
|
|
256
|
-
};
|
|
257
353
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
354
|
+
// 收集需要移动的所有节点(包括子孙节点)
|
|
355
|
+
var movingIds = new Set([movingNode.id]);
|
|
356
|
+
if (movingNode.type === 'group') {
|
|
357
|
+
var descendants = getAllDescendantIds(movingNode.id);
|
|
358
|
+
descendants.forEach(function (id) {
|
|
359
|
+
return movingIds.add(id);
|
|
360
|
+
});
|
|
361
|
+
}
|
|
261
362
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
363
|
+
// 1. 分离出不移动的节点和要移动的节点
|
|
364
|
+
var nonMovingItems = [];
|
|
365
|
+
var movingItems = [];
|
|
366
|
+
localItems.forEach(function (item) {
|
|
367
|
+
if (movingIds.has(item.id)) {
|
|
368
|
+
movingItems.push(item);
|
|
369
|
+
} else {
|
|
370
|
+
nonMovingItems.push(item);
|
|
371
|
+
}
|
|
372
|
+
});
|
|
373
|
+
|
|
374
|
+
// 2. 在目标分组的子节点末尾找到插入位置
|
|
375
|
+
var targetGroupIndex = nonMovingItems.findIndex(function (item) {
|
|
376
|
+
return item.id === overNode.id;
|
|
377
|
+
});
|
|
378
|
+
var insertIndex = targetGroupIndex + 1;
|
|
379
|
+
|
|
380
|
+
// 找到目标分组的最后一个子节点位置
|
|
381
|
+
while (insertIndex < nonMovingItems.length && nonMovingItems[insertIndex].parentId === overNode.id) {
|
|
382
|
+
insertIndex++;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
// 3. 更新移动节点的父节点和层级
|
|
386
|
+
var newLevel = (overNode.level || 0) + 1;
|
|
387
|
+
var levelDiff = newLevel - (movingNode.level || 0);
|
|
388
|
+
var updatedMovingItems = movingItems.map(function (item) {
|
|
389
|
+
if (item.id === movingNode.id) {
|
|
390
|
+
// 主节点:更新父节点和层级
|
|
391
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
392
|
+
parentId: overNode.id,
|
|
393
|
+
level: newLevel
|
|
394
|
+
});
|
|
395
|
+
} else {
|
|
396
|
+
// 子孙节点:只更新层级(保持原有的 parentId)
|
|
397
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
398
|
+
level: (item.level || 0) + levelDiff
|
|
399
|
+
});
|
|
400
|
+
}
|
|
401
|
+
});
|
|
402
|
+
|
|
403
|
+
// 4. 合并数组并重新计算 order
|
|
404
|
+
var result = [].concat(_toConsumableArray(nonMovingItems.slice(0, insertIndex)), _toConsumableArray(updatedMovingItems), _toConsumableArray(nonMovingItems.slice(insertIndex)));
|
|
405
|
+
var finalItems = result.map(function (item, index) {
|
|
406
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
407
|
+
order: index
|
|
408
|
+
});
|
|
275
409
|
});
|
|
410
|
+
|
|
411
|
+
// 自动展开目标分组
|
|
412
|
+
setExpandedKeys(function (prev) {
|
|
413
|
+
return new Set(prev).add(overNode.id);
|
|
414
|
+
});
|
|
415
|
+
updateItems(finalItems);
|
|
416
|
+
_antd.message.success("\u5DF2\u79FB\u52A8\u5230 ".concat(overNode.headerName));
|
|
417
|
+
return;
|
|
276
418
|
}
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
419
|
+
|
|
420
|
+
// 同级拖拽排序
|
|
421
|
+
if (movingNode.parentId === overNode.parentId) {
|
|
422
|
+
// 收集需要移动的所有节点(包括子孙节点)
|
|
423
|
+
var _movingIds = new Set([movingNode.id]);
|
|
424
|
+
if (movingNode.type === 'group') {
|
|
425
|
+
var _descendants = getAllDescendantIds(movingNode.id);
|
|
426
|
+
_descendants.forEach(function (id) {
|
|
427
|
+
return _movingIds.add(id);
|
|
428
|
+
});
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
// 分离出不移动的节点和要移动的节点
|
|
432
|
+
var _nonMovingItems = [];
|
|
433
|
+
var _movingItems = [];
|
|
434
|
+
localItems.forEach(function (item) {
|
|
435
|
+
if (_movingIds.has(item.id)) {
|
|
436
|
+
_movingItems.push(item);
|
|
437
|
+
} else {
|
|
438
|
+
_nonMovingItems.push(item);
|
|
439
|
+
}
|
|
440
|
+
});
|
|
441
|
+
|
|
442
|
+
// 找到目标节点的位置
|
|
443
|
+
var overIndex = _nonMovingItems.findIndex(function (item) {
|
|
444
|
+
return item.id === overNode.id;
|
|
445
|
+
});
|
|
446
|
+
if (overIndex === -1) return;
|
|
447
|
+
|
|
448
|
+
// 找到移动节点原本的位置
|
|
449
|
+
var originalMovingIndex = localItems.findIndex(function (item) {
|
|
450
|
+
return item.id === movingNode.id;
|
|
281
451
|
});
|
|
452
|
+
var originalOverIndex = localItems.findIndex(function (item) {
|
|
453
|
+
return item.id === overNode.id;
|
|
454
|
+
});
|
|
455
|
+
|
|
456
|
+
// 根据原始位置判断插入位置
|
|
457
|
+
var _insertIndex = originalMovingIndex < originalOverIndex ? overIndex + 1 : overIndex;
|
|
458
|
+
|
|
459
|
+
// 插入到新位置
|
|
460
|
+
var _result = [].concat(_toConsumableArray(_nonMovingItems.slice(0, _insertIndex)), _movingItems, _toConsumableArray(_nonMovingItems.slice(_insertIndex)));
|
|
461
|
+
|
|
462
|
+
// 更新 order 字段
|
|
463
|
+
var updatedItems = _result.map(function (item, index) {
|
|
464
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
465
|
+
order: index
|
|
466
|
+
});
|
|
467
|
+
});
|
|
468
|
+
updateItems(updatedItems);
|
|
469
|
+
_antd.message.success('排序已更新');
|
|
470
|
+
return;
|
|
282
471
|
}
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
472
|
+
|
|
473
|
+
// 跨级拖拽 - 将节点移到不同的父节点下
|
|
474
|
+
// 例如:将分组中的列拖到根级别
|
|
475
|
+
if (movingNode.parentId !== overNode.parentId) {
|
|
476
|
+
// 收集需要移动的节点(只移动单个节点,不包括子孙)
|
|
477
|
+
var _movingIds2 = new Set([movingNode.id]);
|
|
478
|
+
|
|
479
|
+
// 分离出不移动的节点和要移动的节点
|
|
480
|
+
var _nonMovingItems2 = [];
|
|
481
|
+
var _movingItems2 = [];
|
|
482
|
+
localItems.forEach(function (item) {
|
|
483
|
+
if (_movingIds2.has(item.id)) {
|
|
484
|
+
_movingItems2.push(item);
|
|
485
|
+
} else {
|
|
486
|
+
_nonMovingItems2.push(item);
|
|
487
|
+
}
|
|
488
|
+
});
|
|
489
|
+
|
|
490
|
+
// 找到目标节点的位置
|
|
491
|
+
var _overIndex = _nonMovingItems2.findIndex(function (item) {
|
|
492
|
+
return item.id === overNode.id;
|
|
493
|
+
});
|
|
494
|
+
if (_overIndex === -1) return;
|
|
495
|
+
|
|
496
|
+
// 找到移动节点原本的位置
|
|
497
|
+
var _originalMovingIndex = localItems.findIndex(function (item) {
|
|
498
|
+
return item.id === movingNode.id;
|
|
499
|
+
});
|
|
500
|
+
var _originalOverIndex = localItems.findIndex(function (item) {
|
|
501
|
+
return item.id === overNode.id;
|
|
502
|
+
});
|
|
503
|
+
|
|
504
|
+
// 根据原始位置判断插入位置
|
|
505
|
+
var _insertIndex2 = _originalMovingIndex < _originalOverIndex ? _overIndex + 1 : _overIndex;
|
|
506
|
+
|
|
507
|
+
// 更新移动节点的父节点和层级
|
|
508
|
+
var _updatedMovingItems = _movingItems2.map(function (item) {
|
|
295
509
|
return _objectSpread(_objectSpread({}, item), {}, {
|
|
296
|
-
|
|
510
|
+
parentId: overNode.parentId,
|
|
511
|
+
// 使用目标节点的父节点
|
|
512
|
+
level: overNode.level // 使用目标节点的层级
|
|
297
513
|
});
|
|
298
|
-
}
|
|
299
|
-
return item;
|
|
300
|
-
});
|
|
301
|
-
setLocalItems(newItems);
|
|
302
|
-
// 注意: _collapsed 是临时UI状态,不需要通知父组件持久化
|
|
303
|
-
}, [localItems]);
|
|
514
|
+
});
|
|
304
515
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
516
|
+
// 插入到新位置
|
|
517
|
+
var _result2 = [].concat(_toConsumableArray(_nonMovingItems2.slice(0, _insertIndex2)), _toConsumableArray(_updatedMovingItems), _toConsumableArray(_nonMovingItems2.slice(_insertIndex2)));
|
|
518
|
+
|
|
519
|
+
// 更新 order 字段
|
|
520
|
+
var _updatedItems = _result2.map(function (item, index) {
|
|
521
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
522
|
+
order: index
|
|
523
|
+
});
|
|
313
524
|
});
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
return true;
|
|
317
|
-
}
|
|
318
|
-
currentId = parent.parentId;
|
|
525
|
+
updateItems(_updatedItems);
|
|
526
|
+
_antd.message.success("\u5DF2\u79FB\u52A8\u5230".concat(overNode.parentId ? '分组内' : '根级别'));
|
|
319
527
|
}
|
|
320
|
-
|
|
321
|
-
}, [localItems]);
|
|
528
|
+
}, [localItems, updateItems, getAllDescendantIds]);
|
|
322
529
|
|
|
323
|
-
|
|
324
|
-
* 获取可见的节点列表(过滤掉被折叠隐藏的节点)
|
|
325
|
-
*/
|
|
326
|
-
var visibleItems = (0, _react.useMemo)(function () {
|
|
327
|
-
return (localItems === null || localItems === void 0 ? void 0 : localItems.filter(function (item) {
|
|
328
|
-
return !isNodeHidden(item);
|
|
329
|
-
})) || [];
|
|
330
|
-
}, [localItems, isNodeHidden]);
|
|
331
|
-
|
|
332
|
-
/**
|
|
333
|
-
* 添加根级别分组
|
|
334
|
-
*/
|
|
530
|
+
// 添加根级别分组
|
|
335
531
|
var handleAddRootGroup = (0, _react.useCallback)(function () {
|
|
336
532
|
var newGroup = {
|
|
337
533
|
id: (0, _columnGroupUtils.generateId)(),
|
|
338
534
|
type: 'group',
|
|
339
|
-
// ⚠️ 关键:明确设置 type
|
|
340
535
|
level: 0,
|
|
341
536
|
order: localItems.length,
|
|
342
537
|
headerName: '新分组',
|
|
@@ -347,650 +542,193 @@ var ColumnConfigTable = function ColumnConfigTable(_ref3) {
|
|
|
347
542
|
_antd.message.success('已添加根级别分组');
|
|
348
543
|
}, [localItems, updateItems]);
|
|
349
544
|
|
|
350
|
-
|
|
351
|
-
* 为指定分组添加子分组
|
|
352
|
-
*/
|
|
545
|
+
// 添加子分组
|
|
353
546
|
var handleAddChildGroup = (0, _react.useCallback)(function (parentId) {
|
|
354
|
-
var
|
|
547
|
+
var parent = localItems.find(function (item) {
|
|
355
548
|
return item.id === parentId;
|
|
356
549
|
});
|
|
357
|
-
if (
|
|
358
|
-
_antd.message.error('未找到父节点');
|
|
359
|
-
return;
|
|
360
|
-
}
|
|
361
|
-
var parent = localItems[parentIndex];
|
|
362
|
-
if (parent.type !== 'group') {
|
|
550
|
+
if (!parent || parent.type !== 'group') {
|
|
363
551
|
_antd.message.error('只能为分组添加子分组');
|
|
364
552
|
return;
|
|
365
553
|
}
|
|
366
|
-
|
|
367
|
-
// 找到插入位置(父节点的所有后代节点之后)
|
|
368
|
-
var insertIndex = (0, _columnGroupUtils.findLastDescendantIndex)(localItems, parentId) + 1;
|
|
369
554
|
var newGroup = {
|
|
370
555
|
id: (0, _columnGroupUtils.generateId)(),
|
|
371
556
|
type: 'group',
|
|
372
|
-
// ⚠️ 关键:明确设置 type
|
|
373
557
|
parentId: parentId,
|
|
374
|
-
level: parent.level + 1,
|
|
375
|
-
order:
|
|
558
|
+
level: (parent.level || 0) + 1,
|
|
559
|
+
order: localItems.length,
|
|
376
560
|
headerName: '新子分组',
|
|
377
561
|
groupId: (0, _columnGroupUtils.generateId)(),
|
|
378
562
|
_isNew: true
|
|
379
563
|
};
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
updateItems(newItems);
|
|
383
|
-
_antd.message.success("\u5DF2\u4E3A\u5206\u7EC4\"".concat(parent.headerName, "\"\u6DFB\u52A0\u5B50\u5206\u7EC4"));
|
|
564
|
+
updateItems([].concat(_toConsumableArray(localItems), [newGroup]));
|
|
565
|
+
_antd.message.success('已添加子分组');
|
|
384
566
|
}, [localItems, updateItems]);
|
|
385
567
|
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
setCurrentMoveNode(node);
|
|
391
|
-
setMoveModalVisible(true);
|
|
392
|
-
}, [localItems]);
|
|
393
|
-
|
|
394
|
-
/**
|
|
395
|
-
* 关闭移动节点弹窗
|
|
396
|
-
*/
|
|
397
|
-
var handleCloseMoveModal = (0, _react.useCallback)(function () {
|
|
398
|
-
setMoveModalVisible(false);
|
|
399
|
-
setCurrentMoveNode(null);
|
|
400
|
-
}, []);
|
|
401
|
-
|
|
402
|
-
/**
|
|
403
|
-
* 确认移动节点
|
|
404
|
-
*/
|
|
405
|
-
var handleConfirmMove = (0, _react.useCallback)(function (targetParentId) {
|
|
406
|
-
if (!currentMoveNode) return;
|
|
407
|
-
var nodeId = currentMoveNode.id;
|
|
408
|
-
|
|
409
|
-
// 1. 验证:不能移动到自己的后代节点下
|
|
410
|
-
if (targetParentId) {
|
|
411
|
-
var checkId = targetParentId;
|
|
412
|
-
while (checkId) {
|
|
413
|
-
if (checkId === nodeId) {
|
|
414
|
-
_antd.message.error('不能将节点移动到自己的后代节点下');
|
|
415
|
-
return;
|
|
416
|
-
}
|
|
417
|
-
var parent = localItems.find(function (item) {
|
|
418
|
-
return item.id === checkId;
|
|
419
|
-
});
|
|
420
|
-
checkId = parent === null || parent === void 0 ? void 0 : parent.parentId;
|
|
421
|
-
}
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
// 2. 验证:不能移动到同一个父节点下(无意义操作)
|
|
425
|
-
if (currentMoveNode.parentId === targetParentId) {
|
|
426
|
-
_antd.message.warning('节点已经在该父节点下,无需移动');
|
|
427
|
-
handleCloseMoveModal();
|
|
428
|
-
return;
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
// 3. 执行移动
|
|
432
|
-
var newItems = _toConsumableArray(localItems);
|
|
433
|
-
|
|
434
|
-
// 3.1 收集要移动的节点(包括所有后代)
|
|
435
|
-
var nodesToMove = [];
|
|
436
|
-
var collectNodes = function collectNodes(id) {
|
|
437
|
-
var node = newItems.find(function (item) {
|
|
438
|
-
return item.id === id;
|
|
439
|
-
});
|
|
440
|
-
if (!node) return;
|
|
441
|
-
nodesToMove.push(node);
|
|
442
|
-
|
|
443
|
-
// 递归收集子节点
|
|
444
|
-
newItems.forEach(function (item) {
|
|
445
|
-
if (item.parentId === id) {
|
|
446
|
-
collectNodes(item.id);
|
|
447
|
-
}
|
|
448
|
-
});
|
|
449
|
-
};
|
|
450
|
-
collectNodes(nodeId);
|
|
451
|
-
|
|
452
|
-
// 3.2 从原位置移除这些节点
|
|
453
|
-
var remainingItems = newItems.filter(function (item) {
|
|
454
|
-
return !nodesToMove.some(function (n) {
|
|
455
|
-
return n.id === item.id;
|
|
456
|
-
});
|
|
457
|
-
});
|
|
458
|
-
|
|
459
|
-
// 3.3 计算新的层级
|
|
460
|
-
var targetParent = targetParentId ? remainingItems.find(function (item) {
|
|
461
|
-
return item.id === targetParentId;
|
|
462
|
-
}) : undefined;
|
|
463
|
-
var newLevel = targetParent ? targetParent.level + 1 : 0;
|
|
464
|
-
var levelDelta = newLevel - currentMoveNode.level;
|
|
465
|
-
|
|
466
|
-
// 3.4 更新节点的 parentId 和 level
|
|
467
|
-
var updatedNodesToMove = nodesToMove.map(function (node) {
|
|
468
|
-
return _objectSpread(_objectSpread({}, node), {}, {
|
|
469
|
-
parentId: node.id === nodeId ? targetParentId : node.parentId,
|
|
470
|
-
level: node.level + levelDelta
|
|
471
|
-
});
|
|
568
|
+
// 删除节点
|
|
569
|
+
var handleDelete = (0, _react.useCallback)(function (id) {
|
|
570
|
+
var item = localItems.find(function (i) {
|
|
571
|
+
return i.id === id;
|
|
472
572
|
});
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
//
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
// 3.7 重新计算 order
|
|
488
|
-
(0, _columnGroupUtils.reorderItems)(remainingItems);
|
|
489
|
-
updateItems(remainingItems);
|
|
490
|
-
_antd.message.success("\u5DF2\u5C06\"".concat(currentMoveNode.headerName, "\"\u79FB\u52A8\u5230\u65B0\u4F4D\u7F6E"));
|
|
491
|
-
handleCloseMoveModal();
|
|
492
|
-
}, [currentMoveNode, localItems, updateItems, handleCloseMoveModal]);
|
|
493
|
-
|
|
494
|
-
/**
|
|
495
|
-
* 删除节点(及其所有子节点)
|
|
496
|
-
*/
|
|
497
|
-
var handleDeleteNode = (0, _react.useCallback)(function (nodeId) {
|
|
498
|
-
var nodeIndex = localItems.findIndex(function (item) {
|
|
499
|
-
return item.id === nodeId;
|
|
500
|
-
});
|
|
501
|
-
if (nodeIndex === -1) {
|
|
502
|
-
_antd.message.error('未找到要删除的节点');
|
|
503
|
-
return;
|
|
504
|
-
}
|
|
505
|
-
var node = localItems[nodeIndex];
|
|
506
|
-
|
|
507
|
-
// 查找所有需要删除的节点(包括所有后代)
|
|
508
|
-
var toDelete = [nodeId];
|
|
509
|
-
var findDescendants = function findDescendants(parentId) {
|
|
510
|
-
localItems.forEach(function (item) {
|
|
511
|
-
if (item.parentId === parentId) {
|
|
512
|
-
toDelete.push(item.id);
|
|
513
|
-
if (item.type === 'group') {
|
|
514
|
-
findDescendants(item.id);
|
|
515
|
-
}
|
|
573
|
+
if ((item === null || item === void 0 ? void 0 : item.type) === 'group') {
|
|
574
|
+
// 删除分组时,将其直接子项移至根级别
|
|
575
|
+
var updatedItems = localItems.filter(function (i) {
|
|
576
|
+
return i.id !== id;
|
|
577
|
+
}) // 移除分组本身
|
|
578
|
+
.map(function (i) {
|
|
579
|
+
// 如果是该分组的直接子项
|
|
580
|
+
if (i.parentId === id) {
|
|
581
|
+
return _objectSpread(_objectSpread({}, i), {}, {
|
|
582
|
+
parentId: undefined,
|
|
583
|
+
// 移至根级别
|
|
584
|
+
level: 0 // 设置为根级别
|
|
585
|
+
});
|
|
516
586
|
}
|
|
587
|
+
return i;
|
|
517
588
|
});
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
findDescendants(nodeId);
|
|
589
|
+
updateItems(updatedItems);
|
|
590
|
+
_antd.message.success('分组已删除,子项已移至根级别');
|
|
521
591
|
}
|
|
522
|
-
var newItems = localItems.filter(function (item) {
|
|
523
|
-
return !toDelete.includes(item.id);
|
|
524
|
-
});
|
|
525
|
-
updateItems(newItems);
|
|
526
|
-
_antd.message.success(node.type === 'group' ? "\u5DF2\u5220\u9664\u5206\u7EC4\"".concat(node.headerName, "\"\u53CA\u5176 ").concat(toDelete.length - 1, " \u4E2A\u5B50\u8282\u70B9") : "\u5DF2\u5220\u9664\u5217\"".concat(node.headerName, "\""));
|
|
527
592
|
}, [localItems, updateItems]);
|
|
528
593
|
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
// ⚠️ 关键:确保 type 字段不会被覆盖
|
|
538
|
-
return _objectSpread(_objectSpread(_objectSpread({}, item), updates), {}, {
|
|
539
|
-
type: item.type,
|
|
540
|
-
// 强制保留原始 type
|
|
541
|
-
_isNew: false // 清除新建标记
|
|
542
|
-
});
|
|
594
|
+
// 切换展开/折叠
|
|
595
|
+
var toggleExpand = (0, _react.useCallback)(function (id) {
|
|
596
|
+
setExpandedKeys(function (prev) {
|
|
597
|
+
var next = new Set(prev);
|
|
598
|
+
if (next.has(id)) {
|
|
599
|
+
next.delete(id);
|
|
600
|
+
} else {
|
|
601
|
+
next.add(id);
|
|
543
602
|
}
|
|
544
|
-
return
|
|
545
|
-
});
|
|
546
|
-
|
|
547
|
-
// 立即更新本地状态(保证输入框显示最新内容)
|
|
548
|
-
setLocalItems(_toConsumableArray(newItems));
|
|
549
|
-
|
|
550
|
-
// 根据场景选择立即更新或防抖更新
|
|
551
|
-
if (immediate) {
|
|
552
|
-
// 非文本输入的更新(如开关、选择器等)需要立即生效
|
|
553
|
-
(0, _columnGroupUtils.reorderItems)(newItems);
|
|
554
|
-
onChange(_toConsumableArray(newItems));
|
|
555
|
-
} else {
|
|
556
|
-
// 文本输入使用防抖,避免频繁触发父组件更新
|
|
557
|
-
debouncedUpdateItems(newItems);
|
|
558
|
-
}
|
|
559
|
-
}, [localItems, onChange, debouncedUpdateItems]);
|
|
560
|
-
|
|
561
|
-
/**
|
|
562
|
-
* 处理拖拽排序
|
|
563
|
-
*/
|
|
564
|
-
var handleDragSort = (0, _react.useCallback)(function (dragIndex, hoverIndex, dragItem, hoverItem) {
|
|
565
|
-
// 只有同级别、同父节点的节点才能拖拽排序
|
|
566
|
-
if (dragItem.parentId !== hoverItem.parentId || dragItem.level !== hoverItem.level) {
|
|
567
|
-
return;
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
// ✅ 关键修复: 通过 ID 找到在 localItems 中的真实索引
|
|
571
|
-
// dragIndex 和 hoverIndex 是基于 visibleItems 的索引,不能直接用于 localItems
|
|
572
|
-
var realDragIndex = localItems.findIndex(function (item) {
|
|
573
|
-
return item.id === dragItem.id;
|
|
574
|
-
});
|
|
575
|
-
var realHoverIndex = localItems.findIndex(function (item) {
|
|
576
|
-
return item.id === hoverItem.id;
|
|
577
|
-
});
|
|
578
|
-
if (realDragIndex === -1 || realHoverIndex === -1) {
|
|
579
|
-
console.error('[ColumnConfigTable] 找不到节点索引:', {
|
|
580
|
-
dragItem: dragItem,
|
|
581
|
-
hoverItem: hoverItem
|
|
582
|
-
});
|
|
583
|
-
return;
|
|
584
|
-
}
|
|
585
|
-
var newItems = _toConsumableArray(localItems);
|
|
586
|
-
var draggedItem = newItems[realDragIndex];
|
|
587
|
-
|
|
588
|
-
// 如果是分组节点,需要收集所有后代节点一起移动
|
|
589
|
-
var nodesToMove = [draggedItem];
|
|
590
|
-
if (draggedItem.type === 'group') {
|
|
591
|
-
// 递归收集所有后代节点
|
|
592
|
-
var collectDescendants = function collectDescendants(parentId) {
|
|
593
|
-
newItems.forEach(function (item) {
|
|
594
|
-
if (item.parentId === parentId) {
|
|
595
|
-
nodesToMove.push(item);
|
|
596
|
-
if (item.type === 'group') {
|
|
597
|
-
collectDescendants(item.id);
|
|
598
|
-
}
|
|
599
|
-
}
|
|
600
|
-
});
|
|
601
|
-
};
|
|
602
|
-
collectDescendants(draggedItem.id);
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
// 从原数组中移除所有要移动的节点
|
|
606
|
-
var remainingItems = newItems.filter(function (item) {
|
|
607
|
-
return !nodesToMove.some(function (n) {
|
|
608
|
-
return n.id === item.id;
|
|
609
|
-
});
|
|
610
|
-
});
|
|
611
|
-
|
|
612
|
-
// 计算新的插入位置
|
|
613
|
-
// 如果拖动到下方,需要调整插入索引(因为移除了节点)
|
|
614
|
-
var adjustedHoverIndex = realHoverIndex;
|
|
615
|
-
if (realDragIndex < realHoverIndex) {
|
|
616
|
-
// 向下拖动:需要减去被移除的节点数量
|
|
617
|
-
adjustedHoverIndex = realHoverIndex - nodesToMove.length;
|
|
618
|
-
}
|
|
619
|
-
|
|
620
|
-
// 在新位置插入所有节点
|
|
621
|
-
remainingItems.splice.apply(remainingItems, [adjustedHoverIndex, 0].concat(nodesToMove));
|
|
622
|
-
|
|
623
|
-
// 使用 updateItems 来同时更新本地状态和通知父组件
|
|
624
|
-
updateItems(remainingItems);
|
|
625
|
-
}, [localItems, updateItems]);
|
|
626
|
-
|
|
627
|
-
/**
|
|
628
|
-
* 获取缩进符号
|
|
629
|
-
*/
|
|
630
|
-
var getIndentSymbol = (0, _react.useCallback)(function (item) {
|
|
631
|
-
var _siblings;
|
|
632
|
-
if (item.level === 0) return '';
|
|
633
|
-
var siblings = localItems.filter(function (i) {
|
|
634
|
-
return i.parentId === item.parentId;
|
|
603
|
+
return next;
|
|
635
604
|
});
|
|
636
|
-
|
|
637
|
-
return isLast ? '└─ ' : '├─ ';
|
|
638
|
-
}, [localItems]);
|
|
605
|
+
}, []);
|
|
639
606
|
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
var indentSymbol = getIndentSymbol(record);
|
|
646
|
-
var NodeIcon = record.type === 'group' ? /*#__PURE__*/_react.default.createElement(_icons.FolderOutlined, {
|
|
647
|
-
style: {
|
|
648
|
-
color: '#1890ff',
|
|
649
|
-
fontSize: 14
|
|
650
|
-
}
|
|
651
|
-
}) : /*#__PURE__*/_react.default.createElement(_icons.FileOutlined, {
|
|
652
|
-
style: {
|
|
653
|
-
color: '#52c41a',
|
|
654
|
-
fontSize: 14
|
|
655
|
-
}
|
|
656
|
-
});
|
|
657
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
658
|
-
style: {
|
|
659
|
-
paddingLeft: indent,
|
|
660
|
-
display: 'flex',
|
|
661
|
-
alignItems: 'center',
|
|
662
|
-
gap: 8
|
|
663
|
-
}
|
|
664
|
-
}, record.level > 0 && /*#__PURE__*/_react.default.createElement("span", {
|
|
665
|
-
style: {
|
|
666
|
-
color: '#999',
|
|
667
|
-
fontFamily: 'monospace',
|
|
668
|
-
fontSize: 12,
|
|
669
|
-
flexShrink: 0
|
|
670
|
-
}
|
|
671
|
-
}, indentSymbol), record.type === 'group' ? /*#__PURE__*/_react.default.createElement("span", {
|
|
672
|
-
onClick: function onClick() {
|
|
673
|
-
return handleToggleCollapse(record.id);
|
|
674
|
-
},
|
|
675
|
-
style: {
|
|
676
|
-
cursor: 'pointer',
|
|
677
|
-
fontSize: 12,
|
|
678
|
-
color: '#999',
|
|
679
|
-
flexShrink: 0,
|
|
680
|
-
width: 16,
|
|
681
|
-
textAlign: 'center'
|
|
682
|
-
}
|
|
683
|
-
}, record._collapsed ? /*#__PURE__*/_react.default.createElement(_icons.RightOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null)) : /*#__PURE__*/_react.default.createElement("span", {
|
|
684
|
-
style: {
|
|
685
|
-
width: 16,
|
|
686
|
-
flexShrink: 0
|
|
687
|
-
}
|
|
688
|
-
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
689
|
-
style: {
|
|
690
|
-
flexShrink: 0
|
|
691
|
-
}
|
|
692
|
-
}, NodeIcon), /*#__PURE__*/_react.default.createElement(_antd.Tag, {
|
|
693
|
-
color: record.type === 'group' ? 'blue' : 'green',
|
|
694
|
-
style: {
|
|
695
|
-
margin: 0,
|
|
696
|
-
flexShrink: 0
|
|
697
|
-
}
|
|
698
|
-
}, record.type === 'group' ? '分组' : '列'), /*#__PURE__*/_react.default.createElement(NameInput, {
|
|
699
|
-
value: text,
|
|
700
|
-
onChange: function onChange(newValue) {
|
|
701
|
-
return handleUpdateNode(record.id, {
|
|
702
|
-
headerName: newValue
|
|
703
|
-
}, true);
|
|
704
|
-
},
|
|
705
|
-
placeholder: record.type === 'group' ? '请输入分组名称' : '请输入列名称',
|
|
706
|
-
isNew: record._isNew
|
|
707
|
-
}));
|
|
708
|
-
}, [getIndentSymbol, handleUpdateNode, handleToggleCollapse]);
|
|
709
|
-
|
|
710
|
-
/**
|
|
711
|
-
* 渲染操作列
|
|
712
|
-
*/
|
|
713
|
-
var renderActionsCell = (0, _react.useCallback)(function (_, record) {
|
|
714
|
-
if (record.type === 'group') {
|
|
715
|
-
return /*#__PURE__*/_react.default.createElement(_antd.Space, {
|
|
716
|
-
size: "small"
|
|
717
|
-
}, !simple && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
|
|
718
|
-
title: "\u6DFB\u52A0\u5B50\u5206\u7EC4"
|
|
719
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
720
|
-
type: "link",
|
|
721
|
-
size: "small",
|
|
722
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.FolderAddOutlined, null),
|
|
723
|
-
onClick: function onClick() {
|
|
724
|
-
return handleAddChildGroup(record.id);
|
|
725
|
-
}
|
|
726
|
-
}, "\u6DFB\u52A0\u5B50\u5206\u7EC4")), /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
|
|
727
|
-
title: "\u79FB\u52A8\u8282\u70B9"
|
|
728
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
729
|
-
type: "link",
|
|
730
|
-
size: "small",
|
|
731
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.DragOutlined, null),
|
|
732
|
-
onClick: function onClick() {
|
|
733
|
-
return handleOpenMoveModal(record);
|
|
734
|
-
}
|
|
735
|
-
}, "\u79FB\u52A8")), record._isNew && /*#__PURE__*/_react.default.createElement(_antd.Popconfirm, {
|
|
736
|
-
title: "\u786E\u5B9A\u8981\u5220\u9664\u5206\u7EC4\"".concat(record.headerName, "\"\u53CA\u5176\u6240\u6709\u5B50\u8282\u70B9\u5417\uFF1F"),
|
|
737
|
-
onConfirm: function onConfirm() {
|
|
738
|
-
return handleDeleteNode(record.id);
|
|
739
|
-
},
|
|
740
|
-
okText: "\u786E\u5B9A",
|
|
741
|
-
cancelText: "\u53D6\u6D88"
|
|
742
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
|
|
743
|
-
title: "\u5220\u9664\u5206\u7EC4"
|
|
744
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
745
|
-
type: "link",
|
|
746
|
-
size: "small",
|
|
747
|
-
danger: true,
|
|
748
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.DeleteOutlined, null)
|
|
749
|
-
})))));
|
|
750
|
-
} else {
|
|
751
|
-
return /*#__PURE__*/_react.default.createElement(_antd.Space, {
|
|
752
|
-
size: "small"
|
|
753
|
-
}, !simple && /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
|
|
754
|
-
title: "\u79FB\u52A8\u8282\u70B9"
|
|
755
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
756
|
-
type: "link",
|
|
757
|
-
size: "small",
|
|
758
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.DragOutlined, null),
|
|
759
|
-
onClick: function onClick() {
|
|
760
|
-
return handleOpenMoveModal(record);
|
|
761
|
-
}
|
|
762
|
-
}, "\u79FB\u52A8")));
|
|
763
|
-
}
|
|
764
|
-
}, [simple, handleAddChildGroup, handleDeleteNode, handleOpenMoveModal]);
|
|
765
|
-
|
|
766
|
-
/**
|
|
767
|
-
* 表格列配置
|
|
768
|
-
*/
|
|
769
|
-
var columns = (0, _react.useMemo)(function () {
|
|
770
|
-
return [{
|
|
771
|
-
title: '排序',
|
|
772
|
-
key: 'sort',
|
|
773
|
-
width: 40,
|
|
774
|
-
align: 'center',
|
|
775
|
-
render: function render() {
|
|
776
|
-
return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
|
|
777
|
-
title: "\u62D6\u52A8\u6392\u5E8F\uFF08\u4EC5\u652F\u6301\u540C\u7EA7\uFF09"
|
|
778
|
-
}, /*#__PURE__*/_react.default.createElement(_icons.HolderOutlined, {
|
|
779
|
-
style: {
|
|
780
|
-
fontSize: 16,
|
|
781
|
-
color: '#999',
|
|
782
|
-
cursor: 'move'
|
|
783
|
-
}
|
|
784
|
-
}));
|
|
785
|
-
}
|
|
786
|
-
}, {
|
|
787
|
-
title: '操作',
|
|
788
|
-
key: 'actions',
|
|
607
|
+
// 列定义
|
|
608
|
+
var columnDefs = (0, _react.useMemo)(function () {
|
|
609
|
+
var cols = [{
|
|
610
|
+
field: 'type',
|
|
611
|
+
headerName: '类型',
|
|
789
612
|
width: 120,
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
key: 'headerName',
|
|
796
|
-
width: 100,
|
|
797
|
-
render: renderNameCell
|
|
613
|
+
minWidth: 100,
|
|
614
|
+
maxWidth: 150,
|
|
615
|
+
cellRenderer: TypeCellRenderer,
|
|
616
|
+
rowDrag: true,
|
|
617
|
+
suppressSizeToFit: true
|
|
798
618
|
}, {
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
onChange: function onChange(newValue) {
|
|
809
|
-
return handleUpdateNode(record.id, {
|
|
810
|
-
width: newValue || undefined
|
|
811
|
-
}, true);
|
|
812
|
-
},
|
|
813
|
-
min: 50,
|
|
814
|
-
max: 1000,
|
|
815
|
-
style: {
|
|
816
|
-
width: '100%'
|
|
817
|
-
}
|
|
818
|
-
});
|
|
619
|
+
field: 'headerName',
|
|
620
|
+
headerName: '名称',
|
|
621
|
+
flex: 1,
|
|
622
|
+
minWidth: 200,
|
|
623
|
+
cellRenderer: NameCellRenderer,
|
|
624
|
+
cellRendererParams: {
|
|
625
|
+
expandedKeys: expandedKeys,
|
|
626
|
+
onToggleExpand: toggleExpand,
|
|
627
|
+
allItems: localItems
|
|
819
628
|
}
|
|
820
629
|
}, {
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
align: 'center',
|
|
826
|
-
render: function render(value, record) {
|
|
827
|
-
if (record.type !== 'column') return '-';
|
|
828
|
-
return /*#__PURE__*/_react.default.createElement(_antd.Select, {
|
|
829
|
-
value: value || 0,
|
|
830
|
-
onChange: function onChange(newValue) {
|
|
831
|
-
return handleUpdateNode(record.id, {
|
|
832
|
-
flex: newValue
|
|
833
|
-
}, true);
|
|
834
|
-
},
|
|
835
|
-
style: {
|
|
836
|
-
width: '100%'
|
|
837
|
-
},
|
|
838
|
-
options: [{
|
|
839
|
-
value: 1,
|
|
840
|
-
label: '占满'
|
|
841
|
-
}, {
|
|
842
|
-
value: 0,
|
|
843
|
-
label: '不占满'
|
|
844
|
-
}]
|
|
845
|
-
});
|
|
846
|
-
}
|
|
630
|
+
field: 'width',
|
|
631
|
+
headerName: '宽度',
|
|
632
|
+
width: 100,
|
|
633
|
+
cellRenderer: WidthCellRenderer
|
|
847
634
|
}, {
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
align: 'center',
|
|
853
|
-
render: function render(value, record) {
|
|
854
|
-
if (record.type !== 'column') return '-';
|
|
855
|
-
return /*#__PURE__*/_react.default.createElement(_antd.Select, {
|
|
856
|
-
value: value || 'notPinned',
|
|
857
|
-
onChange: function onChange(newValue) {
|
|
858
|
-
return handleUpdateNode(record.id, {
|
|
859
|
-
pinned: newValue
|
|
860
|
-
}, true);
|
|
861
|
-
},
|
|
862
|
-
style: {
|
|
863
|
-
width: '100%'
|
|
864
|
-
},
|
|
865
|
-
options: [{
|
|
866
|
-
value: 'left',
|
|
867
|
-
label: '左固定'
|
|
868
|
-
}, {
|
|
869
|
-
value: 'right',
|
|
870
|
-
label: '右固定'
|
|
871
|
-
}, {
|
|
872
|
-
value: 'notPinned',
|
|
873
|
-
label: '不固定'
|
|
874
|
-
}]
|
|
875
|
-
});
|
|
876
|
-
}
|
|
635
|
+
field: 'flex',
|
|
636
|
+
headerName: '占满',
|
|
637
|
+
width: 120,
|
|
638
|
+
cellRenderer: FlexCellRenderer
|
|
877
639
|
}, {
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
align: 'center',
|
|
883
|
-
render: function render(value, record) {
|
|
884
|
-
if (record.type !== 'column') return '-';
|
|
885
|
-
return /*#__PURE__*/_react.default.createElement(_antd.Switch, {
|
|
886
|
-
checked: value || false,
|
|
887
|
-
onChange: function onChange(checked) {
|
|
888
|
-
return handleUpdateNode(record.id, {
|
|
889
|
-
hide: checked
|
|
890
|
-
}, true);
|
|
891
|
-
}
|
|
892
|
-
});
|
|
893
|
-
}
|
|
640
|
+
field: 'pinned',
|
|
641
|
+
headerName: '固定',
|
|
642
|
+
width: 120,
|
|
643
|
+
cellRenderer: PinnedCellRenderer
|
|
894
644
|
}, {
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
align: 'center',
|
|
900
|
-
render: function render(value, record) {
|
|
901
|
-
if (record.type !== 'column') return '-';
|
|
902
|
-
return /*#__PURE__*/_react.default.createElement(_antd.Select, {
|
|
903
|
-
value: value || 'custom-cell-left',
|
|
904
|
-
onChange: function onChange(newValue) {
|
|
905
|
-
return handleUpdateNode(record.id, {
|
|
906
|
-
cellClass: newValue
|
|
907
|
-
}, true);
|
|
908
|
-
},
|
|
909
|
-
style: {
|
|
910
|
-
width: '100%'
|
|
911
|
-
},
|
|
912
|
-
options: [{
|
|
913
|
-
value: 'custom-cell-left',
|
|
914
|
-
label: '左对齐'
|
|
915
|
-
}, {
|
|
916
|
-
value: 'custom-cell-right',
|
|
917
|
-
label: '右对齐'
|
|
918
|
-
}, {
|
|
919
|
-
value: 'custom-cell-centered',
|
|
920
|
-
label: '居中'
|
|
921
|
-
}]
|
|
922
|
-
});
|
|
923
|
-
}
|
|
645
|
+
field: 'hide',
|
|
646
|
+
headerName: '隐藏',
|
|
647
|
+
width: 80,
|
|
648
|
+
cellRenderer: createSwitchRenderer('hide')
|
|
924
649
|
}, {
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
}
|
|
939
|
-
});
|
|
650
|
+
field: 'suppressHeaderFilterButton',
|
|
651
|
+
headerName: '列过滤',
|
|
652
|
+
width: 80,
|
|
653
|
+
cellRenderer: SuppressFilterButtonRenderer
|
|
654
|
+
}, {
|
|
655
|
+
headerName: '操作',
|
|
656
|
+
width: 200,
|
|
657
|
+
suppressSizeToFit: true,
|
|
658
|
+
cellRenderer: ActionCellRenderer,
|
|
659
|
+
cellRendererParams: {
|
|
660
|
+
onDelete: handleDelete,
|
|
661
|
+
onAddChildGroup: handleAddChildGroup,
|
|
662
|
+
simple: simple
|
|
940
663
|
}
|
|
941
664
|
}];
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
665
|
+
return cols;
|
|
666
|
+
}, [handleDelete, handleAddChildGroup, simple, expandedKeys, toggleExpand, localItems]);
|
|
667
|
+
|
|
668
|
+
// 根据展开状态过滤数据
|
|
669
|
+
var visibleItems = (0, _react.useMemo)(function () {
|
|
670
|
+
if (simple) return localItems;
|
|
671
|
+
|
|
672
|
+
// 递归检查节点的所有祖先是否都展开
|
|
673
|
+
var isNodeVisible = function isNodeVisible(item) {
|
|
674
|
+
// 根级别节点始终显示
|
|
675
|
+
if (!item.parentId) return true;
|
|
676
|
+
|
|
677
|
+
// 找到父节点
|
|
678
|
+
var parent = localItems.find(function (i) {
|
|
679
|
+
return i.id === item.parentId;
|
|
680
|
+
});
|
|
681
|
+
if (!parent) return false;
|
|
682
|
+
|
|
683
|
+
// 父节点必须展开
|
|
684
|
+
if (!expandedKeys.has(parent.id)) return false;
|
|
685
|
+
|
|
686
|
+
// 递归检查父节点的可见性
|
|
687
|
+
return isNodeVisible(parent);
|
|
688
|
+
};
|
|
689
|
+
return localItems.filter(isNodeVisible);
|
|
690
|
+
}, [localItems, expandedKeys, simple]);
|
|
691
|
+
|
|
692
|
+
// 添加拖拽样式
|
|
693
|
+
(0, _react.useEffect)(function () {
|
|
694
|
+
var style = document.createElement('style');
|
|
695
|
+
style.textContent = "\n /* \u62D6\u62FD\u884C\u6837\u5F0F */\n .ag-row-dragging {\n opacity: 0.5;\n transition: opacity 0.2s ease;\n }\n\n /* \u62D6\u62FD\u5E7D\u7075\u6837\u5F0F */\n .ag-dnd-ghost {\n background: #fff !important;\n border: 2px dashed #1890ff !important;\n border-radius: 4px !important;\n padding: 8px !important;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;\n opacity: 0.9 !important;\n font-size: 14px !important;\n }\n\n /* \u53EF\u653E\u7F6E\u76EE\u6807\u9AD8\u4EAE */\n .ag-row-hover.ag-row {\n background-color: #e6f7ff !important;\n transition: background-color 0.2s ease;\n }\n\n /* \u5206\u7EC4\u884C\u7279\u6B8A\u9AD8\u4EAE */\n .ag-row-hover.ag-row[row-id*=\"group\"] {\n background-color: #bae7ff !important;\n border: 2px solid #1890ff;\n transition: all 0.2s ease;\n }\n\n /* \u884C\u52A8\u753B */\n .ag-row {\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n\n /* \u62D6\u62FD\u624B\u67C4\u6837\u5F0F */\n .ag-row .ag-cell[col-id=\"type\"] {\n cursor: grab !important;\n }\n\n .ag-row-dragging .ag-cell[col-id=\"type\"] {\n cursor: grabbing !important;\n }\n ";
|
|
696
|
+
document.head.appendChild(style);
|
|
697
|
+
return function () {
|
|
698
|
+
document.head.removeChild(style);
|
|
699
|
+
};
|
|
700
|
+
}, []);
|
|
701
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
702
|
+
style: {
|
|
703
|
+
width: '100%'
|
|
704
|
+
}
|
|
947
705
|
}, !simple && /*#__PURE__*/_react.default.createElement("div", {
|
|
948
706
|
style: {
|
|
949
|
-
marginBottom:
|
|
707
|
+
marginBottom: 8
|
|
950
708
|
}
|
|
951
709
|
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
|
|
952
|
-
type: "
|
|
953
|
-
icon: /*#__PURE__*/_react.default.createElement(_icons.
|
|
710
|
+
type: "dashed",
|
|
711
|
+
icon: /*#__PURE__*/_react.default.createElement(_icons.FolderAddOutlined, null),
|
|
954
712
|
onClick: handleAddRootGroup
|
|
955
713
|
}, "\u6DFB\u52A0\u6839\u7EA7\u522B\u5206\u7EC4")), /*#__PURE__*/_react.default.createElement("div", {
|
|
956
714
|
style: {
|
|
957
|
-
|
|
958
|
-
overflow: 'auto'
|
|
715
|
+
height: scrollY
|
|
959
716
|
}
|
|
960
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
size: "small",
|
|
967
|
-
scroll: {
|
|
968
|
-
x: 1000
|
|
717
|
+
}, /*#__PURE__*/_react.default.createElement(_agGridReact.AgGridReact, {
|
|
718
|
+
theme: _theme.agGridTheme,
|
|
719
|
+
rowData: visibleItems,
|
|
720
|
+
columnDefs: columnDefs,
|
|
721
|
+
getRowId: function getRowId(params) {
|
|
722
|
+
return params.data.id;
|
|
969
723
|
},
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
});
|
|
979
|
-
if (!record) return /*#__PURE__*/_react.default.createElement("tr", props);
|
|
980
|
-
return /*#__PURE__*/_react.default.createElement(DraggableRow, _extends({
|
|
981
|
-
record: record,
|
|
982
|
-
index: index,
|
|
983
|
-
moveRow: handleDragSort
|
|
984
|
-
}, props));
|
|
985
|
-
}
|
|
986
|
-
}
|
|
987
|
-
}
|
|
988
|
-
})), /*#__PURE__*/_react.default.createElement(_MoveNodeModal.default, {
|
|
989
|
-
visible: moveModalVisible,
|
|
990
|
-
currentNode: currentMoveNode,
|
|
991
|
-
allItems: localItems,
|
|
992
|
-
onCancel: handleCloseMoveModal,
|
|
993
|
-
onConfirm: handleConfirmMove
|
|
724
|
+
rowDragManaged: false,
|
|
725
|
+
onRowDragEnd: onRowDragEnd,
|
|
726
|
+
onGridReady: onGridReady,
|
|
727
|
+
animateRows: true,
|
|
728
|
+
rowDragEntireRow: true,
|
|
729
|
+
suppressMoveWhenRowDragging: true,
|
|
730
|
+
suppressMovableColumns: true,
|
|
731
|
+
domLayout: "normal"
|
|
994
732
|
})));
|
|
995
733
|
};
|
|
996
734
|
var _default = exports.default = ColumnConfigTable;
|