vueflow 修改。

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

@@ -62,8 +62,8 @@
       >
         <div class="dnd-flow" @drop="onDrop">
           <VueFlow
-            v-model:nodes="flowData.nodes"
-            v-model:edges="flowData.edges"
+            v-model:nodes="nodes"
+            v-model:edges="edges"
             :apply-default="!editStatus && usableStatus"
             @dragover="onDragOver"
             @dragleave="onDragLeave"
@@ -254,7 +254,7 @@ const {
 } = instance;
 const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } =
   useDragAndDrop();
-const flowData = ref({ edges: [], nodes: [] });
+const flowData = reactive({ edges: [], nodes: [] });
 const flowDataCopy = ref({ edges: [], nodes: [] });
 const currentProcess = ref({});
 const selectNode = ref(null);
@@ -387,7 +387,7 @@ const showList = computed(() => {
 const saveFlow = async () => {
   const { code } = await saveProcessInRoute({
     processRouteId: route.fullPath.split("/")[4],
-    routeData: JSON.stringify({ ...flowData.value }),
+    routeData: JSON.stringify({ ...flowData }),
   });
   if (code == "200") {
     ElMessage.success("保存成功");
@@ -395,7 +395,8 @@ const saveFlow = async () => {
   loadProcessesFlow();
 };
 const cancelFlow = () => {
-  flowData.value = JSON.parse(flowDataCopy.value);
+  flowData.nodes = flowDataCopy.value.nodes;
+  flowData.edges = flowDataCopy.value.edges;
   if (selectNode.value != null) {
     selectNode.value = null;
   }
@@ -405,16 +406,16 @@ const cancelFlow = () => {
 };
 const deleteFlow = () => {
   if (selectNode.value != null) {
-    flowData.value.nodes.forEach((item, index) => {
+    flowData.nodes.forEach((item, index) => {
       if (item.id == selectNode.value.id) {
-        flowData.value.nodes.splice(index, 1);
+        flowData.nodes.splice(index, 1);
       }
     });
   }
   if (selectLine.value != null) {
-    flowData.value.edges.forEach((item, index) => {
+    flowData.edges.forEach((item, index) => {
       if (item.id == selectLine.value.id) {
-        flowData.value.edges.splice(index, 1);
+        flowData.edges.splice(index, 1);
       }
     });
   }
@@ -436,18 +437,18 @@ const saveInfo = async () => {
 
   currentProcess.value.customFieldName = JSON.stringify(customFieldArr);
 
-  flowData.value.nodes.forEach((item, index) => {
+  flowData.nodes.forEach((item, index) => {
     if (item.id == currentProcess.value.id) {
-      flowData.value.nodes[index] = currentProcess.value;
+      flowData.nodes[index] = currentProcess.value;
     }
   });
   saveFlow();
   currentProcess.value = {};
 };
 const cancelInfo = () => {
-  flowData.value.nodes.forEach((item, index) => {
+  flowData.nodes.forEach((item, index) => {
     if (item.id == currentProcess.value.id) {
-      currentProcess.value = flowData.value.nodes[index];
+      currentProcess.value = flowData.nodes[index];
     }
   });
 };
@@ -487,8 +488,11 @@ const loadProcessesFlow = async () => {
   const res = await processesByRouteId(route.fullPath.split("/")[4]);
   if (res.data) {
     if (res.data.routeData && res.data.routeData != "") {
-      flowData.value = JSON.parse(res.data.routeData);
-      flowDataCopy.value = res.data.routeData;
+      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;
@@ -497,7 +501,7 @@ const loadProcessesFlow = async () => {
       cancelStatus.value = false;
     }
   } else {
-    flowDataCopy.value = JSON.stringify(flowData.value);
+    flowDataCopy.value = JSON.parse(JSON.stringify(flowData));
   }
 };
 
@@ -534,9 +538,9 @@ const getNameByDictType = (dictValue) => {
 };
 
 watch(
-  () => flowData.value.edges,
+  () => flowData.edges,
   () => {
-    flowData.value.edges.forEach((item) => {
+    flowData.edges.forEach((item) => {
       item.type = "custom";
     });
   }
@@ -549,24 +553,10 @@ watch(
   }
 );
 
-const nodes = ref(initialNodes);
-const edges = ref(initialEdges);
-// async function layoutGraph(direction) {
-//   nodes.value = layout(nodes.value, edges.value, direction);
-//
-//   nextTick(() => {
-//     fitView();
-//   });
-// }
-
+const { nodes } = toRefs(flowData); //ref(initialNodes);
+const { edges } = toRefs(flowData); //ref(initialEdges);
 async function layoutGraph(direction) {
-  flowData.value.nodes.value = layout(
-    flowData.value.nodes,
-    flowData.value.edges,
-    direction
-  );
-
-  console.log(flowData.value.nodes);
+  nodes.value = layout(nodes.value, edges.value, direction);
 
   nextTick(() => {
     fitView();