新增切换流程图版本功能

hookehuyr
Commit 6290cc4786da792469fcd2967efe4e1eb1b2c74d 6290cc47 1 parent 3e16ecd4
Showing 1 changed file with 111 additions and 44 deletions
doc/App.vue
--- a/doc/App.vue
View file @6290cc4
+++ b/doc/App.vue
View file @6290cc4
@@ -316,19 +316,18 @@
             <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">启用</span>
           </div>
         </el-tooltip> -->
-        <!-- <div style="position: absolute; top:20px; right: 15px;">
+        <div style="position: absolute; top:20px; right: 15px;">
           <el-dropdown trigger="click">
             <div style="margin-left: 15px;">
-              <div style="width: 10px; height: 10px; background-color: #009688; border-radius: 50%; display: inline-block;"></div> <span style="font-size: 13px;">流程版本 (V1)</span>
+              <div style="width: 10px; height: 10px; background-color: #009688; border-radius: 50%; display: inline-block;"></div> <span style="font-size: 13px;">流程版本 (V{{ state.flow_version }})</span>
             </div>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item>流程版本 (V2)</el-dropdown-item>
+                <el-dropdown-item @click.native="onSelectFlowVersion(item.id)" v-for="(item, index) in state.flow_version_list" :key="index">流程版本 (V{{ item.code }})</el-dropdown-item>
-                <el-dropdown-item>流程版本 (V3)</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
-        </div> -->
+        </div>
       </template>
       <!-- 表单底部按钮 -->
       <template v-slot:foot>
@@ -338,6 +337,12 @@
         </div>
       </template>
     </vue-flow-editor>
+    <div v-if="state.reloadLoading" style="position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.5);width: 100%; height: 100%; z-index: 2006;">
+      <div class="el-loading-spinner">
+      <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>
+        <p class="el-loading-text">加载流程图中...</p>
+      </div>
+    </div>
   </div>
   <select-user-view
@@ -419,6 +424,7 @@ export default {
       detailModel: null,
       editorLoading: false, // 开始编辑器的loading状态
       statusLoading: false, // loading状态
+      reloadLoading: false, // loading状态
       // menuData: [
       //   {
       //     label: '流程节点',
@@ -507,6 +513,8 @@ export default {
       auth_all_edit: false,
       field_auths: [],
       field_extend: [],
+      flow_version: '',
+      flow_version_list: [],
     })
     /**
@@ -574,47 +582,54 @@ export default {
     // TAG: 接口获取流程图数据
     const flowData = ref<any>(null);
-    axios.get('/admin/?a=flow_nodes&flow_id=' + flow_id)
+    const getFlowData = (flow_id) => {
-    .then(res => {
+      flowData.value = null;
-      if (res.data.code) {
+      axios.get('/admin/?a=flow_nodes&flow_id=' + flow_id)
-        let nodes = res.data.data.nodes;
+      .then(res => {
-        let edges = res.data.data.edges;
+        if (res.data.code) {
-        // 没有流程图数据
+          let nodes = res.data.data.nodes;
-        if (!nodes.length && !edges.length) {
+          let edges = res.data.data.edges;
-          flowData.value = AppData; // 设置默认的数据
+          // 没有流程图数据
-          // 马上保存一次
+          if (!nodes.length && !edges.length) {
-          axios.post('/admin/?a=save_flow', qs.stringify({
+            flowData.value = AppData; // 设置默认的数据
-              form_id: +form_id,
+            // 马上保存一次
-              flow_id: '',
+            axios.post('/admin/?a=save_flow', qs.stringify({
-              data: JSON.stringify(AppData)
+                form_id: +form_id,
-            }))
+                flow_id: '',
-            .then(res => {
+                data: JSON.stringify(AppData)
-              if (res.data.code) {
+              }))
-                flow_id = res.data.data; // 更新flow_id
+              .then(res => {
-                updateUrl(flow_id); // 更新url
+                if (res.data.code) {
-              }
+                  flow_id = res.data.data; // 更新flow_id
-            })
+                  updateUrl(flow_id); // 更新url
-            .catch(err => {
+                }
-              console.log(err);
+              })
-            });
+              .catch(err => {
+                console.log(err);
+              });
+          } else {
+            flowData.value = res.data.data; // 获取已存在的数据
+          }
+          state.reloadLoading = false;
         } else {
-          flowData.value = res.data.data; // 获取已存在的数据
+          ElMessage({
+            type: 'error',
+            message: res.data.msg,
+          });
+          state.reloadLoading = false;
         }
-      } else {
+      })
-        ElMessage({
+      .catch(err => {
-          type: 'error',
+        console.error(err);
-          message: res.data.msg,
+        state.reloadLoading = false;
-        });
+      });
-      }
+    }
-    })
+    getFlowData(flow_id);
-    .catch(err => {
-      console.error(err);
-    });
+    // 显示提示框的标志位
+    var showConfirmation = true;
     onMounted(async () => {
       document.title = '可视化流程设计器'
-      // 显示提示框的标志位
-      var showConfirmation = true;
       // 监听 beforeunload 事件
       window.addEventListener('beforeunload', function (event) {
         if (showConfirmation) {
@@ -632,7 +647,56 @@ export default {
       //   state.detailModel = null;
       //   editor.closeModel();
       // });
-    })
+      getVersionList();
+    });
+
+    const getVersionList = () => {
+      // 获取版本信息列表
+      axios.get('/admin/?a=flow_version&form_id=' + form_id)
+      .then(res => {
+        if (res.data.code) {
+          // 启用的版本号
+          res.data.data.forEach((ele) => {
+            if (ele.status === '1') {
+              state.flow_version = ele.code;
+            }
+          });
+          // 版本列表
+          state.flow_version_list = res.data.data.filter((ele) => {
+            return ele.status !== '1';
+          });
+        } else {
+          ElMessage({
+            type: 'error',
+            message: res.data.msg,
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+    }
+
+    const onSelectFlowVersion = (id: string) => {
+      // 切换版本信息
+      axios.post('/admin/?a=enable_flow_version', qs.stringify({ id: +id }))
+      .then(res => {
+        if (res.data.code) {
+          getVersionList();
+          updateUrl(res.data.data);
+          state.reloadLoading = true;
+          getFlowData(res.data.data);
+        } else {
+          ElMessage({
+            type: 'error',
+            message: res.data.msg,
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err);
+      });
+    }
     function handleActiveChange(name: any) {
       console.warn(name)
@@ -1451,6 +1515,7 @@ export default {
       handleBeforeAdd,
       handleAfterAdd,
+      onSelectFlowVersion,
       handleActiveChange,
       onAuthVisibleChange,
       onAuthEditableChange,
@@ -1613,13 +1678,15 @@ body {
 }
 .el-loading-spinner .path {
-  stroke: #009688!important;
+  stroke: #009688 !important;
 }
 .el-loading-spinner .el-loading-text {
   color: #009688 !important;
 }
-:focus-visible { outline: none; }
+:focus-visible {
+  outline: none;
+}
 .el-dropdown-menu__item:not(.is-disabled):focus {
   background-color: white;