撤回功能实现

src/views/base/craftManagement/route/bindProcess.vue

@@ -69,6 +69,10 @@
             @dragleave="onDragLeave"
             @node-click="nodeClick($event)"
             @edge-click="edgeClick($event)"
+            @nodes-change="(data) => nodesChange(data)"
+            @edges-change="(data) => edgesChange(data)"
+            @node-drag-start="nodeDragStart"
+            @node-drag-stop="nodeDragStop"
           >
             <MiniMap style="background-color: grey" />
             <template #edge-custom="props">
@@ -94,13 +98,15 @@
                 <button title="蛇形排列" @click="convertToSnakeLayout">
                   <PannelIcon name="liucheng" />
                 </button>
-                <button title="撤回" @click="goBack">
-                  <PannelIcon name="fanhui" />
-                </button>
-
                 <button title="整齐排列" @click="layoutGraph('TB')">
                   <PannelIcon name="vertical" />
                 </button>
+                <button title="重置" @click="cancer">
+                  <PannelIcon name="chongzhi" />
+                </button>
+                <button title="撤回" @click="goBack">
+                  <PannelIcon name="fanhui" />
+                </button>
               </div>
             </Panel>
           </VueFlow>
@@ -149,18 +155,18 @@
               <div>
                 <el-button
                   type="danger"
-                  v-if="cancelStatus"
+                  v-if="false"
                   :class="styleStatus == true ? 'showStyle' : ''"
-                  @click="cancelFlow"
+                  @click="cancer"
                 >
                   <span :class="styleStatus == true ? 'fontStyle' : ''"
-                    >取</span
+                    >回</span
                   >
                   <span :class="styleStatus == true ? 'fontStyle' : ''">
                     &nbsp;
                   </span>
                   <span :class="styleStatus == true ? 'fontStyle' : ''"
-                    >消</span
+                    >退</span
                   >
                 </el-button>
               </div>
@@ -286,7 +292,43 @@ const styleStatus = ref(false);
 const changeStyle = () => {
   styleStatus.value = !styleStatus.value;
 };
-const goBack = () => {};
+const addHistory = () => {
+  historyList.value.push(JSON.parse(JSON.stringify(flowData)));
+};
+const resetHistory = () => {
+  historyList.value = [];
+  historyList.value.push(JSON.parse(JSON.stringify(flowData)));
+};
+const nodesChange = (data) => {
+  if (data.length > 0) {
+    if (data[0].type == "add" || data.type == "remove") {
+      addHistory();
+    }
+  }
+};
+const edgesChange = (data) => {
+  if (data.length > 0) {
+    if (data[0].type == "add" || data[0].type == "remove") {
+      addHistory();
+    }
+  }
+};
+const nodeDragStart = () => {};
+const nodeDragStop = () => {
+  setTimeout(() => {
+    addHistory();
+  }, 0);
+};
+
+const goBack = () => {
+  if (historyList.value.length > 1) {
+    flowData.nodes = historyList.value[historyList.value.length - 2].nodes;
+    flowData.edges = historyList.value[historyList.value.length - 2].edges;
+    historyList.value.pop();
+  } else {
+    ElMessage.warning("已是初始线路");
+  }
+};
 const historyList = ref([]);
 const { capture } = useScreenshot();
 const { layout } = useLayout();
@@ -441,6 +483,17 @@ const saveFlow = async () => {
   }
   loadProcessesFlow();
 };
+const cancer = () => {
+  ElMessageBox.confirm("取消的话会清空本次操作记录，确定吗?", "回退", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      cancelFlow();
+    })
+    .catch(() => {});
+};
 const cancelFlow = () => {
   flowData.nodes = flowDataCopy.value.nodes;
   flowData.edges = flowDataCopy.value.edges;
@@ -450,6 +503,7 @@ const cancelFlow = () => {
   if (selectLine.value != null) {
     selectLine.value = null;
   }
+  resetHistory();
 };
 const deleteFlow = () => {
   if (selectNode.value != null) {
@@ -469,6 +523,7 @@ const deleteFlow = () => {
   selectNode.value = null;
   selectLine.value = null;
   ElMessage.success("删除成功");
+  addHistory();
 };
 
 const saveInfo = async () => {
@@ -538,12 +593,14 @@ const loadProcessesFlow = async () => {
       let jsonData = JSON.parse(res.data.routeData);
       flowData.nodes = jsonData.nodes;
       flowData.edges = jsonData.edges;
-
       flowDataCopy.value = JSON.parse(JSON.stringify(jsonData));
       cancelStatus.value = true;
       if (res.data.usable == 1) {
         usableStatus.value = false;
       }
+      setTimeout(() => {
+        resetHistory();
+      }, 0);
     } else {
       cancelStatus.value = false;
     }
@@ -564,7 +621,6 @@ const editProComponent = async () => {
 };
 
 // 全局=======
-
 onMounted(async () => {
   await loadTreeData();
   await loadProcessesFlow();
@@ -606,11 +662,13 @@ async function layoutGraph(direction) {
   nodes.value = layout(nodes.value, edges.value, direction);
   nextTick(() => {
     fitView();
+    addHistory();
   });
 }
 // 转换为蛇形布局
 const convertToSnakeLayout = () => {
   nodes.value = useSnakeLayoutHook(nodes.value);
+  addHistory();
 };
 </script>