如何判定流程闭环？结构复杂的话动态规划显然不是一个好办法

src/components/work-flow/super-flow.vue

@@ -5,39 +5,17 @@
       <div class="node-container">
         <p class="label_head">节点类型</p>
         <p class="label_explanation">请拖拽添加到流程中</p>
-        <el-input-number
-          v-model="scale_num"
-          @change="handleChange"
-          :step="10"
-          :step-strictly="true"
-          :min="50"
-          :max="150"
-          label="描述文字"
-        ></el-input-number>
-        <span
-          class="node-item"
-          v-for="(item, index) in nodeItemList"
-          :key="index"
-          @mousedown="evt => nodeItemMouseDown(evt, item.value)"
-        >{{item.label}}</span>
+        <el-input-number v-model="scale_num" @change="handleChange" :step="10" :step-strictly="true" :min="50" :max="150" label="描述文字"></el-input-number>
+        <span class="node-item" v-for="(item, index) in nodeItemList" :key="index" @mousedown="evt => nodeItemMouseDown(evt, item.value)">{{item.label}}</span>
       </div>
       <div class="flow-container" :class="`scale${scale_num}`" ref="flowContainer">
-        <super-flow
-          ref="superFlow"
-          :node-list="nodeList"
-          :link-list="linkList"
-          :link-menu="linkMenu"
-          :link-base-style="linkBaseStyle"
-          :link-style="linkStyle"
-          :link-desc="linkDesc"
-          :origin="origin"
-        >
+        <super-flow ref="superFlow" :node-list="nodeList" :link-list="linkList" :link-menu="linkMenu" :link-base-style="linkBaseStyle" :link-style="linkStyle" :link-desc="linkDesc" :origin="origin">
           <template v-slot:node="{meta}">
-            <div
-              :class="{'flow-node-begin': meta.type == 'begin', 'flow-node-end': meta.type == 'end', 'flow-node-default': meta.type == 'default'}"
-              :id="meta.id"
-              @click="clickItem(meta)"
-            >{{meta.name}}</div>
+            <div :class="{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}" :id="meta.id">
+              <div @click="clickItem(meta)">
+                {{meta.name}}
+              </div>
+            </div>
           </template>
         </super-flow>
       </div>
@@ -48,7 +26,7 @@
 <script>
 const drawerType = {
   node: 0,
-  link: 1,
+  link: 1
 };
 export default {
   data() {
@@ -90,14 +68,14 @@ export default {
           } else {
             this.$refs.linkSetting.clearValidate();
           }
-        },
+        }
       },
       linkSetting: {
-        desc: "",
+        desc: ""
       },
       nodeSetting: {
         name: "",
-        desc: "",
+        desc: ""
       },
       dragConf: {
         isDown: false,
@@ -107,7 +85,7 @@ export default {
         clientX: 0,
         clientY: 0,
         ele: null,
-        info: null,
+        info: null
       },
       nodeItemList: [
         {
@@ -118,9 +96,9 @@ export default {
             meta: {
               label: "开始开始开始开始开始",
               name: "开始开始开始开始开始",
-              type: "begin",
-            },
-          },
+              type: 0
+            }
+          }
         },
         {
           label: "结束",
@@ -130,9 +108,9 @@ export default {
             meta: {
               label: "结束",
               name: "结束",
-              type: "end",
-            },
-          },
+              type: 1
+            }
+          }
         },
         {
           label: "普通节点",
@@ -142,27 +120,27 @@ export default {
             meta: {
               label: "普通节点",
               name: "普通节点",
-              type: "default",
-            },
-          },
-        },
+              type: 2
+            }
+          }
+        }
       ],
       linkMenu: [
         [
           {
             label: "删除",
-            selected: (link) => {
+            selected: link => {
               console.log(link);
               link.remove();
-            },
+            }
           },
           {
             label: "编辑",
-            selected: (link) => {
+            selected: link => {
               this.drawerConf.open(drawerType.link, link);
-            },
-          },
-        ],
+            }
+          }
+        ]
       ],
       linkBaseStyle: {
         color: "#666666", // line 颜色
@@ -172,8 +150,8 @@ export default {
         font: "14px Arial", // line 描述文字 字体设置 参考 canvas font
         dotted: false, // 是否是虚线
         lineDash: [4, 4], // 虚线时生效
-        background: "rgba(255,255,255,0.6)", // 描述文字背景色
-      },
+        background: "rgba(255,255,255,0.6)" // 描述文字背景色
+      }
     };
   },
   mounted() {
@@ -213,7 +191,7 @@ export default {
           top,
           right,
           bottom,
-          left,
+          left
         } = this.$refs.flowContainer.getBoundingClientRect();
         // 判断鼠标是否进入 flow container
         if (
@@ -232,7 +210,6 @@ export default {
           clientY = bottom;
         }
         // 获取拖动元素左上角相对 super flow 区域原点坐标
-        console.log(top, right, bottom, left, clientX, clientY);
         const coordinate = this.$refs.superFlow.getMouseCoordinate(
           clientX - conf.offsetLeft,
           clientY - conf.offsetTop
@@ -240,7 +217,7 @@ export default {
         // 添加节点
         this.$refs.superFlow.addNode({
           coordinate,
-          ...conf.info,
+          ...conf.info
         });
         conf.isMove = false;
       }
@@ -251,7 +228,6 @@ export default {
     },
     nodeItemMouseDown(evt, info) {
       info.meta.id = parseInt(Math.random() * 1000 * 1000);
-      console.log(evt, info);
       const { clientX, clientY, currentTarget } = evt;
       const { top, left } = evt.currentTarget.getBoundingClientRect();
       const conf = this.dragConf;
@@ -263,7 +239,7 @@ export default {
         clientY: clientY,
         info,
         ele,
-        isDown: true,
+        isDown: true
       });
       ele.style.position = "fixed";
       ele.style.margin = "0";
@@ -275,10 +251,10 @@ export default {
       console.log(item);
     },
     getData() {
-      console.log(this.$refs.superFlow.toJSON());
-    },
-    handleChange() {},
+      return this.$refs.superFlow.toJSON();
     },
+    handleChange() {}
+  }
 };
 </script>
 
@@ -296,6 +272,7 @@ export default {
   height: 800px;
   background-color: #f5f5f5;
   @list-width: 200px;
+  position: relative;
   > .node-container {
     width: @list-width;
     position: absolute;
@@ -326,6 +303,10 @@ export default {
     box-shadow: none;
     border: none;
     background-color: transparent;
+    border-radius: 8px;
+    &:focus {
+      box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
+    }
     .flow-node-begin {
       width: 100%;
       height: 100%;
@@ -338,9 +319,6 @@ export default {
       text-overflow: ellipsis;
       border-radius: 8px;
       border: 2px solid #444;
-      &:focus {
-        border: 2px solid #0f0;
-      }
     }
     .flow-node-end {
       width: 100%;
@@ -353,9 +331,6 @@ export default {
       text-overflow: ellipsis;
       border-radius: 8px;
       border: 2px solid #f80;
-      &:focus {
-        border: 2px solid #0f0;
-      }
     }
     .flow-node-default {
       width: 100%;
@@ -368,9 +343,6 @@ export default {
       text-overflow: ellipsis;
       border-radius: 8px;
       border: 2px solid #3a9;
-      &:focus {
-        border: 2px solid #0f0;
-      }
     }
   }
 }
@@ -391,9 +363,6 @@ export default {
   &:hover {
     box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
   }
-  &:focus {
-    background-color: chocolate;
-  }
 }
 </style>
 

src/pages/workbench/component-center/process-management/process-design/index.vue

 <template>
-  <div>
-    <div>
+  <div class="design_contain">
     <el-button @click="getData">获取参数</el-button>
-    </div>
+    <WorkFlow ref="workFlow" />
   </div>
 </template>
 
 <script>
+import WorkFlow from "@/components/work-flow/super-flow";
+
 export default {
+  components: {
+    WorkFlow
+  },
   methods: {
-    getData() {}
+    getData() {
+      let self = this;
+      let data = self.$refs.workFlow.getData();
+      console.log(data);
+      let start_num = 0;
+      let end_num = 0;
+      let start_id = "";
+      let end_id = "";
+      let start_before = 0;
+      let end_after = 0;
+      data.nodeList.forEach(item => {
+        if (item.meta.type == 0) {
+          start_num++;
+          start_id = item.id;
+        }
+        if (item.meta.type == 1) {
+          end_num++;
+          end_id = item.id;
+        }
+      });
+      data.linkList.forEach(item => {
+        if (start_id == item.endId) {
+          start_before++;
+        }
+        if (end_id == item.startId) {
+          end_after++;
+        }
+
+      });
+      if (start_num != 1 || end_num != 1) {
+        this.$message({
+          message: "开始节点与结束节点均应有且只有一个",
+          type: "warning"
+        });
+      } else if (start_before != 0) {
+        this.$message({
+          message: "开始节点前面不应连接其它节点",
+          type: "warning"
+        });
+      } else if (end_after != 0) {
+        this.$message({
+          message: "结束节点后面不应连接其它节点",
+          type: "warning"
+        });
+      }
+    }
   }
 };
 </script>
+
+<style scoped>
+.design_contain {
+  width: 100%;
+  padding: 0 20px;
+  margin-bottom: 20px;
+}
+</style>