25 lines
1.3 KiB
Vue
25 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<a-card :title="definition.title" :bordered="false">
|
||
|
|
<template #extra><a-button @click="load">刷新</a-button></template>
|
||
|
|
<a-tree :data="tree" :loading="loading" :field-names="{ key: 'identity', title: 'name', children: 'children' }" />
|
||
|
|
</a-card>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { Message } from '@arco-design/web-vue';
|
||
|
|
import { computed, onMounted, ref } from 'vue';
|
||
|
|
import { resourceApi } from '@/api/resource';
|
||
|
|
import type { ResourceUiDefinition } from '@/api/resources';
|
||
|
|
|
||
|
|
type Node = Record<string, unknown> & { identity: string; parent_identity?: string; children: Node[] };
|
||
|
|
const props = defineProps<{ definition: ResourceUiDefinition }>();
|
||
|
|
const loading = ref(false); const list = ref<Node[]>([]);
|
||
|
|
const tree = computed(() => {
|
||
|
|
const nodes = new Map<string, Node>(); const roots: Node[] = [];
|
||
|
|
list.value.forEach((item) => nodes.set(item.identity, { ...item, children: [] }));
|
||
|
|
nodes.forEach((item) => { const parent = item.parent_identity && nodes.get(item.parent_identity); if (parent) parent.children.push(item); else roots.push(item); });
|
||
|
|
return roots;
|
||
|
|
});
|
||
|
|
async function load() { loading.value = true; try { list.value = (await resourceApi.list<Node>(props.definition.resource, 1, 500)).list; } catch (error) { Message.error((error as Error).message); } finally { loading.value = false; } }
|
||
|
|
onMounted(load);
|
||
|
|
</script>
|