From b26a6ab6b9dc5f8ec87be5726b7a258b339ede64 Mon Sep 17 00:00:00 2001
From: liulei <laysheng@outlook.com>
Date: Sat, 23 Apr 2022 15:08:21 +0800
Subject: [PATCH] render allTransactions from dtm svr api

---
 dashboard/.env.development                    |   2 +
 dashboard/package.json                        |   3 +-
 dashboard/src/assets/css/index.css            |   2 +-
 dashboard/src/components.d.ts                 |   1 -
 dashboard/src/layout/aside.vue                |   8 +-
 dashboard/src/type/index.d.ts                 |   5 +
 dashboard/src/utils/request.ts                |   8 +
 .../GlobalTransactions/AllTransactions.vue    | 162 ++++++++----------
 dashboard/yarn.lock                           |   5 +
 9 files changed, 102 insertions(+), 94 deletions(-)
 create mode 100644 dashboard/.env.development
 create mode 100644 dashboard/src/utils/request.ts

diff --git a/dashboard/.env.development b/dashboard/.env.development
new file mode 100644
index 0000000..88c4eb8
--- /dev/null
+++ b/dashboard/.env.development
@@ -0,0 +1,2 @@
+VITE_APP_API_BASE_URL="/api"
+VITE_PROXY=[["/api", "http://localhost:36789"]]
diff --git a/dashboard/package.json b/dashboard/package.json
index 465f06f..8be934b 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "ant-design-vue": "^3.1.1",
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-request": "^1.2.4"
   },
   "devDependencies": {
     "@types/node": "^17.0.23",
diff --git a/dashboard/src/assets/css/index.css b/dashboard/src/assets/css/index.css
index b5c61c9..dc83d5c 100644
--- a/dashboard/src/assets/css/index.css
+++ b/dashboard/src/assets/css/index.css
@@ -1,3 +1,3 @@
-@tailwind base;
+/* @tailwind base; */
 @tailwind components;
 @tailwind utilities;
diff --git a/dashboard/src/components.d.ts b/dashboard/src/components.d.ts
index c2fdf48..a9be5ca 100644
--- a/dashboard/src/components.d.ts
+++ b/dashboard/src/components.d.ts
@@ -7,7 +7,6 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
-    AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
diff --git a/dashboard/src/layout/aside.vue b/dashboard/src/layout/aside.vue
index e5ef9a1..050369a 100644
--- a/dashboard/src/layout/aside.vue
+++ b/dashboard/src/layout/aside.vue
@@ -1,5 +1,5 @@
 <template>
-    <a-layout style="height: 730px">
+    <a-layout>
         <a-layout-sider width="200" style="background: #fff">
             <Sidebar />
         </a-layout-sider>
@@ -61,3 +61,9 @@ const page = computed(() => {
     return page
 })
 </script>
+
+<style lang="postcss" scoped>
+.ant-layout.ant-layout-has-sider {
+    min-height: calc(100vh - 64px);
+}
+</style>
diff --git a/dashboard/src/type/index.d.ts b/dashboard/src/type/index.d.ts
index c53db4b..8ac4521 100644
--- a/dashboard/src/type/index.d.ts
+++ b/dashboard/src/type/index.d.ts
@@ -8,4 +8,9 @@ declare global {
     VITE_PORT: number
     VITE_PROXY: string
   }
+  interface ITable<T = any> {
+      data: Array<T>
+      next_position: number,
+      size: number
+  }
 }
diff --git a/dashboard/src/utils/request.ts b/dashboard/src/utils/request.ts
new file mode 100644
index 0000000..09b32db
--- /dev/null
+++ b/dashboard/src/utils/request.ts
@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const request = axios.create({
+    baseURL: import.meta.env.VITE_APP_API_BASE_URL as string | undefined,
+    timeout: 60000
+})
+
+export default request
diff --git a/dashboard/src/views/Dashboard/GlobalTransactions/AllTransactions.vue b/dashboard/src/views/Dashboard/GlobalTransactions/AllTransactions.vue
index 3bd7bec..ce9f053 100644
--- a/dashboard/src/views/Dashboard/GlobalTransactions/AllTransactions.vue
+++ b/dashboard/src/views/Dashboard/GlobalTransactions/AllTransactions.vue
@@ -1,24 +1,27 @@
 <template>
-    <div class="w-72">
-        <a-input-search v-model:value="value" placeholder="please input gid to search..." enter-button />
-    </div>
-    <a-table :columns="columns" :data-source="data" class="mt-4">
-        <template #bodyCell="{column, record}">
-            <template v-if="column.key === 'status'">
-                <span>
-                    <a-tag :key="record.status" :color="record.status === 'succeed' ? 'green' : 'volcano'">{{ record.status.toUpperCase() }}</a-tag>
-                </span>
-            </template>
-            <template v-else-if="column.key === 'action'">
-                <span>
-                    <a class="mr-2 font-medium">Detail</a>
-                    <a class="text-red-400 font-medium">Stop</a>
-                </span>
+    <div>
+        <a-table :columns="columns" :data-source="dataSource" :pagination="false" :loading="loading" @change="handleTableChange">
+            <template #bodyCell="{column, record}">
+                <template v-if="column.key === 'status'">
+                    <span>
+                        <a-tag :key="record.status" :color="record.status === 'succeed' ? 'green' : 'volcano'">{{ record.status.toUpperCase() }}</a-tag>
+                    </span>
+                </template>
+                <template v-else-if="column.key === 'action'">
+                    <span>
+                        <a class="mr-2 font-medium">Detail</a>
+                        <a class="text-red-400 font-medium">Stop</a>
+                    </span>
+                </template>
             </template>
-        </template>
-    </a-table>
+        </a-table>
+    </div>
 </template>
 <script setup lang="ts">
+import { IListAllTransactions, listAllTransactions } from '/@/api/dtm'
+import { ref, onMounted, reactive, computed } from 'vue-demi'
+import { usePagination } from 'vue-request'
+import { TableProps } from 'ant-design-vue/es/vc-table/Table'
 const columns = [
     {
         title: 'GID',
@@ -45,78 +48,57 @@ const columns = [
         key: 'action'
     }
 ]
-const data = [
-    {
-        key: '1',
-        create_time: "2022-04-17T08:56:05+08:00",
-        update_time: "2022-04-17T08:56:05+08:00",
-        gid: "ZmZPmoqvAhnisrntkELtPb",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '2',
-        create_time: "2022-04-17T08:24:30+08:00",
-        update_time: "2022-04-17T08:24:30+08:00",
-        gid: "UHTBFL5ukZnrMPwiRQXiNJ",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '3',
-        create_time: "2022-04-17T07:28:30+08:00",
-        update_time: "2022-04-17T07:28:30+08:00",
-        gid: "2qh5JCfvCaKo3PSxAxrxDn",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '4',
-        create_time: "2022-04-17T07:28:26+08:00",
-        update_time: "2022-04-17T07:28:26+08:00",
-        gid: "bLvTNErhXJw9YCpQSqZuSH",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '5',
-        create_time: "2022-04-17T07:21:33+08:00",
-        update_time: "2022-04-17T07:21:33+08:00",
-        gid: "F487jVfVdByDCZMWnBteBE",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '6',
-        create_time: "2022-04-17T07:18:28+08:00",
-        update_time: "2022-04-17T07:21:29+08:00",
-        gid: "M5yPrCJDYULQg6jS5rqw8C",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '7',
-        create_time: "2022-04-16T11:30:35+08:00",
-        update_time: "2022-04-16T11:30:35+08:00",
-        gid: "a2JEjm8qMCbiersnaQzTHG",
-        trans_type: "msg",
-        status: "succeed",
-        protocol: "grpc",
-    },
-    {
-        key: '8',
-        create_time: "2022-03-19T21:49:13+08:00",
-        update_time: "2022-03-19T21:49:13+08:00",
-        gid: "4HVsaRkKpWfGsiL6TWso84",
-        trans_type: "tcc",
-        status: "succeed",
-        protocol: "grpc",
+
+type Data = {
+    transactions: {
+        gid: string
+        trans_type: string
+        status: string
+        protocol: string
+        create_time: string
+    }[]
+    next_position: string
+}
+
+const queryData = (params: IListAllTransactions) => {
+    return listAllTransactions<Data>(params)
+}
+
+const { data, run, current, loading, pageSize } = usePagination(queryData, {
+    defaultParams: [
+        {
+            limit: 10,
+        }
+    ],
+    pagination: {
+        pageSizeKey: 'limit'
     }
-]
+})
+
+const dataSource = computed(() => data.value?.data.transactions || [])
+const pagination = computed(() => ({
+    current: 1,
+    pageSize: pageSize.value,
+    showSizeChanger: true,
+
+}))
+
+const handleTableChange = (pag: {current:number, pageSize: number}) => {
+    if (pag.pageSize !== pageSize.value) {
+        run({
+            limit: pag.pageSize
+        })
+    } else {
+        run({
+            position: data.value?.data.next_position,
+            limit: pag.pageSize
+        })
+    }
+}
 </script>
+
+<style lang="postcss" scoped>
+::v-deep .ant-pagination-item {
+    display: none;
+}
+</style>
diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
index d6ce231..76a90b5 100644
--- a/dashboard/yarn.lock
+++ b/dashboard/yarn.lock
@@ -3270,6 +3270,11 @@ vue-eslint-parser@^8.0.1:
     lodash "^4.17.21"
     semver "^7.3.5"
 
+vue-request@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/vue-request/-/vue-request-1.2.4.tgz#02ab150cc2903605464e6efcb501c480d9dd536f"
+  integrity sha512-i+i+6Fog6F8EtYUeueumzKS9Sg06CvjsMXH8TK0YSBxY4sDxIJ+snTEke5rLqiV9d19DTuJOxPQFjTBUpsMtXA==
+
 vue-router@^4.0.13:
   version "4.0.13"
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.13.tgz"