fix: 3.1.0. 工作流页面新增加载效果

frontend/src/views/job/form/WorkFlow.vue

@@ -1,11 +1,14 @@
 <template>
-  <iframe
-    ref="iframe"
-    :src="`${mode === 'production' ? baseUrl : ''}/lib/index.html?id=${id}&mode=${mode}&x1c2Hdd6=${value}`"
-    marginwidth="0"
-    frameborder="no"
-    :style="`width: 100%;height:calc(99vh - 60px)`"
-  />
+  <a-spin :spinning="spinning" tip=" 工作流正在加载中">
+    <a-icon slot="indicator" type="loading" style="font-size: 58px; top: 39%" spin />
+    <iframe
+      ref="iframe"
+      :src="`${mode === 'production' ? baseUrl : ''}/lib/index.html?id=${id}&mode=${mode}&x1c2Hdd6=${value}`"
+      marginwidth="0"
+      frameborder="no"
+      :style="`width: 100%;height:calc(99vh - 60px)`"
+    />
+  </a-spin>
 </template>
 
 <script>
@@ -21,11 +24,14 @@ export default {
   data () {
     return {
       id: '',
+      spinning: true,
       mode: process.env.NODE_ENV,
-      baseUrl: process.env.VUE_APP_API_BASE_URL
+      baseUrl: process.env.VUE_APP_API_BASE_URL,
+      indicator: <a-icon type="loading" style="font-size: 36px" spin />
     }
   },
   mounted () {
+    this.iframeLoad()
     this.id = this.$route.query.id
   },
   created () {
@@ -58,6 +64,22 @@ export default {
           this.update()
         }
       }
+    },
+    iframeLoad () {
+      const that = this
+      const iframe = this.$refs.iframe
+      // 处理兼容行问题 兼容IE
+      if (iframe.attachEvent) {
+        iframe.attachEvent('onload', function () {
+          // iframe加载完毕以后执行操作
+          that.spinning = false
+        })
+      } else {
+        iframe.onload = function () {
+          // iframe加载完毕以后执行操作
+          that.spinning = false
+        }
+      }
     }
   }
 }
@@ -71,4 +93,12 @@ export default {
 .ant-layout-footer {
   display: none;
 }
+
+.ant-spin-text {
+  font-size: 20px;
+}
+
+.ant-spin-nested-loading > div > .ant-spin {
+  top: 23%;
+}
 </style>