From 97a0eede25d27c8b603099c7c1592c70e468c6c0 Mon Sep 17 00:00:00 2001
From: songjianet <1778651752@qq.com>
Date: Wed, 9 Mar 2022 22:31:38 +0800
Subject: [PATCH] [Fix][UI Next][V1.0.0-Alpha] Fix missing pagination in
 version info table. (#8785)

---
 .../definition/components/use-table.ts        | 20 ++++++++-----
 .../definition/components/version-modal.tsx   | 29 ++++++++++++++-----
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts
index c9e4dd6234..2f1b0d9953 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts
@@ -18,16 +18,16 @@
 import { h, ref, reactive, SetupContext } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { NSpace, NTooltip, NButton, NPopconfirm, NTag } from 'naive-ui'
 import {
   deleteVersion,
   queryVersions,
   switchVersion
 } from '@/service/modules/process-definition'
-import type { Router } from 'vue-router'
-import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 import { DeleteOutlined, ExclamationCircleOutlined } from '@vicons/antd'
+import { NSpace, NTooltip, NButton, NPopconfirm, NTag } from 'naive-ui'
 import styles from '../index.module.scss'
+import type { Router } from 'vue-router'
+import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
 
 export function useTable(
   ctx: SetupContext<('update:show' | 'update:row' | 'updateList')[]>
@@ -149,21 +149,25 @@ export function useTable(
     columns,
     row: {} as any,
     tableData: [],
+    page: ref(1),
+    totalPage: ref(1),
+    pageSize: ref(10),
     projectCode: ref(Number(router.currentRoute.value.params.projectCode))
   })
 
   const getTableData = (row: any) => {
     variables.row = row
-    const params = {
-      pageSize: 10,
-      pageNo: 1
-    }
     queryVersions(
-      { ...params },
+      {
+        pageSize: variables.pageSize,
+        pageNo: variables.page
+      },
       variables.projectCode,
       variables.row.code
     ).then((res: any) => {
       variables.tableData = res.totalList.map((item: any) => ({ ...item }))
+
+      variables.totalPage = res.totalPage
     })
   }
 
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx
index cf104a5d74..52d6192ea3 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx
@@ -17,13 +17,13 @@
 
 import { defineComponent, PropType, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { NDataTable } from 'naive-ui'
-import Modal from '@/components/modal'
 import { useForm } from './use-form'
 import { useModal } from './use-modal'
 import { useTable } from './use-table'
-import { IDefinitionData } from '../types'
+import { NDataTable, NPagination } from 'naive-ui'
+import Modal from '@/components/modal'
 import styles from '../index.module.scss'
+import type { IDefinitionData } from '../types'
 
 const props = {
   show: {
@@ -44,6 +44,13 @@ export default defineComponent({
     const { variables, getTableData } = useTable(ctx)
     const { importState } = useForm()
     const { handleImportDefinition } = useModal(importState, ctx)
+
+    const requestData = () => {
+      if (props.show && props.row?.code) {
+        getTableData(props.row)
+      }
+    }
+
     const hideModal = () => {
       ctx.emit('update:show')
     }
@@ -59,23 +66,21 @@ export default defineComponent({
 
     watch(
       () => props.show,
-      () => {
-        if (props.show && props.row?.code) {
-          getTableData(props.row)
-        }
-      }
+      () => requestData()
     )
 
     return {
       hideModal,
       handleImport,
       customRequest,
+      requestData,
       ...toRefs(variables)
     }
   },
 
   render() {
     const { t } = useI18n()
+    const { requestData } = this
 
     return (
       <Modal
@@ -91,6 +96,14 @@ export default defineComponent({
           size={'small'}
           class={styles.table}
         />
+        <div class={styles.pagination}>
+          <NPagination
+            v-model:page={this.page}
+            v-model:page-size={this.pageSize}
+            page-count={this.totalPage}
+            onUpdatePage={requestData}
+          />
+        </div>
       </Modal>
     )
   }