refs #6763 fix tree

src/components/ui/VnTree.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref,computed, } from 'vue';
+import { onMounted, ref,computed, watch, } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useState } from 'src/composables/useState';
@@ -27,14 +27,45 @@ const fetchedChildrensSet = ref(new Set());
 const formData = computed(() => state.get('Tree'));
 
 const onNodeExpanded = (nodeKeysArray) => {
+    console.log('ENTRY',nodeKeysArray)
+
     // Verificar si el nodo ya fue expandido
     if (!fetchedChildrensSet.value.has(nodeKeysArray.at(-1))) {
         fetchedChildrensSet.value.add(nodeKeysArray.at(-1));
         fetchNodeLeaves(nodeKeysArray.at(-1)); // Llamar a la función para obtener los nodos hijos
     }
-    state.set('Tree', nodeKeysArray.at(-1));
+
+    console.log(expanded.value)
+    console.log(nodes.value)
+    console.log(nodes.value[0].children)
 };
 
+watch(
+    ()=> nodes.value,
+    async(n)  => {
+        console.log('ha entrado',n)
+        addTree({nodes: n});
+    },
+    {deep: true}
+)
+
+watch(
+    ()=> expanded.value,
+    async(n)  => {
+        console.log('ha entrado', n)
+        addTree({nodeKeys: n});
+    },
+    {deep: true}
+)
+
+function addTree(tree){
+    const currentTree = state.get('Tree');
+    console.log('current', currentTree)
+    Object.assign(currentTree ?? {}, tree)
+    console.log('current assign', currentTree)
+
+    state.set('Tree', tree);
+}
 const fetchNodeLeaves = async (nodeKey) => {
     try {
         const node = treeRef.value.getNodeByKey(nodeKey);
@@ -88,10 +119,19 @@ const onNodeCreated = async () => {
     await fetchNodeLeaves(creationNodeSelectedId.value);
 };
 
-const redirectToDepartmentSummary = (id) => {
-    if (!id) return;
-    router.push({ name: 'DepartmentSummary', params: { id } });
-};
+onMounted(async () => {
+    const tree = state.get('Tree')
+    if(tree) {
+        const {nodeKeys, nodes } = tree
+        console.log(tree, nodeKeys, nodes)
+        console.log('onMounted', Object.values(nodeKeys))
+        console.log('onMounted2', nodes)
+        nodes.value = nodes
+        onNodeExpanded(Object.values(nodeKeys))
+        expanded.value = nodeKeys
+    }
+});
+
 </script>
 
 <template>
@@ -105,12 +145,13 @@ const redirectToDepartmentSummary = (id) => {
             @update:expanded="onNodeExpanded($event)"
         >
             <template #default-header="{ node }">
+                {{ node }}
                 <div
                     class="row justify-between full-width q-pr-md cursor-pointer"
-                    @click.stop="redirectToDepartmentSummary(node.id)"
+                    @click.stop=""
                 >
                     <a
-                        :href="`#/department/department/${node.id}/summary`"
+                        :href="node.id && `#/department/department/${node.id}/summary`"
                         color: inherit
                     >
                         {{ node.name }}