97 lines
1.9 KiB
Vue
97 lines
1.9 KiB
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,
|
|
},
|
|
})
|
|
//const emit = defineEmits([
|
|
//])
|
|
let data = reactive({
|
|
})
|
|
|
|
const treeStateTime = ref(true)
|
|
|
|
watch(()=>props.treeState,(newVal,oldVal)=>{
|
|
treeStateTime.value = false
|
|
setTimeout(()=>{
|
|
treeStateTime.value = true
|
|
},250)
|
|
})
|
|
|
|
const view2Ref = ref(null)
|
|
const pushView2Item = (item)=>{
|
|
// if(node)view2Ref.value.pushNode(node)
|
|
// if(edge)view2Ref.value.pushEdge(edge)
|
|
view2Ref.value.push(item)
|
|
}
|
|
|
|
function traverseArray(items, callback) {
|
|
for (let i = 0; i < items.length; i++) {
|
|
const item = items[i]
|
|
callback(item, i)
|
|
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
|
|
traverseArray(item.children, callback)
|
|
}
|
|
}
|
|
}
|
|
|
|
const addView2Item = ()=>{
|
|
traverseArray(versionsList, (item, index) => {
|
|
pushView2Item(item)
|
|
})
|
|
|
|
}
|
|
|
|
const view1List = ref([
|
|
{
|
|
name:'P1',
|
|
},{
|
|
name:'V1',
|
|
},{
|
|
name:'V1-1',
|
|
}
|
|
])
|
|
onMounted(()=>{
|
|
addView2Item()
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="tree" v-show="treeStateTime">
|
|
<div v-if="!treeState" class="box view1">
|
|
<view1Item v-for="item in view1List" :key="item.name" :item="item"></view1Item>
|
|
</div>
|
|
<div v-else class="box view2">
|
|
<view2 :list="view1List" ref="view2Ref"></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;
|
|
|
|
}
|
|
&.view2{
|
|
border: 1px solid #D9D9D9;
|
|
background-color: #f7f7f7;
|
|
border-radius: var(--border-radius, 1rem);
|
|
}
|
|
}
|
|
}
|
|
</style> |