添加用户查询接口调用

src/api/userSearch.ts

@@ -0,0 +1,10 @@
+import request from '../utils/request.ts'
+
+// 获取用户信息
+export const getUserInfoApi = (params:any) => {
+  return request({
+    url: '/adminApi/v1/teacher/teacher_page',
+    method: 'get',
+    params
+  })
+}

src/baseComponents/TableRowStatus.vue

@@ -0,0 +1,45 @@
+<template>
+  <span class="table_row_status">
+    <span :class=" statusNumToName(props.useStatus)?.themeClass "></span>
+    {{ statusNumToName(props.useStatus)?.title  }}
+  </span>
+</template>  
+
+<script setup lang="ts">
+interface statusItm {
+  statusFlag:Number | String,
+  title:String,
+  themeClass: 'not_included_icon' | 'no_release_icon' 
+              | 'normal_icon' | 'abnormal_icon' | 'audit_icon' 
+              | 'yes_release_icon' | 'right_icon' | 'ready_close_icon' | 'need_summary_icon'
+}
+
+const props = defineProps({
+    useStatus:{
+        required:true,
+        type:[String,Number,null],
+        default:null
+    },
+    statusMsg:{
+      required:true,
+      type:Array<statusItm>
+    }
+})
+    
+const statusNumToName=(useStatus)=>{
+  let result =  props?.statusMsg?.find(item=>item.statusFlag == useStatus)
+  if(result){
+    return result
+  }else{
+    return {
+      title:'',
+      themeClass:''
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/userSearch/formSearchGroup.ts

@@ -3,7 +3,7 @@ import { ref } from "vue";
 
 export const searchList = ref([
     {
-        key:'account',
+        key:'userAccount',
         type:'input',
         placeholder:'请输入账号',
         hidden:false,

src/views/userSearch/index.vue

@@ -14,7 +14,8 @@
             <div class="page_search">
                 <div class="search_content">
                     <div class="content_left">
-                        <FormSearchGroup :searchList="searchList"></FormSearchGroup>
+                        <FormSearchGroup :searchList="searchList" 
+                            @searchChange="HandleUserSearchChange"></FormSearchGroup>
                     </div>
                 </div>
             </div>
@@ -24,38 +25,107 @@
                 :pageSize="pageSize"
                 :totalNum="totalNum"
                 :tableColumns="tableColumns" 
-                :tableData="userTableData">
+                :tableData="userTableData"
+                @paginationChange="HandlePaginationChange"
+            >
+                <template #identity="{row}">
+                    {{ IdentityTypeNumToName(row.identity)?.label }}
+                </template>
+
+                <template #status="{row}">
+                    <TableRowStatus :statusMsg="userStatusMsg" :useStatus="row.status"></TableRowStatus>
+                </template>
             </Table>
         </div>
     </div>
 </template>  
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
+import { onMounted, ref } from 'vue';
 import FormSearchGroup from '@/baseComponents/FormSearchGroup.vue';
 import Table from '@/baseComponents/Table.vue';
 
-import {searchList} from './formSearchGroup'
+import TableRowStatus from '@/baseComponents/TableRowStatus.vue';
 
+import {getUserInfoApi} from '@/api/userSearch'
+import {searchList} from './formSearchGroup'
 import {tableColumns} from './table'
 
 const currentPage = ref(1)
 const totalNum = ref(0)
 const pageSize = ref(20)
 
-const userTableData = ref([
-    {
-        account: 'teacher01',
-        name: '白语忱',
-        userType: '教师',
-        school: '北京师范大学',
-        wechatName: '', // 图片中该列为空白
-        phone: '13459607083',
-        status: '启用',
+// 用户表格数据
+const userTableData = ref([])
+// 查询参数
+const searchParams = ref({})
+// 获取用户信息
+const GetUserInfo = async ()=>{
+    let params = {
+        pageNum:currentPage.value,
+        pageSize:pageSize.value,
+        userAccount:searchParams.value.userAccount,
+        phone:searchParams.value.phone,
     }
-])
+    let res = await getUserInfoApi(params)
+
+    if(res?.code == 200){
+       userTableData.value = res.data.records
+       totalNum.value = res.data.total
+    }
+}
+// 处理搜索项变化
+const HandleUserSearchChange = async (params,key)=>{
+    console.log('查询参数',params)
+    console.log('查询key',key)
+    searchParams.value = {...params}
+    await GetUserInfo()
+}
 
+// 处理分页变化
+const HandlePaginationChange = async (params)=>{
+    const {type,val} = params
+    if(type == 'currentPage'){
+        currentPage.value = val
+    }
+    await GetUserInfo()
+}
+
+
+// 用户身份类型状态转换
+const IdentityTypeNumToName = (type)=>{
+    switch(type){
+        case 0:
+            return {
+                label:'学校管理人员'
+            }
+        case 1:
+            return {
+                label:'教师'
+            }
+        case 2:
+            return {
+                label:'学生'
+            }
+    }
+}
+
+const userStatusMsg = ref([
+    {
+        statusFlag:0,
+        title:'禁用',
+        themeClass: 'abnormal_icon'
+    },
+    {
+        statusFlag:1,
+        title:'启用',
+        themeClass: 'normal_icon'
+    },
+])
+onMounted(async ()=>{
+    // 初次加载不查询
+    // await GetUserInfo()
+})
 </script>
 
 

src/views/userSearch/table.ts

@@ -3,7 +3,7 @@ import { ref } from "vue";
 
 export const tableColumns = ref([
     {
-        name: 'account',
+        name: 'userAccount',
         label: '账号',
         width: 120,
         fixed: '',
@@ -12,7 +12,7 @@ export const tableColumns = ref([
         custom: false,
     },
     {
-        name: 'name',
+        name: 'userName',
         label: '姓名',
         width: 100,
         fixed: '',
@@ -21,16 +21,16 @@ export const tableColumns = ref([
         custom: false,
     },
     {
-        name: 'userType',
+        name: 'identity',
         label: '用户类型',
         width: 120,
         fixed: '',
         align: 'center',
         minWidth: '',
-        custom: false,
+        custom: true,
     },
     {
-        name: 'school',
+        name: 'schoolName',
         label: '学校',
         width: 150, 
         fixed: '',
@@ -39,7 +39,7 @@ export const tableColumns = ref([
         custom: false,
     },
     {
-        name: 'wechatName',
+        name: 'wxName',
         label: '微信名',
         width: 120,
         fixed: '',
@@ -63,6 +63,6 @@ export const tableColumns = ref([
         fixed: '',
         align: 'center',
         minWidth: '',
-        custom: false,
+        custom: true,
     },
 ]);