功能：完成用户过滤功能

src/pages/Article/index.tsx

@@ -27,10 +27,8 @@ const ArticlePage = () => {
 
     const getArticleList = async () => {
         setLoading(true);
-
         const { data } = await getArticleListAPI();
         setArticleList(data as Article[]);
-
         setLoading(false);
     };
 

src/pages/Create/index.tsx

@@ -53,8 +53,6 @@ const CreatePage = () => {
 
   // 保存文章
   const saveBtn = () => {
-    console.log(content, 333);
-
     if (content.trim().length >= 1) {
       // 将文章内容持久化存储到本地
       localStorage.setItem('article_content', content)

src/pages/User/index.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
-import { Table, Button, Tag, notification, Card, Popconfirm, Form, Input, Select, Avatar, Drawer } from 'antd';
+import { Table, Button, Tag, notification, Card, Popconfirm, Form, Input, Select, Avatar, Drawer, DatePicker } from 'antd';
 
 import { getUserDataAPI, getUserListAPI, delUserDataAPI, addUserDataAPI, editUserDataAPI } from '@/api/User';
 import { getRoleListAPI } from '@/api/Role'
 
-import type { User } from '@/types/app/user';
+import type { FilterForm, FilterUser, User } from '@/types/app/user';
 import { Role } from '@/types/app/role';
 
 import { titleSty } from '@/styles/sty';
@@ -17,13 +17,10 @@ const UserPage = () => {
 
     const [userList, setUserList] = useState<User[]>([]);
     const [roleList, setRoleList] = useState<Role[]>([]);
-
+    const [user, setUser] = useState<User>({} as User)
     const [drawerVisible, setDrawerVisible] = useState<boolean>(false);
 
-    const [user, setUser] = useState<User>({} as User)
-
-    const [filterForm] = Form.useForm();
-    const [userForm] = Form.useForm();
+    const { RangePicker } = DatePicker;
 
     const columns = [
         {
@@ -105,6 +102,8 @@ const UserPage = () => {
         },
     ];
 
+    const [userForm] = Form.useForm();
+
     const getUserList = async () => {
         setLoading(true);
         const { data } = await getUserListAPI();
@@ -122,20 +121,6 @@ const UserPage = () => {
         getRoleList()
     }, []);
 
-    const onSubmit = async () => {
-        userForm.validateFields().then(async (values: User) => {
-            if (user.id) {
-                await editUserDataAPI({ ...values, ...user, roleId: values.role });
-                notification.success({ message: '🎉 编辑用户成功' });
-            } else {
-                await addUserDataAPI({ ...values, roleId: values.role, createTime: new Date().getTime().toString() });
-                notification.success({ message: '🎉 创建用户成功' });
-            }
-            setDrawerVisible(false);
-            getUserList();
-        })
-    };
-
     const delUserData = async (id: number) => {
         setLoading(true);
         await delUserDataAPI(id);
@@ -157,6 +142,34 @@ const UserPage = () => {
         userForm.resetFields()
     }
 
+    const onSubmit = async () => {
+        userForm.validateFields().then(async (values: User) => {
+            if (user.id) {
+                await editUserDataAPI({ ...values, ...user, roleId: values.role });
+                notification.success({ message: '🎉 编辑用户成功' });
+            } else {
+                await addUserDataAPI({ ...values, roleId: values.role, createTime: new Date().getTime().toString() });
+                notification.success({ message: '🎉 创建用户成功' });
+            }
+            setDrawerVisible(false);
+            getUserList();
+        })
+    };
+
+    const [filterForm] = Form.useForm();
+
+    const onFilterSubmit = async (values: FilterForm) => {
+        const query: FilterUser = {
+            key: values.name,
+            roleId: values.role,
+            startDate: values.createTime && values.createTime[0].valueOf() + '',
+            endDate: values.createTime && values.createTime[1].valueOf() + ''
+        }
+
+        const { data } = await getUserListAPI({ query });
+        setUserList(data as User[]);
+    }
+
     return (
         <>
             <Title value="用户管理">
@@ -164,20 +177,19 @@ const UserPage = () => {
             </Title>
 
             <Card className='my-2 overflow-scroll'>
-                <Form form={filterForm} layout="inline" onFinish={getUserList} autoComplete="off" className='flex-nowrap'>
-                    <Form.Item label="用户名" name="name" className='min-w-[200px]'>
-                        <Input placeholder='请输入用户名' />
+                <Form form={filterForm} layout="inline" onFinish={onFilterSubmit} autoComplete="off" className='flex-nowrap'>
+                    <Form.Item label="名称" name="name" className='min-w-[200px]'>
+                        <Input placeholder='请输入名称' />
                     </Form.Item>
-                    <Form.Item label="角色" name="role" className='min-w-[200px]'>
-                        <Select
-                            allowClear
-                            options={[
-                                { label: '管理员', value: 'admin' },
-                                { label: '用户', value: 'user' }
-                            ]}
-                            placeholder="请选择角色"
-                        />
+
+                    <Form.Item label="角色" name="role" className='min-w-[230px]'>
+                        <Select options={roleList.map(item => ({ label: item.name, value: item.id }))} placeholder="请选择角色" />
                     </Form.Item>
+
+                    <Form.Item label="时间范围" name="createTime" className='min-w-[250px]'>
+                        <RangePicker placeholder={["选择起始时间", "选择结束时间"]} />
+                    </Form.Item>
+
                     <Form.Item className='pr-6'>
                         <Button type="primary" htmlType="submit">查询</Button>
                     </Form.Item>

src/types/app/user.d.ts

@@ -25,4 +25,16 @@ export interface EditUser {
     username: string,
     oldPassword: string,
     newPassword: string
+}
+
+
+export interface FilterForm {
+    name?: string,
+    role?: number,
+    createTime: Date[]
+}
+
+export interface FilterUser extends FilterData {
+    name?: string,
+    roleId?: number,
 }

src/utils/request.ts

@@ -3,8 +3,8 @@ import { Modal, notification } from "antd";
 import { useUserStore } from "@/stores";
 
 // 配置项目API域名
-export const baseURL = "http://localhost:9003/api";
-// export const baseURL = "https://api.liuyuyang.net/api";
+// export const baseURL = "http://localhost:9003/api";
+export const baseURL = "https://api.liuyuyang.net/api";
 
 // 创建 axios 实例
 export const instance = axios.create({