删除节点和线的功能

.env.development

@@ -8,13 +8,13 @@ VITE_APP_PORT = 4001
 VITE_APP_BASE_API = '/dev-api'
 
 # 开发接口地址
-VITE_APP_API_URL = 'http://192.168.1.69:7205/'
+VITE_APP_API_URL = 'http://127.0.0.1:7205/'
 
 # VITE_APP_API_URL = 'http://192.168.1.43:7205/'
 # VITE_APP_API_URL = 'http://192.168.1.4:18000/'
 
 # WEBSOCKET地址
-VITE_WEBSOCKET_URL = 'ws://192.168.142.120:8888/'
+VITE_WEBSOCKET_URL = 'ws://127.0.0.1:8888/'
 
 
 # 是否启用 Mock 服务

.env.production

@@ -4,3 +4,5 @@ NODE_ENV='production'
 # 代理前缀
 VITE_APP_BASE_API = '/prod-api'
 
+# WEBSOCKET地址
+VITE_WEBSOCKET_URL = 'ws://192.168.142.3:8888/'

pnpm-lock.yaml

@@ -5207,6 +5207,7 @@ packages:
   yaeti@0.0.6:
     resolution: {integrity: sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==}
     engines: {node: '>=0.10.32'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}

src/components/hjflow/src/hjflow/index.vue

@@ -33,14 +33,22 @@ defineOptions({
   name: "HJFlow",
 });
 
-const { onConnect, addEdges, fitView, updateNode, findNode } = useVueFlow();
+const {
+  onConnect,
+  addEdges,
+  fitView,
+  updateNode,
+  findNode,
+  removeEdges,
+  removeNodes,
+} = useVueFlow();
 const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop();
 
 onConnect(addEdges);
 
 // ========== 外面传进来的参数  ===========
 const nodes = defineModel<HJNodeData[]>("nodesData");
-const edges = defineModel("edgesData");
+const edges = defineModel<Edge[]>("edgesData");
 const props = defineProps<HJFlowProps>();
 
 // ==========vueflow 本身的方法操作 ===========
@@ -54,11 +62,14 @@ const currentClickEdgeData = ref<Edge | null>(null);
 provide(CurrentSelectedEdgeProvideName, currentClickEdgeData);
 const onClickEdge = ({ edge }) => {
   currentClickEdgeData.value = JSON.parse(JSON.stringify(edge));
+  // 清空当前选择的node
+  currentHeaderOperationNodeData.value = null;
+  emits("hjMethod", HJMethodName.EditNode, null);
 };
 
 // ======= Emits =======
 const emits = defineEmits<{
-  hjMethod: [name: HJMethodName, node: HJNodeData];
+  hjMethod: [name: HJMethodName, node: HJNodeData | null];
 }>();
 
 // 提供一个孙子组件里面（比如自定义node里面) 调用本组件的方法
@@ -69,8 +80,35 @@ provide(HJMethodProvideName, (name: HJMethodName, node: HJNodeData) => {
   currentHeaderOperationNodeData.value = JSON.parse(JSON.stringify(node)); // 复制一份数据
   console.log("provide", name, node);
   emits("hjMethod", name, node);
+  // 清空选中的edge
+  currentClickEdgeData.value = null;
 });
 
+const deleteSelectedNodeOrEdge = () => {
+  // if ()
+  console.log(
+    "deleteSelectedNodeOrEdge",
+    currentClickEdgeData.value,
+    currentHeaderOperationNodeData.value
+  );
+  if (currentClickEdgeData.value != null) {
+    // edges.value = edges.value?.filter(
+    //   (e) => e.id !== currentClickEdgeData.value.id
+    // );
+    removeEdges(currentClickEdgeData.value.id);
+    currentClickEdgeData.value = null;
+  }
+
+  if (currentHeaderOperationNodeData.value != null) {
+    // nodes.value = nodes.value?.filter(
+    //   (e) => e.id !== currentHeaderOperationNodeData.value.id
+    // );
+    removeNodes(currentHeaderOperationNodeData.value.id + "");
+    currentHeaderOperationNodeData.value = null;
+    emits("hjMethod", HJMethodName.EditNode, null);
+  }
+};
+
 ///// === 数据历史纪录 用于回退或者重置按钮 === /////
 let originData: any = null;
 let historyList: any[] = [];
@@ -141,6 +179,7 @@ defineExpose({
   initFlow,
   clearStatus,
   getChangedStatus,
+  deleteSelectedNodeOrEdge,
 });
 
 // ======= Panel =======
@@ -208,7 +247,7 @@ const pannelOperations = {
     @dragover="onDragOver"
     @dragleave="onDragLeave"
     @drop="onDrop"
-    @nodeDoubleClick="doubleClick"
+    @node-double-click="doubleClick"
     @edge-click="onClickEdge"
     @nodes-change="onFlowNodesChange"
     @edges-change="onFlowEdgesChange"
@@ -223,11 +262,7 @@ const pannelOperations = {
     </DropzoneBackground>
 
     <!--        右面上工具栏操作 -->
-    <Panel
-      v-if="showPanel"
-      v-on="pannelOperations"
-      :fun-names="panelBtns"
-    ></Panel>
+    <Panel v-if="showPanel" v-on="pannelOperations" :fun-names="panelBtns" />
   </VueFlow>
 </template>
 

src/components/hjflow/src/types/comTypes.ts

@@ -119,4 +119,5 @@ export interface HJFlowInstance {
   initFlow: (nodes: HJNodeData[], edges: any[]) => void;
   clearStatus: () => void;
   getChangedStatus: () => boolean;
+  deleteSelectedNodeOrEdge: () => void;
 }

src/views/modules/project-config/project-config.vue

@@ -6,7 +6,7 @@ import {
   HJNodeData,
 } from "@/components/hjflow/src/types/comTypes";
 import { Edge } from "@vue-flow/core";
-
+import { Delete } from "@element-plus/icons-vue";
 import ProjectMessage from "./com/project-message.vue";
 import FunctionModule from "./com/function-col.vue";
 import TitleHeader from "@/views/modules/project-config/com/titleHeader.vue";
@@ -28,7 +28,13 @@ const flowRef = ref<HJFlowInstance>();
 const nodes = ref<HJNodeData[]>([]);
 const edges = ref<Edge[]>([]);
 // vue 的相关操作
-const onNodeOperation = (name: HJMethodName, node: HJNodeData): void => {
+const onNodeOperation = (name: HJMethodName, node?: HJNodeData): void => {
+  if (node == null) {
+    selectedNode.value = null;
+    infoVisible.value = false;
+    return;
+  }
+
   if (name === HJMethodName.EditNode) {
     selectedNode.value = null;
     selectedNode.value = JSON.parse(JSON.stringify(node));
@@ -55,14 +61,22 @@ const onNodeOperation = (name: HJMethodName, node: HJNodeData): void => {
       nodes: nodes.value,
       edges: edges.value,
     };
-    console.log("dddddd", nodes.value.length, edges.value.length, flowData);
+    console.log(
+      "SaveTemplate n-l e-l flowdata",
+      nodes.value.length,
+      edges.value.length,
+      flowData
+    );
     let p = {
       id: currentTestItemId.value,
       routeData: JSON.stringify(flowData),
     };
     updateTestModule(p).then(() => {
       ElMessage.success("保存模版成功");
+
       flowRef.value && flowRef.value.clearStatus();
+      selectedNode.value = null;
+      infoVisible.value = false;
     });
   }
 };
@@ -86,13 +100,19 @@ const onSaveConfigs = () => {
 watch(
   selectedNode,
   (newVal) => {
-    flowRef.value &&
-      flowRef.value.updateNodeData(
-        JSON.parse(JSON.stringify(selectedNode.value))
-      );
+    if (selectedNode.value) {
+      flowRef.value &&
+        flowRef.value.updateNodeData(
+          JSON.parse(JSON.stringify(selectedNode.value))
+        );
+    }
   },
   { deep: true }
 );
+// 为触摸屏添加删除节点功能
+const deleteSelectedNodeOrEdge = () => {
+  flowRef.value && flowRef.value.deleteSelectedNodeOrEdge();
+};
 
 onMounted(async () => {
   //   如果选择的测试项目id有值，就获取数据
@@ -137,7 +157,7 @@ const handleSearch = (_: string, prefix: string) => {
 
 <template>
   <div class="project-config-container">
-    <ProjectMessage @onClickItem="onSelectTestPro" />
+    <ProjectMessage @on-click-item="onSelectTestPro" />
     <FunctionModule />
     <HJFlow
       class="hjflow-box"
@@ -146,7 +166,7 @@ const handleSearch = (_: string, prefix: string) => {
       v-model:edges-data="edges"
       :show-panel="true"
       :panel-btns="['toSnake', 'layoutTB', 'saveTemplate']"
-      @hjMethod="onNodeOperation"
+      @hj-method="onNodeOperation"
     />
     <div class="right-message-box">
       <TitleHeader>属性配置</TitleHeader>
@@ -154,9 +174,7 @@ const handleSearch = (_: string, prefix: string) => {
         <div class="form-box" v-if="infoVisible">
           <el-form rer="formRef" label-position="top">
             <el-form-item label="节点标识名称">
-              <el-input
-                v-model="selectedNode!.data.information.nodeName"
-              ></el-input>
+              <el-input v-model="selectedNode!.data.information.nodeName" />
             </el-form-item>
             <el-form-item>
               <el-text class="mx-1" type="warning">
@@ -192,10 +210,16 @@ const handleSearch = (_: string, prefix: string) => {
         </div>
       </el-scrollbar>
       <div class="bottom-box">
-        <!--        <div class="save-btn" @click="onSaveConfigs">-->
-        <!--          <svg-icon icon-class="save" />-->
-        <!--          保存节点信息-->
-        <!--        </div>-->
+        <el-button
+          type="danger"
+          :icon="Delete"
+          @click.stop="deleteSelectedNodeOrEdge"
+          >删除</el-button
+        >
+        <!-- <div class="save-btn" @click="onSaveConfigs">
+          <svg-icon icon-class="save" />
+          保存节点信息
+        </div> -->
       </div>
     </div>
   </div>
@@ -234,6 +258,7 @@ const handleSearch = (_: string, prefix: string) => {
     //height: 80px;
     padding: 10px 0;
     background-color: $hj-black-2;
+    padding: 0 10px;
 
     .save-btn {
       width: 130px;