From 5bfa5e5ba965ddd43852b9551bb6ac42e774ab04 Mon Sep 17 00:00:00 2001
From: yuri0528 <72436066+yuri0528@users.noreply.github.com>
Date: Tue, 5 Sep 2023 11:44:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E6=BA=90=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=88=97=E8=A1=A8=E5=88=86=E9=A1=B5=20(#1218)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/src/http/dataSourceFiles.ts         |  6 ++-
 src/pages/src/http/types/dataSourceFiles.ts   | 10 ++++
 .../data-source/local-details/UserInfo.vue    | 41 +++++++++++++++-
 .../views/data-source/local-details/index.vue | 48 ++++++++++++++-----
 4 files changed, 90 insertions(+), 15 deletions(-)

diff --git a/src/pages/src/http/dataSourceFiles.ts b/src/pages/src/http/dataSourceFiles.ts
index 6e1ac87a3..803b108fc 100644
--- a/src/pages/src/http/dataSourceFiles.ts
+++ b/src/pages/src/http/dataSourceFiles.ts
@@ -1,5 +1,6 @@
 import http from './fetch';
 import type {
+  DataSourceUsersParams,
   DataSourceUsersResult,
   NewDataSourceUserParams,
   PutDataSourceUserParams,
@@ -8,7 +9,10 @@ import type {
 /**
  * 数据源用户信息列表
  */
-export const getDataSourceUsers = (id: string, username: string): Promise<DataSourceUsersResult> => http.get(`/api/v1/web/data-sources/${id}/users/?username=${username}`);
+export const getDataSourceUsers = (params: DataSourceUsersParams): Promise<DataSourceUsersResult> => {
+  const { id, username, page, pageSize } = params;
+  return http.get(`/api/v1/web/data-sources/${id}/users/?username=${username}&page=${page}&page_size=${pageSize}`);
+};
 
 /**
  * 新建数据源用户
diff --git a/src/pages/src/http/types/dataSourceFiles.ts b/src/pages/src/http/types/dataSourceFiles.ts
index 1690affac..1846f30cb 100644
--- a/src/pages/src/http/types/dataSourceFiles.ts
+++ b/src/pages/src/http/types/dataSourceFiles.ts
@@ -41,3 +41,13 @@ export interface PutDataSourceUserParams {
   department_ids?: [],
   leader_ids?: [],
 }
+
+/**
+ * 数据源用户信息列表参数
+ */
+export interface DataSourceUsersParams {
+  id: string,
+  username: string,
+  page: number,
+  pageSize: number,
+}
diff --git a/src/pages/src/views/data-source/local-details/UserInfo.vue b/src/pages/src/views/data-source/local-details/UserInfo.vue
index 8c9266846..5db9cc68c 100644
--- a/src/pages/src/views/data-source/local-details/UserInfo.vue
+++ b/src/pages/src/views/data-source/local-details/UserInfo.vue
@@ -22,7 +22,11 @@
       class="user-info-table"
       :data="users"
       :border="['outer']"
+      remote-pagination
+      :pagination="pagination"
       show-overflow-tooltip
+      @page-limit-change="pageLimitChange"
+      @page-value-change="pageCurrentChange"
     >
       <template #empty>
         <Empty
@@ -138,8 +142,12 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  pagination: {
+    type: Object,
+    default: () => ({}),
+  },
 });
-const emit = defineEmits(['updateUsers']);
+const emit = defineEmits(['updateUsers', 'updatePageLimit', 'updatePageCurrent']);
 const editLeaveBefore = inject('editLeaveBefore');
 const searchVal = ref('');
 const detailsConfig = reactive({
@@ -251,6 +259,13 @@ const handleClear = () => {
   searchVal.value = '';
   emit('updateUsers', searchVal.value);
 };
+
+const pageLimitChange = (limit) => {
+  emit('updatePageLimit', limit);
+};
+const pageCurrentChange = (current) => {
+  emit('updatePageCurrent', current);
+};
 </script>
 
 <style lang="less" scoped>
@@ -269,6 +284,30 @@ const handleClear = () => {
       width: 320px;
     }
   }
+
+  :deep(.user-info-table) {
+    .bk-table-head {
+      table thead th {
+        text-align: center;
+      }
+
+      .table-head-settings {
+        border-right: none;
+      }
+    }
+
+    .bk-table-footer {
+      padding: 0 15px;
+      background: #fff;
+    }
+
+    .account-status-icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+  }
 }
 
 .details-edit-wrapper {
diff --git a/src/pages/src/views/data-source/local-details/index.vue b/src/pages/src/views/data-source/local-details/index.vue
index 1bbf9cb44..756345cf2 100644
--- a/src/pages/src/views/data-source/local-details/index.vue
+++ b/src/pages/src/views/data-source/local-details/index.vue
@@ -29,7 +29,10 @@
           :is-data-empty="state.isDataEmpty"
           :is-empty-search="state.isEmptySearch"
           :is-data-error="state.isDataError"
-          @updateUsers="updateUsers" />
+          :pagination="state.pagination"
+          @updateUsers="updateUsers"
+          @updatePageLimit="updatePageLimit"
+          @updatePageCurrent="updatePageCurrent" />
         <PswInfo v-else />
       </bk-tab-panel>
     </bk-tab>
@@ -73,20 +76,32 @@ const state = reactive({
   isDataError: false,
   // 表格请求结果为空
   isDataEmpty: false,
+  pagination: {
+    current: 1,
+    count: 0,
+    limit: 10,
+  },
 });
 
-const getUsers = async (value?: string) => {
+const params = reactive({
+  id: currentId.value,
+  username: '',
+  page: 1,
+  pageSize: 10,
+});
+
+const getUsers = async () => {
   try {
     state.isLoading = true;
     state.isDataEmpty = false;
     state.isEmptySearch = false;
     state.isDataError = false;
-    value = value ? value : '';
-    const res = await getDataSourceUsers(currentId.value, value);
-    if (res.data.length === 0) {
-      value === '' ? state.isDataEmpty = true : state.isEmptySearch = true;
+    const res = await getDataSourceUsers(params);
+    if (res.data.count === 0) {
+      params.username === '' ? state.isDataEmpty = true : state.isEmptySearch = true;
     }
-    state.users = res.data;
+    state.pagination.count = res.data.count;
+    state.users = res.data.results;
     state.isLoading = false;
   } catch (error) {
     state.isDataError = true;
@@ -97,7 +112,19 @@ const getUsers = async (value?: string) => {
 getUsers();
 
 const updateUsers = (value: string) => {
-  getUsers(value);
+  params.username = value;
+  getUsers();
+};
+
+const updatePageLimit = (limit) => {
+  state.pagination.limit = limit;
+  params.pageSize = limit;
+  getUsers();
+};
+const updatePageCurrent = (current) => {
+  state.pagination.current = current;
+  params.page = current;
+  getUsers();
 };
 </script>
 
@@ -106,8 +133,3 @@ const updateUsers = (value: string) => {
   box-shadow: none;
 }
 </style>
-<style lang="less">
-.congfig {
-  display: flex;
-}
-</style>