From 78a1e6c60a59724f1143aa6e4b1b34bad2a97034 Mon Sep 17 00:00:00 2001 From: leijiaping Date: Tue, 27 Oct 2026 13:39:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=90=9C=E7=B4=A2=E6=9D=A1=E4=BB=B6(?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=90=8D/=E5=A7=93=E5=90=8D/=E5=90=AF?= =?UTF-8?q?=E7=94=A8=E7=8A=B6=E6=80=81/=E7=8A=B6=E6=80=81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/admin/user/-hooks/useFetchList.ts | 19 ++++- src/routes/admin/user/index.tsx | 86 +++++++++++++++++++- 2 files changed, 102 insertions(+), 3 deletions(-) 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)} + /> + + + + +