refs #6763 feat: fix features

src/components/ui/VnTree.vue

@@ -26,23 +26,27 @@ const fetchedChildrensSet = ref(new Set());
 // const formData = computed(() => state.get('Tree'));
 
 const onNodeExpanded = (nodeKeysArray) => {
-    const lastStateTree = state.get('TreeState');
-    if (lastStateTree && lastStateTree) {
-        !nodeKeysArray.includes(lastStateTree) && nodeKeysArray.push(lastStateTree);
-    }
     // 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
     }
-
+    // if (nodeKeysArray.length >= 2) {
+    //     const lastStateTree = state.get('TreeState');
+    //     if (lastStateTree && lastStateTree) {
+    //         !nodeKeysArray.includes(lastStateTree) && nodeKeysArray.push(lastStateTree);
+    //     }
+    //     fetchNodeLeaves(nodeKeysArray.at(-1));
+    // } else {
+    // fetchNodeLeaves(1); // Llamar a la función para obtener los nodos hijos
+    // }
     state.set('Tree', nodeKeysArray);
 };
 
 const fetchNodeLeaves = async (nodeKey) => {
     console.log('nodeKey: ', nodeKey);
     try {
-        const node = treeRef.value.getNodeByKey(nodeKey);
+        const node = treeRef.value?.getNodeByKey(nodeKey);
 
         console.log(node);
         if (!node || node.sons === 0) return;
@@ -98,10 +102,11 @@ const onNodeCreated = async () => {
 };
 
 onMounted(async (n) => {
-    const tree = state.get('Tree');
+    const tree = [...state.get('Tree'), 1];
+    const lastStateTree = state.get('TreeState');
     if (tree) {
         console.log('tree: ', tree);
-
+        if (lastStateTree) tree.push(lastStateTree);
         for (let n of tree) {
             console.log('n', n);
             // setTimeout(async () => {
@@ -112,17 +117,51 @@ onMounted(async (n) => {
         expanded.value = tree;
         console.log('expanded.value', expanded.value);
     }
-    treeRef.value.expandAll();
-});
-function handleClick(event, node) {
-    state.set('TreeState', node.parentFk);
-    node.id && router.push({ path: `/department/department/${node.id}/summary` });
-}
-function handleTab(event, node) {
-    state.set('TreeState', node.parentFk);
-    node.id && window.open(`#/department/department/${node.id}/summary`, '_blank');
-}
 
+    // const lastStateTree = state.get('TreeState');
+    // if (lastStateTree && lastStateTree) {
+    //     fetchNodeLeaves(lastStateTree);
+    //     !treeRef.value.expanded.includes(lastStateTree) &&
+    //         treeRef.value.expanded.push(lastStateTree);
+    // }
+    // treeRef.value.expandAll();
+    setTimeout(() => {
+        if (lastStateTree) {
+            const xx = treeRef.value.getNodeByKey(lastStateTree);
+            console.log(xx);
+            document.getElementById(lastStateTree).scrollIntoView();
+        }
+    }, 1000);
+});
+// function handleClick(event, node) {
+
+// }
+// function handleTab(event, node) {
+
+// }
+
+function handleEvent(type, event, node) {
+    const isParent = node.sons > 0;
+    const lastId = isParent ? node.id : node.parentFk;
+
+    switch (type) {
+        case 'path':
+            state.set('TreeState', lastId);
+            node.id && router.push({ path: `/department/department/${node.id}/summary` });
+            break;
+
+        case 'tab':
+            state.set('TreeState', lastId);
+            node.id &&
+                window.open(`#/department/department/${node.id}/summary`, '_blank');
+            break;
+
+        default:
+            node.id &&
+                router.push({ path: `#/department/department/${node.id}/summary` });
+            break;
+    }
+}
 function handleRow(event, node) {
     switch (event.currentTarget.nodeName.toLowerCase()) {
         case 'div':
@@ -152,14 +191,19 @@ function handleRow(event, node) {
         >
             <template #default-header="{ node }">
                 <!-- @click="node.id && router.push({path:`#/department/department/${node.id}/summary`})" -->
-                <div class="row justify-between full-width q-pr-md cursor-pointer">
+                <div
+                    :id="node.id"
+                    class="row justify-between full-width q-pr-md cursor-pointer"
+                >
                     <div>
-                        <span @click="handleRow($event, node)"> {{ node.name }} </span>
-                        <DepartmentDescriptorProxy :id="node.id" />
+                        <span @click="handleEvent('row', $event, node)">
+                            {{ node.name }}
+                            <DepartmentDescriptorProxy :id="node.id" />
+                        </span>
                     </div>
                     <div
-                        @click.stop.exact="handleClick($event, node)"
-                        @click.ctrl.stop="handleTab($event, node)"
+                        @click.stop.exact="handleEvent('path', $event, node)"
+                        @click.ctrl.stop="handleEvent('tab', $event, node)"
                         style="flex-grow: 1; width: 10px"
                     ></div>
                     <div class="row justify-between" style="max-width: max-content">