82 lines
2.5 KiB
Vue
82 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
|
|
|
|
definePageMeta({
|
|
layout: 'blank',
|
|
})
|
|
|
|
// Tipe data untuk konsistensi
|
|
interface TreeItem {
|
|
value: string
|
|
label: string
|
|
hasChildren: boolean
|
|
children?: TreeItem[]
|
|
}
|
|
|
|
// State untuk data pohon. Awalnya hanya berisi data level atas.
|
|
const treeData = ref<TreeItem[]>([
|
|
{ value: 'frontend', label: 'Frontend', hasChildren: true },
|
|
{ value: 'backend', label: 'Backend', hasChildren: true },
|
|
{ value: 'devops', label: 'DevOps', hasChildren: false },
|
|
])
|
|
|
|
// State untuk menampung nilai yang dipilih
|
|
const selectedValue = ref<string>()
|
|
|
|
// --- INI BAGIAN PENTING: LOGIKA API DAN MANIPULASI DATA ---
|
|
|
|
// Helper: Fungsi rekursif untuk mencari dan menyisipkan data anak ke dalam state
|
|
function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]) {
|
|
for (const node of nodes) {
|
|
if (node.value === parentId) {
|
|
node.children = newChildren
|
|
return true
|
|
}
|
|
if (node.children && findAndInsertChildren(node.children, parentId, newChildren)) {
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
// Fungsi yang akan dipanggil oleh komponen TreeSelectItem untuk mengambil data
|
|
async function handleFetchChildren(parentId: string) {
|
|
console.log(`Mengambil data anak untuk parent: ${parentId}`)
|
|
|
|
// Simulasi panggilan API ke backend Anda
|
|
await new Promise(resolve => setTimeout(resolve, 500)) // Delay 0.5 detik
|
|
|
|
let childrenData: TreeItem[] = []
|
|
if (parentId === 'frontend') {
|
|
childrenData = [
|
|
{ value: 'vue', label: 'Vue.js', hasChildren: true },
|
|
{ value: 'react', label: 'React.js', hasChildren: false },
|
|
]
|
|
} else if (parentId === 'backend') {
|
|
childrenData = [
|
|
{ value: 'nodejs', label: 'Node.js', hasChildren: false },
|
|
{ value: 'golang', label: 'Go', hasChildren: false },
|
|
]
|
|
} else if (parentId === 'vue') { // Contoh untuk level yang lebih dalam
|
|
childrenData = [
|
|
{ value: 'nuxt', label: 'Nuxt.js', hasChildren: false },
|
|
]
|
|
}
|
|
// Akhir simulasi
|
|
|
|
// Masukkan data anak yang baru didapat ke dalam state treeData
|
|
findAndInsertChildren(treeData.value, parentId, childrenData)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-10">
|
|
<h1 class="mb-4 text-2xl font-bold">Tree Select (Lazy Loading)</h1>
|
|
<TreeSelect v-model="selectedValue" :data="treeData" :on-fetch-children="handleFetchChildren" />
|
|
<p class="mt-4">
|
|
Value yang terpilih:
|
|
<span class="p-1 font-mono text-sm rounded-md bg-slate-100">{{ selectedValue || 'Belum ada' }}</span>
|
|
</p>
|
|
</div>
|
|
</template>
|