[Feature][UI Next]Added loading state to all tables (#9215)

* Added loading state to all tables

* Delete useless variables

dolphinscheduler-ui-next/src/views/data-quality/rule/components/rule-modal.tsx

@@ -19,7 +19,6 @@ import { defineComponent, PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { NDataTable } from 'naive-ui'
 import Modal from '@/components/modal'
-import styles from '../index.module.scss'
 import { TableColumns } from 'naive-ui/es/data-table/src/interface'
 
 const props = {
@@ -94,7 +93,6 @@ export default defineComponent({
           data={this.ruleInputEntryList}
           striped
           size={'small'}
-          class={styles.table}
         />
       </Modal>
     )

dolphinscheduler-ui-next/src/views/data-quality/rule/index.tsx

@@ -100,7 +100,8 @@ const TaskResult = defineComponent({
       onCancel,
       onConfirm,
       viewRuleEntry,
-      ruleEntryData
+      ruleEntryData,
+      loadingRef
     } = this
 
     const { columns } = useTable(viewRuleEntry)
@@ -127,7 +128,7 @@ const TaskResult = defineComponent({
           </NSpace>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={columns} data={this.tableData} />
+          <NDataTable loading={loadingRef} columns={columns} data={this.tableData} />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}

dolphinscheduler-ui-next/src/views/data-quality/rule/use-table.ts

@@ -35,7 +35,8 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
     pageSize: ref(10),
     state: ref(null),
     searchVal: ref(null),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const columns: TableColumns<any> = [
@@ -97,6 +98,8 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
   ]
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const data = {
       pageSize: params.pageSize,
       pageNo: params.pageNo,
@@ -129,12 +132,15 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
             'yyyy-MM-dd HH:mm:ss'
           )
 
+          
           return {
             ...item,
             ruleName: ruleNameLocale,
             ruleTypeName: ruleTypeName
           }
         }) as any
+
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx

@@ -77,7 +77,7 @@ const TaskResult = defineComponent({
     }
   },
   render() {
-    const { t, requestTableData, onUpdatePageSize, onSearch } = this
+    const { t, requestTableData, onUpdatePageSize, onSearch, loadingRef } = this
 
     return (
       <>
@@ -156,6 +156,7 @@ const TaskResult = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}

dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts

@@ -44,7 +44,8 @@ export function useTable() {
     state: ref(null),
     searchVal: ref(null),
     datePickerRange: ref(null),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -191,6 +192,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const data = {
       pageSize: params.pageSize,
       pageNo: params.pageNo,
@@ -212,6 +215,8 @@ export function useTable() {
             ...item
           }
         }) as any
+
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/home/components/state-card.tsx

@@ -36,6 +36,10 @@ const props = {
   chartData: {
     type: Array as PropType<Array<StateChartData>>,
     default: () => []
+  },
+  loadingRef: {
+    type: Boolean as PropType<boolean>,
+    default: false
   }
 }
 
@@ -51,9 +55,8 @@ const StateCard = defineComponent({
     return { onUpdateDatePickerValue }
   },
   render() {
-    const { title, date, tableData, chartData, onUpdateDatePickerValue } = this
+    const { title, date, tableData, chartData, onUpdateDatePickerValue, loadingRef } = this
     const { columnsRef } = useTable()
-
     return (
       <Card title={title}>
         {{
@@ -63,6 +66,7 @@ const StateCard = defineComponent({
               <NGi>
                 {tableData && (
                   <NDataTable
+                    loading={loadingRef}
                     columns={columnsRef}
                     data={tableData}
                     striped

dolphinscheduler-ui-next/src/views/home/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref, watch } from 'vue'
+import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
 import { NGrid, NGi } from 'naive-ui'
 import { startOfToday, getTime } from 'date-fns'
 import { useI18n } from 'vue-i18n'
@@ -31,8 +31,8 @@ export default defineComponent({
     const dateRef = ref([getTime(startOfToday()), Date.now()])
     const taskStateRef = ref()
     const processStateRef = ref()
-    const { getTaskState } = useTaskState()
-    const { getProcessState } = useProcessState()
+    const { getTaskState, taskVariables } = useTaskState()
+    const { getProcessState, processVariables } = useProcessState()
 
     const initData = () => {
       taskStateRef.value = getTaskState(dateRef.value)
@@ -62,11 +62,13 @@ export default defineComponent({
       handleTaskDate,
       handleProcessDate,
       taskStateRef,
-      processStateRef
+      processStateRef,
+      ...toRefs(taskVariables),
+      ...toRefs(processVariables),
     }
   },
   render() {
-    const { t, dateRef, handleTaskDate, handleProcessDate } = this
+    const { t, dateRef, handleTaskDate, handleProcessDate, taskLoadingRef, processLoadingRef } = this
 
     return (
       <div>
@@ -78,6 +80,7 @@ export default defineComponent({
               tableData={this.taskStateRef?.value.table}
               chartData={this.taskStateRef?.value.chart}
               onUpdateDatePickerValue={handleTaskDate}
+              loadingRef={taskLoadingRef}
             />
           </NGi>
           <NGi>
@@ -87,6 +90,7 @@ export default defineComponent({
               tableData={this.processStateRef?.value.table}
               chartData={this.processStateRef?.value.chart}
               onUpdateDatePickerValue={handleProcessDate}
+              loadingRef={processLoadingRef}
             />
           </NGi>
         </NGrid>

dolphinscheduler-ui-next/src/views/home/use-process-state.ts

@@ -22,11 +22,17 @@ import { toLower } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
+import { reactive, ref } from 'vue'
 
 export function useProcessState() {
   const { t } = useI18n()
+  const processVariables = reactive({
+    processLoadingRef: ref(false)
+  })
 
   const getProcessState = (date: Array<number>) => {
+    if (processVariables.processLoadingRef) return
+    processVariables.processLoadingRef = true
     const { state } = useAsyncState(
       countProcessInstanceState({
         startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@@ -46,14 +52,15 @@ export function useProcessState() {
             name: t('home.' + toLower(item.taskStateType))
           }
         })
-
+        
+        processVariables.processLoadingRef = false
         return { table, chart }
       }),
       { table: [], chart: [] }
-    )
+      )
 
     return state
   }
 
-  return { getProcessState }
+  return { getProcessState, processVariables }
 }

dolphinscheduler-ui-next/src/views/home/use-task-state.ts

@@ -22,11 +22,17 @@ import { useI18n } from 'vue-i18n'
 import { countTaskState } from '@/service/modules/projects-analysis'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
+import { reactive, ref } from 'vue'
 
 export function useTaskState() {
   const { t } = useI18n()
+  const taskVariables = reactive({
+    taskLoadingRef: ref(false)
+  })
 
   const getTaskState = (date: Array<any>) => {
+    if (taskVariables.taskLoadingRef) return
+    taskVariables.taskLoadingRef = true
     const { state } = useAsyncState(
       countTaskState({
         startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@@ -46,6 +52,7 @@ export function useTaskState() {
             name: t('home.' + toLower(item.taskStateType))
           }
         })
+        taskVariables.taskLoadingRef = false
 
         return { table, chart }
       }),
@@ -55,5 +62,5 @@ export function useTaskState() {
     return state
   }
 
-  return { getTaskState }
+  return { getTaskState, taskVariables }
 }

dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/index.tsx

@@ -77,7 +77,7 @@ const AuditLog = defineComponent({
     }
   },
   render() {
-    const { t, requestTableData, onUpdatePageSize, onSearch } = this
+    const { t, requestTableData, onUpdatePageSize, onSearch, loadingRef } = this
 
     return (
       <>
@@ -139,7 +139,7 @@ const AuditLog = defineComponent({
           </NSpace>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}

dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/use-table.ts

@@ -35,7 +35,8 @@ export function useTable() {
     operationType: ref(null),
     userName: ref(null),
     datePickerRange: ref(null),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -69,6 +70,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const data = {
       pageSize: params.pageSize,
       pageNo: params.pageNo,
@@ -90,6 +93,7 @@ export function useTable() {
             ...item
           }
         }) as any
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/projects/list/index.tsx

@@ -91,7 +91,7 @@ const list = defineComponent({
     }
   },
   render() {
-    const { t } = this
+    const { t, loadingRef } = this
     return (
       <div>
         <NCard>
@@ -124,6 +124,7 @@ const list = defineComponent({
           class={styles['table-card']}
         >
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}

dolphinscheduler-ui-next/src/views/projects/list/use-table.ts

@@ -218,10 +218,13 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryProjectListPaging(params).then((res: ProjectRes) => {
         variables.totalPage = res.totalPage
@@ -238,6 +241,7 @@ export function useTable() {
             ...item
           }
         }) as any
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx

@@ -36,6 +36,10 @@ const props = {
   chartData: {
     type: Array as PropType<Array<StateChartData>>,
     default: () => []
+  },
+  loadingRef: {
+    type: Boolean as PropType<boolean>,
+    default: false
   }
 }
 
@@ -51,9 +55,8 @@ const StateCard = defineComponent({
     return { onUpdateDatePickerValue }
   },
   render() {
-    const { title, date, tableData, chartData, onUpdateDatePickerValue } = this
+    const { title, date, tableData, chartData, onUpdateDatePickerValue, loadingRef } = this
     const { columnsRef } = useTable()
-
     return (
       <Card title={title}>
         {{
@@ -63,6 +66,7 @@ const StateCard = defineComponent({
               <NGi>
                 {tableData && (
                   <NDataTable
+                    loading={loadingRef}
                     columns={columnsRef}
                     data={tableData}
                     striped

dolphinscheduler-ui-next/src/views/projects/overview/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, ref, watch } from 'vue'
+import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
 import { NGrid, NGi } from 'naive-ui'
 import { startOfToday, getTime } from 'date-fns'
 import { useI18n } from 'vue-i18n'
@@ -31,8 +31,8 @@ const workflowMonitor = defineComponent({
     const dateRef = ref([getTime(startOfToday()), Date.now()])
     const taskStateRef = ref()
     const processStateRef = ref()
-    const { getTaskState } = useTaskState()
-    const { getProcessState } = useProcessState()
+    const { getTaskState, taskVariables } = useTaskState()
+    const { getProcessState, processVariables } = useProcessState()
 
     const handleTaskDate = (val: any) => {
       taskStateRef.value = getTaskState(val)
@@ -62,11 +62,13 @@ const workflowMonitor = defineComponent({
       handleTaskDate,
       handleProcessDate,
       taskStateRef,
-      processStateRef
+      processStateRef,
+      ...toRefs(taskVariables),
+      ...toRefs(processVariables),
     }
   },
   render() {
-    const { t, dateRef, handleTaskDate, handleProcessDate } = this
+    const { t, dateRef, handleTaskDate, handleProcessDate, taskLoadingRef, processLoadingRef  } = this
 
     return (
       <div>
@@ -78,6 +80,7 @@ const workflowMonitor = defineComponent({
               tableData={this.taskStateRef?.value.table}
               chartData={this.taskStateRef?.value.chart}
               onUpdateDatePickerValue={handleTaskDate}
+              loadingRef={taskLoadingRef}
             />
           </NGi>
           <NGi>
@@ -87,6 +90,7 @@ const workflowMonitor = defineComponent({
               tableData={this.processStateRef?.value.table}
               chartData={this.processStateRef?.value.chart}
               onUpdateDatePickerValue={handleProcessDate}
+              loadingRef={processLoadingRef}
             />
           </NGi>
         </NGrid>

dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts

@@ -23,12 +23,18 @@ import { toLower } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
+import { reactive, ref } from 'vue'
 
 export function useProcessState() {
   const route = useRoute()
   const { t } = useI18n()
+  const processVariables = reactive({
+    processLoadingRef: ref(false)
+  })
 
   const getProcessState = (date: Array<number>) => {
+    if (processVariables.processLoadingRef) return
+    processVariables.processLoadingRef = true
     const { state } = useAsyncState(
       countProcessInstanceState({
         startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@@ -48,6 +54,7 @@ export function useProcessState() {
             name: t('home.' + toLower(item.taskStateType))
           }
         })
+        processVariables.processLoadingRef = false
 
         return { table, chart }
       }),
@@ -57,5 +64,5 @@ export function useProcessState() {
     return state
   }
 
-  return { getProcessState }
+  return { getProcessState, processVariables }
 }

dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts

@@ -23,12 +23,18 @@ import { useI18n } from 'vue-i18n'
 import { countTaskState } from '@/service/modules/projects-analysis'
 import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
 import type { StateData } from './types'
+import { reactive, ref } from 'vue'
 
 export function useTaskState() {
   const route = useRoute()
   const { t } = useI18n()
+  const taskVariables = reactive({
+    taskLoadingRef: ref(false)
+  })
 
   const getTaskState = (date: Array<number>) => {
+    if (taskVariables.taskLoadingRef) return
+    taskVariables.taskLoadingRef = true
     const { state } = useAsyncState(
       countTaskState({
         startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@@ -48,6 +54,7 @@ export function useTaskState() {
             name: t('home.' + toLower(item.taskStateType))
           }
         })
+        taskVariables.taskLoadingRef = false
 
         return { table, chart }
       }),
@@ -57,5 +64,5 @@ export function useTaskState() {
     return state
   }
 
-  return { getTaskState }
+  return { getTaskState, taskVariables }
 }

dolphinscheduler-ui-next/src/views/projects/task/definition/components/use-version.ts

@@ -158,7 +158,8 @@ export function useVersion() {
     taskVersion: ref(null),
     taskCode: ref(null),
     refreshTaskDefinition: ref(false),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleSwitchVersion = (row: TaskDefinitionVersionItem) => {
@@ -182,6 +183,8 @@ export function useVersion() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryTaskVersions(
         { ...params },
@@ -194,6 +197,7 @@ export function useVersion() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/projects/task/definition/components/version-modal.tsx

@@ -77,7 +77,7 @@ const VersionModal = defineComponent({
     return { t, ...toRefs(variables), requestData, onConfirm }
   },
   render() {
-    const { t, requestData, onConfirm, show } = this
+    const { t, requestData, onConfirm, show, loadingRef } = this
 
     return (
       <Modal
@@ -86,7 +86,7 @@ const VersionModal = defineComponent({
         cancelShow={false}
         onConfirm={onConfirm}
       >
-        <NDataTable columns={this.columns} data={this.tableData} />
+        <NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
         <div class={styles.pagination}>
           <NPagination
             v-model:page={this.page}

dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx

@@ -114,7 +114,7 @@ const TaskDefinition = defineComponent({
     }
   },
   render() {
-    const { t, onSearch, requestData, onUpdatePageSize, onRefresh, onCreate } =
+    const { t, onSearch, requestData, onUpdatePageSize, onRefresh, onCreate, loadingRef } =
       this
 
     return (
@@ -163,6 +163,7 @@ const TaskDefinition = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}

dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts

@@ -266,7 +266,8 @@ export function useTable(onEdit: Function) {
     taskType: ref(null),
     showVersionModalRef: ref(false),
     showMoveModalRef: ref(false),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -285,6 +286,8 @@ export function useTable(onEdit: Function) {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryTaskDefinitionListPaging({ ...params }, { projectCode }).then(
         (res: TaskDefinitionRes) => {
@@ -302,6 +305,7 @@ export function useTable(onEdit: Function) {
             }
           }) as any
           variables.totalPage = res.totalPage
+          variables.loadingRef = false
         }
       ),
       {}

dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx

@@ -86,7 +86,7 @@ const TaskInstance = defineComponent({
     }
   },
   render() {
-    const { t, requestTableData, onUpdatePageSize, onSearch, onConfirmModal } =
+    const { t, requestTableData, onUpdatePageSize, onSearch, onConfirmModal, loadingRef } =
       this
 
     return (
@@ -183,6 +183,7 @@ const TaskInstance = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}

dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts

@@ -62,7 +62,8 @@ export function useTable() {
     processInstanceName: ref(null),
     totalPage: ref(1),
     showModalRef: ref(false),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -268,6 +269,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const data = {
       pageSize: params.pageSize,
       pageNo: params.pageNo,
@@ -306,6 +309,7 @@ export function useTable() {
             }
           }) as any
           variables.totalPage = res.totalPage
+          variables.loadingRef = false
         }
       ),
       {}

dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts

@@ -152,10 +152,13 @@ export function useTable(
     page: ref(1),
     totalPage: ref(1),
     pageSize: ref(10),
-    projectCode: ref(Number(router.currentRoute.value.params.projectCode))
+    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
+    loadingRef: ref(false)
   })
 
   const getTableData = (row: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     variables.row = row
     queryVersions(
       {
@@ -168,6 +171,7 @@ export function useTable(
       variables.tableData = res.totalList.map((item: any) => ({ ...item }))
 
       variables.totalPage = res.totalPage
+      variables.loadingRef = false
     })
   }
 

dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx

@@ -80,7 +80,7 @@ export default defineComponent({
 
   render() {
     const { t } = useI18n()
-    const { requestData } = this
+    const { requestData, loadingRef } = this
 
     return (
       <Modal
@@ -90,6 +90,7 @@ export default defineComponent({
         onConfirm={this.hideModal}
       >
         <NDataTable
+          loading={loadingRef}
           columns={this.columns}
           data={this.tableData}
           striped

dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx

@@ -112,6 +112,7 @@ export default defineComponent({
   },
   render() {
     const { t } = useI18n()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -150,6 +151,7 @@ export default defineComponent({
         </Card>
         <Card title={t('project.workflow.workflow_definition')}>
           <NDataTable
+            loading={loadingRef}
             rowKey={(row) => row.code}
             columns={this.columns}
             data={this.tableData}

dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx

@@ -73,6 +73,7 @@ export default defineComponent({
   render() {
     const { t } = useI18n()
     const router: Router = useRouter()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -87,6 +88,7 @@ export default defineComponent({
         </Card>
         <Card title={t('project.workflow.cron_manage')}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             striped

dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts

@@ -55,7 +55,8 @@ export function useTable() {
     pageSize: ref(10),
     searchVal: ref(),
     totalPage: ref(1),
-    showRef: ref(false)
+    showRef: ref(false),
+    loadingRef: ref(false)
   })
 
   const renderTime = (time: string, timeZone: string) => {
@@ -243,6 +244,8 @@ export function useTable() {
   }
 
   const getTableData = (params: ISearchParam) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const definitionCode = Number(
       router.currentRoute.value.params.definitionCode
     )
@@ -254,6 +257,7 @@ export function useTable() {
       variables.tableData = res.totalList.map((item: any) => {
         return { ...item }
       })
+      variables.loadingRef = false
     })
   }
 

dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts

@@ -60,7 +60,8 @@ export function useTable() {
     startShowRef: ref(false),
     timingShowRef: ref(false),
     versionShowRef: ref(false),
-    copyShowRef: ref(false)
+    copyShowRef: ref(false),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -337,12 +338,15 @@ export function useTable() {
   }
 
   const getTableData = (params: IDefinitionParam) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryListPaging({ ...params }, variables.projectCode).then((res: any) => {
         variables.totalPage = res.totalPage
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }
         })
+        variables.loadingRef = false
       }),
       { total: 0, table: [] }
     )

dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx

@@ -89,6 +89,7 @@ export default defineComponent({
   },
   render() {
     const { t } = useI18n()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -99,6 +100,7 @@ export default defineComponent({
         </Card>
         <Card title={t('project.workflow.workflow_instance')}>
           <NDataTable
+            loading={loadingRef}
             rowKey={(row) => row.id}
             columns={this.columns}
             data={this.tableData}

dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts

@@ -61,7 +61,8 @@ export function useTable() {
     stateType: ref(),
     startDate: ref(),
     endDate: ref(),
-    projectCode: ref(Number(router.currentRoute.value.params.projectCode))
+    projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -236,6 +237,8 @@ export function useTable() {
   }
 
   const getTableData = () => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const params = {
       pageNo: variables.page,
       pageSize: variables.pageSize,
@@ -252,6 +255,7 @@ export function useTable() {
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }
         })
+        variables.loadingRef = false
       }
     )
   }

dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx

@@ -136,7 +136,8 @@ const taskGroupOption = defineComponent({
       resetTableData,
       onUpdatePageSize,
       updateItem,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     const { columns } = useTable(updateItem, resetTableData)
@@ -176,6 +177,7 @@ const taskGroupOption = defineComponent({
         >
           <div>
             <NDataTable
+              loading={loadingRef}
               columns={columns}
               size={'small'}
               data={this.tableData}

dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts

@@ -118,10 +118,13 @@ export function useTable(
     page: ref(1),
     pageSize: ref(10),
     name: ref(null),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     Promise.all([queryTaskGroupListPaging(params), queryAllProjectList()]).then(
       (values: any[]) => {
         variables.totalPage = values[0].totalPage
@@ -149,6 +152,7 @@ export function useTable(
             }
           }
         )
+        variables.loadingRef = false
       }
     )
   }

dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx

@@ -150,7 +150,8 @@ const taskGroupQueue = defineComponent({
       onSearch,
       showModalRef,
       updateItemData,
-      taskGroupOptions
+      taskGroupOptions,
+      loadingRef
     } = this
 
     const { columns } = useTable(updatePriority, resetTableData)
@@ -192,6 +193,7 @@ const taskGroupQueue = defineComponent({
         >
           <div>
             <NDataTable
+              loading={loadingRef}
               columns={columns}
               size={'small'}
               data={this.tableData}

dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts

@@ -121,10 +121,13 @@ export function useTable(
     page: ref(1),
     pageSize: ref(10),
     groupId: ref(3),
-    totalPage: ref(1)
+    totalPage: ref(1),
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const taskGroupSearchParams = {
       pageNo: 1,
       pageSize: 2147483647
@@ -159,6 +162,7 @@ export function useTable(
           }
         }
       )
+      variables.loadingRef = false
     })
   }
 

dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx

@@ -88,6 +88,7 @@ export default defineComponent({
   },
   render() {
     const { t } = useI18n()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -123,6 +124,7 @@ export default defineComponent({
         </Card>
         <Card title={t('resource.function.udf_function')}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             striped

dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts

@@ -48,7 +48,8 @@ export function useTable() {
     pageSize: ref(10),
     searchVal: ref(),
     totalPage: ref(1),
-    showRef: ref(false)
+    showRef: ref(false),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -162,12 +163,15 @@ export function useTable() {
   }
 
   const getTableData = (params: IUdfFunctionParam) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryUdfFuncListPaging({ ...params }).then((res: any) => {
         variables.totalPage = res.totalPage
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }
         })
+        variables.loadingRef = false
       }),
       { total: 0, table: [] }
     )

dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx

@@ -109,6 +109,7 @@ export default defineComponent({
   },
   render() {
     const { t } = useI18n()
+    const { loadingRef } = this
 
     return (
       <div class={styles.content}>
@@ -155,6 +156,7 @@ export default defineComponent({
             default: () => (
               <div>
                 <NDataTable
+                  loading={loadingRef}
                   columns={this.columns}
                   data={this.tableData}
                   striped

dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts

@@ -66,7 +66,8 @@ export function useTable() {
     searchVal: ref(),
     totalPage: ref(1),
     folderShowRef: ref(false),
-    uploadShowRef: ref(false)
+    uploadShowRef: ref(false),
+    loadingRef: ref(false)
   })
 
   const createColumns = (variables: any) => {
@@ -224,6 +225,8 @@ export function useTable() {
   }
 
   const getTableData = (params: IUdfResourceParam) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryResourceListPaging({ ...params, type: 'UDF' }).then((res: any) => {
         const breadList =
@@ -237,6 +240,7 @@ export function useTable() {
         variables.tableData = res.totalList.map((item: any) => {
           return { ...item }
         })
+        variables.loadingRef = false
       }),
       { total: 0, table: [] }
     )

dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx

@@ -97,7 +97,8 @@ const alarmGroupManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -129,7 +130,7 @@ const alarmGroupManage = defineComponent({
           </div>
         </NCard>
         <Card class={styles['table-card']}>
-          <NDataTable columns={this.columns} data={this.tableData} />
+          <NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
           <div class={styles.pagination}>
             <NPagination
               v-model:page={this.page}

dolphinscheduler-ui-next/src/views/security/alarm-group-manage/use-table.ts

@@ -139,7 +139,8 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -156,6 +157,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryAlertGroupListPaging({ ...params }).then((res: AlarmGroupRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -172,6 +175,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx

@@ -97,7 +97,8 @@ const environmentManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -135,6 +136,7 @@ const environmentManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             row-class-name='items'
             columns={this.columns}
             data={this.tableData}

dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts

@@ -181,7 +181,8 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -198,6 +199,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryEnvironmentListPaging({ ...params }).then((res: EnvironmentRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -214,6 +217,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx

@@ -98,7 +98,8 @@ const k8sNamespaceManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -131,6 +132,7 @@ const k8sNamespaceManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             scrollX={this.tableWidth}

dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts

@@ -190,10 +190,13 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryNamespaceListPaging({ ...params }).then((res: NamespaceListRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -210,6 +213,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx

@@ -91,7 +91,7 @@ const tenementManage = defineComponent({
     }
   },
   render() {
-    const { t } = this
+    const { t, loadingRef } = this
     return (
       <div class={styles.container}>
         <NCard>
@@ -124,6 +124,7 @@ const tenementManage = defineComponent({
           class={styles['table-card']}
         >
           <NDataTable
+            loading={loadingRef}
             columns={this.columns}
             data={this.tableData}
             row-class-name='items'

dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts

@@ -172,10 +172,13 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryTenantListPaging({ ...params }).then((res: any) => {
         variables.tableData = res.totalList.map((item: any, unused: number) => {
@@ -184,9 +187,10 @@ export function useTable() {
           }
         })
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
-    )
+      )
 
     return state
   }

dolphinscheduler-ui-next/src/views/security/token-manage/index.tsx

@@ -97,7 +97,8 @@ const tokenManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -135,6 +136,7 @@ const tokenManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             row-class-name='items'
             columns={this.columns}
             data={this.tableData}

dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts

@@ -144,7 +144,8 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -161,6 +162,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryAccessTokenList({ ...params }).then((res: TokenRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -181,6 +184,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx

@@ -98,7 +98,8 @@ const workerGroupManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -136,6 +137,7 @@ const workerGroupManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             row-class-name='items'
             columns={this.columns}
             data={this.tableData}

dolphinscheduler-ui-next/src/views/security/worker-group-manage/use-table.ts

@@ -160,7 +160,8 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const handleDelete = (row: any) => {
@@ -177,6 +178,8 @@ export function useTable() {
   }
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryAllWorkerGroupsPaging({ ...params }).then((res: WorkerGroupRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -185,6 +188,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )

dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx

@@ -98,7 +98,8 @@ const yarnQueueManage = defineComponent({
       onCancelModal,
       onConfirmModal,
       handleModalChange,
-      onSearch
+      onSearch,
+      loadingRef
     } = this
 
     return (
@@ -136,6 +137,7 @@ const yarnQueueManage = defineComponent({
         </NCard>
         <Card class={styles['table-card']}>
           <NDataTable
+            loading={loadingRef}
             row-class-name='items'
             columns={this.columns}
             data={this.tableData}

dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts

@@ -98,10 +98,13 @@ export function useTable() {
     totalPage: ref(1),
     showModalRef: ref(false),
     statusRef: ref(0),
-    row: {}
+    row: {},
+    loadingRef: ref(false)
   })
 
   const getTableData = (params: any) => {
+    if (variables.loadingRef) return
+    variables.loadingRef = true
     const { state } = useAsyncState(
       queryQueueListPaging({ ...params }).then((res: QueueRes) => {
         variables.tableData = res.totalList.map((item, unused) => {
@@ -110,6 +113,7 @@ export function useTable() {
           }
         }) as any
         variables.totalPage = res.totalPage
+        variables.loadingRef = false
       }),
       {}
     )