新增切换流程图版本功能

hookehuyr
Commit 6290cc4786da792469fcd2967efe4e1eb1b2c74d 6290cc47 1 parent 3e16ecd4
Showing 1 changed file with 76 additions and 9 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,6 +582,8 @@ export default {
     // TAG: 接口获取流程图数据
     const flowData = ref<any>(null);
+    const getFlowData = (flow_id) => {
+      flowData.value = null;
       axios.get('/admin/?a=flow_nodes&flow_id=' + flow_id)
       .then(res => {
         if (res.data.code) {
@@ -600,21 +610,26 @@ export default {
           } else {
             flowData.value = res.data.data; // 获取已存在的数据
           }
+          state.reloadLoading = false;
         } else {
           ElMessage({
             type: 'error',
             message: res.data.msg,
           });
+          state.reloadLoading = false;
         }
       })
       .catch(err => {
         console.error(err);
+        state.reloadLoading = false;
       });
+    }
+    getFlowData(flow_id);
-    onMounted(async () => {
-      document.title = '可视化流程设计器'
     // 显示提示框的标志位
     var showConfirmation = true;
+    onMounted(async () => {
+      document.title = '可视化流程设计器'
       // 监听 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;