vue3+ts 绘制流程图 vueflow 附代码及效果图

已完成渲染流程图，自定义模板内容(上下分级),自定义样式，新增节点addRandomNode，点击修改节点nodeClickHandler(从父组件传值)

官网：https://vueflow.dev/guide/node.html#node-template
文档比较复杂，很多想找的方法没法一下就找到需要注意
官方文档：https://vueflow.dev/

旧版本vue-flow代码例子：https://gitee.com/huanglgln/vue-sys-manage

新版本vue-flow代码例子：https://gitee.com/huanglgln/vue-sys-manage-el

我装了三个，如果npm安装报错可以试试yarn add

    "@vue-flow/background": "^1.2.0",
    "@vue-flow/core": "^1.20.2",
    "vue3-flowchart": "^0.19.1"

<template>
  <div style="height: 500px;">
    <VueFlow v-model="elements" @nodeClick="nodeClickHandler"  fit-view-on-init @edgeClick="clickadd"
      @edge-update="onEdgeUpdate" :style="{ background: 'transparent' }" :default-zoom="1.5">

      <Background :pattern-color="'#aaa'" gap="8" />
      

      <template #node-custom="props">
        <CustomNode :node="props"  />
      </template>
<!-- 新增 @edgeClick="clickadd"  -->
    </VueFlow>
  </div>
  <dynamic-modal :visible="visible" top="15vh" width="500px" :title="title" :form="addForm" :items="items" @submit="submit"
    @reset="reset" @close="close" />

  <dynamic-modal :visible="visible_edit" top="15vh" width="500px" :title="'修改节点'" :form="editForm" :items="items" @submit="submit2"
    @reset="reset" @close="close" />
</template>

 
<script setup>
import {
      ref, reactive, computed, watch , markRaw } from 'vue'
import {
      Panel, PanelPosition, VueFlow, useVueFlow , isNode,applyChanges} from '@vue-flow/core'
import {
      Background } from '@vue-flow/background'
import {
      onMounted } from 'vue'
import useLoading from '@/hooks/loading'
import dynamicModal from '@/components/modal/dynamicModal.vue';
import {
      Message } from '@arco-design/web-vue'
import {
      queryPostList } from '@/api/data-assets/base-assets.ts'
import {
      useI18n } from 'vue-i18n';
import router from '@/router';
import CustomNode  from './CustomNode.vue'

const props = defineProps(['processData'])
const {
      loading, setLoading } = useLoading(true);

const {
      t } = useI18n()

const {
      nodes, addNodes, updateEdge, removeEdges, getElements, getNode, addEdges, onConnect, dimensions } = useVueFlow()
onConnect((params) => addEdges(params))
const visible = ref(false)
const visible_edit = ref(false)
const title = ref('选择节点操作')
const img_params = ref({
     })
// const nodeTypes = {
     
//   custom: markRaw(CustomNode),
// }
let addForm = ref({
     
  nodeOperations: '',
  postNames:[],
  ccNames:[],
})
let editForm = ref({
     
  nodeOperations: '',
})
const op2 = [
  {
      label: '审批', value: '审批'