工作流执行记录

src/views/dataFactory/workflow/ExecutionRecord.vue

@@ -9,7 +9,7 @@
       :headers="headers"
       :items="executions"
       :elevation="workflowId ? 0 : 5"
-      :total="pagination.total"
+      :total="total"
       :page-info="pageInfo"
       :disable-sort="true"
       :is-tools="false"
@@ -169,7 +169,7 @@ export default {
       drawer: false,
       detailLoading: false,
       executionDetail: {},
-      currentExecutionId: null,
+      timer: null,
       filterOption: {
         list: [
           {
@@ -200,15 +200,17 @@ export default {
         size: 10,
         current: 1
       },
-      pagination: {
-        total: 0
-      }
+      total: 0
     }
   },
   props: {
     workflowId: {
       type: String,
       default: null
+    },
+    tab: {
+      type: Number,
+      default: 0
     }
   },
   computed: {
@@ -216,16 +218,52 @@ export default {
       return this.workflowId || this.$route?.params?.id
     }
   },
+  watch: {
+    tab: {
+      handler (newVal) {
+        this.clearTimer()
+        if (newVal === 1) {
+          this.startTimer()
+        }
+      },
+      immediate: true
+    }
+  },
   mounted () {
     this.fetchExecutions()
   },
+  activated () {
+    if (this.tab === 1) {
+      this.startTimer()
+    }
+  },
+  deactivated () {
+    this.clearTimer()
+  },
+  beforeDestroy () {
+    this.clearTimer()
+  },
   methods: {
+    // 启动定时查询
+    startTimer () {
+      this.clearTimer()
+      this.timer = setInterval(() => {
+        this.fetchExecutions({}, true)
+      }, 5000)
+    },
+    // 清除定时查询
+    clearTimer () {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     handleSearch (filterData) {
       this.pageInfo.current = 1
       this.fetchExecutions(filterData)
     },
-    async fetchExecutions (filterData = {}) {
-      this.loading = true
+    async fetchExecutions (filterData = {}, noLoading = false) {
+      if (!noLoading) this.loading = true
       try {
         const params = {
           page: this.pageInfo.current,
@@ -236,21 +274,13 @@ export default {
           params.status = filterData.status
         }
 
-        let response
-        if (this.currentWorkflowId) {
-          response = await getWorkflowExecutions(this.currentWorkflowId, params)
-        } else {
-          response = await getAllExecutions(params)
-        }
-
-        if (response.code === 200) {
-          this.executions = response.data.items || []
-          this.pagination.total = response.data.total || 0
-        }
+        const { data } = this.currentWorkflowId ? await getWorkflowExecutions(this.currentWorkflowId, params) : await getAllExecutions(params)
+        this.executions = data.items || []
+        this.total = data.total || 0
       } catch (error) {
         console.error('获取执行记录失败', error)
       } finally {
-        this.loading = false
+        if (!noLoading) this.loading = false
       }
     },
     pageHandleChange (pageInfo) {
@@ -266,6 +296,7 @@ export default {
       }
       return colors[status] || 'grey'
     },
+    // 计算执行时长
     calculateDuration (start, end) {
       if (!start || !end) return '-'
       const startTime = new Date(start.replace(/-/g, '/')).getTime()
@@ -275,8 +306,8 @@ export default {
       if (duration < 3600) return `${Math.floor(duration / 60)}分${duration % 60}秒`
       return `${Math.floor(duration / 3600)}时${Math.floor((duration % 3600) / 60)}分`
     },
+    // 查看执行详情
     async viewExecutionDetail (executionId) {
-      this.currentExecutionId = executionId
       this.drawer = true
       await this.fetchExecutionDetail(executionId)
     },
@@ -293,6 +324,7 @@ export default {
         this.detailLoading = false
       }
     },
+    // 获取节点状态颜色
     getNodeStatusColor (node) {
       if (node.error) return 'error'
       return 'success'

src/views/dataFactory/workflow/index.vue

@@ -10,7 +10,7 @@
         <WorkflowList />
       </v-tab-item>
       <v-tab-item>
-        <ExecutionRecord />
+        <ExecutionRecord :tab="tab" />
       </v-tab-item>
       <v-tab-item>
         <HealthCheck />