初始化流程图和动态获取流程图功能测试

 <template>
 <template>
   <div class="app" style="height: 100vh">
   <div class="app" style="height: 100vh">
     <vue-flow-editor
     <vue-flow-editor
+      v-if="flowData"
       ref="editor"
       ref="editor"
       menuWidth="200px"
       menuWidth="200px"
       modelWidth="300px"
       modelWidth="300px"
-      :data="state.data"
+      :data="flowData"
       :grid="showGrid"
       :grid="showGrid"
       :miniMap="showMiniMap"
       :miniMap="showMiniMap"
       :onRef="onRef"
       :onRef="onRef"
@@ -506,7 +507,57 @@ export default {
       ],
       ],
     })
     })
 
 
-    onMounted(() => {
+    /**
+     * 获取url参数
+     * @param url
+     */
+    function getQueryParams(url: string) {
+      const params = {
+        flow_id: '',
+      };
+      // 将url以问号为分隔符拆分为两部分
+      const parts = url.split("?");
+      // 如果只有url没有参数，则直接返回空对象
+      if (parts.length <= 1) {
+        return params;
+      }
+      // 将参数部分以ampersand为分隔符拆分为多个参数
+      const queries = parts[1].split("&");
+      // 遍历每个参数
+      for (let i = 0; i < queries.length; i++) {
+        // 将参数以等号为分隔符拆分为键值对
+        const query = queries[i].split("=");
+        // 设置参数的键值对到params对象
+        params[query[0]] = query[1];
+      }
+      return params;
+    }
+
+    // TAG: 接口获取流程图数据
+    const flowData = ref<any>(null);
+    axios.get('/admin/?a=flow_nodes&flow_id=' + getQueryParams(location.href).flow_id)
+    .then(res => {
+      if (res.data.code) {
+        let nodes = res.data.data.nodes;
+        let edges = res.data.data.edges;
+        // 没有流程图数据
+        if (!nodes.length && !edges.length) {
+          flowData.value = AppData; // 设置默认的数据
+        } else {
+          flowData.value = res.data.data; // 获取已存在的数据
+        }
+      } else {
+        ElMessage({
+          type: 'error',
+          message: res.data.msg,
+        });
+      }
+    })
+    .catch(err => {
+      console.error(err);
+    });
+
+    onMounted(async () => {
       document.title = '可视化流程设计器'
       document.title = '可视化流程设计器'
       // 显示提示框的标志位
       // 显示提示框的标志位
       var showConfirmation = true;
       var showConfirmation = true;
@@ -529,7 +580,7 @@ export default {
       });
       });
     })
     })
 
 
-    function handleActiveChange(name) {
+    function handleActiveChange(name: any) {
       console.warn(name)
       console.warn(name)
     }
     }
 
 
@@ -878,8 +929,8 @@ export default {
       type: string,
       type: string,
     ): Promise<any> {
     ): Promise<any> {
       let { nodes, edges } = editor.editorState.graph.save();
       let { nodes, edges } = editor.editorState.graph.save();
-      let start_edge_count = edges.filter(edge => edge.source === 'start-node'); // 连接到开始节点连接线的数量
-      let end_edge_count = edges.filter(edge => edge.target === 'end-node'); // 连接到结束节点连接线的数量
+      let start_edge_count = edges.filter((edge: { source: string }) => edge.source === 'start-node'); // 连接到开始节点连接线的数量
+      let end_edge_count = edges.filter((edge: { target: string }) => edge.target === 'end-node'); // 连接到结束节点连接线的数量
       // 不可以删除开始与结束连接线
       // 不可以删除开始与结束连接线
       let node_id = model.id;
       let node_id = model.id;
       for (let index = 0; index < edges.length; index++) {
       for (let index = 0; index < edges.length; index++) {
@@ -906,7 +957,7 @@ export default {
           return Promise.reject('reject')
           return Promise.reject('reject')
         }
         }
         // 流程图中必须有一个流程节点
         // 流程图中必须有一个流程节点
-        let is_flow_node = nodes.filter(node => node.control === 'flow' || node.control === 'cc');
+        let is_flow_node = nodes.filter((node: { control: string }) => node.control === 'flow' || node.control === 'cc');
         if (is_flow_node.length === 1) {
         if (is_flow_node.length === 1) {
           ElNotification.error('流程图中必须有一个流程节点')
           ElNotification.error('流程图中必须有一个流程节点')
           return Promise.reject('reject')
           return Promise.reject('reject')
@@ -938,8 +989,8 @@ export default {
       if (type === 'edge') {
       if (type === 'edge') {
         console.log('delete edge')
         console.log('delete edge')
       }
       }
-      state.data.nodes = editor.editorState.graph.save().nodes
-      state.data.edges = editor.editorState.graph.save().edges
+      flowData.value.nodes = editor.editorState.graph.save().nodes
+      flowData.value.edges = editor.editorState.graph.save().edges
     }
     }
 
 
     /**
     /**
@@ -994,7 +1045,7 @@ export default {
 
 
         model.id = uuidv4();
         model.id = uuidv4();
         editor.updateModel(model);
         editor.updateModel(model);
-        state.data.nodes = editor.editorState.graph.save().nodes
+        flowData.value.nodes = editor.editorState.graph.save().nodes
       }
       }
     }
     }
 
 
@@ -1007,11 +1058,11 @@ export default {
     function handleAfterAdd(model: myObj, type: string) {
     function handleAfterAdd(model: myObj, type: string) {
       if (type === 'node') {
       if (type === 'node') {
         console.log(`新增节点`)
         console.log(`新增节点`)
-        state.data.nodes = editor.editorState.graph.save().nodes
+        flowData.value.nodes = editor.editorState.graph.save().nodes
       }
       }
       if (type === 'edge') {
       if (type === 'edge') {
         console.log(`新增连接线`)
         console.log(`新增连接线`)
-        state.data.edges = editor.editorState.graph.save().edges
+        flowData.value.edges = editor.editorState.graph.save().edges
       }
       }
     }
     }
 
 
@@ -1040,8 +1091,8 @@ export default {
         editor.addNode(state.detailModel);
         editor.addNode(state.detailModel);
         editor.closeModel();
         editor.closeModel();
         // 保存流程图数据
         // 保存流程图数据
-        state.data.nodes = editor.editorState.graph.save().nodes
-        state.data.edges = editor.editorState.graph.save().edges
+        flowData.value.nodes = editor.editorState.graph.save().nodes
+        flowData.value.edges = editor.editorState.graph.save().edges
       } else {
       } else {
         ElNotification.error('开始或者结束节点不可以复制')
         ElNotification.error('开始或者结束节点不可以复制')
       }
       }
@@ -1147,13 +1198,13 @@ export default {
      * @param currentPath 当前路径
      * @param currentPath 当前路径
      * @param paths 结果数组
      * @param paths 结果数组
      */
      */
-    function findPathsToEndNode(data, currentNode, currentPath, paths) {
+    function findPathsToEndNode(data: any[], currentNode: string, currentPath: any[], paths: any[]) {
       if (currentNode === 'end-node') {
       if (currentNode === 'end-node') {
         paths.push(currentPath.slice()); // 将当前路径添加到结果数组中
         paths.push(currentPath.slice()); // 将当前路径添加到结果数组中
         return;
         return;
       }
       }
 
 
-      const nextObjs = data.filter(obj => obj.source === currentNode);
+      const nextObjs = data.filter((obj: { source: any }) => obj.source === currentNode);
       if (nextObjs.length === 0) {
       if (nextObjs.length === 0) {
         return;
         return;
       }
       }
@@ -1169,6 +1220,7 @@ export default {
       state,
       state,
       rules,
       rules,
       formRef,
       formRef,
+      flowData,
 
 
       showGrid: true, // 是否开启网格
       showGrid: true, // 是否开启网格
       showMiniMap: false, // 是否开启缩略图
       showMiniMap: false, // 是否开启缩略图
@@ -1252,6 +1304,7 @@ body {
     cursor: pointer;
     cursor: pointer;
   }
   }
   .text-empty {
   .text-empty {
+    font-size: 14px;
     text-align: center;
     text-align: center;
     color: #dcdfe6;
     color: #dcdfe6;
   }
   }

 /*
 /*
  * @Date: 2023-10-27 09:29:48
  * @Date: 2023-10-27 09:29:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-22 17:41:19
+ * @LastEditTime: 2023-11-22 18:35:26
  * @FilePath: /vue-flow-editor/doc/data.js
  * @FilePath: /vue-flow-editor/doc/data.js
  * @Description: 初始化结构，数据都是固定的
  * @Description: 初始化结构，数据都是固定的
  */
  */