Vue2.0+AntvX6

Vue2.0+AntvX6

Vue2.0+AntvX6

前篇文章实现了AntvX6流程图 这篇是另一种效果，但都是Vue2.0+AntvX6，antv/x6版本都是"@antv/x6": “~1.16.0”,其实现的效果图如下：

流程线也可以配置信息

其实现的代码如下：

<template><div><el-button style="float: right; margin-top: -75px; margin-right: 80px" size="mini" type="primary" @click="saveFlow">保存</el-button><el-container class="process-edit-container"><!-- 顶部功能区域 --><!--    <el-header>--><!--    </el-header>--><el-container><!-- 左侧组件区域 --><el-aside width="200px"><div class="process-component-list"><imgsrc="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ic3RhcnRfbm9kZSIgd2lkdGg9IjgwcHgiIGhlaWdodD0iODBweCIgdmlld0JveD0iMCAwIDgwIDgwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0OS4xICg1MTE0NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxjaXJjbGUgaWQ9InBhdGgtMSIgY3g9IjM2IiBjeT0iMzYiIHI9IjM2Ij48L2NpcmNsZT4KICAgICAgICA8ZmlsdGVyIHg9Ii05LjclIiB5PSItNi45JSIgd2lkdGg9IjExOS40JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0yIj4KICAgICAgICAgICAgPGZlT2Zmc2V0IGR4PSIwIiBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb21wb3NpdGUgaW49InNoYWRvd0JsdXJPdXRlcjEiIGluMj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUNvbXBvc2l0ZT4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgICAwIDAgMCAwIDAgICAwIDAgMCAwIDAgIDAgMCAwIDAuMDQgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgIDwvZmlsdGVyPgogICAgPC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IuWfuuehgOa1geeoi+Wbvi0wMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNi4wMDAwMDAsIC05My4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMC4wMDAwMDAsIDk1LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ik92YWwiPgogICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsLW9wYWNpdHk9IjAuOTIiIGZpbGw9IiNGRkYyRTgiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBzdHJva2U9IiNGRkMwNjkiIHN0cm9rZS13aWR0aD0iMSIgY3g9IjM2IiBjeT0iMzYiIHI9IjM1LjUiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPHRleHQgaWQ9IuW8gOWni+iKgueCuSIgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtUmVndWxhciwgUGluZ0ZhbmcgU0MiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJub3JtYWwiIGxpbmUtc3BhY2luZz0iMTIiIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMC42NSI+CiAgICAgICAgICAgICAgICAgICAgPHRzcGFuIHg9IjEyIiB5PSI0MSI+5byA5aeL6IqC54K5PC90c3Bhbj4KICAgICAgICAgICAgICAgIDwvdGV4dD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"data-type="node"data-shape="circle"data-size="72*72"data-color="#FA8C16"data-label="开始节点"@mousedown="addNodeToGraph"><imgdraggable="false"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI1NnB4IiB2aWV3Qm94PSIwIDAgODggNTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjEgKDUxMTQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPgogICAgICAgIDxyZWN0IGlkPSJwYXRoLTEiIHg9IjAiIHk9IjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0OCIgcng9IjQiPjwvcmVjdD4KICAgICAgICA8ZmlsdGVyIHg9Ii04LjglIiB5PSItMTAuNCUiIHdpZHRoPSIxMTcuNSUiIGhlaWdodD0iMTI5LjIlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjIiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUdhdXNzaWFuQmx1cj4KICAgICAgICAgICAgPGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb21wb3NpdGU+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjA0IDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLln7rnoYDmtYHnqIvlm74tMDEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02LjAwMDAwMCwgLTEwNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4wMDAwMDAsIDEwNy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMTUtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTIpIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGwtb3BhY2l0eT0iMC45MiIgZmlsbD0iI0U2RjdGRiIgZmlsbC1ydWxlPSJldmVub2RkIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8cmVjdCBzdHJva2U9IiMxODkwRkYiIHN0cm9rZS13aWR0aD0iMSIgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSI3OSIgaGVpZ2h0PSI0NyIgcng9IjQiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDx0ZXh0IGlkPSLlrqHmibnoioLngrkiIGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0ibm9ybWFsIiBsaW5lLXNwYWNpbmc9IjEyIiBmaWxsPSIjMDAwMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjUiPgogICAgICAgICAgICAgICAgICAgIDx0c3BhbiB4PSIxNiIgeT0iMjkiPuWuoeaJueiKgueCuTwvdHNwYW4+CiAgICAgICAgICAgICAgICA8L3RleHQ+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="data-type="node"data-shape="rect"data-size="80*48"data-color="#1890FF"data-label="审批节点"@mousedown="addNodeToGraph"><imgdraggable="false"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODZweCIgaGVpZ2h0PSI3OHB4IiB2aWV3Qm94PSIwIDAgODYgNzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjEgKDUxMTQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCAzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTQyLjY3MDM3MjIsMS42Njk5NTcyOCBMNzcuNjM1MzAyNiwzMy4wMjE4OTQ1IEM3OS4yODAwNjQ4LDM0LjQ5NjcwMDMgNzkuNDE3ODQxNywzNy4wMjU2MDk5IDc3Ljk0MzAzNTksMzguNjcwMzcyMiBDNzcuODQ2MTE4NSwzOC43Nzg0NTgzIDc3Ljc0MzM4ODcsMzguODgxMTg4MSA3Ny42MzUzMDI2LDM4Ljk3ODEwNTUgTDQyLjY3MDM3MjIsNzAuMzMwMDQyNyBDNDEuMTUwODI4OSw3MS42OTI1Njg3IDM4Ljg0OTE3MTEsNzEuNjkyNTY4NyAzNy4zMjk2Mjc4LDcwLjMzMDA0MjcgTDIuMzY0Njk3NDQsMzguOTc4MTA1NSBDMC43MTk5MzUxODMsMzcuNTAzMjk5NyAwLjU4MjE1ODI3MiwzNC45NzQzOTAxIDIuMDU2OTY0MSwzMy4zMjk2Mjc4IEMyLjE1Mzg4MTUsMzMuMjIxNTQxNyAyLjI1NjYxMTI5LDMzLjExODgxMTkgMi4zNjQ2OTc0NCwzMy4wMjE4OTQ1IEwzNy4zMjk2Mjc4LDEuNjY5OTU3MjggQzM4Ljg0OTE3MTEsMC4zMDc0MzEzMDMgNDEuMTUwODI4OSwwLjMwNzQzMTMwMyA0Mi42NzAzNzIyLDEuNjY5OTU3MjggWiIgaWQ9InBhdGgtMSI+PC9wYXRoPgogICAgICAgIDxmaWx0ZXIgeD0iLTguOCUiIHk9Ii02LjklIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTIiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgICAgIDxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlQ29tcG9zaXRlPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgMCAwIDAgMC4wNCAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i5Z+656GA5rWB56iL5Zu+LTAxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNy4wMDAwMDAsIC0xODQuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4wMDAwMDAsIDE4NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJQb2x5Z29uIj4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbC1vcGFjaXR5PSIwLjkyIiBmaWxsPSIjRTZGRkZCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIHN0cm9rZT0iIzVDREJEMyIgc3Ryb2tlLXdpZHRoPSIxIiBkPSJNNDIuMzM2NTc1NywyLjA0MjIyMDQ3IEM0MS4wMDY5NzUzLDAuODUwMDEwMjM5IDM4Ljk5MzAyNDcsMC44NTAwMTAyMzkgMzcuNjYzNDI0MywyLjA0MjIyMDQ3IEwyLjY5ODQ5Mzk2LDMzLjM5NDE1NzcgQzIuNjAzOTE4NTgsMzMuNDc4OTYwNCAyLjUxNDAzMDAyLDMzLjU2ODg0OSAyLjQyOTIyNzI5LDMzLjY2MzQyNDMgQzEuMTM4NzcyMTksMzUuMTAyNTkxMyAxLjI1OTMyNjk5LDM3LjMxNTM4NzIgMi42OTg0OTM5NiwzOC42MDU4NDIzIEwzNy42NjM0MjQzLDY5Ljk1Nzc3OTUgQzM4Ljk5MzAyNDcsNzEuMTQ5OTg5OCA0MS4wMDY5NzUzLDcxLjE0OTk4OTggNDIuMzM2NTc1Nyw2OS45NTc3Nzk1IEw3Ny4zMDE1MDYsMzguNjA1ODQyMyBDNzcuMzk2MDgxNCwzOC41MjEwMzk2IDc3LjQ4NTk3LDM4LjQzMTE1MSA3Ny41NzA3NzI3LDM4LjMzNjU3NTcgQzc4Ljg2MTIyNzgsMzYuODk3NDA4NyA3OC43NDA2NzMsMzQuNjg0NjEyOCA3Ny4zMDE1MDYsMzMuMzk0MTU3NyBMNDIuMzM2NTc1NywyLjA0MjIyMDQ3IFoiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDx0ZXh0IGlkPSLlpITnkIboioLngrkiIGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmb250LXdlaWdodD0ibm9ybWFsIiBsaW5lLXNwYWNpbmc9IjEyIiBmaWxsPSIjMDAwMDAwIiBmaWxsLW9wYWNpdHk9IjAuNjUiPgogICAgICAgICAgICAgICAgICAgIDx0c3BhbiB4PSIxNiIgeT0iNDIiPuWkhOeQhuiKgueCuTwvdHNwYW4+CiAgICAgICAgICAgICAgICA8L3RleHQ+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="data-type="node"data-shape="polygon"data-size="80*72"data-color="#13C2C2"data-label="处理节点"@mousedown="addNodeToGraph"><imgdraggable="false"src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iODhweCIgaGVpZ2h0PSI1NnB4IiB2aWV3Qm94PSIwIDAgODggNTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjEgKDUxMTQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjQ4IiByeD0iMjQiPjwvcmVjdD4KICAgICAgICA8ZmlsdGVyIHg9Ii04LjglIiB5PSItMTAuNCUiIHdpZHRoPSIxMTcuNSUiIGhlaWdodD0iMTI5LjIlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjIiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUdhdXNzaWFuQmx1cj4KICAgICAgICAgICAgPGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb21wb3NpdGU+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjA0IDAiIHR5cGU9Im1hdHJpeCIgaW49InNoYWRvd0JsdXJPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLln7rnoYDmtYHnqIvlm74tMDEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDIuMDAwMDAwLCAtMTk1LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA2LjAwMDAwMCwgMTk3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0xNS1Db3B5LTM1Ij4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbC1vcGFjaXR5PSIwLjkyIiBmaWxsPSIjRjlGMEZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDxyZWN0IHN0cm9rZT0iI0IzN0ZFQiIgc3Ryb2tlLXdpZHRoPSIxIiB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSI+PC9yZWN0PgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPHRleHQgaWQ9Iue7k+adn+iKgueCuSIgZm9udC1mYW1pbHk9IlBpbmdGYW5nU0MtUmVndWxhciwgUGluZ0ZhbmcgU0MiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSJub3JtYWwiIGxpbmUtc3BhY2luZz0iMTIiIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMC42NSI+CiAgICAgICAgICAgICAgICAgICAgPHRzcGFuIHg9IjE2IiB5PSIyOSI+57uT5p2f6IqC54K5PC90c3Bhbj4KICAgICAgICAgICAgICAgIDwvdGV4dD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"data-type="node"data-shape="ellipse"data-size="80*48"data-color="#722ED1"data-label="结束节点"@mousedown="addNodeToGraph"></div></el-aside><el-main><div class="process-canvas" ref="processCanvas"></div></el-main><!-- 右侧配置区域 --><el-aside><el-tabs v-model="activeTab" type="card"><el-tab-pane label="流程信息" name="processInfo"><el-form :model="workflow" :rules="rules" ref="workflow" label-width="80px" style="margin-right: 8px"><el-form-item label="名称" prop="name"><el-input v-model="workflow.name" size="mini"></el-input></el-form-item><el-form-item label="分类" prop="projectId"><el-selectclearablefilterableplaceholder="请选择分类"size="mini"style="width: 100%"v-model="workflow.projectId"><el-option:key="index":label="option.name":value="option.id"v-for="(option, index) in projectListTmp"></el-option></el-select></el-form-item><el-form-item label="模版" prop="tpl"><el-selectsize="mini"v-model="workflow.tpl"multiplefilterableclearableplaceholder="请选择"style="width: 100%"><el-optionv-for="item in templateList":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-form-item><el-form-item label="描述" prop="description"><el-input type="textarea" v-model="workflow.description" size="mini"></el-input></el-form-item></el-form></el-tab-pane><el-tab-pane label="配置信息" name="cellInfo"><el-form :model="node" :rules="rules" ref="node" label-width="80px" v-if="selectCell && selectCell.shape !== 'edge'"><el-form-item label="名称" prop="name"><el-input v-model="node.name" size="mini" @input="updateNodeName" placeholder="请输入节点名称"></el-input></el-form-item><el-form-item label="是否隐藏" prop="isHidden" style="margin-top: -20px"><el-select v-model="node.isHidden" placeholder="请选择是否隐藏" size="mini" style="width: 100%" filterable><el-option label="是" :value="true"></el-option><el-option label="否" :value="false"></el-option></el-select></el-form-item><el-form-item label="顺序" prop="orderId" style="margin-top: -20px"><el-input v-model.number="node.orderId" size="mini" placeholder="请输入顺序值"></el-input></el-form-item><el-form-item label="人员类型" prop="participantTypeId" style="margin-top: -20px;"><el-select filterable v-model.number="node.participantTypeId" placeholder="请选择处理人类型" @change="getParticipantList" size="mini" style="width: 100%"><el-optionv-for="item in participantTypeOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="处理人" prop="participant" style="margin-top: -20px;" v-if="node.participantTypeId!==0"><el-select filterable v-model="node.participant" placeholder="请选择处理人" size="mini" style="width: 100%"><el-optionv-for="item in participantOptions":key="item.id":label="item.name===undefined?item.nickname:item.name":value="item.id"></el-option></el-select></el-form-item><el-form-item label="分配方式" prop="distributeTypeId" style="margin-top: -20px;"><el-select filterable v-model.number="node.distributeTypeId" placeholder="请选择分配方式" size="mini" style="width: 100%"><el-optionv-for="item in distributeTypeOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="可写模版" style="margin-top: -20px;"><el-selectfilterablemultiplev-model="node.writableTemplate"placeholder="请选择可写模版"size="mini"style="width: 100%"@change="uniqueTemplate($event, 'writable')"><el-optionv-for="item in currentTemplateList":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-form-item><el-form-item label="隐藏模版" style="margin-top: -20px;"><el-selectfilterablemultiplev-model="node.hideTemplate"placeholder="请选择需要隐藏的模版"size="mini"style="width: 100%"@change="uniqueTemplate($event, 'hidden')"><el-optionv-for="item in currentTemplateList":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-form-item><el-form-item label="状态属性" prop="attributeTypeId" style="margin-top: -20px;"><el-select filterable v-model.number="node.attributeTypeId" placeholder="请选择状态属性" size="mini" style="width: 100%"><el-optionv-for="item in attributeTypeOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="抄送" style="margin-top: -20px;"><el-select filterable multiple clearable v-model.number="nodeEmail" placeholder="请选择抄送人" size="mini" style="width: 100%"><el-optionv-for="item in participantOptions":key="item.id":label="item.name===undefined?item.nickname:item.name":value="item.email"></el-option></el-select></el-form-item><el-form-item label="标签" style="margin-top: -20px;"><el-select multiple clearable filterable v-model="node.label" placeholder="请选择标签" size="mini" style="width: 100%"><el-optionv-for="item in labelOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-form><el-form :model="edge" :rules="rules" ref="edge" label-width="80px" v-if="selectCell && selectCell.shape === 'edge'"><el-form-item label="名称" prop="name"><el-input v-model="edge.name" size="mini" @input="updateEdgeName" placeholder="请输入流转名称"></el-input></el-form-item><el-form-item label="源节点" prop="sourceStatus" style="margin-top: -20px" v-show="false"><el-input v-model.number="edge.sourceStatus" size="mini" placeholder="请输入源节点" readonly></el-input></el-form-item><el-form-item label="目标节点" prop="destinationStatus" style="margin-top: -20px;" v-show="false"><el-input v-model.number="edge.destinationStatus" size="mini" placeholder="请输入目标节点" readonly></el-input></el-form-item><el-form-item label="流转属性" prop="attributeTypeId" style="margin-top: -20px;"><el-select v-model.number="edge.attributeTypeId" placeholder="请选择流转属性" size="mini" style="width: 100%"><el-optionv-for="item in tranAttributeTypeOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-item label="标签" style="margin-top: -20px;"><el-select multiple clearable filterable v-model="edge.label" placeholder="请选择标签" size="mini" style="width: 100%"><el-optionv-for="item in edgeLabelOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-form></el-tab-pane></el-tabs></el-aside></el-container></el-container></div></template><script>// import {//   loadProjectList, loadTemplateList, loadUserList, loadDepartList,// } from '@/api/processCenter';import { deepCopy } from '../utils/utils';import { Graph, Addon } from '@antv/x6';const { Dnd } = Addon;export default {name: 'ProcessEdit',props: {data: {type: Object,default: () => ({name: '',projectId: null,description: '',icon: 'el-icon-user',iconColor: 'blue',tpl: [],flowchart: {nodes: [],edges: [],workflow: {},},}),},},computed: {// workflow: {//   get () {//     return this.data;//   },//   set (val) {//     this.$emit('update:data', val);//   }// },currentTemplateList () {return this.templateList.filter((tpl) => {if (!this.workflow.tpl || !Array.isArray(this.workflow.tpl) || this.workflow.tpl.length === 0) {return false;}return this.workflow.tpl.indexOf(tpl.id) >= 0;});},},watch: {data: {handler (val) {if (this.internalChange) {return;}// nodeConfigs: {},// edgeConfigs: {},this.workflow = {name: val.name,projectId: val.projectId,description: val.description,icon: val.icon,iconColor: val.iconColor,tpl: deepCopy(val.tpl),nodeConfigs: {},edgeConfigs: {},}const cells = [];if (val.flowchart.nodes.length > 0) {val.flowchart.nodes.forEach((node) => {const temp = deepCopy(node);this.workflow.nodeConfigs[node.id] = temp.valueData;delete temp.valueData;cells.push(temp);});}if (val.flowchart.edges.length > 0) {val.flowchart.edges.forEach((edge) => {const temp = deepCopy(edge);this.workflow.edgeConfigs[edge.id] = temp.valueData;delete temp.valueData;cells.push(temp);});}if (this.graph) {this.graph.fromJSON({ cells });this.graph.centerContent();} else {this.cells = cells;}},deep: true,immediate: true,},},data: () => ({cells: [],workflow: {},internalChange: false,graph: null,dnd: null,selectCell: null,activeTab: 'processInfo',projectListTmp: [],templateList: [],node: {},edge: {},rules: {name: [{ required: true, message: ' ', trigger: 'change' }],tpl: [{ required: true, message: ' ', trigger: 'change' }],icon: [{ required: true, message: ' ', trigger: 'change' }],orderId: [{ required: true, message: ' ', trigger: 'change' }],participant: [{ required: true, message: ' ', trigger: 'change' }],participantTypeId: [{ required: true, message: ' ', trigger: 'change' }],distributeTypeId: [{ required: true, message: ' ', trigger: 'change' }],attributeTypeId: [{ required: true, message: ' ', trigger: 'change' }],sourceStatus: [{ required: true, message: ' ', trigger: 'change' }],projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],destinationStatus: [{ required: true, message: ' ', trigger: 'change' }]},participantTypeOptions: [{ label: '无处理人', value: 0 },{ label: '个人', value: 1 },{ label: '业务组', value: 2 },// { label: '部门', value: 3 },{ label: '变量', value: 4 },],distributeTypeOptions: [// { label: '主动接单', value: 1 },{ label: '直接处理', value: 2 }// { label: '随机分配', value: 3 },// { label: '全部处理', value: 4 }],attributeTypeOptions: [{ label: '新建', value: 1 },{ label: '审批', value: 2 },{ label: '处理', value: 3 },{ label: '结束', value: 4 },{ label: '其他', value: 5 }],labelOptions: [{ label: '抄送HRBP', value: 'ccHrbp' },{ label: '指定交接人', value: 'handover' },{ label: '分管负责人', value: 'chargeLeader' }],edgeLabelOptions: [{ label: 'leader申请', value: 'leaderApply' },{ label: '指定分管领导', value: 'plusSign' }],tranAttributeTypeOptions: [{ label: '同意', value: 1 },{ label: '拒绝', value: 2 },{ label: '其他', value: 3 }],participantOptions: [],participantMap: {},clickCellMap: {},loadUserPromise: [],}),created () {this.loadProject();this.loadTemplate();// this.loadUserListPartial();},methods: {uniqueTemplate (select, type) {// debugger;let uniqueList = [];if (type === 'writable') {uniqueList = this.node.hideTemplate;} else {uniqueList = this.node.writableTemplate;}select.forEach(v => {const index = uniqueList.findIndex(value => value === v);if (index >= 0) {uniqueList.splice(index, 1);}});// this.node.name = this.node.hideTemplate.length;this.$forceUpdate();},async loadUserListPartialFunc () {const params = {page: 1,perPage: 100,sort: 1,}// const loadAction = async (params, res) => {//   return await loadUserList(params).then(response => {//     res.push(...response.data);//     return response.data.length === params.perPage;//   }, () => false);// }const res = [];let flag = await loadAction(params, res);while (flag) {params.page = params.page + 1;flag = await loadAction(params, res);}this.participantMap.user = res;while (this.loadUserPromise.length > 0) {const callback = this.loadUserPromise.shift();callback[0]();}},loadUserListPartial () {if (this.loadUserPromise.length === 0) {this.loadUserListPartialFunc();}return new Promise((resolve, reject) => {this.loadUserPromise.push([resolve, reject]);});},getParticipantList (init = false) {// this.node.participant = '';this.participantOptions = [];const params = {page: 1,perPage: 99999,sort: 1,}if (this.node.participantTypeId === 1) {if (!init || this.node.participant === 0) this.node.participant = '';this.participantOptions = this.participantMap.user;if (!this.participantMap.user) {this.loadUserListPartial().then(() => {this.participantOptions = this.participantMap.user;});// loadUserList(params).then(res => {//   this.participantMap.user = res.data;//   this.participantOptions = res.data;// }, err => {//   console.error(err);//   this.$message({//     type: 'error',//     message: err.errmsg,//   });// });} else {this.participantOptions = this.participantMap.user;}} else if (this.node.participantTypeId === 2) {if (!this.participantMap.depart) {// loadDepartList(params).then(res => {//   this.participantMap.depart = res.data;//   this.participantOptions = res.data;// }, err => {//   console.error(err);//   this.$message({//     type: 'error',//     message: err.errmsg,//   });// });} else {this.participantOptions = this.participantMap.depart;}} else if (this.node.participantTypeId === 4) {// 处理变量this.participantOptions = [{ id: 1, name: '创建者' },{ id: 2, name: '创建者Leader' },{ id: 3, name: '汇报对象' },{ id: 4, name: '分管负责人' },{ id: 5, name: 'HRBP' },{ id: 6, name: 'VP' }]if (!init) this.node.participant = 1;} else if (this.node.participantTypeId === 0) {this.node.participant = 0;}},loadTemplate () {const params = {page: 1,perPage: 99999,sort: 1,}// loadTemplateList(params).then((res) => {//   this.templateList = res.data;// }, (err) => {//   this.$message({//     type: 'error',//     message: err.errmsg,//   });//   console.error(err);// });},loadProject () {const params = {page: 1,perPage: 99999,sort: 1,}// loadProjectList(params).then((res) => {//   this.projectListTmp = res.data;// }, (err) => {//   this.$message({//     type: 'error',//     message: err.errmsg,//   });//   console.error(err);// });},handleCellClick (cell) {this.activeTab = 'cellInfo';this.selectCell = cell;const id = cell.id;if (cell.isNode()) {if (!this.workflow.nodeConfigs[id]) {let attributeTypeId = 1;if (cell.shape === 'rect') {attributeTypeId = 2;} else if (cell.shape === 'polygon') {attributeTypeId = 3;} else if (cell.shape === 'ellipse') {attributeTypeId = 4;}// { label: '新建', value: 1 },// { label: '审批', value: 2 },// { label: '处理', value: 3 },// { label: '结束', value: 4 },// { label: '其他', value: 5 }this.workflow.nodeConfigs[id] = {tmpId: id,name: cell.attrs.label.text,isHidden: false,orderId: null,participantTypeId: 0,participant: '',distributeTypeId: 2,attributeTypeId,writableTemplate: [],hideTemplate: [],label: [],ccEmail: [],};}this.node = this.workflow.nodeConfigs[id];} else {if (!this.workflow.edgeConfigs[id]) {this.workflow.edgeConfigs[id] = {tmpId: id,label: [],name: '',sourceStatus: cell.source.cell,destinationStatus: cell.target.cell,attributeTypeId: '',};}this.edge = this.workflow.edgeConfigs[id];}this.getParticipantList(true);},updateEdgeName (name) {this.selectCell.setLabels(name);},updateNodeName (name) {this.selectCell.setAttrs({label: {text: name,},});},addNodeToGraph (event) {const target = event.currentTarget;const type = target.getAttribute('data-type');let node = null;if (type === 'node') {const shape = target.getAttribute('data-shape');const size = target.getAttribute('data-size');const width = Number(size.split('*')[0]);const height = Number(size.split('*')[1]);// data-color="#1890FF"const label = target.getAttribute('data-label');const color = target.getAttribute('data-color');const rgbToHex = (r, g, b) => {const hex = ((r << 16) | (g << 8) | b).toString(16);return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex;}// hex to rgbconst hexToRgb = (hex) => {const rgb = [];for (let i = 1; i < 7; i += 2) {rgb.push(parseInt('0x' + hex.slice(i, i + 2)));}return rgb;}// 计算渐变过渡色const gradient = (startColor, endColor, step) => {// 将 hex 转换为rgbconst sColor = hexToRgb(startColor);const eColor = hexToRgb(endColor);// 计算R\G\B每一步的差值const rStep = (eColor[0] - sColor[0]) / step;const gStep = (eColor[1] - sColor[1]) / step;const bStep = (eColor[2] - sColor[2]) / step;const gradientColorArr = [];for (let i = 0; i < step; i++) {// 计算每一步的hex值gradientColorArr.push(rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])));}return gradientColorArr;}const colorList = gradient(color, '#ffffff', 10);const halfColor = colorList[9];const fillColor = colorList[6];const ports = {groups: {top: {position: 'top',attrs: {circle: {r: 4,magnet: true,stroke: '#31d0c6',strokeWidth: 2,fill: '#fff',}}},bottom: {position: 'bottom',attrs: {circle: {r: 4,magnet: true,stroke: '#31d0c6',strokeWidth: 2,fill: '#fff',}}},left: {position: 'left',attrs: {circle: {r: 4,magnet: true,stroke: '#31d0c6',strokeWidth: 2,fill: '#fff',}}},right: {position: 'right',attrs: {circle: {r: 4,magnet: true,stroke: '#31d0c6',strokeWidth: 2,fill: '#fff',}}}},items: [{id: 'top',group: 'top',},{id: 'bottom',group: 'bottom',},{id: 'left',group: 'left',},{id: 'right',group: 'right',}],}const nodeInfo = {shape,width,height,attrs: {label: {'font-size': 12,text: label,fill: 'black',},body: {stroke: fillColor,fill: halfColor,strokeWidth: 2,},},ports,};if (shape === 'polygon') {nodeInfo.points = '0,10 10,0 20,10 10,20';}node = this.graph.createNode(nodeInfo);} else {node = {};}this.dnd.start(node, event);},initG6 () {const that = this;this.graph = new Graph({container: that.$refs.processCanvas,autoResize: true,connecting: {snap: true, // 自动吸附连接线allowBlank: false, // 不允许只有一个节点的线// allowMulti: false, // 不允许在两个节点间创建多个线highlight: true, // 高亮可被连接的点},grid: true,history: true,snapline: {enabled: true, // 对齐线sharp: true,},scroller: {enabled: true,pageVisible: false,pageBreak: false,pannable: true,},// mousewheel: {//   enabled: true,//   modifiers: ['ctrl', 'meta'],// },});// this.graph.fromJSON(data);this.dnd = new Dnd({target: this.graph,scaled: false,animation: true,});this.graph.on('edge:connected', ({ isNew, edge }) => {if (isNew) {that.handleCellClick(edge);}});this.graph.on('cell:mouseenter', ({ cell }) => {if (this.clickCellMap[cell.id]) {clearTimeout(this.clickCellMap[cell.id]);delete this.clickCellMap[cell.id];}if (cell.isNode()) {let offset = { x: 10, y: 10 };if (cell.shape === 'polygon') {offset = { x: 20, y: 20 };}cell.addTools([{name: 'boundary',args: {attrs: {fill: '#7c68fc',stroke: '#333','stroke-width': 1,'fill-opacity': 0.2,},},},{name: 'button-remove',args: {x: 0,y: 0,offset,},},])} else {cell.addTools(['button-remove']);}});this.graph.on('cell:mouseleave', ({ cell }) => {cell.removeTools();});this.graph.on('cell:click', ({ cell }) => {that.handleCellClick(cell);});this.graph.on('node:added', ({ cell }) => {that.handleCellClick(cell);});if (this.cells.length > 0) {this.graph.fromJSON({ cells: this.cells });this.$nextTick(() => {this.graph.centerContent();});this.cells = [];}},async saveFlow () {let workflowValid;await this.$refs.workflow.validate(valid => {workflowValid = valid;});if (!workflowValid) {this.activeTab = 'processInfo';this.$message({type: 'warning',message: '请完成流程信息的配置',});return;}const data = this.graph.toJSON();const { cells } = data;const workflow = {name: this.workflow.name,projectId: this.workflow.projectId,description: this.workflow.description,icon: this.workflow.icon,iconColor: this.workflow.iconColor,tpl: deepCopy(this.workflow.tpl),}const flowchart = {};flowchart.workflow = deepCopy(workflow);flowchart.nodes = [];flowchart.edges = [];const that = this;const checkEmpty = (v) => (v === null || v === undefined || v === '');const checkNode = (form) => {if (checkEmpty(form.name)) {return false;}if (checkEmpty(form.orderId)) {return false;}if (checkEmpty(form.participantTypeId)) {return false;}if (checkEmpty(form.participant)) {return false;}if (checkEmpty(form.distributeTypeId)) {return false;}return !checkEmpty(form.attributeTypeId);}const checkEdge = (form) => {if (checkEmpty(form.name)) {return false;}return form.attributeTypeId;}const cellValid = cells.every((cell) => {// 线if (cell.shape === 'edge') {const { id } = cell;if (!that.workflow.edgeConfigs[id]) {const cellObj = that.graph.getCell(id);that.handleCellClick(cellObj);that.$nextTick(() => {that.$refs.edge.validate();});return false;}if (!checkEdge(that.workflow.edgeConfigs[id])) {const cellObj = that.graph.getCell(id);that.handleCellClick(cellObj);that.$nextTick(() => {that.$refs.edge.validate();});this.$message({type: 'warning',message: '请完成流转信息的配置',});return false;}const temp = deepCopy(cell);temp.valueData = that.workflow.edgeConfigs[id];flowchart.edges.push(temp);return true;} else {const { id } = cell;if (!that.workflow.nodeConfigs[id]) {const cellObj = that.graph.getCell(id);that.activeTab = 'cellInfo';that.handleCellClick(cellObj);that.$nextTick(() => {that.$refs.node.validate();});return false;}if (!checkNode(that.workflow.nodeConfigs[id])) {const cellObj = that.graph.getCell(id);that.activeTab = 'cellInfo';that.handleCellClick(cellObj);that.$nextTick(() => {that.$refs.node.validate();});this.$message({type: 'warning',message: '请完成节点信息的配置',});return false;}const temp = deepCopy(cell);temp.valueData = that.workflow.nodeConfigs[id];flowchart.nodes.push(temp);return true;}});// workflow.flowchart = flowchart;if (!cellValid) {return;}this.internalChange = true;this.$emit('update', flowchart);this.$nextTick(() => {this.internalChange = false;});},},mounted () {this.initG6();},}</script><style scoped>.process-edit-container {margin-top: 20px;/* height: calc(100% - 20px); */height: 90vh;}.process-canvas {width: 100%;height: 100%;}.process-component-list {height: 100%;background-color: #e6e6e6;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-around;align-content: flex-start;}</style>

上面的代码作为一个公用组件在下面这个组件中导入，根据后端返回的json可以对流程图进行编辑

<template><span class="staff-title" style="padding-top: 100px">{{activeTitle}}</span><process-edit :data="processInfo" @update="handleSave"/>
</template><script>
// 导入的后端服务地址，这个不需要参考
import { loadFlowById, createFlow, updateFlowById } from '@/api/processCenter';
import { deepCopy } from '@/utils/utils'; // 深拷贝（贴到下面了）
import processEdit from '@/components/processEditor/processEdit.vue'; // 上面的代码作为子组件导入export default {name: 'editProcess',components: {processEdit,},props: {    processId: {   // 父组件传入的值type: [Number, String],default: -1,},},data: () => ({init: false,realId: null,processInfo: {name: '',projectId: null,description: '',icon: 'el-icon-user',iconColor: 'blue',tpl: [],flowchart: {nodes: [],edges: [],workflow: {},},},// rDong修改activeTitle: ''}),created () {// 父组件传入processId后传入后端地址请求数据if (Number(this.processId) !== -1) {this.init = true;this.activeTitle = '编辑流程';this.realId = this.processId;loadFlowById(this.processId).then(res => {this.processInfo = res;this.$nextTick(() => {this.init = false;});}, (err) => {this.$message({type: 'error',message: err.errmsg,});console.error(err);});} else {this.activeTitle = '新建流程';}},watch: {// 将后端返回的数据进行处理转变为子组件可以接收展示的数据，并传给子组件展示并可编辑// 这边不用参考， 可以将之前子组件传过来的值直接保存到后端，到时候请求将后端保存的值在进行返回展示编辑，这样可以不进行数据格式的处理。processInfo: {handler (val) {if (this.init) {return;}// let func = createFlow;// if (this.realId) {//   func = (data) => updateFlowById(this.realId, data);// }const data = deepCopy(val);const statusList = [];const transformList = [];const statusIDList = [];const transformIDList = [];for (const arrayValue of data.nodes) {if (statusIDList.indexOf(arrayValue.valueData.id) === -1) {statusIDList.push(arrayValue.valueData.id);} else {delete arrayValue.valueData.id;}arrayValue.valueData.tmpId = arrayValue.id;statusList.push(arrayValue.valueData);arrayValue.label = arrayValue.valueData.name;}for (const transformValue of data.edges) {if (transformIDList.indexOf(transformValue.valueData.id) === -1) {transformIDList.push(transformValue.valueData.id);} else {delete transformValue.valueData.id;}transformValue.valueData.tmpId = transformValue.id;transformList.push(transformValue.valueData);}const workflowValue = Object.assign({}, data.workflow);workflowValue.flowchart = data;const jsonData = {workflow: workflowValue,status: statusList,transform: transformList,}if (this.realId === null) {createFlow(jsonData).then((res) => {this.realId = res;this.$router.replace({ name: 'WorkProcess' });this.$message({type: 'success',message: '保存流程成功',});}, err => {this.$message({type: 'error',message: err.errmsg,});console.error(err);});} else {jsonData.workflow.id = Number(this.realId);updateFlowById(Number(this.realId), jsonData).then(() => {this.$router.replace({ name: 'WorkProcess' });this.$message({type: 'success',message: '保存流程成功',});}, err => {this.$message({type: 'error',message: err.errmsg,});console.error(err);});}}},},methods: {// 子组件发过来的值（$emit） 将发过来的值进行处理改变为后端需要的数据格式然后发给后端// 看业务需求。可以不进行处理直接发给后端，后端只是保存数据的作用，编辑的时候再请求过来直接传给子组件赋值就可以handleSave (val) {const data = deepCopy(val);const statusList = [];const transformList = [];const statusIDList = [];const transformIDList = [];for (const arrayValue of data.nodes) {if (statusIDList.indexOf(arrayValue.valueData.id) === -1) {statusIDList.push(arrayValue.valueData.id);} else {delete arrayValue.valueData.id;}arrayValue.valueData.tmpId = arrayValue.id;statusList.push(arrayValue.valueData);arrayValue.label = arrayValue.valueData.name;}for (const transformValue of data.edges) {if (transformIDList.indexOf(transformValue.valueData.id) === -1) {transformIDList.push(transformValue.valueData.id);} else {delete transformValue.valueData.id;}transformValue.valueData.tmpId = transformValue.id;transformList.push(transformValue.valueData);}const workflowValue = Object.assign({}, data.workflow);workflowValue.flowchart = data;const jsonData = {workflow: workflowValue,status: statusList,transform: transformList,}if (this.realId === null) {createFlow(jsonData).then((res) => {this.realId = res;this.$router.replace({ name: 'WorkProcess' });this.$message({type: 'success',message: '保存流程成功',});}, err => {this.$message({type: 'error',message: err.errmsg,});console.error(err);});} else {jsonData.workflow.id = Number(this.realId);updateFlowById(Number(this.realId), jsonData).then(() => {this.$router.replace({ name: 'WorkProcess' });this.$message({type: 'success',message: '保存流程成功',});}, err => {this.$message({type: 'error',message: err.errmsg,});console.error(err);});}}},
}
</script><style lang="less" scoped>
.staff-title {display: block;width: 100%;height: 40px;padding: 20px 0 0 30px;font-size: 16px;margin-top: 20px;border-bottom: 1px solid #ccc;margin-bottom: 30px;background-color: skyblue;
}
</style>

深拷贝也贴上来吧

// 深拷贝
export function deepCopy(obj, cache = []) {// just return if obj is immutable valueif (obj === null || typeof obj !== 'object') {return obj}// if obj is hit, it is in circular structureconst hit = find(cache, (c) => c.original === obj)if (hit) {return hit.copy}const copy = Array.isArray(obj) ? [] : {}// put the copy into cache at first// because we want to refer it in recursive deepCopycache.push({original: obj,copy})Object.keys(obj).forEach((key) => {copy[key] = deepCopy(obj[key], cache)})return copy
}