39 lines
1.0 KiB
Vue
39 lines
1.0 KiB
Vue
<template>
|
|
<div class='default-main' style='display: flex' v-loading='loading'>
|
|
<Menu style='width: 500px' @init='init' @select='select' :menu-data='menuData' />
|
|
<Api style='width: calc(100% - 500px)' @init='init' :id='selectedId' />
|
|
</div>
|
|
</template>
|
|
<script setup lang='ts'>
|
|
import { functionTree } from '@/api/user-boot/function'
|
|
import Menu from './menu.vue'
|
|
import Api from './api.vue'
|
|
import { provide, reactive, ref } from 'vue'
|
|
|
|
defineOptions({
|
|
name: 'auth/menu'
|
|
})
|
|
const menuData = ref<any[]>([])
|
|
const selectedId = ref('')
|
|
const loading = ref(true)
|
|
const select = (id: string) => {
|
|
selectedId.value = id
|
|
}
|
|
const filterData = (arr: any[]) => {
|
|
return arr.filter((item: any) => {
|
|
if (item.children.length) {
|
|
item.children = filterData(item.children)
|
|
}
|
|
return item.type === 0
|
|
})
|
|
}
|
|
const init = () => {
|
|
loading.value = true
|
|
functionTree().then(res => {
|
|
menuData.value = filterData(res.data)
|
|
loading.value = false
|
|
})
|
|
}
|
|
init()
|
|
</script>
|