vxe-pc-ui 4.6.9 → 4.6.11
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/es/button/src/button.js +2 -4
- package/es/form/render/index.js +2 -4
- package/es/form/src/form.js +97 -37
- package/es/form-design/src/form-view.js +1 -3
- package/es/icon/style.css +1 -1
- package/es/list-design/src/layout-preview.js +5 -7
- package/es/list-design/src/list-view.js +5 -7
- package/es/modal/src/modal.js +2 -4
- package/es/pager/src/pager.js +1 -3
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/table-select/src/table-select.js +5 -7
- package/es/tabs/src/tabs.js +2 -6
- package/es/tree/src/tree.js +238 -173
- package/es/ui/index.js +3 -7
- package/es/ui/src/log.js +1 -1
- package/es/upload/src/upload.js +5 -7
- package/lib/button/src/button.js +2 -4
- package/lib/button/src/button.min.js +1 -1
- package/lib/form/render/index.js +2 -4
- package/lib/form/render/index.min.js +1 -1
- package/lib/form/src/form.js +95 -36
- package/lib/form/src/form.min.js +1 -1
- package/lib/form-design/src/form-view.js +1 -3
- package/lib/form-design/src/form-view.min.js +1 -1
- package/lib/icon/style/style.css +1 -1
- package/lib/icon/style/style.min.css +1 -1
- package/lib/index.umd.js +422 -275
- package/lib/index.umd.min.js +1 -1
- package/lib/list-design/src/layout-preview.js +5 -7
- package/lib/list-design/src/layout-preview.min.js +1 -1
- package/lib/list-design/src/list-view.js +5 -7
- package/lib/list-design/src/list-view.min.js +1 -1
- package/lib/modal/src/modal.js +2 -4
- package/lib/modal/src/modal.min.js +1 -1
- package/lib/pager/src/pager.js +1 -3
- package/lib/pager/src/pager.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/table-select/src/table-select.js +5 -7
- package/lib/table-select/src/table-select.min.js +1 -1
- package/lib/tabs/src/tabs.js +2 -6
- package/lib/tabs/src/tabs.min.js +1 -1
- package/lib/tree/src/tree.js +293 -179
- package/lib/tree/src/tree.min.js +1 -1
- package/lib/ui/index.js +3 -7
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/upload/src/upload.js +5 -7
- package/lib/upload/src/upload.min.js +1 -1
- package/package.json +2 -2
- package/packages/button/src/button.ts +2 -4
- package/packages/form/render/index.ts +2 -4
- package/packages/form/src/form.ts +98 -35
- package/packages/form-design/src/form-view.ts +1 -3
- package/packages/list-design/src/layout-preview.ts +5 -7
- package/packages/list-design/src/list-view.ts +5 -7
- package/packages/modal/src/modal.ts +2 -4
- package/packages/pager/src/pager.ts +1 -3
- package/packages/table-select/src/table-select.ts +5 -7
- package/packages/tabs/src/tabs.ts +2 -6
- package/packages/tree/src/tree.ts +235 -172
- package/packages/ui/index.ts +2 -6
- package/packages/upload/src/upload.ts +5 -7
- package/types/components/tree.d.ts +7 -5
- /package/es/icon/{iconfont.1747279440023.ttf → iconfont.1747357691240.ttf} +0 -0
- /package/es/icon/{iconfont.1747279440023.woff → iconfont.1747357691240.woff} +0 -0
- /package/es/icon/{iconfont.1747279440023.woff2 → iconfont.1747357691240.woff2} +0 -0
- /package/es/{iconfont.1747279440023.ttf → iconfont.1747357691240.ttf} +0 -0
- /package/es/{iconfont.1747279440023.woff → iconfont.1747357691240.woff} +0 -0
- /package/es/{iconfont.1747279440023.woff2 → iconfont.1747357691240.woff2} +0 -0
- /package/lib/icon/style/{iconfont.1747279440023.ttf → iconfont.1747357691240.ttf} +0 -0
- /package/lib/icon/style/{iconfont.1747279440023.woff → iconfont.1747357691240.woff} +0 -0
- /package/lib/icon/style/{iconfont.1747279440023.woff2 → iconfont.1747357691240.woff2} +0 -0
- /package/lib/{iconfont.1747279440023.ttf → iconfont.1747357691240.ttf} +0 -0
- /package/lib/{iconfont.1747279440023.woff → iconfont.1747357691240.woff} +0 -0
- /package/lib/{iconfont.1747279440023.woff2 → iconfont.1747357691240.woff2} +0 -0
package/es/tree/src/tree.js
CHANGED
|
@@ -49,10 +49,10 @@ export default defineComponent({
|
|
|
49
49
|
type: String,
|
|
50
50
|
default: () => getConfig().tree.hasChildField
|
|
51
51
|
},
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
mapChildrenField: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: () => getConfig().tree.mapChildrenField
|
|
55
|
+
},
|
|
56
56
|
transform: Boolean,
|
|
57
57
|
// 已废弃
|
|
58
58
|
isCurrent: Boolean,
|
|
@@ -130,16 +130,18 @@ export default defineComponent({
|
|
|
130
130
|
const refElem = ref();
|
|
131
131
|
const reactData = reactive({
|
|
132
132
|
currentNode: null,
|
|
133
|
-
nodeMaps: {},
|
|
134
133
|
selectRadioKey: props.checkNodeKey,
|
|
135
134
|
treeList: [],
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
selectCheckboxMaps: {},
|
|
139
|
-
indeterminateCheckboxMaps: {}
|
|
135
|
+
updateExpandedFlag: 1,
|
|
136
|
+
updateCheckboxFlag: 1
|
|
140
137
|
});
|
|
141
138
|
const internalData = {
|
|
142
|
-
|
|
139
|
+
// initialized: false,
|
|
140
|
+
nodeMaps: {},
|
|
141
|
+
selectCheckboxMaps: {},
|
|
142
|
+
indeterminateRowMaps: {},
|
|
143
|
+
treeExpandedMaps: {},
|
|
144
|
+
treeExpandLazyLoadedMaps: {}
|
|
143
145
|
};
|
|
144
146
|
const refMaps = {
|
|
145
147
|
refElem
|
|
@@ -160,6 +162,9 @@ export default defineComponent({
|
|
|
160
162
|
const computeChildrenField = computed(() => {
|
|
161
163
|
return props.childrenField || 'children';
|
|
162
164
|
});
|
|
165
|
+
const computeMapChildrenField = computed(() => {
|
|
166
|
+
return props.mapChildrenField || 'mapChildren';
|
|
167
|
+
});
|
|
163
168
|
const computeHasChildField = computed(() => {
|
|
164
169
|
return props.hasChildField || 'hasChild';
|
|
165
170
|
});
|
|
@@ -222,9 +227,10 @@ export default defineComponent({
|
|
|
222
227
|
return XEUtils.eqNull(nodeid) ? '' : encodeURIComponent(nodeid);
|
|
223
228
|
};
|
|
224
229
|
const isExpandByNode = (node) => {
|
|
225
|
-
const {
|
|
230
|
+
const { updateExpandedFlag } = reactData;
|
|
231
|
+
const { treeExpandedMaps } = internalData;
|
|
226
232
|
const nodeid = getNodeId(node);
|
|
227
|
-
return !!treeExpandedMaps[nodeid];
|
|
233
|
+
return !!(updateExpandedFlag && treeExpandedMaps[nodeid]);
|
|
228
234
|
};
|
|
229
235
|
const isCheckedByRadioNodeId = (nodeid) => {
|
|
230
236
|
const { selectRadioKey } = reactData;
|
|
@@ -234,15 +240,17 @@ export default defineComponent({
|
|
|
234
240
|
return isCheckedByRadioNodeId(getNodeId(node));
|
|
235
241
|
};
|
|
236
242
|
const isCheckedByCheckboxNodeId = (nodeid) => {
|
|
237
|
-
const {
|
|
238
|
-
|
|
243
|
+
const { updateCheckboxFlag } = reactData;
|
|
244
|
+
const { selectCheckboxMaps } = internalData;
|
|
245
|
+
return !!(updateCheckboxFlag && selectCheckboxMaps[nodeid]);
|
|
239
246
|
};
|
|
240
247
|
const isCheckedByCheckboxNode = (node) => {
|
|
241
248
|
return isCheckedByCheckboxNodeId(getNodeId(node));
|
|
242
249
|
};
|
|
243
250
|
const isIndeterminateByCheckboxNodeid = (nodeid) => {
|
|
244
|
-
const {
|
|
245
|
-
|
|
251
|
+
const { updateCheckboxFlag } = reactData;
|
|
252
|
+
const { indeterminateRowMaps } = internalData;
|
|
253
|
+
return !!(updateCheckboxFlag && indeterminateRowMaps[nodeid]);
|
|
246
254
|
};
|
|
247
255
|
const isIndeterminateByCheckboxNode = (node) => {
|
|
248
256
|
return isIndeterminateByCheckboxNodeid(getNodeId(node));
|
|
@@ -264,39 +272,58 @@ export default defineComponent({
|
|
|
264
272
|
if (!XEUtils.isArray(nodeList)) {
|
|
265
273
|
nodeList = [nodeList];
|
|
266
274
|
}
|
|
267
|
-
handleCheckedCheckboxNode(nodeList
|
|
275
|
+
handleCheckedCheckboxNode(nodeList, checked);
|
|
268
276
|
}
|
|
269
277
|
return nextTick();
|
|
270
278
|
};
|
|
271
279
|
const setCheckboxByNodeId = (nodeIds, checked) => {
|
|
280
|
+
const { nodeMaps } = internalData;
|
|
272
281
|
if (nodeIds) {
|
|
273
282
|
if (!XEUtils.isArray(nodeIds)) {
|
|
274
283
|
nodeIds = [nodeIds];
|
|
275
284
|
}
|
|
276
|
-
|
|
285
|
+
const nodeList = [];
|
|
286
|
+
nodeIds.forEach((nodeid) => {
|
|
287
|
+
const nodeItem = nodeMaps[nodeid];
|
|
288
|
+
if (nodeItem) {
|
|
289
|
+
nodeList.push(nodeItem.item);
|
|
290
|
+
}
|
|
291
|
+
});
|
|
292
|
+
handleCheckedCheckboxNode(nodeList, checked);
|
|
277
293
|
}
|
|
278
294
|
return nextTick();
|
|
279
295
|
};
|
|
280
|
-
const handleCheckedCheckboxNode = (
|
|
281
|
-
const
|
|
282
|
-
|
|
296
|
+
const handleCheckedCheckboxNode = (nodeList, checked) => {
|
|
297
|
+
const { transform } = props;
|
|
298
|
+
const { selectCheckboxMaps } = internalData;
|
|
299
|
+
const mapChildrenField = computeMapChildrenField.value;
|
|
300
|
+
const childrenField = computeChildrenField.value;
|
|
301
|
+
const checkboxOpts = computeCheckboxOpts.value;
|
|
302
|
+
const { checkStrictly } = checkboxOpts;
|
|
303
|
+
const handleSelect = (node) => {
|
|
304
|
+
const nodeid = getNodeId(node);
|
|
283
305
|
if (checked) {
|
|
284
|
-
|
|
306
|
+
if (!selectCheckboxMaps[nodeid]) {
|
|
307
|
+
selectCheckboxMaps[nodeid] = node;
|
|
308
|
+
}
|
|
285
309
|
}
|
|
286
|
-
else
|
|
287
|
-
|
|
310
|
+
else {
|
|
311
|
+
if (selectCheckboxMaps[nodeid]) {
|
|
312
|
+
delete selectCheckboxMaps[nodeid];
|
|
313
|
+
}
|
|
288
314
|
}
|
|
289
|
-
}
|
|
290
|
-
|
|
315
|
+
};
|
|
316
|
+
if (checkStrictly) {
|
|
317
|
+
nodeList.forEach(handleSelect);
|
|
318
|
+
}
|
|
319
|
+
else {
|
|
320
|
+
XEUtils.eachTree(nodeList, handleSelect, { children: transform ? mapChildrenField : childrenField });
|
|
321
|
+
}
|
|
322
|
+
reactData.updateCheckboxFlag++;
|
|
323
|
+
updateCheckboxStatus();
|
|
291
324
|
};
|
|
292
325
|
const updateCheckboxChecked = (nodeIds) => {
|
|
293
|
-
|
|
294
|
-
if (nodeIds) {
|
|
295
|
-
nodeIds.forEach((key) => {
|
|
296
|
-
selectKeyMaps[key] = true;
|
|
297
|
-
});
|
|
298
|
-
}
|
|
299
|
-
reactData.selectCheckboxMaps = selectKeyMaps;
|
|
326
|
+
setCheckboxByNodeId(nodeIds, true);
|
|
300
327
|
};
|
|
301
328
|
const handleSetExpand = (nodeid, expanded, expandedMaps) => {
|
|
302
329
|
if (expanded) {
|
|
@@ -339,7 +366,8 @@ export default defineComponent({
|
|
|
339
366
|
return null;
|
|
340
367
|
},
|
|
341
368
|
getCurrentNode() {
|
|
342
|
-
const { currentNode
|
|
369
|
+
const { currentNode } = reactData;
|
|
370
|
+
const { nodeMaps } = internalData;
|
|
343
371
|
if (currentNode) {
|
|
344
372
|
const nodeItem = nodeMaps[getNodeId(currentNode)];
|
|
345
373
|
if (nodeItem) {
|
|
@@ -349,7 +377,7 @@ export default defineComponent({
|
|
|
349
377
|
return null;
|
|
350
378
|
},
|
|
351
379
|
setCurrentNodeId(nodeKey) {
|
|
352
|
-
const { nodeMaps } =
|
|
380
|
+
const { nodeMaps } = internalData;
|
|
353
381
|
const nodeItem = nodeMaps[nodeKey];
|
|
354
382
|
reactData.currentNode = nodeItem ? nodeItem.item : null;
|
|
355
383
|
return nextTick();
|
|
@@ -366,7 +394,8 @@ export default defineComponent({
|
|
|
366
394
|
return reactData.selectRadioKey || null;
|
|
367
395
|
},
|
|
368
396
|
getRadioNode() {
|
|
369
|
-
const { selectRadioKey
|
|
397
|
+
const { selectRadioKey } = reactData;
|
|
398
|
+
const { nodeMaps } = internalData;
|
|
370
399
|
if (selectRadioKey) {
|
|
371
400
|
const nodeItem = nodeMaps[selectRadioKey];
|
|
372
401
|
if (nodeItem) {
|
|
@@ -383,11 +412,11 @@ export default defineComponent({
|
|
|
383
412
|
setCheckboxNode,
|
|
384
413
|
setCheckboxByNodeId,
|
|
385
414
|
getCheckboxNodeIds() {
|
|
386
|
-
const { selectCheckboxMaps } =
|
|
415
|
+
const { selectCheckboxMaps } = internalData;
|
|
387
416
|
return Object.keys(selectCheckboxMaps);
|
|
388
417
|
},
|
|
389
418
|
getCheckboxNodes() {
|
|
390
|
-
const { nodeMaps, selectCheckboxMaps } =
|
|
419
|
+
const { nodeMaps, selectCheckboxMaps } = internalData;
|
|
391
420
|
const list = [];
|
|
392
421
|
XEUtils.each(selectCheckboxMaps, (item, nodeid) => {
|
|
393
422
|
const nodeItem = nodeMaps[nodeid];
|
|
@@ -398,50 +427,56 @@ export default defineComponent({
|
|
|
398
427
|
return list;
|
|
399
428
|
},
|
|
400
429
|
clearCheckboxNode() {
|
|
401
|
-
|
|
430
|
+
internalData.selectCheckboxMaps = {};
|
|
431
|
+
reactData.updateCheckboxFlag++;
|
|
402
432
|
return nextTick();
|
|
403
433
|
},
|
|
404
434
|
setAllCheckboxNode(checked) {
|
|
435
|
+
const { transform } = props;
|
|
405
436
|
const selectMaps = {};
|
|
406
437
|
const childrenField = computeChildrenField.value;
|
|
438
|
+
const mapChildrenField = computeMapChildrenField.value;
|
|
407
439
|
if (checked) {
|
|
408
440
|
XEUtils.eachTree(reactData.treeList, (node) => {
|
|
409
441
|
const nodeid = getNodeId(node);
|
|
410
442
|
selectMaps[nodeid] = true;
|
|
411
|
-
}, { children: childrenField });
|
|
443
|
+
}, { children: transform ? mapChildrenField : childrenField });
|
|
412
444
|
}
|
|
413
|
-
|
|
445
|
+
internalData.selectCheckboxMaps = selectMaps;
|
|
446
|
+
reactData.updateCheckboxFlag++;
|
|
414
447
|
return nextTick();
|
|
415
448
|
},
|
|
416
449
|
clearExpandNode() {
|
|
417
450
|
return treeMethods.clearAllExpandNode();
|
|
418
451
|
},
|
|
419
452
|
clearAllExpandNode() {
|
|
420
|
-
|
|
453
|
+
const { nodeMaps } = internalData;
|
|
454
|
+
XEUtils.each(nodeMaps, (nodeItem) => {
|
|
421
455
|
nodeItem.treeLoaded = false;
|
|
422
456
|
});
|
|
423
|
-
|
|
457
|
+
internalData.treeExpandedMaps = {};
|
|
458
|
+
reactData.updateExpandedFlag++;
|
|
424
459
|
return nextTick();
|
|
425
460
|
},
|
|
426
461
|
setExpandByNodeId(nodeids, expanded) {
|
|
427
|
-
const
|
|
462
|
+
const { treeExpandedMaps } = internalData;
|
|
428
463
|
if (nodeids) {
|
|
429
464
|
if (!XEUtils.isArray(nodeids)) {
|
|
430
465
|
nodeids = [nodeids];
|
|
431
466
|
}
|
|
432
467
|
nodeids.forEach((nodeid) => {
|
|
433
|
-
handleSetExpand(nodeid, expanded,
|
|
468
|
+
handleSetExpand(nodeid, expanded, treeExpandedMaps);
|
|
434
469
|
});
|
|
435
|
-
reactData.
|
|
470
|
+
reactData.updateExpandedFlag++;
|
|
436
471
|
}
|
|
437
472
|
return nextTick();
|
|
438
473
|
},
|
|
439
474
|
getExpandNodeIds() {
|
|
440
|
-
const { treeExpandedMaps } =
|
|
441
|
-
return
|
|
475
|
+
const { treeExpandedMaps } = internalData;
|
|
476
|
+
return XEUtils.keys(treeExpandedMaps);
|
|
442
477
|
},
|
|
443
478
|
getExpandNodes() {
|
|
444
|
-
const { nodeMaps, treeExpandedMaps } =
|
|
479
|
+
const { nodeMaps, treeExpandedMaps } = internalData;
|
|
445
480
|
const list = [];
|
|
446
481
|
XEUtils.each(treeExpandedMaps, (item, nodeid) => {
|
|
447
482
|
const nodeItem = nodeMaps[nodeid];
|
|
@@ -452,60 +487,62 @@ export default defineComponent({
|
|
|
452
487
|
return list;
|
|
453
488
|
},
|
|
454
489
|
setExpandNode(nodes, expanded) {
|
|
455
|
-
const
|
|
490
|
+
const { treeExpandedMaps } = internalData;
|
|
456
491
|
if (nodes) {
|
|
457
492
|
if (!XEUtils.isArray(nodes)) {
|
|
458
493
|
nodes = [nodes];
|
|
459
494
|
}
|
|
460
495
|
nodes.forEach((node) => {
|
|
461
496
|
const nodeid = getNodeId(node);
|
|
462
|
-
handleSetExpand(nodeid, expanded,
|
|
497
|
+
handleSetExpand(nodeid, expanded, treeExpandedMaps);
|
|
463
498
|
});
|
|
464
|
-
reactData.
|
|
499
|
+
reactData.updateExpandedFlag++;
|
|
465
500
|
}
|
|
466
501
|
return nextTick();
|
|
467
502
|
},
|
|
468
503
|
toggleExpandByNodeId(nodeids) {
|
|
469
|
-
const
|
|
504
|
+
const { treeExpandedMaps } = internalData;
|
|
470
505
|
if (nodeids) {
|
|
471
506
|
if (!XEUtils.isArray(nodeids)) {
|
|
472
507
|
nodeids = [nodeids];
|
|
473
508
|
}
|
|
474
509
|
nodeids.forEach((nodeid) => {
|
|
475
|
-
handleSetExpand(nodeid, !
|
|
510
|
+
handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
|
|
476
511
|
});
|
|
477
|
-
reactData.
|
|
512
|
+
reactData.updateExpandedFlag++;
|
|
478
513
|
}
|
|
479
514
|
return nextTick();
|
|
480
515
|
},
|
|
481
516
|
toggleExpandNode(nodes) {
|
|
482
|
-
const
|
|
517
|
+
const { treeExpandedMaps } = internalData;
|
|
483
518
|
if (nodes) {
|
|
484
519
|
if (!XEUtils.isArray(nodes)) {
|
|
485
520
|
nodes = [nodes];
|
|
486
521
|
}
|
|
487
522
|
nodes.forEach((node) => {
|
|
488
523
|
const nodeid = getNodeId(node);
|
|
489
|
-
handleSetExpand(nodeid, !
|
|
524
|
+
handleSetExpand(nodeid, !treeExpandedMaps[nodeid], treeExpandedMaps);
|
|
490
525
|
});
|
|
491
|
-
reactData.
|
|
526
|
+
reactData.updateExpandedFlag++;
|
|
492
527
|
}
|
|
493
528
|
return nextTick();
|
|
494
529
|
},
|
|
495
530
|
setAllExpandNode(expanded) {
|
|
496
|
-
const
|
|
531
|
+
const { transform } = props;
|
|
532
|
+
const { treeExpandedMaps } = internalData;
|
|
497
533
|
const childrenField = computeChildrenField.value;
|
|
534
|
+
const mapChildrenField = computeMapChildrenField.value;
|
|
498
535
|
if (expanded) {
|
|
499
536
|
XEUtils.eachTree(reactData.treeList, (node) => {
|
|
500
537
|
const childList = XEUtils.get(node, childrenField);
|
|
501
538
|
const hasChild = childList && childList.length;
|
|
502
539
|
if (hasChild) {
|
|
503
540
|
const nodeid = getNodeId(node);
|
|
504
|
-
|
|
541
|
+
treeExpandedMaps[nodeid] = true;
|
|
505
542
|
}
|
|
506
|
-
}, { children: childrenField });
|
|
543
|
+
}, { children: transform ? mapChildrenField : childrenField });
|
|
507
544
|
}
|
|
508
|
-
reactData.
|
|
545
|
+
reactData.updateExpandedFlag++;
|
|
509
546
|
return nextTick();
|
|
510
547
|
},
|
|
511
548
|
reloadExpandNode(node) {
|
|
@@ -518,7 +555,7 @@ export default defineComponent({
|
|
|
518
555
|
},
|
|
519
556
|
clearExpandLoaded(node) {
|
|
520
557
|
const { lazy } = props;
|
|
521
|
-
const { nodeMaps } =
|
|
558
|
+
const { nodeMaps } = internalData;
|
|
522
559
|
if (lazy) {
|
|
523
560
|
const nodeItem = nodeMaps[getNodeId(node)];
|
|
524
561
|
if (nodeItem) {
|
|
@@ -532,7 +569,7 @@ export default defineComponent({
|
|
|
532
569
|
*/
|
|
533
570
|
loadChildrenNode(node, childRecords) {
|
|
534
571
|
const { lazy, transform } = props;
|
|
535
|
-
const { nodeMaps } =
|
|
572
|
+
const { nodeMaps } = internalData;
|
|
536
573
|
if (!lazy) {
|
|
537
574
|
return Promise.resolve([]);
|
|
538
575
|
}
|
|
@@ -569,20 +606,23 @@ export default defineComponent({
|
|
|
569
606
|
isIndeterminateByCheckboxNode,
|
|
570
607
|
isCheckedByCheckboxNode,
|
|
571
608
|
getCheckboxIndeterminateNodes() {
|
|
572
|
-
const {
|
|
573
|
-
const
|
|
574
|
-
XEUtils.
|
|
575
|
-
|
|
576
|
-
|
|
609
|
+
const { nodeMaps, indeterminateRowMaps } = internalData;
|
|
610
|
+
const list = [];
|
|
611
|
+
XEUtils.each(indeterminateRowMaps, (item, nodeid) => {
|
|
612
|
+
const nodeItem = nodeMaps[nodeid];
|
|
613
|
+
if (nodeItem) {
|
|
614
|
+
list.push(nodeItem.item);
|
|
577
615
|
}
|
|
578
616
|
});
|
|
579
|
-
return
|
|
617
|
+
return list;
|
|
580
618
|
}
|
|
581
619
|
};
|
|
582
620
|
const cacheNodeMap = () => {
|
|
621
|
+
const { transform } = props;
|
|
583
622
|
const { treeList } = reactData;
|
|
584
623
|
const valueField = computeValueField.value;
|
|
585
624
|
const childrenField = computeChildrenField.value;
|
|
625
|
+
const mapChildrenField = computeMapChildrenField.value;
|
|
586
626
|
const keyMaps = {};
|
|
587
627
|
XEUtils.eachTree(treeList, (item, itemIndex, items, path, parent, nodes) => {
|
|
588
628
|
let nodeid = getNodeId(item);
|
|
@@ -600,31 +640,34 @@ export default defineComponent({
|
|
|
600
640
|
lineCount: 0,
|
|
601
641
|
treeLoaded: false
|
|
602
642
|
};
|
|
603
|
-
}, { children: childrenField });
|
|
604
|
-
|
|
643
|
+
}, { children: transform ? mapChildrenField : childrenField });
|
|
644
|
+
internalData.nodeMaps = keyMaps;
|
|
605
645
|
};
|
|
606
|
-
const
|
|
646
|
+
const loadTreeData = (list) => {
|
|
607
647
|
const { expandAll, transform } = props;
|
|
608
648
|
const { initialized } = internalData;
|
|
609
649
|
const keyField = computeKeyField.value;
|
|
610
650
|
const parentField = computeParentField.value;
|
|
611
|
-
const
|
|
651
|
+
const mapChildrenField = computeMapChildrenField.value;
|
|
612
652
|
if (transform) {
|
|
613
|
-
reactData.treeList = XEUtils.toArrayTree(list, { key: keyField, parentKey: parentField, mapChildren:
|
|
653
|
+
reactData.treeList = XEUtils.toArrayTree(list, { key: keyField, parentKey: parentField, mapChildren: mapChildrenField });
|
|
614
654
|
}
|
|
615
655
|
else {
|
|
616
656
|
reactData.treeList = list ? list.slice(0) : [];
|
|
617
657
|
}
|
|
618
658
|
cacheNodeMap();
|
|
619
|
-
if (
|
|
659
|
+
if (!initialized) {
|
|
620
660
|
if (list && list.length) {
|
|
621
661
|
internalData.initialized = true;
|
|
622
|
-
|
|
662
|
+
if (expandAll) {
|
|
663
|
+
$xeTree.setAllExpandNode(true);
|
|
664
|
+
}
|
|
665
|
+
$xeTree.setCheckboxByNodeId(props.checkNodeKeys || [], true);
|
|
623
666
|
}
|
|
624
667
|
}
|
|
625
668
|
};
|
|
626
669
|
const handleCountLine = (item, isRoot, nodeItem) => {
|
|
627
|
-
const { treeExpandedMaps } =
|
|
670
|
+
const { treeExpandedMaps } = internalData;
|
|
628
671
|
const childrenField = computeChildrenField.value;
|
|
629
672
|
const nodeid = getNodeId(item);
|
|
630
673
|
nodeItem.lineCount++;
|
|
@@ -637,7 +680,7 @@ export default defineComponent({
|
|
|
637
680
|
}
|
|
638
681
|
};
|
|
639
682
|
const updateNodeLine = (node) => {
|
|
640
|
-
const { nodeMaps } =
|
|
683
|
+
const { nodeMaps } = internalData;
|
|
641
684
|
if (node) {
|
|
642
685
|
const nodeid = getNodeId(node);
|
|
643
686
|
const nodeItem = nodeMaps[nodeid];
|
|
@@ -692,14 +735,12 @@ export default defineComponent({
|
|
|
692
735
|
const { checkStrictly } = checkboxOpts;
|
|
693
736
|
return new Promise(resolve => {
|
|
694
737
|
if (loadMethod) {
|
|
695
|
-
const
|
|
696
|
-
const { nodeMaps } = reactData;
|
|
738
|
+
const { nodeMaps } = internalData;
|
|
697
739
|
const nodeid = getNodeId(node);
|
|
698
740
|
const nodeItem = nodeMaps[nodeid];
|
|
699
|
-
|
|
700
|
-
reactData.treeExpandLazyLoadedMaps = tempExpandLazyLoadedMaps;
|
|
741
|
+
internalData.treeExpandLazyLoadedMaps[nodeid] = true;
|
|
701
742
|
Promise.resolve(loadMethod({ $tree: $xeTree, node })).then((childRecords) => {
|
|
702
|
-
const { treeExpandLazyLoadedMaps } =
|
|
743
|
+
const { treeExpandLazyLoadedMaps } = internalData;
|
|
703
744
|
nodeItem.treeLoaded = true;
|
|
704
745
|
if (treeExpandLazyLoadedMaps[nodeid]) {
|
|
705
746
|
treeExpandLazyLoadedMaps[nodeid] = false;
|
|
@@ -708,15 +749,15 @@ export default defineComponent({
|
|
|
708
749
|
childRecords = [];
|
|
709
750
|
}
|
|
710
751
|
if (childRecords) {
|
|
711
|
-
return
|
|
712
|
-
const
|
|
713
|
-
if (childRows.length && !
|
|
714
|
-
|
|
752
|
+
return $xeTree.loadChildrenNode(node, childRecords).then(childRows => {
|
|
753
|
+
const { treeExpandedMaps } = internalData;
|
|
754
|
+
if (childRows.length && !treeExpandedMaps[nodeid]) {
|
|
755
|
+
treeExpandedMaps[nodeid] = true;
|
|
715
756
|
}
|
|
716
|
-
reactData.
|
|
757
|
+
reactData.updateExpandedFlag++;
|
|
717
758
|
// 如果当前节点已选中,则展开后子节点也被选中
|
|
718
|
-
if (!checkStrictly &&
|
|
719
|
-
handleCheckedCheckboxNode(childRows
|
|
759
|
+
if (!checkStrictly && $xeTree.isCheckedByCheckboxNodeId(nodeid)) {
|
|
760
|
+
handleCheckedCheckboxNode(childRows, true);
|
|
720
761
|
}
|
|
721
762
|
updateNodeLine(node);
|
|
722
763
|
dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
|
|
@@ -728,7 +769,7 @@ export default defineComponent({
|
|
|
728
769
|
dispatchEvent('load-success', { node, data: childRecords }, new Event('load-success'));
|
|
729
770
|
}
|
|
730
771
|
}).catch((e) => {
|
|
731
|
-
const { treeExpandLazyLoadedMaps } =
|
|
772
|
+
const { treeExpandLazyLoadedMaps } = internalData;
|
|
732
773
|
nodeItem.treeLoaded = false;
|
|
733
774
|
if (treeExpandLazyLoadedMaps[nodeid]) {
|
|
734
775
|
treeExpandLazyLoadedMaps[nodeid] = false;
|
|
@@ -752,8 +793,8 @@ export default defineComponent({
|
|
|
752
793
|
*/
|
|
753
794
|
const handleBaseTreeExpand = (nodeList, expanded) => {
|
|
754
795
|
const { lazy, accordion, toggleMethod } = props;
|
|
755
|
-
const {
|
|
756
|
-
const
|
|
796
|
+
const { treeExpandLazyLoadedMaps, treeExpandedMaps } = internalData;
|
|
797
|
+
const { nodeMaps } = internalData;
|
|
757
798
|
const childrenField = computeChildrenField.value;
|
|
758
799
|
const hasChildField = computeHasChildField.value;
|
|
759
800
|
const result = [];
|
|
@@ -766,8 +807,8 @@ export default defineComponent({
|
|
|
766
807
|
if (nodeItem) {
|
|
767
808
|
nodeItem.items.forEach(item => {
|
|
768
809
|
const itemNodeId = getNodeId(item);
|
|
769
|
-
if (
|
|
770
|
-
delete
|
|
810
|
+
if (treeExpandedMaps[itemNodeId]) {
|
|
811
|
+
delete treeExpandedMaps[itemNodeId];
|
|
771
812
|
}
|
|
772
813
|
});
|
|
773
814
|
}
|
|
@@ -776,7 +817,7 @@ export default defineComponent({
|
|
|
776
817
|
if (expanded) {
|
|
777
818
|
validNodes.forEach((item) => {
|
|
778
819
|
const itemNodeId = getNodeId(item);
|
|
779
|
-
if (!
|
|
820
|
+
if (!treeExpandedMaps[itemNodeId]) {
|
|
780
821
|
const nodeItem = nodeMaps[itemNodeId];
|
|
781
822
|
const isLoad = lazy && item[hasChildField] && !nodeItem.treeLoaded && !treeExpandLazyLoadedMaps[itemNodeId];
|
|
782
823
|
// 是否使用懒加载
|
|
@@ -785,7 +826,7 @@ export default defineComponent({
|
|
|
785
826
|
}
|
|
786
827
|
else {
|
|
787
828
|
if (item[childrenField] && item[childrenField].length) {
|
|
788
|
-
|
|
829
|
+
treeExpandedMaps[itemNodeId] = true;
|
|
789
830
|
expandNodes.push(item);
|
|
790
831
|
}
|
|
791
832
|
}
|
|
@@ -795,19 +836,19 @@ export default defineComponent({
|
|
|
795
836
|
else {
|
|
796
837
|
validNodes.forEach(item => {
|
|
797
838
|
const itemNodeId = getNodeId(item);
|
|
798
|
-
if (
|
|
799
|
-
delete
|
|
839
|
+
if (treeExpandedMaps[itemNodeId]) {
|
|
840
|
+
delete treeExpandedMaps[itemNodeId];
|
|
800
841
|
expandNodes.push(item);
|
|
801
842
|
}
|
|
802
843
|
});
|
|
803
844
|
}
|
|
804
|
-
reactData.
|
|
845
|
+
reactData.updateExpandedFlag++;
|
|
805
846
|
expandNodes.forEach(updateNodeLine);
|
|
806
847
|
return Promise.all(result);
|
|
807
848
|
};
|
|
808
849
|
const toggleExpandEvent = (evnt, node) => {
|
|
809
850
|
const { lazy } = props;
|
|
810
|
-
const { treeExpandedMaps, treeExpandLazyLoadedMaps } =
|
|
851
|
+
const { treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
|
|
811
852
|
const nodeid = getNodeId(node);
|
|
812
853
|
const expanded = !treeExpandedMaps[nodeid];
|
|
813
854
|
evnt.stopPropagation();
|
|
@@ -815,72 +856,97 @@ export default defineComponent({
|
|
|
815
856
|
handleBaseTreeExpand([node], expanded);
|
|
816
857
|
}
|
|
817
858
|
};
|
|
818
|
-
const handleNodeCheckboxStatus = (node, selectKeyMaps, indeterminateMaps) => {
|
|
819
|
-
const childrenField = computeChildrenField.value;
|
|
820
|
-
const childList = XEUtils.get(node, childrenField);
|
|
821
|
-
const nodeid = getNodeId(node);
|
|
822
|
-
if (childList && childList.length) {
|
|
823
|
-
let checkSome = false;
|
|
824
|
-
let checkSize = 0;
|
|
825
|
-
childList.forEach(childNode => {
|
|
826
|
-
const childNodeid = getNodeId(childNode);
|
|
827
|
-
const isChecked = selectKeyMaps[childNodeid];
|
|
828
|
-
if (isChecked || indeterminateMaps[childNodeid]) {
|
|
829
|
-
if (isChecked) {
|
|
830
|
-
checkSize++;
|
|
831
|
-
}
|
|
832
|
-
checkSome = true;
|
|
833
|
-
}
|
|
834
|
-
});
|
|
835
|
-
const checkAll = checkSize === childList.length;
|
|
836
|
-
if (checkAll) {
|
|
837
|
-
if (!selectKeyMaps[nodeid]) {
|
|
838
|
-
selectKeyMaps[nodeid] = true;
|
|
839
|
-
}
|
|
840
|
-
if (indeterminateMaps[nodeid]) {
|
|
841
|
-
delete indeterminateMaps[nodeid];
|
|
842
|
-
}
|
|
843
|
-
}
|
|
844
|
-
else {
|
|
845
|
-
if (selectKeyMaps[nodeid]) {
|
|
846
|
-
delete selectKeyMaps[nodeid];
|
|
847
|
-
}
|
|
848
|
-
indeterminateMaps[nodeid] = checkSome;
|
|
849
|
-
}
|
|
850
|
-
}
|
|
851
|
-
else {
|
|
852
|
-
if (indeterminateMaps[nodeid]) {
|
|
853
|
-
delete indeterminateMaps[nodeid];
|
|
854
|
-
}
|
|
855
|
-
}
|
|
856
|
-
};
|
|
857
859
|
const updateCheckboxStatus = () => {
|
|
860
|
+
const { transform } = props;
|
|
858
861
|
const { treeList } = reactData;
|
|
862
|
+
const { selectCheckboxMaps, indeterminateRowMaps } = internalData;
|
|
859
863
|
const childrenField = computeChildrenField.value;
|
|
864
|
+
const mapChildrenField = computeMapChildrenField.value;
|
|
860
865
|
const checkboxOpts = computeCheckboxOpts.value;
|
|
861
|
-
const { checkStrictly } = checkboxOpts;
|
|
866
|
+
const { checkStrictly, checkMethod } = checkboxOpts;
|
|
862
867
|
if (!checkStrictly) {
|
|
863
|
-
const
|
|
864
|
-
const
|
|
865
|
-
XEUtils.eachTree(treeList, (node
|
|
866
|
-
const
|
|
867
|
-
|
|
868
|
-
|
|
868
|
+
const childRowMaps = {};
|
|
869
|
+
const childRowList = [];
|
|
870
|
+
XEUtils.eachTree(treeList, (node) => {
|
|
871
|
+
const nodeid = getNodeId(node);
|
|
872
|
+
const childList = node[childrenField];
|
|
873
|
+
if (childList && childList.length && !childRowMaps[nodeid]) {
|
|
874
|
+
childRowMaps[nodeid] = 1;
|
|
875
|
+
childRowList.unshift([node, nodeid, childList]);
|
|
869
876
|
}
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
877
|
+
}, { children: transform ? mapChildrenField : childrenField });
|
|
878
|
+
childRowList.forEach(vals => {
|
|
879
|
+
const node = vals[0];
|
|
880
|
+
const nodeid = vals[1];
|
|
881
|
+
const childList = vals[2];
|
|
882
|
+
let sLen = 0; // 已选
|
|
883
|
+
let hLen = 0; // 半选
|
|
884
|
+
let vLen = 0; // 有效行
|
|
885
|
+
childList.forEach(checkMethod
|
|
886
|
+
? (item) => {
|
|
887
|
+
const childNodeid = getNodeId(item);
|
|
888
|
+
const isSelect = selectCheckboxMaps[childNodeid];
|
|
889
|
+
if (checkMethod({ node: item })) {
|
|
890
|
+
if (isSelect) {
|
|
891
|
+
sLen++;
|
|
892
|
+
}
|
|
893
|
+
else if (indeterminateRowMaps[childNodeid]) {
|
|
894
|
+
hLen++;
|
|
895
|
+
}
|
|
896
|
+
vLen++;
|
|
897
|
+
}
|
|
898
|
+
else {
|
|
899
|
+
if (isSelect) {
|
|
900
|
+
sLen++;
|
|
901
|
+
}
|
|
902
|
+
else if (indeterminateRowMaps[childNodeid]) {
|
|
903
|
+
hLen++;
|
|
904
|
+
}
|
|
905
|
+
}
|
|
906
|
+
}
|
|
907
|
+
: item => {
|
|
908
|
+
const childNodeid = getNodeId(item);
|
|
909
|
+
const isSelect = selectCheckboxMaps[childNodeid];
|
|
910
|
+
if (isSelect) {
|
|
911
|
+
sLen++;
|
|
912
|
+
}
|
|
913
|
+
else if (indeterminateRowMaps[childNodeid]) {
|
|
914
|
+
hLen++;
|
|
915
|
+
}
|
|
916
|
+
vLen++;
|
|
917
|
+
});
|
|
918
|
+
const isSelected = sLen >= vLen;
|
|
919
|
+
const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
|
|
920
|
+
if (isSelected) {
|
|
921
|
+
selectCheckboxMaps[nodeid] = node;
|
|
922
|
+
if (indeterminateRowMaps[nodeid]) {
|
|
923
|
+
delete indeterminateRowMaps[nodeid];
|
|
924
|
+
}
|
|
925
|
+
}
|
|
926
|
+
else {
|
|
927
|
+
if (selectCheckboxMaps[nodeid]) {
|
|
928
|
+
delete selectCheckboxMaps[nodeid];
|
|
929
|
+
}
|
|
930
|
+
if (halfSelect) {
|
|
931
|
+
indeterminateRowMaps[nodeid] = node;
|
|
932
|
+
}
|
|
933
|
+
else {
|
|
934
|
+
if (indeterminateRowMaps[nodeid]) {
|
|
935
|
+
delete indeterminateRowMaps[nodeid];
|
|
936
|
+
}
|
|
874
937
|
}
|
|
875
938
|
}
|
|
876
939
|
});
|
|
877
|
-
reactData.
|
|
878
|
-
reactData.indeterminateCheckboxMaps = indeterminateMaps;
|
|
940
|
+
reactData.updateCheckboxFlag++;
|
|
879
941
|
}
|
|
880
942
|
};
|
|
881
943
|
const changeCheckboxEvent = (evnt, node) => {
|
|
882
944
|
evnt.preventDefault();
|
|
883
945
|
evnt.stopPropagation();
|
|
946
|
+
const { transform } = props;
|
|
947
|
+
const { selectCheckboxMaps } = internalData;
|
|
948
|
+
const childrenField = computeChildrenField.value;
|
|
949
|
+
const mapChildrenField = computeMapChildrenField.value;
|
|
884
950
|
const checkboxOpts = computeCheckboxOpts.value;
|
|
885
951
|
const { checkStrictly, checkMethod } = checkboxOpts;
|
|
886
952
|
let isDisabled = !!checkMethod;
|
|
@@ -890,35 +956,33 @@ export default defineComponent({
|
|
|
890
956
|
if (isDisabled) {
|
|
891
957
|
return;
|
|
892
958
|
}
|
|
893
|
-
const selectKeyMaps = Object.assign({}, reactData.selectCheckboxMaps);
|
|
894
|
-
const childrenField = computeChildrenField.value;
|
|
895
959
|
const nodeid = getNodeId(node);
|
|
896
960
|
let isChecked = false;
|
|
897
|
-
if (
|
|
898
|
-
delete
|
|
961
|
+
if (selectCheckboxMaps[nodeid]) {
|
|
962
|
+
delete selectCheckboxMaps[nodeid];
|
|
899
963
|
}
|
|
900
964
|
else {
|
|
901
965
|
isChecked = true;
|
|
902
|
-
|
|
966
|
+
selectCheckboxMaps[nodeid] = node;
|
|
903
967
|
}
|
|
904
968
|
if (!checkStrictly) {
|
|
905
969
|
XEUtils.eachTree(XEUtils.get(node, childrenField), (childNode) => {
|
|
906
970
|
const childNodeid = getNodeId(childNode);
|
|
907
971
|
if (isChecked) {
|
|
908
|
-
if (!
|
|
909
|
-
|
|
972
|
+
if (!selectCheckboxMaps[childNodeid]) {
|
|
973
|
+
selectCheckboxMaps[childNodeid] = true;
|
|
910
974
|
}
|
|
911
975
|
}
|
|
912
976
|
else {
|
|
913
|
-
if (
|
|
914
|
-
delete
|
|
977
|
+
if (selectCheckboxMaps[childNodeid]) {
|
|
978
|
+
delete selectCheckboxMaps[childNodeid];
|
|
915
979
|
}
|
|
916
980
|
}
|
|
917
|
-
}, { children: childrenField });
|
|
981
|
+
}, { children: transform ? mapChildrenField : childrenField });
|
|
918
982
|
}
|
|
919
|
-
reactData.
|
|
983
|
+
reactData.updateCheckboxFlag++;
|
|
920
984
|
updateCheckboxStatus();
|
|
921
|
-
const value =
|
|
985
|
+
const value = XEUtils.keys(selectCheckboxMaps);
|
|
922
986
|
emitCheckboxMode(value);
|
|
923
987
|
dispatchEvent('checkbox-change', { node, value, checked: isChecked }, evnt);
|
|
924
988
|
};
|
|
@@ -1030,7 +1094,8 @@ export default defineComponent({
|
|
|
1030
1094
|
};
|
|
1031
1095
|
const renderNode = (node) => {
|
|
1032
1096
|
const { lazy, showRadio, showCheckbox, showLine, indent, iconOpen, iconClose, iconLoaded, showIcon } = props;
|
|
1033
|
-
const {
|
|
1097
|
+
const { currentNode, selectRadioKey, updateExpandedFlag } = reactData;
|
|
1098
|
+
const { nodeMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
|
|
1034
1099
|
const childrenField = computeChildrenField.value;
|
|
1035
1100
|
const titleField = computeTitleField.value;
|
|
1036
1101
|
const hasChildField = computeHasChildField.value;
|
|
@@ -1040,7 +1105,7 @@ export default defineComponent({
|
|
|
1040
1105
|
const titleSlot = slots.title;
|
|
1041
1106
|
const extraSlot = slots.extra;
|
|
1042
1107
|
const nodeid = getNodeId(node);
|
|
1043
|
-
const isExpand = treeExpandedMaps[nodeid];
|
|
1108
|
+
const isExpand = updateExpandedFlag && treeExpandedMaps[nodeid];
|
|
1044
1109
|
const nodeItem = nodeMaps[nodeid];
|
|
1045
1110
|
const nodeValue = XEUtils.get(node, titleField);
|
|
1046
1111
|
const childVns = [];
|
|
@@ -1190,7 +1255,7 @@ export default defineComponent({
|
|
|
1190
1255
|
dataFlag.value++;
|
|
1191
1256
|
});
|
|
1192
1257
|
watch(dataFlag, () => {
|
|
1193
|
-
|
|
1258
|
+
loadTreeData(props.data || []);
|
|
1194
1259
|
});
|
|
1195
1260
|
watch(() => props.checkNodeKey, (val) => {
|
|
1196
1261
|
reactData.selectRadioKey = val;
|
|
@@ -1207,11 +1272,11 @@ export default defineComponent({
|
|
|
1207
1272
|
});
|
|
1208
1273
|
onUnmounted(() => {
|
|
1209
1274
|
reactData.treeList = [];
|
|
1210
|
-
|
|
1211
|
-
|
|
1275
|
+
internalData.treeExpandedMaps = {};
|
|
1276
|
+
internalData.indeterminateRowMaps = {};
|
|
1277
|
+
internalData.nodeMaps = {};
|
|
1212
1278
|
});
|
|
1213
|
-
|
|
1214
|
-
updateCheckboxChecked(props.checkNodeKeys || []);
|
|
1279
|
+
loadTreeData(props.data || []);
|
|
1215
1280
|
$xeTree.renderVN = renderVN;
|
|
1216
1281
|
return $xeTree;
|
|
1217
1282
|
},
|