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

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, nextTick } from "vue";
import type { Node, Edge } from '@vue-flow/core'  
import { VueFlow, useVueFlow } from '@vue-flow/core'
import SpecialEdge from './speciaiEdge.vue'
import PrimaryNode from './primaryNode.vue'//主
import SecondaryNode from './secondaryNode.vue'//分支
import { useLayout } from './tools/tools'
const props = defineProps({
	item: {
		type: Object,
		default: () => ({})
	}
})
//const emit = defineEmits([
//])

let selectId = ref(2)
const isLoad = ref(false)

// 节点类型：input、output、default、custom
// input:开始点，output：结尾点，default：普通节点，custom：自定义节点
const position = { x: 0, y: 0 }
const nodes = ref<Node[]>([
//   { id: '1', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' },
//   { id: '2', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 1' }, position },
//   { id: '2-1', type: 'SecondaryNode', class: 'custom-node', data: { id: '分 1-1' }, position },
//   { id: '3', type: 'PrimaryNode', class: 'custom-node', data: { id: '主 2' }, position },
])

// 边类型：custom、default
// custom：自定义边，default：普通边，step：直角边，smoothstep：平滑边
const edges = ref<Edge[]>([
//   { id: 'e1-2', source: '1', target: '2', type: 'smoothstep' },
//   { id: 'e1-3', source: '2', target: '2-1', type: 'smoothstep', sourceHandle:'right',},
//   { id: 'e1-4', source: '2', target: '3', type: 'smoothstep',sourceHandle:'bottom', animated: true },
])
const { fitView } = useVueFlow()
const { layout } = useLayout()
async function layoutGraph(direction) {
	setTimeout(() => {
		nodes.value = layout(nodes.value, edges.value, direction)
		console.log(nodes.value)
		nextTick(() => {
			fitView()
		})
	}, 0)
}

let elIndex = 1
const push = (item)=>{
	if(nodes.value.length == 0){
		nodes.value.push({ id: '0', type: 'input', label: 'Node 1', class: 'custom-node start', position, sourcePosition: 'bottom' })
	}
	let className = 'custom-node'
	let id = item.id
	let target = edges.value.length == 0?'0':item.id.slice(0, -2)
	nodes.value.push({id,type:'SecondaryNode',class:className,position,data:item})
	edges.value.push({ id, source: id, target, type: 'smoothstep' })
	console.log()
}

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 init = (list)=>{
	isLoad.value = false
	traverseArray(list, (item, index) => {
		console.log()
		push(item)
	})
	isLoad.value = true
	console.log(nodes.value,edges.value)
}

//是否可拖动节点
const nodesDraggable = ref(false)
const toggleNodesDraggable = () => {
  	nodesDraggable.value = !nodesDraggable.value
}

const handleVueFlowNodeClick = (node: Node) => {
	console.log(node)
}

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({init,push})
// const {} = toRefs(data);
</script>
<template>
	<div class="view2">
		<div class="vueFlowBox" v-if="isLoad">
			<div @click="toggleNodesDraggable">拖拽节点</div>
			<VueFlow :nodes="nodes" @nodes-initialized="layoutGraph('LR')" :edges="edges" @node-click="handleVueFlowNodeClick" :nodes-draggable="nodesDraggable">
				<template #node-PrimaryNode="nodeProps">
					<PrimaryNode v-bind="nodeProps" />
				</template>
				<template #node-SecondaryNode="nodeProps">
					<SecondaryNode 
						v-bind="nodeProps" 
						:selectId="selectId"
					/>
				</template>

				<!-- <template #edge-custom="edgeProps">
					<SpecialEdge v-bind="edgeProps" />
				</template> -->
			</VueFlow>
		</div>
		
	</div>
</template>
<style lang="less">
@import "@vue-flow/core/dist/style.css";
@import "@vue-flow/core/dist/theme-default.css";
</style>
<style lang="less" scoped>
	.view2{
		width: 100%;
		height: 100%;
		overflow: hidden;
		>.vueFlowBox{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		:deep(.custom-node){
			--vf-handle: #000;
			--vf-node-color: #000;
			--vf-box-shadow: #000;
			font-size: 1.2rem;
			width: var(--treeItem-width);
			height: var(--treeItem-height);
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: var(--treeItem-raduis);
			border: var(--treeItem-border);
			color: #000;
			cursor: pointer;
			background-color: var(--treeItem-background);
			box-sizing: border-box;
			.vue-flow__handle-right{
				transform: translate(calc(50% + 2px), -50%);
			}
			.vue-flow__handle-left{
				transform: translate(calc(-50% - 2px), -50%);
			}
			.vue-flow__handle-top{
				transform: translate(-50%, calc(-50% - 2px));
			}
			.vue-flow__handle-bottom{
				transform: translate(-50%, calc(50% + 2px));
			}
			&.active{
				background-color: var(--treeItem-active-background);
			}
			&.start{
				background-color: #7A7A7A;
				color: #FFF;
				border: 2px solid #7A7A7A;
			}
		}
	}
</style>