erp_wdly/src/views/process/processConfig/vueFlow2.vue

<style lang="scss" scoped>
.container{
    height: 100%;
}
.my-flow {
	margin: 10px;
	height: 700px;

	//   :deep(.node-light) {
	//     background: none;
	//   }
	//   :deep(.node-dark) {
	//     background: #eeeeee;
	//   }
}
</style>
<template>
	<div class="container">
		<el-row class="mb-4">
			<el-button type="primary" @click="resetTransform">重置</el-button>
		</el-row>

		<VueFlow
			fit-view-on-init
			class="my-flow"
			v-model="elements"
		>
			<Background />
			<Panel :position="PanelPosition.TopRight">
                <button type="button" @click="addRandomNode('办理')">办理</button>
                <button type="button" style="margin-left:10px" @click="addRandomNode('分支')">分支</button>
                <button type="button" style="margin-left:10px" @click="addRandomNode('结束')">结束</button>
            </Panel>
			<!-- <Controls /> -->
		</VueFlow>
	</div>
</template>
 
 
<script lang="ts" setup name="DemoBpmn">
import '@vue-flow/core/dist/style.css'
/* import the default theme (optional) */
import '@vue-flow/core/dist/theme-default.css'

import {
	Background,
	Panel,
	PanelPosition,
	Controls,
} from '@vue-flow/additional-components'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const data = [
	{ id: '1', type: 'input', label: '开始', position: { x: 250, y: 5 } },
	
]
let elements = ref(data)

const isHidden = ref(false)

let {
	onPaneReady,
	onNodeDragStop,
	onConnect,
	addEdges,
	setTransform,
	toObject,
	nodes,
	edges,
    applyNodeChanges,
    dimensions,
    addNodes
} = useVueFlow()

function addRandomNode(_name) {
  const nodeId = (nodes.value.length + 1).toString()

  const newNode = {
    id: nodeId,
    label: _name,
    position: { x: 250, y: 100 }
  }

  addNodes([newNode])
}

watch(isHidden, () => {
	nodes.value.forEach((n) => (n.hidden = isHidden.value))
	edges.value.forEach((e) => (e.hidden = isHidden.value))
})

onPaneReady(({ fitView }) => {
	fitView()
})
onNodeDragStop((e) => {
})
onConnect((params) => addEdges([params]))

const resetTransform = () => {
	elements.value = data
	setTransform({ x: 0, y: 0, zoom: 1 })
}
</script>