146 lines
3.1 KiB
Vue
146 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs, watch, nextTick } from "vue";
|
|
import view1Item from './view1Item.vue'
|
|
import view2 from './view2/index.vue'
|
|
import { useProjectStore } from '@/stores'
|
|
|
|
|
|
const props = defineProps({
|
|
versionsList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
treeState:{
|
|
default:false,
|
|
},
|
|
selectItem: {
|
|
type: Object,
|
|
default: () => ({})
|
|
} as any,
|
|
})
|
|
const emit = defineEmits([
|
|
'update:selectItem',
|
|
'versionRestore',
|
|
'versionDelete',
|
|
'selectNode'
|
|
])
|
|
let data = reactive({
|
|
})
|
|
|
|
const view1Ref = ref(null)
|
|
|
|
const isLoad = ref(false)
|
|
const treeStateTime = ref(true)
|
|
const projectStore = useProjectStore()
|
|
|
|
|
|
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([
|
|
|
|
])
|
|
|
|
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 initialize = ()=>{
|
|
isLoad.value = false
|
|
treeList.value = []
|
|
treeList.value.push({versionId: null,name:'index',})
|
|
traverseArray(props.versionsList, (item, index) => {
|
|
treeList.value.push(item)
|
|
})
|
|
console.log(treeList)
|
|
isLoad.value = true
|
|
if(!props.selectItem?.versionId)setSelectItem(treeList.value[treeList.value.length - 1])
|
|
}
|
|
|
|
const setSelectItem = (item)=>{
|
|
if(!item.versionId)return
|
|
projectStore.setProject({nodeId: item.id})
|
|
emit('update:selectItem', {...item})
|
|
emit('selectNode')
|
|
}
|
|
|
|
// 滚动到选中项
|
|
const scrollToActive = ()=>{
|
|
nextTick(() => {
|
|
const activeEl = view1Ref.value?.querySelector('.active')
|
|
console.log(activeEl)
|
|
activeEl.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'nearest'
|
|
})
|
|
})
|
|
}
|
|
|
|
watch(()=>treeStateTime.value,(newVal,oldVal)=>{
|
|
if((props.treeState + '') == 'false'){
|
|
// scrollToActive()
|
|
}
|
|
})
|
|
|
|
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" ref="view1Ref">
|
|
<view1Item v-for="item in treeList" :key="item.name" :selectItem="props.selectItem" :item="item" @click="setSelectItem(item)"></view1Item>
|
|
</div> -->
|
|
<div v-show="treeState" class="box view2">
|
|
<view2
|
|
ref="view2Ref"
|
|
@setSelectItem="setSelectItem"
|
|
:treeList="treeList"
|
|
:selectItem="props.selectItem"
|
|
@versionRestore="()=>emit('versionRestore')"
|
|
@versionDelete="emit('versionDelete')"
|
|
></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> |