前端——审批模板技术难点-动态流程图的可视化设计

技术难点

审批流程需要以图形化的方式展示，用户可以直观地看到审批的走向。实现动态流程图需要解决节点的布局、连线的绘制以及交互处理等问题。

示例演示

<template> <div> <div> <!-- 开始节点 --> <div> <div>开始</div> </div> <!-- 连线 --> <div></div> <!-- 审批发起人节点 --> <div @click="editNode('initiator')"> <div> <div>发起人</div> <div>{ { initiator.role || '未设置' }}</div> </div> </div> <!-- 连线 --> <div></div> <!-- 审批节点 --> <div v-for="(node, index) in approvalNodes" :key="node