diff --git a/src/routes/admin/user/-hooks/useFetchList.ts b/src/routes/admin/user/-hooks/useFetchList.ts index c08c040..f9a83f0 100644 --- a/src/routes/admin/user/-hooks/useFetchList.ts +++ b/src/routes/admin/user/-hooks/useFetchList.ts @@ -11,16 +11,32 @@ export const useFetchList = (useColumns: any) => { pageSize: 10, }); + // 查询条件(点击查询后生效) + const [params, setParams] = useState({}); + // 查询数据 const query = useQuery({ - 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, }; }; diff --git a/src/routes/admin/user/index.tsx b/src/routes/admin/user/index.tsx index aedd526..176df4a 100644 --- a/src/routes/admin/user/index.tsx +++ b/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(initialFilters); + const setFilter = (key: string, value: string) => { + setFilters((prev: any) => ({ ...prev, [key]: value })); + }; + + const handleSearch = () => { + search({ ...filters }); + }; + + const handleReset = () => { + setFilters(initialFilters); + search({}); + }; + return ( <> 管理单位用户信息
+
+ setFilter("username", e.target.value)} + /> + setFilter("realName", e.target.value)} + /> + + + + +