diff --git a/src/components/shared/TreeView.vue b/src/components/shared/TreeView.vue index 0869e5b8..4750907e 100644 --- a/src/components/shared/TreeView.vue +++ b/src/components/shared/TreeView.vue @@ -41,6 +41,7 @@ const nodes = defineModel('nodes', { required: true }); const emits = defineEmits<{ (e: 'checked'): void; + (e: 'unchecked'): void; (e: 'select', node: Node, ancestor?: Node[]): void; (e: 'open', node: Node, ancestor?: Node[]): void; (e: 'delete', node: Node): void; @@ -55,6 +56,15 @@ const maxLevel = computed(() => }, 0), ); +function recursiveSelect(node: Node) { + if (node.children) { + node.children.forEach((v) => { + v.checked = true; + recursiveSelect(v); + }); + } +} + function recursiveDeselect(node: Node) { if (node.children) { node.children.forEach((v) => { @@ -63,10 +73,17 @@ function recursiveDeselect(node: Node) { }); } } + function toggleCheck(node: Node) { node.checked = !node.checked; - if (node.checked === false) recursiveDeselect(node); - if (node.checked === true) emits('checked'); + if (node.checked === false) { + recursiveDeselect(node); + emits('unchecked'); + } + if (node.checked === true) { + recursiveSelect(node); + emits('checked'); + } } function toggleExpand(node: Node, ancestor?: []) { @@ -161,6 +178,10 @@ function toggleExpand(node: Node, ancestor?: []) { @@ -230,6 +251,14 @@ function toggleExpand(node: Node, ancestor?: []) { $emit('checked'); } " + @unchecked=" + () => { + if (node.children?.every((v) => v.checked === false)) { + node.checked = false; + } + $emit('checked'); + } + " @select=" (v) => $emit(