江苏龙网

  1. 主页 > 生活百科 > >

基于 vue3.x 的流程图绘制

Vue3


基于 vue3.x 的流程图绘制

文章插图
 
GitHub-workflow
这里主要是针对于工作流场景的流程图绘制及实现方式 。下面是效果图：
基于 vue3.x 的流程图绘制

文章插图
 
整体结构布局：
基于 vue3.x 的流程图绘制

文章插图
 
需要实现的功能列表：
  • 节点与连接线的可配置
  • 节点的拖拽与渲染及连接线的绘制
  • 节点与连接线的选择
  • 节点的样式调整
  • 节点移动时的吸附
  • 撤销和恢复
节点与连接线的可配置
  • 节点配置信息
[{'id': '', // 每次渲染会生成一个新的id'name': 'start', // 节点名称，也就是类型'label': '开始', // 左侧列表节点的名称'displayName': '开始', // 渲染节点的显示名称（可修改）'className': 'icon-circle start', // 节点在渲染时候的class，可用于自定义节点的样式'attr': { // 节点的属性'x': 0, // 节点相对于画布的 x 位置'y': 0, // 节点相对于画布的 y 位置'w': 70, // 节点的初始宽度'h': 70// 节点的初始高度},'next': [], // 节点出度的线'props': [] // 节点可配置的业务属性},// ...]复制代码
  • 连接线配置信息
// next[{// 连接线的id'id': 'ee1c5fa3-f822-40f1-98a1-f76db6a2362b',// 连接线的结束节点id'targetComponentId': 'fa7fbbfa-fc43-4ac8-8911-451d0098d0cb',// 连接线在起始节点的方向'directionStart': 'right',// 连接线在结束节点的方向'directionEnd': 'left',// 线的类型（直线、折线、曲线）'lineType': 'straight',// 显示在连接线中点的标识信息'extra': '',// 连接线在起始节点的id'componentId': 'fde2a040-3795-4443-a57b-af412d06c023'},// ...]复制代码
  • 节点的属性配置结构
// props[{// 表单的字段name: 'displayName',// 表单的标签label: '显示名称',// 字段的值value: '旅客运输',// 编辑的类型type: 'input',// 属性的必填字段required: true,// 表单组件的其它属性props: {placeholder: 'xxx'}},// ...]复制代码对于下拉选择的数据，如果下拉的数据非常多，那么配置保存的数据量也会很大，所以可以把所有的下拉数据统一管理，在获取左侧的配置节点的信息时，将所有的下拉数据提取出来，以 props 的 name 值为 key 保存起来，在用的时候用 props.name 来取对应的下拉数据 。
另外还需要配置连接线的属性，相对于节点的属性，每一个节点的属性都有可能不一样，但是连接线在没有节点的时候是没有的，所以我们要先准备好连接线的属性，在连接线生成的时候，在加到连接线的属性里去 。当然我们可以把连接线的属性设置为一样的，也可以根据节点的不同来设置不同连接线的属性 。
最后使用的方式：
<template><workflowref="workflowRef"@component-change="getActiveComponent"@line-change="getActiveLine"main-height="calc(100vh - 160px)"></workflow></template><script lang="ts" setup>import { ref } from 'vue'import Workflow from '@/components/workflow'import { commonRequest } from '@/utils/common'import { ElMessage, ElMessageBox } from 'element-plus'import { useRoute } from 'vue-router'const route = useRoute()const processId = route.query.processId // || 'testca08c433c34046e4bb2a8d3ce3ebc'const processType = route.query.processType// 切换的当前节点const getActiveComponent = (component: Record<string, any>) => {console.log('active component', component)}// 切换的当前连接线const getActiveLine = (line: Record<string, any>) => {console.log('active line', line)}const workflowRef = ref<InstanceType<typeof Workflow>>()// 获取配置的节点列表const getConfig = () => {commonRequest(`/workflow/getWorkflowConfig?processType=${processType}`).then((res: Record<string, any>) => {// 需要把所有的属性根据name转换成 key - value 形式const props: Record<string, any> = {}transferOptions(res.result.nodes, props)// 设置左侧配置的节点数据workflowRef.value?.setConfig(res.result)getData(props)})}// 获取之前已经配置好的数据const getData = https://www.isolves.com/it/cxkf/qd/2022-06-05/(props: Record


推荐阅读


上一篇：详解java中float与double的区别

下一篇：Spring Boot与JAX-RS框架Jersey的完美搭配