流程启用下，相关操作调整

hookehuyr
Commit e7c140fbef312fa039b504b1ab82d77991cd4687 e7c140fb 1 parent c24c6dbf
Showing 1 changed file with 37 additions and 13 deletions
doc/App.vue
--- a/doc/App.vue
View file @e7c140f
+++ b/doc/App.vue
View file @e7c140f
@@ -43,6 +43,7 @@
           </vue-flow-edit-menu>
         </vue-flow-edit-menu-group> -->
         <vue-flow-edit-menu
+          v-if="state.current_enable_version !== state.select_flow_version"
           v-for="(value, key) in state.controlList"
           :key="key"
           :model="{ control: key, text: value.text, desc: value.desc }"
@@ -296,13 +297,13 @@
       </template>
       <!-- 工具栏 -->
       <template v-slot:toolbar>
-        <el-tooltip content="复制节点">
+        <el-tooltip v-if="state.current_enable_version !== state.select_flow_version" content="复制节点">
           <div :class="['vue-flow-editor-toolbar-item', state.detailModel ? '' : 'vue-flow-editor-toolbar-item-disabled']" @click="copyData">
             <i class="el-icon-coin" style=" margin-top: 4px;" />
             <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">复制</span>
           </div>
         </el-tooltip>
-        <el-tooltip content="节点排序">
+        <el-tooltip v-if="state.current_enable_version !== state.select_flow_version" content="节点排序">
           <div class="vue-flow-editor-toolbar-item" @click="sortData">
             <i class="el-icon-sort" style=" margin-top: 4px;" />
             <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">排序</span>
@@ -411,7 +412,11 @@
             </template>
           </el-dialog>
         </div>
-        <div class="help-tip" @click="showHelp">
+        <!-- TODO: 提示功能 -->
+        <div v-if="state.current_enable_version === state.select_flow_version" class="add-tip">
+          <i class="el-icon-warning icon"></i>&nbsp;<span style="font-size: 13px;">流程已启用，如需增删节点和连线，请 <span class="add" @click="addFlowVersion">添加新版本</span></span>
+        </div>
+        <div v-else class="help-tip" @click="showHelp">
           <i class="el-icon-warning"></i>&nbsp;<span style="font-size: 13px;">查看新手引导</span>
         </div>
         <!-- TODO：需要完善操作动图 -->
@@ -537,7 +542,7 @@
 </template>
 <script lang="ts">
-import { ref, reactive, onMounted, watch, nextTick } from 'vue'
+import { ref, reactive, onMounted, watch, nextTick, computed } from 'vue'
 import { AppData } from './data.js'
 import { staticPath } from './utils'
 import { ElNotification, ElMessage, ElMessageBox, ElLoading } from 'element-plus'
@@ -800,7 +805,6 @@ export default {
     const getFlowData = async (flow_id: any) => {
       flowData.value = null;
-      rawFlowData.value = null;
       state.reloadLoading = true; // 打开loading
       const { code, data } = await flowNodesAPI({ flow_id });
       if (code) {
@@ -813,14 +817,11 @@ export default {
         // 没有流程图数据
         if (!nodes.length && !edges.length) {
           flowData.value = AppData; // 设置默认的数据
-          rawFlowData.value = AppData; // 设置默认的数据
         } else {
           flowData.value = { nodes, edges }; // 获取已存在的数据
-          rawFlowData.value = _.cloneDeep({ nodes, edges }); // 获取已存在的数据
           // 内部刷新graph数据
           nextTick(() => {
             editor.editorState.graph.read(flowData.value)
-            editor1?.editorState.graph?.read(rawFlowData.value)
           });
         }
@@ -1893,6 +1894,12 @@ export default {
       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'); // 连接到结束节点连接线的数量
+      // 流程启用中不允许节点操作
+      if (state.current_enable_version === state.select_flow_version) {
+        ElNotification.error('流程启用中，不可以删除')
+        return Promise.reject('reject')
+      }
+
       // 不可以删除开始与结束连接线
       let node_id = model.id;
       for (let index = 0; index < edges.length; index++) {
@@ -2268,9 +2275,13 @@ export default {
      * @return {Array} - The filtered array of buttons
      */
     function toolbarButtonHandler(buttons: any[]): Array<any> {
-      // TAG：测试隐藏缩略图和网格
+      let disabledKeys = ['miniMapSwitcher', 'gridSwitcher'];
-      let map = buttons.filter((item) => item.key !== 'miniMapSwitcher' && item.key !=='gridSwitcher')
+      // 如果在启用版本中，隐藏 节点操作功能 和 缩略图和网格
-      return map
+      if (state.current_enable_version === state.select_flow_version) {
+        disabledKeys = ['delete', 'miniMapSwitcher', 'gridSwitcher', 'undo', 'redo'];
+      }
+      let map = buttons.filter((item) => !disabledKeys.includes(item.key));
+      return map;
     }
     /**
@@ -2333,6 +2344,7 @@ export default {
     }
     const openPreview = () => {
+      editor.closeModel();
       // 打开弹框
       state.dialogPreviewVisible = true;
       // 获取最新数据
@@ -2359,8 +2371,6 @@ export default {
      */
     const onClickNodePreview = async (e: myEvent) => {
       // TODO: 有一个预览状态可以看到节点相应的表单内容
-      console.warn('点击节点，如果预览状态，可以预览表单内容');
-
       const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性
       console.log("🚀 ~ file: App.vue:2338 ~ onClickNodePreview ~ model.id:", model.id);
       model.style = model.style || {}
@@ -2648,6 +2658,20 @@ body {
     cursor: pointer;
   }
 }
+.add-tip {
+  position: absolute;
+  z-index: 9;
+  top: 70px;
+  .icon {
+    color: #f0a800 !important;
+  }
+  .add {
+    color: #009688 !important;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
 .el-tabs__item.is-active,
 .el-radio-button__inner:hover {