<script lang="ts" setup>
|
import { computed, ref, unref } from 'vue';
|
|
import { BasicTree, ScrollContainer } from '@jnpf/ui';
|
|
const props = defineProps({
|
drawingList: { default: () => [], type: Array as PropType<any[]> },
|
});
|
const emit = defineEmits(['selectedNode']);
|
const specialList = ['collapseItem', 'stepItem', 'tabItem', 'tableGridTr'];
|
const treeRef = ref(null);
|
|
const getTreeData = computed(() => {
|
const loop = (data) => {
|
return data.map((item) => ({
|
id: item.__config__.formId,
|
fullName: ['tableGridTd', ...specialList].includes(item.__config__.jnpfKey) ? item.title : item.__config__.label,
|
children: item.__config__.children?.length ? loop(item.__config__.children) : [],
|
icon: item.__config__.tagIcon || 'icon-ym icon-ym-generator-template',
|
...item,
|
}));
|
};
|
return loop(unref(props.drawingList));
|
});
|
|
function handleTreeSelect(keys) {
|
const selectedNode: any = getTree()?.getSelectedNode(keys[0]);
|
if (specialList.includes(selectedNode.__config__.jnpfKey)) return;
|
emit('selectedNode', selectedNode);
|
}
|
function getTree() {
|
const tree = unref(treeRef);
|
if (!tree) {
|
throw new Error('tree is null!');
|
}
|
return tree as any;
|
}
|
</script>
|
<template>
|
<ScrollContainer>
|
<BasicTree ref="treeRef" :tree-data="getTreeData" default-expand-all @select="handleTreeSelect" />
|
</ScrollContainer>
|
</template>
|
