为了能在线编辑流程，支持流程节点编辑等功能，支持人员等选择功能，支持流程图数据保存，利用阿里G6进行设计开发，整体效果图如下：
支持放大缩小，节点移动，添加节点及边等，同时支持节点及边删除操作，流程图数据保存等工作。
支持节点编辑，包括人员选择，图形选择，宽高编辑，背景色、边框色等信息编辑；
支持边的编辑，边描述等。
各种交互功能就不赘述了。
页面代码如下：
<!DOCTYPE TYPE>
<html>
<head>
<meta charset="utf8">
<title>procedure</title>
<link rel="stylesheet" type="text/css" href="css/procedure.css">
</head>
<body>
<div class="procedure-all" id="procedure" v-cloak>
<div class="procedure-tool-bar">
<div class="operate">
<span class="operate-radio">
<input type="radio" v-model="currentMode" value="1" id="mode-1"/>
<label for="mode-1">移动放大</label>
<input type="radio" v-model="currentMode" value="2" id="mode-2"/>
<label for="mode-2">添加节点</label>
<input type="radio" v-model="currentMode" value="3" id="mode-3"/>
<label for="mode-3">添加边</label>
</span>
<span class="save-msg" v-bind:class="saveSuc ? 'save-success' : 'save-error'">{
{saveMsg}}</span> <span class="operate-btn"> <button v-on:click="deleteItem">删除该项</button> <button v-on:click="saveData">保存数据</button> </span> </div> </div> <div class="procedure-content" ref="procedureContent" id="procedure-content"></div> <div class="procedure-foot">流程图2.0</div> <div class="g6-item-info"> <div class="g6-item-info-content"> <div class="title"><span>{
{typeName}}信息修改</span></div>
<div class="content" v-show="itemType == 1">
<div class="line">
<div class="item one">节点类型：</div>
<div class="item two">
<select v-model="currentModel.nodeType" v-on:change="modelSave">
<option value="1">开始</option>
<option value="2">途中</option>
<option value="3">结束</option>
</select>
</div>
</div>
<div class="line">
<div class="item one">名称：</div>
<div class="item two">
<input type="text" placeholder="请输入名称" v-model.trim="currentModel.label" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">审批人：</div>
<div class="item two approve-list" id="approver"></div>
</div>
<div class="line">
<div class="item one">图形：</div>
<div class="item two">
<select v-model="currentModel.type" v-on:change="modelSave">
<option value="circle">圆形</option>
<option value="rect">长方形</option>
<option value="ellipse">椭圆</option>
<option value="diamond">菱形</option>
</select>
</div>
</div>
<div class="line">
<div class="item one">宽度：</div>
<div class="item two">
<input type="number" placeholder="请输入宽度" v-model.number="currentModel.size[0]" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">高度：</div>
<div class="item two">
<input type="number" placeholder="请输入高度" v-model.number="currentModel.size[1]" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">背景色：</div>
<div class="item two">
<input type="text" placeholder="请输入背景色" v-model.trim="currentModel.style.fill" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">边框颜色：</div>
<div class="item two">
<input type="text" placeholder="请输入边框颜色" v-model.trim="currentModel.style.stroke" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">边框宽度：</div>
<div class="item two">
<input type="text" placeholder="请输入边框宽度" v-model.number="currentModel.style.lineWidth" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">字体颜色：</div>
<div class="item two">
<input type="text" placeholder="请输入字体颜色" v-model.trim="currentModel.labelCfg.style.fill" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">字体大小：</div>
<div class="item two">
<input type="text" placeholder="请输入字体颜色" v-model.number="currentModel.labelCfg.style.fontSize" v-on:blur="modelSave">
</div>
</div>
</div>
<div class="content" v-show="itemType == 2">
<div class="line">
<div class="item one">边描述：</div>
<div class="item two">
<input type="text" placeholder="请输入边描述" v-model.trim="currentModel.label" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">边X轴偏移：</div>
<div class="item two">
<input type="text" placeholder="请输入边X轴偏移" v-model.number="currentModel.labelCfg.refX" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">边Y轴偏移：</div>
<div class="item two">
<input type="text" placeholder="请输入边Y轴偏移" v-model.number="currentModel.labelCfg.refY" v-on:blur="modelSave">
</div>
</div>
<div class="line">
<div class="item one">边颜色：</div>
<div class="item two">
<input type="text" placeholder="请输入边颜色" v-model.trim="currentModel.style.stroke" v-on:blur="modelSave">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/xm-select.js"></script>
<script src="js/vue-2.6.12.js"></script>
<script src="js/vue-resource-1.5.1.js"></script>
<script src="js/g6-3.8.3.min.js"></script>
<script src="js/procedure.js"></script>
</html>如需详细代码，可以下载完整代码：https://download.csdn.net/download/QingQiang8808/
如有问题请随时指正。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/233372.html原文链接：https://javaforall.net
![常用的电容分类[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
