feature/优化流程图

package.json

@@ -45,6 +45,7 @@
     "@types/smallwei__avue": "^3.0.5",
     "@vue-flow/background": "^1.3.0",
     "@vue-flow/core": "^1.37.1",
+    "@vue-flow/minimap": "^1.5.0",
     "@vueup/vue-quill": "1.0.0-alpha.40",
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",

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

@@ -26,7 +26,7 @@
                   class="childItem"
                   v-for="(item, index) in pProcess?.baseOperationList"
                   :key="index"
-                  :draggable="!editStatus"
+                  :draggable="!editStatus && usableStatus"
                   @dragstart="
                     onDragStart($event, nodeType, item.operationName, item)
                   "
@@ -47,12 +47,13 @@
           <VueFlow
             v-model:nodes="flowData.nodes"
             v-model:edges="flowData.edges"
-            :apply-default="!editStatus"
+            :apply-default="!editStatus && usableStatus"
             @dragover="onDragOver"
             @dragleave="onDragLeave"
             @node-click="nodeClick($event)"
             @edge-click="edgeClick($event)"
           >
+            <MiniMap style="background-color: grey" />
             <template #edge-custom="props">
               <CustomConnectionLine v-bind="props" />
             </template>
@@ -91,7 +92,7 @@
           </div>
 
           <!-- 工艺路线编辑模式 -->
-          <div v-if="!editStatus">
+          <div v-if="!editStatus && usableStatus">
             <div class="btns">
               <el-button type="primary" @click="saveFlow">保存</el-button>
               <el-button type="danger" v-if="cancelStatus" @click="cancelFlow"
@@ -142,6 +143,9 @@
                 >
               </div>
             </div>
+            <div v-else-if="!usableStatus" class="tipContent">
+              已绑定工序不可编辑线路情况
+            </div>
             <div v-else class="tipContent">请选择工序</div>
           </div>
         </el-scrollbar>
@@ -165,6 +169,7 @@ import DropzoneBackground from "./components/DropzoneBackground/index.vue";
 import CustomConnectionLine from "./components/CustomConnectionLine/index.vue";
 import CustomNode from "./components/CustomNode/index.vue";
 import useDragAndDrop from "@/hooks/useDnD.js";
+import { MiniMap } from "@vue-flow/minimap";
 import { processTreeList } from "@/api/craft/process/index";
 import { useCommonStoreHook, useDictionaryStore } from "@/store";
 import {
@@ -190,16 +195,20 @@ const flowDataCopy = ref({ edges: [], nodes: [] });
 const currentProcess = ref({});
 const selectNode = ref(null);
 const selectLine = ref(null);
+//true为可编辑线路
+const usableStatus = ref(true);
 provide("selectNode", selectNode);
 provide("currentProcess", currentProcess);
 provide("selectLine", selectLine);
 const edgeClick = (event) => {
+  if (usableStatus.value == false && !editStatus.value) return;
   if (!editStatus.value) {
     selectLine.value = event.edge;
     selectNode.value = null;
   }
 };
 const nodeClick = (event) => {
+  if (usableStatus.value == false && !editStatus.value) return;
   if (!editStatus.value) {
     selectNode.value = event.node;
   } else {
@@ -327,6 +336,9 @@ const loadProcessesFlow = async () => {
       flowData.value = JSON.parse(res.data.routeData);
       flowDataCopy.value = res.data.routeData;
       cancelStatus.value = true;
+      if (res.data.usable == 1) {
+        usableStatus.value = false;
+      }
     } else {
       cancelStatus.value = false;
     }