fix: 修改互动视频编辑页面跳转节点的相关bug

src/components/InteractiveVideoEditor/VideoLineEditor/hooks/useJumpEditorDrawer.js

@@ -1,86 +1,93 @@
-import { ref, watch } from 'vue'
+import { ref, watch } from "vue";
+import { ElMessageBox } from "element-plus";
 
 const useJumpEditorDrawer = (curNodeRef, graphRef) => {
   // 跳转模块得抽屉状态
-  const jumpDrawerRef = ref(false)
+  const jumpDrawerRef = ref(false);
   // 跳转模块得表单数据
   const jumpFormRef = ref({
-    jumpNodeId: '',
-    jumpNodeName: ''
-  })
+    jumpNodeId: "",
+    jumpNodeName: "",
+  });
   // 表单规则
   const jumpFormRuleRef = ref({
-    jumpNodeId: [{ required: true, message: '请选择跳转模块', trigger: 'change' }]
-  })
+    jumpNodeName: [
+      { required: true, message: "请选择跳转模块", trigger: "change" },
+    ],
+  });
 
   // 可以跳转得节点列表
-  const canJumpNodeListRef = ref([])
+  const canJumpNodeListRef = ref([]);
   // 更新可以跳转节点列表
   const updataCanJumpNodeList = () => {
-    const allNode = graphRef.value.getNodes()
-    const curNode = curNodeRef.value
-    const curModel = curNode.getModel()
+    const allNode = graphRef.value.getNodes();
+    const curNode = curNodeRef.value;
+    const curModel = curNode.getModel();
     // 过滤出非自己本身和直接上级节点的所有节点
-    const result = []
+    const result = [];
     for (let i = 0; i < allNode.length; i++) {
-      const _node = allNode[i]
-      const _model = _node.getModel()
-      if (_model.type === 'jump-node' || _model.id === curModel.preNodeId) continue
+      const _node = allNode[i];
+      const _model = _node.getModel();
+      if (_model.type === "jump-node" || _model.id === curModel.preNodeId)
+        continue;
       result.push({
         jumpNodeId: _model.id,
-        jumpNodeName: _model.data?.name || ''
-      })
+        jumpNodeName: _model.data?.name || "",
+      });
     }
-    canJumpNodeListRef.value = result
-  }
+    canJumpNodeListRef.value = result;
+  };
   // 选择跳转节点之后赋值跳转节点名称
   const handleChangeJumpTarget = (jumpNodeId) => {
-    const target = canJumpNodeListRef.value.find((item) => item.jumpNodeId === jumpNodeId)
-    jumpFormRef.value.jumpNodeName = target.jumpNodeName
-  }
+    const target = canJumpNodeListRef.value.find(
+      (item) => item.jumpNodeId === jumpNodeId
+    );
+    jumpFormRef.value.jumpNodeId = jumpNodeId;
+    jumpFormRef.value.jumpNodeName = target.jumpNodeName;
+  };
   // 关闭抽屉
   const handleJumpCancel = () => {
-    ElMessageBox.confirm('是否确认取消更改?')
+    ElMessageBox.confirm("是否确认取消更改?")
       .then(() => {
-        jumpDrawerRef.value = false
-        curNodeRef.value = null
+        jumpDrawerRef.value = false;
+        curNodeRef.value = null;
       })
       .catch(() => {
         // catch error
-      })
-  }
+      });
+  };
   // 保存
   const handleJumpSave = () => {
-    if (!graphRef.value) return console.warn('画布不存在')
+    if (!graphRef.value) return console.warn("画布不存在");
     const config = {
       data: {
         jumpNodeId: jumpFormRef.value.jumpNodeId,
-        jumpNodeName: jumpFormRef.value.jumpNodeName
-      }
-    }
+        jumpNodeName: jumpFormRef.value.jumpNodeName,
+      },
+    };
     // 更新当前节点
-    graphRef.value.updateItem(curNodeRef.value, config)
-    jumpDrawerRef.value = false
-    curNodeRef.value = null
-  }
+    graphRef.value.updateItem(curNodeRef.value, config);
+    jumpDrawerRef.value = false;
+    curNodeRef.value = null;
+  };
 
   // 根据传入的节点初始化内容
   const init = (node) => {
-    const model = node.getModel()
-    const data = model.data || {}
+    const model = node.getModel();
+    const data = model.data || {};
     jumpFormRef.value = {
       jumpNodeId: data.jumpNodeId,
-      jumpNodeName: data.jumpNodeName
-    }
-  }
+      jumpNodeName: data.jumpNodeName,
+    };
+  };
 
   watch(
     () => curNodeRef.value,
     (node) => {
-      if (!node) return
-      init(node)
+      if (!node) return;
+      init(node);
     }
-  )
+  );
 
   return {
     jumpDrawerRef,
@@ -90,8 +97,8 @@ const useJumpEditorDrawer = (curNodeRef, graphRef) => {
     updataCanJumpNodeList,
     handleChangeJumpTarget,
     handleJumpCancel,
-    handleJumpSave
-  }
-}
+    handleJumpSave,
+  };
+};
 
-export default useJumpEditorDrawer
+export default useJumpEditorDrawer;

src/components/InteractiveVideoEditor/VideoLineEditor/index.vue

@@ -172,9 +172,9 @@
         label-width="auto"
         status-icon
       >
-        <el-form-item label="剧情素材" prop="jumpNodeId">
+        <el-form-item label="剧情素材" prop="jumpNodeName">
           <el-select
-            v-model="jumpFormRef.jumpNodeId"
+            v-model="jumpFormRef.jumpNodeName"
             placeholder="请选择剧情素材"
             @change="handleChangeJumpTarget"
           >

src/hooks/transformGraphdata.js

@@ -35,9 +35,11 @@ const setNextNodeId = (node, nodeMap) => {
       const nextNode = nodeMap.get(optionItem.nodeId) || {};
       optionItem.nextNodeId = nextNode.nodeId;
     });
-  } else if (node.nodeType === "jumpNodeId") {
-    const nextNode = nodeMap.get(node.jumpNodeId) || {};
-    node.nextNodeId = nextNode.nodeId;
+  } else if (node.nodeType === "jump-node") {
+    // console.log("节点", node);
+    // console.log("节点数据", nodeData, nodeMap, node.jumpNodeId);
+    const nextNode = nodeMap.get(nodeData.jumpNodeId) || {};
+    nodeData.nextNodeId = nextNode.nodeId;
   }
 };