撤回bug解决&&风格实现

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

@@ -71,7 +71,6 @@
             @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" />
@@ -122,70 +121,36 @@
       <div class="detailInfo">
         <el-scrollbar>
           <div class="opBox">
-            <!-- <el-button type="success" @click="changeStyle">
-              按钮风格切换
-            </el-button> -->
             <el-button type="primary" @click="changeEditStatus">{{
               !editStatus ? "切换为工序信息编辑模式" : "切换为工序路线编辑模式"
             }}</el-button>
 
             <el-button @click="getPng">导出流程图 </el-button>
+            <el-button type="success" @click="changeStyle">
+              按钮风格切换
+            </el-button>
           </div>
 
           <!-- 工艺路线编辑模式 -->
           <div v-if="!editStatus && usableStatus">
-            <div class="btns">
+            <div :class="styleStatus ? 'btnsChange' : 'btns'">
               <div>
-                <el-button
-                  type="primary"
-                  @click="saveFlow"
-                  :class="styleStatus == true ? 'showStyle' : ''"
-                >
-                  <span :class="styleStatus == true ? 'fontStyle' : ''"
-                    >保</span
-                  >
-                  <span :class="styleStatus == true ? 'fontStyle' : ''">
-                    &nbsp;
-                  </span>
-                  <span :class="styleStatus == true ? 'fontStyle' : ''"
-                    >存</span
-                  >
-                </el-button>
-              </div>
-              <div>
-                <el-button
-                  type="danger"
-                  v-if="false"
-                  :class="styleStatus == true ? 'showStyle' : ''"
-                  @click="cancer"
-                >
-                  <span :class="styleStatus == true ? 'fontStyle' : ''"
-                    >回</span
-                  >
-                  <span :class="styleStatus == true ? 'fontStyle' : ''">
-                    &nbsp;
-                  </span>
-                  <span :class="styleStatus == true ? 'fontStyle' : ''"
-                    >退</span
-                  >
+                <el-button type="primary" @click="saveFlow">
+                  <span>保</span>
+                  <span> &nbsp; </span>
+                  <span>存</span>
                 </el-button>
               </div>
+
               <div>
                 <el-button
                   type="info"
                   v-if="selectNode || selectLine"
-                  :class="styleStatus == true ? 'showStyle' : ''"
                   @click="deleteFlow"
                 >
-                  <span :class="styleStatus == true ? 'fontStyle' : ''"
-                    >删</span
-                  >
-                  <span :class="styleStatus == true ? 'fontStyle' : ''">
-                    &nbsp;
-                  </span>
-                  <span :class="styleStatus == true ? 'fontStyle' : ''"
-                    >除</span
-                  ></el-button
+                  <span>删</span>
+                  <span> &nbsp; </span>
+                  <span>除</span></el-button
                 >
               </div>
             </div>
@@ -283,17 +248,45 @@ import { formOption } from "./bindConfig";
 import { ElMessage } from "element-plus";
 import { useScreenshot } from "./screenshot.ts";
 import { useLayout } from "@/hooks/useLayout";
-import { initialEdges, initialNodes } from "./initial-elements";
 import { useSnakeLayoutHook } from "@/hooks/vueflowHooks";
 defineOptions({
   name: "bindProcess/:id/:prodtCode",
 });
 const styleStatus = ref(false);
+
 const changeStyle = () => {
   styleStatus.value = !styleStatus.value;
 };
-const addHistory = () => {
-  historyList.value.push(JSON.parse(JSON.stringify(flowData)));
+const addHistory = (type) => {
+  switch (type) {
+    // 1为nodes新增
+    case "1":
+      if (
+        flowData.nodes.length >
+        historyList.value[historyList.value.length - 1].nodes.length
+      ) {
+        historyList.value.push(JSON.parse(JSON.stringify(flowData)));
+      } else {
+        setTimeout(() => {
+          return addHistory("1");
+        }, 100);
+      }
+      break;
+    case "2":
+      if (
+        flowData.edges.length >
+        historyList.value[historyList.value.length - 1].edges.length
+      ) {
+        historyList.value.push(JSON.parse(JSON.stringify(flowData)));
+      } else {
+        setTimeout(() => {
+          return addHistory("2");
+        }, 100);
+      }
+      break;
+    default:
+      historyList.value.push(JSON.parse(JSON.stringify(flowData)));
+  }
 };
 const resetHistory = () => {
   historyList.value = [];
@@ -301,14 +294,18 @@ const resetHistory = () => {
 };
 const nodesChange = (data) => {
   if (data.length > 0) {
-    if (data[0].type == "add" || data.type == "remove") {
+    if (data[0].type == "add") {
+      addHistory("1");
+    } else if (data.type == "remove") {
       addHistory();
     }
   }
 };
 const edgesChange = (data) => {
   if (data.length > 0) {
-    if (data[0].type == "add" || data[0].type == "remove") {
+    if (data[0].type == "add") {
+      addHistory("2");
+    } else if (data.type == "remove") {
       addHistory();
     }
   }
@@ -324,7 +321,9 @@ 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();
+    setTimeout(() => {
+      historyList.value.pop();
+    }, 0);
   } else {
     ElMessage.warning("已是初始线路");
   }
@@ -704,6 +703,14 @@ const convertToSnakeLayout = () => {
     width: 80px;
   }
 }
+.btnsChange {
+  margin: 10px 0;
+  div {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+  }
+}
 .header {
   height: 50px;
   display: flex;