From 4ee451528a1c2bf588f87e15fe74f5dc128f05d4 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 24 May 2024 15:59:42 +0800
Subject: [PATCH 1/5] =?UTF-8?q?useBaseTable=E7=BB=84=E5=90=88=E5=BC=8F?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/.env.development            |  3 +-
 .../src/components/job-info/job.vue           | 93 +++++++------------
 bigtop-manager-ui/src/hooks/useBaseTable.ts   | 72 ++++++++++++++
 3 files changed, 108 insertions(+), 60 deletions(-)
 create mode 100644 bigtop-manager-ui/src/hooks/useBaseTable.ts

diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
index 4af78b5..d7f2127 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -17,7 +17,8 @@ NODE_ENV=development
 
 VITE_APP_BASE='/'
 #VITE_APP_BASE_URL='http://172.29.40.96:8080'
-VITE_APP_BASE_URL='http://localhost:8080'
+# VITE_APP_BASE_URL='http://localhost:8080'
+VITE_APP_BASE_URL='http://bmdebug.v7.idcfengye.com'
 VITE_APP_BASE_API='/api'
 #VITE_APP_BASE_WS_URL='ws://172.29.40.96:8080'
 VITE_APP_BASE_WS_URL='ws://localhost:8080'
diff --git a/bigtop-manager-ui/src/components/job-info/job.vue b/bigtop-manager-ui/src/components/job-info/job.vue
index 14082de..170c365 100644
--- a/bigtop-manager-ui/src/components/job-info/job.vue
+++ b/bigtop-manager-ui/src/components/job-info/job.vue
@@ -18,12 +18,15 @@
   -->
 
 <script setup lang="ts">
-  import { ref, watch, computed, reactive, toRaw, toRefs } from 'vue'
+  import { ref, watch, computed, toRefs } from 'vue'
   import { useClusterStore } from '@/store/cluster'
-  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
   import { CopyOutlined } from '@ant-design/icons-vue'
   import { storeToRefs } from 'pinia'
-  import { message } from 'ant-design-vue'
+  import {
+    message,
+    TableColumnType,
+    TablePaginationConfig
+  } from 'ant-design-vue'
   import {
     JobVO,
     StageVO,
@@ -41,9 +44,9 @@
   import Task from './task.vue'
   import { copyText } from '@/utils/tools'
   import { useI18n } from 'vue-i18n'
-  const { t } = useI18n()
+  import useTable from '@/hooks/useBaseTable'
 
-  const columns = [
+  const columns: TableColumnType[] = [
     {
       title: 'common.name',
       dataIndex: 'name',
@@ -66,6 +69,11 @@
     }
   ]
 
+  const { dataSource, loading, paginateProp, handleChange, restState } =
+    useTable<JobVO>(columns)
+
+  const { t } = useI18n()
+
   const clusterStore = useClusterStore()
   const { clusterId } = storeToRefs(clusterStore)
 
@@ -83,12 +91,10 @@
 
   const emits = defineEmits(['update:visible', 'closed'])
 
-  const loading = ref(false)
   const stages = ref<StageVO[]>([])
   const tasks = ref<TaskVO[]>([])
   const breadcrumbs = ref<any[]>([{ name: 'Job Info' }])
   const currTaskInfo = ref<TaskVO>()
-  const jobs = ref<JobVO[]>([])
   const intervalId = ref<Pausable | undefined>()
   const logTextOrigin = ref<string>('')
   const logsInfoRef = ref<HTMLElement | null>(null)
@@ -99,13 +105,6 @@
     'isTaskLogs'
   ])
 
-  const paginationProps = reactive<PaginationConfig>({})
-  const jobsPageState = reactive<Pagination>({
-    pageNum: 1,
-    pageSize: 10,
-    sort: 'desc'
-  })
-
   const getCurrPage = computed(() => {
     return currPage.value[breadcrumbs.value.length - 1]
   })
@@ -122,7 +121,7 @@
   watch(visible, (val) => {
     if (val) {
       loading.value = true
-      Object.assign(paginationProps, initPagedProps())
+      restState()
       if (outerData.value) {
         checkMetaOrigin(true)
       } else {
@@ -134,10 +133,10 @@
 
   watch(outerData, (val) => {
     if (!val) return
-    jobs.value = val.meta as any
+    dataSource.value = val.meta as any
   })
 
-  watch(jobs, (val) => {
+  watch(dataSource, (val) => {
     if (val) {
       const len = breadcrumbs.value.length
       const idxId = breadcrumbs.value[len - 1]?.id
@@ -150,7 +149,7 @@
   const checkMetaOrigin = (isOuter = false) => {
     if (isOuter) {
       const { meta, currItem } = outerData.value as OuterData
-      jobs.value = meta
+      dataSource.value = meta
       clickJob(meta[0])
       clickStage(currItem as StageVO)
       return
@@ -175,14 +174,16 @@
 
   const getJobsList = async () => {
     try {
-      const params = { ...toRaw(jobsPageState) }
+      loading.value = true
+      const { current, pageSize } = paginateProp.value
+      const params: Pagination = {
+        pageNum: current as number,
+        pageSize: pageSize as number,
+        sort: 'desc'
+      }
       const { content, total } = await getJobs(clusterId.value, params)
-      jobs.value = content.map((v) => {
-        return {
-          ...v
-        }
-      })
-      paginationProps.total = total
+      dataSource.value = content
+      paginateProp.value.total = total
       loading.value = false
     } catch (error) {
       loading.value = false
@@ -190,8 +191,8 @@
   }
 
   const getLogsInfo = (id: number) => {
-    getLogs(clusterId.value, id, ({ event }: AxiosProgressEvent) => {
-      logTextOrigin.value = event.target.responseText
+    getLogs(clusterId.value, id, ({ event: e }: AxiosProgressEvent) => {
+      logTextOrigin.value = e.target.responseText
       logsInfoRef.value = document.querySelector('.logsInfoRef')
       if (!logsInfoRef.value) {
         return
@@ -241,42 +242,15 @@
     breadcrumbs.value.splice(idx + 1, len)
   }
 
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-    jobsPageState.pageNum = page
-    loading.value = true
-    getJobsList()
-  }
-
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-    jobsPageState.pageSize = size
-    loading.value = true
+  const handleTableChange = (pagination: TablePaginationConfig) => {
+    handleChange(pagination)
     getJobsList()
   }
 
-  const initPagedProps = () => {
-    return {
-      current: 1,
-      pageSize: 10,
-      size: 'small',
-      showSizeChanger: true,
-      pageSizeOptions: ['10', '20', '30', '40', '50'],
-      total: 0,
-      onChange: handlePageChange,
-      onShowSizeChange: handlePageSizeChange
-    }
-  }
-
   const handleClose = () => {
     intervalId.value?.pause()
     breadcrumbs.value = [{ name: 'Job Info' }]
-    jobs.value = []
-    Object.assign(jobsPageState, {
-      pageNum: 1,
-      pageSize: 10,
-      sort: 'desc'
-    })
+    restState()
     emits('update:visible', false)
   }
 </script>
@@ -304,11 +278,12 @@
     <a-table
       v-show="getCurrPage == 'isJobTable'"
       :scroll="{ y: 500 }"
-      :pagination="paginationProps"
+      :pagination="paginateProp"
       :loading="loading"
-      :data-source="jobs"
+      :data-source="dataSource"
       :columns="columns"
       destroy-on-close
+      @change="handleTableChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
diff --git a/bigtop-manager-ui/src/hooks/useBaseTable.ts b/bigtop-manager-ui/src/hooks/useBaseTable.ts
new file mode 100644
index 0000000..cd2fc1d
--- /dev/null
+++ b/bigtop-manager-ui/src/hooks/useBaseTable.ts
@@ -0,0 +1,72 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ref } from 'vue'
+import type { TablePaginationConfig, TableColumnType } from 'ant-design-vue'
+
+const useTable = <T>(
+  columns: TableColumnType[],
+  list?: T[],
+  pagination?: TablePaginationConfig | false | undefined
+) => {
+  const loading = ref(false)
+  const dataSource = ref<T[]>(list || [])
+  const columnsProp = ref<TableColumnType[]>(columns)
+  const paginateProp = ref<TablePaginationConfig>({
+    current: 1,
+    pageSize: 10,
+    total: dataSource.value.length,
+    size: 'small',
+    showSizeChanger: true,
+    pageSizeOptions: ['10', '20', '30', '40', '50']
+  })
+
+  // merge pagination config
+  if (pagination) {
+    paginateProp.value = Object.assign(paginateProp.value, pagination)
+  }
+
+  const handleChange = (pagination: TablePaginationConfig) => {
+    loading.value = true
+    paginateProp.value = Object.assign(paginateProp.value, pagination)
+  }
+
+  const restState = () => {
+    dataSource.value = []
+    paginateProp.value = {
+      current: 1,
+      pageSize: 10,
+      total: dataSource.value.length || 0,
+      size: 'small',
+      showSizeChanger: true,
+      pageSizeOptions: ['10', '20', '30', '40', '50']
+    }
+  }
+
+  return {
+    columnsProp,
+    dataSource,
+    loading,
+    paginateProp,
+    handleChange,
+    restState
+  }
+}
+
+export default useTable
-- 
Gitee


From abf7a0e8809e4eeda9cbb3897f8155bacad2b99e Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 24 May 2024 16:40:25 +0800
Subject: [PATCH 2/5] =?UTF-8?q?useTable=E6=8F=90=E4=BE=9B=E6=B3=9B?=
 =?UTF-8?q?=E5=9E=8B=E5=8C=B9=E9=85=8DdataSource+=E4=BF=AE=E6=94=B9job-inf?=
 =?UTF-8?q?o=5Fstage=E9=A1=B5=E9=9D=A2=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/job-info/stage.vue         | 46 ++++++-------------
 bigtop-manager-ui/src/hooks/useBaseTable.ts   | 11 +++--
 2 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/bigtop-manager-ui/src/components/job-info/stage.vue b/bigtop-manager-ui/src/components/job-info/stage.vue
index 9e74c63..3909ea5 100644
--- a/bigtop-manager-ui/src/components/job-info/stage.vue
+++ b/bigtop-manager-ui/src/components/job-info/stage.vue
@@ -19,29 +19,31 @@
 
 <script lang="ts" setup>
   import { StageVO } from '@/api/job/types.ts'
-  import { ref, reactive, watch, computed } from 'vue'
-  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
+  import { watch } from 'vue'
   import CustomProgress from './custom-progress.vue'
+  import useTable from '@/hooks/useBaseTable'
+  import { TableColumnType } from 'ant-design-vue'
 
   interface StageProps {
     stages: StageVO[]
-    columns: any
+    columns: TableColumnType[]
   }
 
-  const props = withDefaults(defineProps<StageProps>(), {})
-  const loading = ref(false)
-  const pagedList = computed(() => {
-    return props.stages
-  })
+  const { columns, stages } = withDefaults(defineProps<StageProps>(), {})
+  const { dataSource, loading, paginateProp, handleChange } = useTable<StageVO>(
+    columns,
+    stages
+  )
 
   watch(
-    () => props.stages,
+    () => stages,
     (val) => {
       if (val.length == 0) {
         loading.value = true
       } else {
         loading.value = false
       }
+      dataSource.value = val
     },
     {
       immediate: true,
@@ -49,25 +51,6 @@
     }
   )
 
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-  }
-
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-  }
-
-  const paginationProps = reactive<PaginationConfig>({
-    current: 1,
-    pageSize: 10,
-    size: 'small',
-    showSizeChanger: true,
-    pageSizeOptions: ['10', '20', '30', '40', '50'],
-    total: pagedList.value.length,
-    onChange: handlePageChange,
-    onShowSizeChange: handlePageSizeChange
-  })
-
   const emits = defineEmits(['clickStage'])
   const clickStage = (record: StageVO) => {
     emits('clickStage', record)
@@ -77,11 +60,12 @@
 <template>
   <div class="stage-info">
     <a-table
-      :pagination="paginationProps"
-      :data-source="pagedList"
-      :columns="props.columns"
+      :pagination="paginateProp"
+      :data-source="dataSource"
+      :columns="columns"
       :loading="loading"
       :scroll="{ y: 500 }"
+      @change="handleChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
diff --git a/bigtop-manager-ui/src/hooks/useBaseTable.ts b/bigtop-manager-ui/src/hooks/useBaseTable.ts
index cd2fc1d..8acb2b3 100644
--- a/bigtop-manager-ui/src/hooks/useBaseTable.ts
+++ b/bigtop-manager-ui/src/hooks/useBaseTable.ts
@@ -17,16 +17,16 @@
  * under the License.
  */
 
-import { ref } from 'vue'
+import { ref, onUnmounted } from 'vue'
 import type { TablePaginationConfig, TableColumnType } from 'ant-design-vue'
 
 const useTable = <T>(
   columns: TableColumnType[],
-  list?: T[],
+  rows?: T[],
   pagination?: TablePaginationConfig | false | undefined
 ) => {
   const loading = ref(false)
-  const dataSource = ref<T[]>(list || [])
+  const dataSource = ref<T[]>(rows || [])
   const columnsProp = ref<TableColumnType[]>(columns)
   const paginateProp = ref<TablePaginationConfig>({
     current: 1,
@@ -48,6 +48,7 @@ const useTable = <T>(
   }
 
   const restState = () => {
+    loading.value = false
     dataSource.value = []
     paginateProp.value = {
       current: 1,
@@ -59,6 +60,10 @@ const useTable = <T>(
     }
   }
 
+  onUnmounted(() => {
+    restState()
+  })
+
   return {
     columnsProp,
     dataSource,
-- 
Gitee


From e1273ae14b45a1fbf42ee591c697f412b0064091 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 24 May 2024 16:43:12 +0800
Subject: [PATCH 3/5] =?UTF-8?q?useTable=E4=BF=AE=E6=94=B9=E8=BF=94?=
 =?UTF-8?q?=E5=9B=9Echange=E4=BA=8B=E4=BB=B6=E5=91=BD=E5=90=8D=E4=B8=BAonC?=
 =?UTF-8?q?hange?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/src/components/job-info/job.vue   | 4 ++--
 bigtop-manager-ui/src/components/job-info/stage.vue | 4 ++--
 bigtop-manager-ui/src/hooks/useBaseTable.ts         | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/bigtop-manager-ui/src/components/job-info/job.vue b/bigtop-manager-ui/src/components/job-info/job.vue
index 170c365..13df840 100644
--- a/bigtop-manager-ui/src/components/job-info/job.vue
+++ b/bigtop-manager-ui/src/components/job-info/job.vue
@@ -69,7 +69,7 @@
     }
   ]
 
-  const { dataSource, loading, paginateProp, handleChange, restState } =
+  const { dataSource, loading, paginateProp, onChange, restState } =
     useTable<JobVO>(columns)
 
   const { t } = useI18n()
@@ -243,7 +243,7 @@
   }
 
   const handleTableChange = (pagination: TablePaginationConfig) => {
-    handleChange(pagination)
+    onChange(pagination)
     getJobsList()
   }
 
diff --git a/bigtop-manager-ui/src/components/job-info/stage.vue b/bigtop-manager-ui/src/components/job-info/stage.vue
index 3909ea5..d53d558 100644
--- a/bigtop-manager-ui/src/components/job-info/stage.vue
+++ b/bigtop-manager-ui/src/components/job-info/stage.vue
@@ -30,7 +30,7 @@
   }
 
   const { columns, stages } = withDefaults(defineProps<StageProps>(), {})
-  const { dataSource, loading, paginateProp, handleChange } = useTable<StageVO>(
+  const { dataSource, loading, paginateProp, onChange } = useTable<StageVO>(
     columns,
     stages
   )
@@ -65,7 +65,7 @@
       :columns="columns"
       :loading="loading"
       :scroll="{ y: 500 }"
-      @change="handleChange"
+      @change="onChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
diff --git a/bigtop-manager-ui/src/hooks/useBaseTable.ts b/bigtop-manager-ui/src/hooks/useBaseTable.ts
index 8acb2b3..fc773d1 100644
--- a/bigtop-manager-ui/src/hooks/useBaseTable.ts
+++ b/bigtop-manager-ui/src/hooks/useBaseTable.ts
@@ -42,7 +42,7 @@ const useTable = <T>(
     paginateProp.value = Object.assign(paginateProp.value, pagination)
   }
 
-  const handleChange = (pagination: TablePaginationConfig) => {
+  const onChange = (pagination: TablePaginationConfig) => {
     loading.value = true
     paginateProp.value = Object.assign(paginateProp.value, pagination)
   }
@@ -69,7 +69,7 @@ const useTable = <T>(
     dataSource,
     loading,
     paginateProp,
-    handleChange,
+    onChange,
     restState
   }
 }
-- 
Gitee


From 3a3f836ec865a90ef5116eea3e4eb2f770cedae0 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 24 May 2024 17:02:53 +0800
Subject: [PATCH 4/5] =?UTF-8?q?useTable=E5=8E=BB=E9=99=A4onChange=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84loading=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/src/components/job-info/job.vue | 1 +
 bigtop-manager-ui/src/hooks/useBaseTable.ts       | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/bigtop-manager-ui/src/components/job-info/job.vue b/bigtop-manager-ui/src/components/job-info/job.vue
index 13df840..501ecd9 100644
--- a/bigtop-manager-ui/src/components/job-info/job.vue
+++ b/bigtop-manager-ui/src/components/job-info/job.vue
@@ -243,6 +243,7 @@
   }
 
   const handleTableChange = (pagination: TablePaginationConfig) => {
+    loading.value = true
     onChange(pagination)
     getJobsList()
   }
diff --git a/bigtop-manager-ui/src/hooks/useBaseTable.ts b/bigtop-manager-ui/src/hooks/useBaseTable.ts
index fc773d1..b44a068 100644
--- a/bigtop-manager-ui/src/hooks/useBaseTable.ts
+++ b/bigtop-manager-ui/src/hooks/useBaseTable.ts
@@ -43,7 +43,6 @@ const useTable = <T>(
   }
 
   const onChange = (pagination: TablePaginationConfig) => {
-    loading.value = true
     paginateProp.value = Object.assign(paginateProp.value, pagination)
   }
 
-- 
Gitee


From da6bed27d690226c5d2647ab60843cdfef89bafb Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 24 May 2024 17:16:19 +0800
Subject: [PATCH 5/5] =?UTF-8?q?job-info=5Ftask=E4=BD=BF=E7=94=A8useBaseTab?=
 =?UTF-8?q?le=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/.env.development            |  3 +-
 .../src/components/job-info/job.vue           | 16 +++----
 .../src/components/job-info/stage.vue         | 11 ++---
 .../src/components/job-info/task.vue          | 46 +++++++++----------
 bigtop-manager-ui/src/hooks/useBaseTable.ts   |  4 +-
 5 files changed, 35 insertions(+), 45 deletions(-)

diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
index d7f2127..4af78b5 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -17,8 +17,7 @@ NODE_ENV=development
 
 VITE_APP_BASE='/'
 #VITE_APP_BASE_URL='http://172.29.40.96:8080'
-# VITE_APP_BASE_URL='http://localhost:8080'
-VITE_APP_BASE_URL='http://bmdebug.v7.idcfengye.com'
+VITE_APP_BASE_URL='http://localhost:8080'
 VITE_APP_BASE_API='/api'
 #VITE_APP_BASE_WS_URL='ws://172.29.40.96:8080'
 VITE_APP_BASE_WS_URL='ws://localhost:8080'
diff --git a/bigtop-manager-ui/src/components/job-info/job.vue b/bigtop-manager-ui/src/components/job-info/job.vue
index 501ecd9..cd7a8b1 100644
--- a/bigtop-manager-ui/src/components/job-info/job.vue
+++ b/bigtop-manager-ui/src/components/job-info/job.vue
@@ -44,7 +44,7 @@
   import Task from './task.vue'
   import { copyText } from '@/utils/tools'
   import { useI18n } from 'vue-i18n'
-  import useTable from '@/hooks/useBaseTable'
+  import useBaseTable from '@/hooks/useBaseTable'
 
   const columns: TableColumnType[] = [
     {
@@ -70,7 +70,7 @@
   ]
 
   const { dataSource, loading, paginateProp, onChange, restState } =
-    useTable<JobVO>(columns)
+    useBaseTable<JobVO>(columns)
 
   const { t } = useI18n()
 
@@ -221,12 +221,6 @@
       })
   }
 
-  const clickTask = (record: TaskVO) => {
-    breadcrumbs.value.push(record)
-    currTaskInfo.value = record
-    getLogsInfo(record.id)
-  }
-
   const clickJob = (record: JobVO) => {
     stages.value = record.stages
     breadcrumbs.value.push(record)
@@ -237,6 +231,12 @@
     breadcrumbs.value.push(record)
   }
 
+  const clickTask = (record: TaskVO) => {
+    currTaskInfo.value = record
+    getLogsInfo(record.id)
+    breadcrumbs.value.push(record)
+  }
+
   const clickBreadCrumbs = (idx: number) => {
     const len = breadcrumbs.value.length
     breadcrumbs.value.splice(idx + 1, len)
diff --git a/bigtop-manager-ui/src/components/job-info/stage.vue b/bigtop-manager-ui/src/components/job-info/stage.vue
index d53d558..848bf62 100644
--- a/bigtop-manager-ui/src/components/job-info/stage.vue
+++ b/bigtop-manager-ui/src/components/job-info/stage.vue
@@ -21,7 +21,7 @@
   import { StageVO } from '@/api/job/types.ts'
   import { watch } from 'vue'
   import CustomProgress from './custom-progress.vue'
-  import useTable from '@/hooks/useBaseTable'
+  import useBaseTable from '@/hooks/useBaseTable'
   import { TableColumnType } from 'ant-design-vue'
 
   interface StageProps {
@@ -30,7 +30,7 @@
   }
 
   const { columns, stages } = withDefaults(defineProps<StageProps>(), {})
-  const { dataSource, loading, paginateProp, onChange } = useTable<StageVO>(
+  const { dataSource, loading, paginateProp, onChange } = useBaseTable<StageVO>(
     columns,
     stages
   )
@@ -38,12 +38,7 @@
   watch(
     () => stages,
     (val) => {
-      if (val.length == 0) {
-        loading.value = true
-      } else {
-        loading.value = false
-      }
-      dataSource.value = val
+      if (val) dataSource.value = val || []
     },
     {
       immediate: true,
diff --git a/bigtop-manager-ui/src/components/job-info/task.vue b/bigtop-manager-ui/src/components/job-info/task.vue
index c63cdcd..169755c 100644
--- a/bigtop-manager-ui/src/components/job-info/task.vue
+++ b/bigtop-manager-ui/src/components/job-info/task.vue
@@ -18,8 +18,7 @@
   -->
 
 <script setup lang="ts">
-  import { computed, reactive, ref } from 'vue'
-  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
+  import { watch } from 'vue'
   import { TaskVO, State } from '@/api/job/types.ts'
 
   import {
@@ -28,33 +27,29 @@
     CloseCircleTwoTone,
     LoadingOutlined
   } from '@ant-design/icons-vue'
+  import useBaseTable from '@/hooks/useBaseTable'
 
   interface TaskProps {
     tasks: TaskVO[]
     columns: any
   }
-  const props = withDefaults(defineProps<TaskProps>(), {})
 
-  const pagedList = ref(computed(() => props.tasks))
+  const { columns, tasks } = withDefaults(defineProps<TaskProps>(), {})
+  const { dataSource, paginateProp, onChange } = useBaseTable<TaskVO>(
+    columns,
+    tasks
+  )
 
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-  }
-
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-  }
-
-  const paginationProps = reactive<PaginationConfig>({
-    current: 1,
-    pageSize: 10,
-    size: 'small',
-    showSizeChanger: true,
-    pageSizeOptions: ['10', '20', '30', '40', '50'],
-    total: pagedList.value.length,
-    onChange: handlePageChange,
-    onShowSizeChange: handlePageSizeChange
-  })
+  watch(
+    () => tasks,
+    (val) => {
+      if (val) dataSource.value = val || []
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 
   const emits = defineEmits(['clickTask'])
   const clickTask = (record: TaskVO) => {
@@ -65,10 +60,11 @@
 <template>
   <div class="task-info">
     <a-table
-      :pagination="paginationProps"
-      :data-source="pagedList"
-      :columns="props.columns"
+      :pagination="paginateProp"
+      :data-source="dataSource"
+      :columns="columns"
       :scroll="{ y: 500 }"
+      @change="onChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
diff --git a/bigtop-manager-ui/src/hooks/useBaseTable.ts b/bigtop-manager-ui/src/hooks/useBaseTable.ts
index b44a068..3044882 100644
--- a/bigtop-manager-ui/src/hooks/useBaseTable.ts
+++ b/bigtop-manager-ui/src/hooks/useBaseTable.ts
@@ -20,7 +20,7 @@
 import { ref, onUnmounted } from 'vue'
 import type { TablePaginationConfig, TableColumnType } from 'ant-design-vue'
 
-const useTable = <T>(
+const useBaseTable = <T>(
   columns: TableColumnType[],
   rows?: T[],
   pagination?: TablePaginationConfig | false | undefined
@@ -73,4 +73,4 @@ const useTable = <T>(
   }
 }
 
-export default useTable
+export default useBaseTable
-- 
Gitee