FiDA_Front/src/views/home/versionTree/tree/index.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from "vue";
import view1Item from './view1Item.vue'
import view2 from './view2/index.vue'
import { versionsList } from './view2/tools/versionsData'

const props = defineProps({
	treeState:{
		default:false,
	},
	selectItem: {
		type: Object,
		default: () => ({})
	} as any,
})
const emit = defineEmits([
	'update:selectItem'
])
let data = reactive({
})

const isLoad = ref(false)
const treeStateTime = ref(true)

watch(()=>props.treeState,(newVal,oldVal)=>{
	treeStateTime.value = false
	setTimeout(()=>{
		treeStateTime.value = true
	},250)
})

const view2Ref = ref(null)
const pushView2Item = (item)=>{
	view2Ref.value.push(item)
}

const treeList = ref([
	{
		name:'P1',
	},{
		name:'V1',
	},{
		name:'V1-1',
	}
])

function traverseArray(items, callback) {
	for (let i = 0; i < items.length; i++) {
		const item = items[i]
		callback(item, i)
		if (item.child && Array.isArray(item.child) && item.child.length > 0) {
			traverseArray(item.child, callback)
		}
	}
}

const initialize = ()=>{
	isLoad.value = false
	setSelectItem(versionsList[0])
	treeList.value = []
	traverseArray(versionsList, (item, index) => {
		treeList.value.push(item)
	})
	isLoad.value = true
} 

const setSelectItem = (item)=>{
	console.log(item[0])
	emit('update:selectItem', {...item})
}

onMounted(()=>{
	initialize()
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="tree" v-show="treeStateTime" v-if="isLoad">
		<div v-show="!treeState" class="box view1">
			<view1Item v-for="item in treeList" :key="item.name" :item="item" @click="emit('selectItem', item)"></view1Item>
		</div>
		<div v-show="treeState" class="box view2">
			<view2 
				ref="view2Ref" 
				@setSelectItem="setSelectItem"
				:treeList="treeList"
				:selectItem="props.selectItem"
			></view2>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.tree{
		width: 100%;
		height: 100%;
		position: relative;
		.box{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			&.view1{
				overflow-y: auto;
				&::-webkit-scrollbar {
					display: none;
				}
			}
			&.view2{
				border: 1px solid #D9D9D9;
				background-color: #f7f7f7;
				border-radius: var(--border-radius, 1rem);
			}
		}
	}
</style>