list page

src/http/index.ts

@@ -7,7 +7,7 @@ const config = {
   timeout: 60000,
 }
 
-const invalidCode = 1000
+const invalidCode = 11
 
 class Request {
   private instance: AxiosInstance

src/views/account/list/index.tsx

@@ -1,19 +1,57 @@
-import React from "react";
+import React, { useEffect } from "react";
 import http from '@src/http';
-import { Button, Table, Input } from "antd";
+import { Button, Table, Input, message, ConfigProvider } from "antd";
+import zhCN from 'antd/locale/zh_CN';
 import { UserAddOutlined } from '@ant-design/icons'
 import { wechatUserInfoPage } from '@src/http/api';
-import type { TableProps } from 'antd';
+import type { TableProps, TablePaginationConfig } from 'antd';
 
 interface DataType {
-  key: string;
+  id: number;
+  uuid: string;
+  vid: string;
   name: string;
-  ghId: string;
+  avatar: string;
+  phone: string;
+  corpId: number;
+  corpName: string;
+  unionId: string;
+  loginStatus: number;
+}
+
+interface PaginationParams {
+  currentPage: number;
+  pageSize: number;
+  phone?: string;
+}
+
+interface WechatUserResponse {
+  currentPage: number;
+  totalSize: number;
+  pageSize: number;
+  objs: DataType[];
+  totalPage: number;
+  nextPage: number;
+  prePage: number;
+  curPageFirstRecNum: number;
+  curPageLastRecNum: number;
+  offset: number;
 }
 
 const Gzh: React.FC = () => {
-	const [loading, setLoading] = React.useState(false)
-	const [tableData, setTableData] = React.useState<DataType[]>([])
+  const [loading, setLoading] = React.useState(false)
+  const [tableData, setTableData] = React.useState<DataType[]>([])
+  const [pagination, setPagination] = React.useState<{
+    current: number;
+    pageSize: number;
+    total: number;
+  }>({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  })
+  const [searchPhone, setSearchPhone] = React.useState<string>('')
+
   const columns: TableProps<DataType>['columns'] = [
     {
       title: '企微实名',
@@ -24,50 +62,126 @@ const Gzh: React.FC = () => {
       title: '企微主体',
       dataIndex: 'corpName',
       key: 'corpName',
-		},
-		{
-			title: '手机号',
-			dataIndex: 'phone',
-			key: 'phone',
-		},
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+    },
     {
       title: '账号状态',
       dataIndex: 'loginStatus',
       key: 'loginStatus',
+      render: (status) => {
+        const statusMap: Record<number, string> = {
+          0: '离线',
+          1: '在线',
+          2: '注销'
+        }
+        return <span style={{
+          color: status === 1 ? '#52c41a' : status === 0 ? '#f5222d' : '#999999'
+        }}>{statusMap[status]}</span>
+      }
     },
     {
-			title: '操作',
+      title: '操作',
       key: 'action',
-      render: () => (
-				<>
-					<Button type="link" onClick={() => {}}>编辑</Button>
+      render: (_, Record) => (
+        <>
+          {Record.loginStatus === 0 && <a>登录</a>}
+          {Record.loginStatus === 1 && <><a>登出</a>&emsp;<a>配置</a></>}
         </>
       ),
     }
   ]
 
+  const fetchUserList = async (params: PaginationParams) => {
+    try {
+      setLoading(true)
+      const res = await http.get<WechatUserResponse>(wechatUserInfoPage, { params })
+      if (res.success) {
+        setTableData(res.data.objs || [])
+        setPagination({
+          current: res.data.currentPage,
+          pageSize: res.data.pageSize,
+          total: res.data.totalSize
+        })
+      } else {
+        message.error(res.msg || '获取用户列表失败')
+      }
+    } catch {
+      message.error('获取用户列表失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleTableChange = (pagination: TablePaginationConfig) => {
+    fetchUserList({
+      currentPage: pagination.current as number,
+      pageSize: pagination.pageSize as number,
+      phone: searchPhone
+    })
+  }
+
+  const handleSearch = () => {
+    setPagination(prev => ({ ...prev, current: 1 }))
+    fetchUserList({
+      currentPage: 1,
+      pageSize: pagination.pageSize,
+      phone: searchPhone
+    })
+  }
+
+  useEffect(() => {
+    fetchUserList({
+      currentPage: pagination.current,
+      pageSize: pagination.pageSize
+    })
+  }, [])
+
   return (
-		<>
-			<div className={"text-[20px] font-medium mb-[10px]"}>账号管理</div>
+    <>
+      <div className={"text-[20px] font-medium mb-[10px]"}>
+        账号管理
+      </div>
       <div className={"flex mb-[10px]"}>
-				<div className={"flex-1 flex gap-[10px]"}>
-					<Input
-						className={"!w-[200px]"}
-						allowClear
-						placeholder="请输入手机号"
-					/>
-					<Button type="primary">搜索</Button>
-				</div>
+        <div className={"flex-1 flex gap-[10px]"}>
+          <Input
+            className={"!w-[200px]"}
+            allowClear
+            placeholder="请输入手机号"
+            value={searchPhone}
+            onChange={(e) => {
+              const value = e.target.value.replace(/[^\d]/g, '');
+              setSearchPhone(value);
+            }}
+            onPressEnter={handleSearch}
+            maxLength={11}
+          />
+          <Button type="primary" onClick={handleSearch}>搜索</Button>
+        </div>
         <div>
           <Button type="primary" className={"mr-[10px]"}><UserAddOutlined />添加账号</Button>
         </div>
       </div>
-			<Table 
-        columns={columns}
-        dataSource={tableData}
-        rowKey="uuid"
-        loading={loading}
-      />
+      <ConfigProvider locale={zhCN}>
+        <Table 
+          columns={columns}
+          dataSource={tableData}
+          rowKey="uuid"
+          loading={loading}
+          pagination={{
+            current: pagination.current,
+            pageSize: pagination.pageSize,
+            total: pagination.total,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total) => `共 ${total} 条记录`
+          }}
+          onChange={handleTableChange}
+        />
+      </ConfigProvider>
     </>
   )
 }