From d98ee2bf23f3f0d1ab2eba1fb0d6cd615b147a5f Mon Sep 17 00:00:00 2001
From: zhanghan2021 <zhanghan@kylinos.cn>
Date: Tue, 14 Nov 2023 19:08:08 +0800
Subject: [PATCH] add serch user interface data

---
 .../src/components/UserManager/UserTable.vue  | 94 +++----------------
 frontend/src/request/user.ts                  |  3 +-
 frontend/src/router/index.ts                  | 42 ++++-----
 frontend/src/views/UserManager/UserManage.vue | 36 ++++++-
 frontend/tsconfig.app.json                    |  2 +-
 5 files changed, 67 insertions(+), 110 deletions(-)

diff --git a/frontend/src/components/UserManager/UserTable.vue b/frontend/src/components/UserManager/UserTable.vue
index 79ef7d6..efaa874 100644
--- a/frontend/src/components/UserManager/UserTable.vue
+++ b/frontend/src/components/UserManager/UserTable.vue
@@ -3,7 +3,7 @@
         <div class="header">
             <div class="header_content">
                 <div class="table_search">
-                    <slot name="table_search"></slot>
+                    <slot name="table_search" :searchData="searchData"></slot>
                 </div>
                 <div class="table_action">
                     <slot name="table_action"></slot>
@@ -53,58 +53,22 @@ const pageSearch = ref({
     size: 10
 });
 
-const props = defineProps({
-    isLoadTable: {
-        type: Boolean,
-        default: function () {
-            return true;
-        }
-    },
-    isSource: {
-        type: Number,
-        default: function () {
-            return 1;
-        }
-    },
-    getData: {
-        type: Function,
-    },
-    getSourceData: {
-        type: Function,
-    },
-    showSelect: {
-        type: Boolean,
-        default: function () {
-            return true;
-        }
-    },
-    searchData: {
-        type: Object,
-        default: function () {
-            return {
-            };
-        }
-    },
-    treeNodes: {
-        type: Array,
-        default: function () {
-            return []
-        }
-    },
-    isRowClick: {
-        type: Boolean,
-        default: function () {
-            return false
-        }
-    }
-})
-
+const props = defineProps([
+    'isLoadTable',
+    'isSource',
+    'getData',
+    'getSourceData',
+    'showSelect',
+    'searchData',
+    'treeNodes',
+    'isRowClick'
+]);
 const loadData = async (pageParams: any) => {
     tableData.value = [];
     loading.value = true;
 
     try {
-        const response = await props.getData({ ...pageParams, ...props.searchData.value });
+        const response = await props.getData({ ...pageParams, ...props.searchData });
         const res = response;
         if (res.code === 200) {
             loading.value = false;
@@ -145,29 +109,6 @@ const handleSetTableData = (datas: any) => {
     tableData.value = datas;
 };
 
-const handleSearch = () => {
-    checked.value = false;
-    multipleTableRef.value.clearSelection();
-    selectRow.ids = [];
-    selectRow.rows = [];
-    loadData({ ...pageSearch.value, page: 1 });
-};
-
-const changeExpandRow = (row: any) => {
-    multipleTableRef.value.toggleRowExpansion(row);
-};
-
-const expandSelect = (row: any, expandedRows: any) => {
-    expands.value = [];
-    if (expandedRows.length > 0) {
-        row ? expands.value.push(row.name) : '';
-    }
-};
-
-const handleLoadSearch = (data: any) => {
-    tableData.value = data;
-};
-
 const handleSizeChange = (newSize: number) => {
     pageSearch.value.size = newSize;
     loadData({ ...pageSearch.value });
@@ -202,13 +143,6 @@ const handleSelectAll = (selection: any) => {
     }
 };
 
-const refresh = () => {
-    checked.value = false;
-    multipleTableRef.value.clearSelection();
-    selectRow.ids = [];
-    selectRow.rows = [];
-    loadData({ ...pageSearch.value });
-};
 
 const tableRowClassName = ({ row, rowIndex }: any) => {
     // rowIndex备用，隔行显示颜色不同的时候用
@@ -217,10 +151,6 @@ const tableRowClassName = ({ row, rowIndex }: any) => {
     }
 };
 
-const handleClose = () => {
-    display.value = false;
-};
-
 const checkSelectTable = () => {
     return props.treeNodes.length === 0;
 };
diff --git a/frontend/src/request/user.ts b/frontend/src/request/user.ts
index bdcc91c..7a64a91 100644
--- a/frontend/src/request/user.ts
+++ b/frontend/src/request/user.ts
@@ -16,10 +16,11 @@ export function getUsers(data: any) {
   });
 }
 // 按邮箱查找用户
-export function searchUser(data) {
+export function searchUser(data: any, paged: any) {
   return request({
     url: '/user/userSearch',
     method: 'post',
+    params: paged,
     data,
   });
 }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index febd7e7..7d2c9d3 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -9,26 +9,27 @@ const commonRoutes = [
     path: '/login',
     name: 'login',
     component: () => import('@/views/Login/Login.vue'),
-  }
-]
+  },
+];
 
 let sidebarRoutes = [
   {
     path: '/home',
     name: 'home',
-    redirect: "/overview",
-    component: () => import("../views/Home/Home.vue"),
+    redirect: '/overview',
+    component: () => import('@/views/Home/Home.vue'),
     children: [
       {
         path: '/overview',
         name: 'overview',
-        component: () => import('../views/Overview/Overview.vue'),
+        component: () => import('@/views/Overview/Overview.vue'),
         meta: {
-          title: 'overview', header_title: "概览", panel: "overview", icon: 'HomeFilled',
-          breadcrumb: [
-            { name: '概览' },
-          ]
-        }
+          title: 'overview',
+          header_title: '概览',
+          panel: 'overview',
+          icon: 'HomeFilled',
+          breadcrumb: [{ name: '概览' }],
+        },
       },
       {
         path: '/usermanager',
@@ -41,10 +42,10 @@ let sidebarRoutes = [
           icon: 'el-icon-user-solid',
           breadcrumb: [{ name: '用户管理' }],
         },
-      }
-    ]
-  }
-]
+      },
+    ],
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -53,11 +54,10 @@ const router = createRouter({
 
 export default router;
 
-import { routerStore, type Menu } from "@/stores/router";
+import { routerStore, type Menu } from '@/stores/router';
 export function updateSidebarItems() {
-  let menus = []
+  let menus = [];
   for (let route of sidebarRoutes[0].children) {
-
     // 迭代 /home 下的所有组件
     let obj: Menu = {
       path: route.path,
@@ -66,10 +66,10 @@ export function updateSidebarItems() {
       panel: route.meta.panel,
       icon: route.meta.icon,
       subMenus: null,
-    }
+    };
 
-    menus.push(obj)
+    menus.push(obj);
   }
 
-  routerStore().menus = menus
-}
\ No newline at end of file
+  routerStore().menus = menus;
+}
diff --git a/frontend/src/views/UserManager/UserManage.vue b/frontend/src/views/UserManager/UserManage.vue
index 64184ae..50f72e3 100644
--- a/frontend/src/views/UserManager/UserManage.vue
+++ b/frontend/src/views/UserManager/UserManage.vue
@@ -4,8 +4,8 @@
             <template v-slot:table_search>
                 <el-input placeholder="请输入邮箱名进行搜索..." prefix-icon="el-icon-search" clearable
                     style="width: 280px;margin-right: 10px;" v-model="emailInput"
-                    @keydown.enter.native="searchUser"></el-input>
-                <el-button icon="el-icon-search" @click="searchUser">
+                    @keydown.enter.native="getSearchUser"></el-input>
+                <el-button icon="el-icon-search" @click="getSearchUser">
                     搜索
                 </el-button>
             </template>
@@ -30,13 +30,19 @@
 <script lang='ts' setup>
 import Table from '@/components/UserManager/UserTable.vue'
 import { getUsers, searchUser } from '@/request/user'
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 const loading = ref(false)
 const display = ref(false)
 const title = ref('')
 const rowData = ref()
 const type = ref('')
 const emailInput = ref('')
+const total = ref(0);
+const tableData = ref([]);
+const pageSearch = reactive({
+    page: 1,
+    size: 10
+});
 
 const handleEdit = (row: any) => {
     rowData.value = row;
@@ -44,9 +50,29 @@ const handleEdit = (row: any) => {
     title.value = "编辑用户";
     type.value = "update";
 }
+const getSearchUser = () => {
+    loading.value = true;
+    const searchData = { 'email': emailInput.value };
+    const pagedData = { ...pageSearch };
 
-searchUser({ 'email': emailInput.value }).then((res) => {
-})
+    searchUser(searchData, pagedData)
+        .then((res) => {
+            console.log(res)
+            if (res.data.code === 200) {
+                loading.value = false;
+                total.value = res.data.total;
+                pageSearch.page = res.data.page;
+                loading.value = false;
+                tableData.value = res.data;
+            } else {
+                loading.value = false;
+            }
+        })
+        .catch((error) => {
+            loading.value = false;
+            console.error('Error searching user:', error);
+        });
+};
 
 </script>
 
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index 3d9395f..6629684 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -1,7 +1,7 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*.ts", "src/**/*.vue"],
-  "exclude": ["src/**/__tests__/*"],
+  "exclude": ["src/**/__tests__/*", "node_modules"],
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
-- 
Gitee