refs #6763 refactor node

src/components/ui/VnTree.vue

@@ -23,42 +23,31 @@ const expanded = ref([]);
 const nodes = ref([{ id: null, name: t('Departments'), sons: true, children: [{}] }]);
 
 const fetchedChildrensSet = ref(new Set());
-// const formData = computed(() => state.get('Tree'));
 
 const onNodeExpanded = (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
+        fetchNodeLeaves(nodeKeysArray.at(-1));
     }
-    // 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);
 
-        console.log(node);
         if (!node || node.sons === 0) return;
 
         const params = { parentId: node.id };
         const response = await axios.get('/departments/getLeaves', { params });
-
-        // Si hay datos en la respuesta y tiene hijos, agregarlos al nodo actual
         if (response.data) {
-            node.children = response.data;
-            node.children.forEach((node) => {
-                node.children = node.sons > 0 ? [{}] : null;
+            node.children = response.data.map((n) => {
+                const hasChildrens = n.sons > 0;
+
+                n.children = hasChildrens ? [{}] : null;
+                n.clickable = true;
+                return n;
             });
         }
 
@@ -105,40 +94,22 @@ onMounted(async (n) => {
     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 () => {
-            //     await fetchNodeLeaves(n);
-            // }, 1000);
             await fetchNodeLeaves(n);
         }
         expanded.value = tree;
-        console.log('expanded.value', expanded.value);
-    }
 
-    // const lastStateTree = state.get('TreeState');
-    // if (lastStateTree && lastStateTree) {
-    //     fetchNodeLeaves(lastStateTree);
-    //     !treeRef.value.expanded.includes(lastStateTree) &&
-    //         treeRef.value.expanded.push(lastStateTree);
-    // }
-    // treeRef.value.expandAll();
+        if (lastStateTree) {
+            tree.push(lastStateTree);
+            await fetchNodeLeaves(lastStateTree);
+        }
+    }
     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;
@@ -162,20 +133,6 @@ function handleEvent(type, event, node) {
             break;
     }
 }
-function handleRow(event, node) {
-    switch (event.currentTarget.nodeName.toLowerCase()) {
-        case 'div':
-            node.id &&
-                router.push({ path: `#/department/department/${node.id}/summary` });
-            break;
-
-        case 'span':
-            break;
-
-        default:
-            break;
-    }
-}
 </script>
 
 <template>
@@ -190,10 +147,9 @@ function handleRow(event, node) {
             :default-expand-all="true"
         >
             <template #default-header="{ node }">
-                <!-- @click="node.id && router.push({path:`#/department/department/${node.id}/summary`})" -->
                 <div
                     :id="node.id"
-                    class="row justify-between full-width q-pr-md cursor-pointer"
+                    class="qtr row justify-between full-width q-pr-md cursor-pointer"
                 >
                     <div>
                         <span @click="handleEvent('row', $event, node)">
@@ -249,9 +205,11 @@ function handleRow(event, node) {
 </template>
 
 <style lang="scss" scoped>
-a {
-    color: inherit;
-    text-decoration: none;
+span {
+    color: $primary;
+}
+.hover-shadow:hover {
+    background-color: #9e9e9e;
 }
 </style>
 <i18n>