feat: 用户管理新增搜索条件(用户名/姓名/启用状态/状态)

src/routes/admin/user/-hooks/useFetchList.ts

@@ -11,16 +11,32 @@ export const useFetchList = (useColumns: any) => {
     pageSize: 10,
   });
 
+  // 查询条件（点击查询后生效）
+  const [params, setParams] = useState<any>({});
+
   // 查询数据
   const query = useQuery<any>({
-    queryKey: ["userList", pagination],
+    queryKey: ["userList", pagination, params],
     queryFn: () =>
       getUserPage({
+        ...params,
         pageSize: pagination.pageSize,
         pageNo: pagination.pageIndex + 1,
       }).then((res) => res.data),
   });
 
+  // 查询：应用条件并回到第一页（过滤掉空值条件）
+  const search = (nextParams: any = {}) => {
+    const cleaned: any = {};
+    Object.entries(nextParams || {}).forEach(([key, value]) => {
+      if (value !== "" && value !== undefined && value !== null) {
+        cleaned[key] = value;
+      }
+    });
+    setParams(cleaned);
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+  };
+
   // 表格
   const columns = useColumns();
   const table = useReactTable({
@@ -41,5 +57,6 @@ export const useFetchList = (useColumns: any) => {
     pagination,
     table,
     query,
+    search,
   };
 };

src/routes/admin/user/index.tsx

@@ -1,6 +1,14 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { ListPlus, Plus } from "lucide-react";
+import { ListPlus, Plus, RotateCcw, Search } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { DataTable } from "@/components/data-table";
 import { useFetchList } from "./-hooks/useFetchList";
 import { useState } from "react";
@@ -172,7 +180,7 @@ function RouteComponent() {
     disable(record.id);
   };
 
-  const { table, query } = useFetchList(() =>
+  const { table, query, search } = useFetchList(() =>
     useColumns({
       handleCancelUser,
       handleEditUser,
@@ -182,6 +190,27 @@ function RouteComponent() {
     }),
   );
 
+  // 筛选条件（点击查询后生效）
+  const initialFilters = {
+    username: "",
+    realName: "",
+    enabled: "",
+    status: "",
+  };
+  const [filters, setFilters] = useState<any>(initialFilters);
+  const setFilter = (key: string, value: string) => {
+    setFilters((prev: any) => ({ ...prev, [key]: value }));
+  };
+
+  const handleSearch = () => {
+    search({ ...filters });
+  };
+
+  const handleReset = () => {
+    setFilters(initialFilters);
+    search({});
+  };
+
   return (
     <>
       <BatchCreateUserDialog
@@ -212,6 +241,59 @@ function RouteComponent() {
           <div className="text-xs text-black/50">管理单位用户信息</div>
         </div>
         <div className="p-4 rounded-lg border bg-white space-y-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <Input
+              placeholder="用户名"
+              className="w-[140px]"
+              value={filters.username}
+              onChange={(e: any) => setFilter("username", e.target.value)}
+            />
+            <Input
+              placeholder="姓名"
+              className="w-[120px]"
+              value={filters.realName}
+              onChange={(e: any) => setFilter("realName", e.target.value)}
+            />
+            <Select
+              value={filters.enabled || "all"}
+              onValueChange={(value: string) =>
+                setFilter("enabled", value === "all" ? "" : value)
+              }
+            >
+              <SelectTrigger className="w-[110px]">
+                <SelectValue placeholder="启用状态" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">启用状态</SelectItem>
+                <SelectItem value="true">启用</SelectItem>
+                <SelectItem value="false">禁用</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              value={filters.status || "all"}
+              onValueChange={(value: string) =>
+                setFilter("status", value === "all" ? "" : value)
+              }
+            >
+              <SelectTrigger className="w-[100px]">
+                <SelectValue placeholder="状态" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">状态</SelectItem>
+                <SelectItem value="1">未激活</SelectItem>
+                <SelectItem value="2">已激活</SelectItem>
+                <SelectItem value="3">已注销</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button onClick={handleSearch}>
+              <Search />
+              查询
+            </Button>
+            <Button variant="outline" onClick={handleReset}>
+              <RotateCcw />
+              重置
+            </Button>
+          </div>
           <div className="flex items-center gap-2">
             <Button onClick={() => handleEditUser()}>
               <Plus />