feature/流程图选择样式优化&&增加删除按钮

src/components/ExcelView/index.vue

@@ -199,34 +199,6 @@ const saveCellData = () => {
   };
   enter();
 };
-function convertFromReadableFormat(rangeString) {
-  // 解析单元格区域描述，例如 "A1:A10"
-  const regex = /([A-Z]+)(\d+):([A-Z]+)(\d+)/;
-  const match = rangeString.match(regex);
-
-  if (!match) {
-    throw new Error("Invalid range format");
-  }
-
-  const startColumn = match[1]; // 起始列，例如 "A"
-  const startRow = parseInt(match[2], 10); // 起始行，例如 1
-  const endColumn = match[3]; // 结束列，例如 "A"
-  const endRow = parseInt(match[4], 10); // 结束行，例如 10
-
-  // 将列名转换为列索引，例如 "A" -> 0, "B" -> 1, ...
-  const startColumnIndex = startColumn.charCodeAt(0) - 65;
-  const endColumnIndex = endColumn.charCodeAt(0) - 65;
-
-  // 构建结果对象
-  const result = {
-    row: startRow - 1,
-    column: startColumnIndex,
-    row_end: endRow - 1,
-    column_end: endColumnIndex,
-  };
-
-  return result;
-}
 //配置单元格校验
 const setVerification = () => {
   for (let i = 0; i < props.verifications.length; i++) {

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

@@ -51,6 +51,7 @@
             @dragover="onDragOver"
             @dragleave="onDragLeave"
             @node-click="nodeClick($event)"
+            @edge-click="edgeClick($event)"
           >
             <template #edge-custom="props">
               <CustomConnectionLine v-bind="props" />
@@ -94,6 +95,12 @@
             <div class="btns">
               <el-button type="primary" @click="saveFlow">保存</el-button>
               <el-button type="danger" @click="cancelFlow">取消</el-button>
+              <el-button
+                type="info"
+                v-if="selectNode || selectLine"
+                @click="deleteFlow"
+                >删除</el-button
+              >
             </div>
           </div>
           <!-- 工序信息编辑模式 -->
@@ -174,13 +181,35 @@ const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } =
   useDragAndDrop();
 const flowData = ref({ edges: [], nodes: [] });
 const flowDataCopy = ref({ edges: [], nodes: [] });
-provide("edges", flowData.value.edges);
 const currentProcess = ref({});
+const selectNode = ref(null);
+const selectLine = ref(null);
+provide("selectNode", selectNode);
 provide("currentProcess", currentProcess);
+provide("selectLine", selectLine);
+const edgeClick = (event) => {
+  if (!editStatus.value) {
+    selectLine.value = event.edge;
+    selectNode.value = null;
+  }
+};
 const nodeClick = (event) => {
-  if (!editStatus.value) return;
-  currentProcess.value = event.node;
-  console.log("------------" + JSON.stringify(event.node))
+  if (!editStatus.value) {
+    selectNode.value = event.node;
+  } else {
+    currentProcess.value = event.node;
+  }
+  selectLine.value = null;
+};
+//当使用回退时清空选择的node
+
+const handleKeydown = () => {
+  if (selectNode.value != null) {
+    selectNode.value = null;
+  }
+  if (selectLine.value != null) {
+    selectLine.value = null;
+  }
 };
 onConnect(addEdges);
 const getPng = () => {
@@ -192,10 +221,13 @@ const getPng = () => {
 };
 const nodeType = ref("custom");
 const editStatus = ref(false);
+provide("editStatus", editStatus);
 const changeEditStatus = () => {
   editStatus.value = !editStatus.value;
   if (editStatus.value == false) {
     currentProcess.value = {};
+  } else {
+    selectNode.value = null;
   }
 };
 const router = useRouter();
@@ -234,6 +266,25 @@ const saveFlow = async () => {
 };
 const cancelFlow = () => {
   flowData.value = JSON.parse(flowDataCopy.value);
+  if (selectNode.value != null) {
+    selectNode.value = null;
+  }
+  if (selectLine.value != null) {
+    selectLine.value = null;
+  }
+};
+const deleteFlow = () => {
+  const event = new KeyboardEvent("keydown", {
+    key: "Backspace",
+    keyCode: 8,
+    which: 8,
+    code: "Backspace",
+    bubbles: true,
+    cancelable: true,
+  });
+  document.dispatchEvent(event);
+  selectNode.value = null;
+  selectLine.value = null;
 };
 const saveInfo = async () => {
   flowData.value.nodes.forEach((item, index) => {
@@ -286,8 +337,11 @@ onMounted(() => {
   loadTreeData();
   loadProcessesFlow();
   flowBoxScreen();
+  window.addEventListener("keydown", handleKeydown);
+});
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleKeydown);
 });
-
 const getNameByDictType = (dictValue) => {
   let str = "";
   dicts?.workshop_section?.forEach((element) => {

src/views/base/craftManagement/route/components/CustomConnectionLine/index.vue

@@ -28,24 +28,24 @@
 <script lang="ts" setup>
 import { getSmoothStepPath, SmoothStepEdgeProps } from "@vue-flow/core";
 import { computed, inject } from "vue";
-//由于props不包含及时的selected参数只有靠依赖注入解决
-const edges = inject("edges");
+
+const selectLine = inject("selectLine");
 const status = ref(true);
 const props = defineProps<SmoothStepEdgeProps>();
 const path = computed(() => getSmoothStepPath(props)[0]);
 const setSeletedStatus = () => {
-  edges?.value.forEach((item: any) => {
-    if (item.id == props.id) {
-      if (item.selected == true) {
-        status.value = false;
-      } else {
-        status.value = true;
-      }
+  if (selectLine.value != null) {
+    if (props.id == selectLine.value.id) {
+      status.value = false;
+    } else {
+      status.value = true;
     }
-  });
+  } else {
+    status.value = true;
+  }
 };
 watch(
-  () => edges.value,
+  () => selectLine.value,
   () => {
     setSeletedStatus();
   },

src/views/base/craftManagement/route/components/CustomNode/index.vue

@@ -2,18 +2,36 @@
 import { Position, Handle } from "@vue-flow/core";
 const props = defineProps(["data", "id"]);
 const currentProcess = inject("currentProcess");
+const selectNode = inject("selectNode");
 const selectStatus = ref(false);
-
+const editStatus = inject("editStatus");
 const getBorderClass = computed(() => {
   let str = "borderBlack";
   if (selectStatus.value) {
-    str = "borderBlue";
+    if (editStatus.value == true) {
+      str = "borderBlue";
+    } else {
+      str = "borderGreen";
+    }
   }
   return str;
 });
-watchEffect(() => {
-  selectStatus.value = props.id == currentProcess.value.id;
-});
+watch(
+  () => currentProcess.value,
+  () => {
+    selectStatus.value = props.id == currentProcess.value.id;
+  }
+);
+watch(
+  () => selectNode.value,
+  () => {
+    if (selectNode.value == null) {
+      selectStatus.value = false;
+      return;
+    }
+    selectStatus.value = props.id == selectNode.value.id;
+  }
+);
 </script>
 
 <template>
@@ -70,4 +88,7 @@ watchEffect(() => {
 .borderBlue {
   border-color: blue;
 }
+.borderGreen {
+  border-color: green;
+}
 </style>

src/views/error-page/404.vue

@@ -34,7 +34,7 @@ function message() {
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-<!--        <div class="bullshit__info">
+        <!--        <div class="bullshit__info">
           All rights reserved
           <a
             style="color: #20a0ff"
@@ -48,7 +48,9 @@ function message() {
           Please check that the URL you entered is correct, or click the button
           below to return to the homepage.
         </div>
-        <a href="" class="bullshit__return-home">跳转首页</a>
+        <router-link class="bullshit__return-home" to="/welcome">
+          跳转欢迎页
+        </router-link>
       </div>
     </div>
   </div>