重构文章过滤功能

src/api/Article.ts

@@ -18,22 +18,21 @@ export const editArticleDataAPI = (data: Article) =>
 export const getArticleDataAPI = (id?: number) => Request<Article>("GET", `/article/${id}`)
 
 // 获取文章列表
-export const getArticleListAPI = getListAPI<Article>("/article")
-
-// export const getArticleListAPI = (data?: QueryData) => {
-//   if (data?.pagination) {
-//     let sort = data?.sort ? `?sort=${data?.sort}` : '?'
-//     const query = ObjectToUrlParam(data?.query as FilterData) ? "&" + ObjectToUrlParam(data?.query as FilterData) : ''
-//     const { page, size } = data.pagination
-//     const pagination = page && size ? `&page=${page}&size=${size}` : page && !size ? `&page=${page}` : size && !page ? `&size=${size}` : ''
-//     if (!query && !pagination) sort = ''
-
-//     return Request<Paginate<Article[]>>("GET", `/article${sort}${pagination}${query}`);
-//   } else {
-//     let sort = data?.sort ? `?sort=${data?.sort}` : '?'
-//     const query = ObjectToUrlParam(data?.query as FilterData) ? "&" + ObjectToUrlParam(data?.query as FilterData) : ''
-//     if (!query) sort = ''
-
-//     return Request<Article[]>("GET", `/article/all${sort}${query}`);
-//   }
-// };
+export const getArticleListAPI = (data?: QueryData) => {
+  if (data?.pagination) {
+    return Request<Paginate<Article[]>>("POST", `/article/paging`, {
+      data: { ...data?.query },
+      params: {
+        sort: data.sort,
+        ...data.pagination
+      }
+    });
+  } else {
+    return Request<Article[]>("POST", `/article/list`, {
+      data: { ...data?.query },
+      params: {
+        sort: data?.sort
+      }
+    });
+  }
+};

src/pages/Article/index.tsx

@@ -126,12 +126,15 @@ const ArticlePage = () => {
     const onSubmit = async (values: FilterForm) => {
         const query: FilterArticle = {
             key: values.title ? values.title : null,
-            startDate: values.createTime ? +values.createTime[0].valueOf() : null,
-            endDate: values.createTime ? +values.createTime[1].valueOf() : null,
-            cateIds: values.cateIds ? values?.cateIds?.join(",") : null,
+            startDate: values.createTime ? values.createTime[0].valueOf() + '' : null,
+            endDate: values.createTime ? values.createTime[1].valueOf() + '' : null,
+            cateIds: values.cateIds ? values.cateIds : null,
             tagId: values.tagId ? values.tagId + "" : null,
         }
 
+        console.log(query);
+        
+
         const { data } = await getArticleListAPI({ query });
         setArticleList(data as Article[]);
     }

src/pages/Article/type.d.ts

@@ -6,6 +6,6 @@ export interface FilterForm {
 }
 
 export interface FilterArticle extends FilterData {
-    cateIds?: string | null,
+    cateIds?: number[] | null,
     tagId?: string | null,
 }

src/types/app/article.d.ts

@@ -7,7 +7,7 @@ export interface Article {
     description: string,
     content: string,
     cover: string,
-    cateIds: string,
+    cateIds: number[],
     cateList: Cate[]
     tagIds: string,
     tagList: Tag[]

src/types/response.d.ts

@@ -21,8 +21,8 @@ interface Page {
 
 interface FilterData {
     key?: string | null,
-    startDate?: number | null,
-    endDate?: number | null
+    startDate?: string | null,
+    endDate?: string | null
 }
 
 interface QueryData {

src/utils/index.ts

@@ -1,5 +1,4 @@
 import Request from "@/utils/request";
-import { Article } from "@/types/app/article";
 
 // 对象转url参数
 export const ObjectToUrlParam = (obj: Object): string => {
@@ -12,22 +11,62 @@ export const ObjectToUrlParam = (obj: Object): string => {
 }
 
 // 查询数据相关逻辑
+// export const getListAPI = <T>(api: string) => {
+//     return (data?: QueryData) => {
+//         if (data?.pagination) {
+//             let sort = data?.sort ? `?sort=${data?.sort}` : '?'
+//             const query = ObjectToUrlParam(data?.query as FilterData) ? "&" + ObjectToUrlParam(data?.query as FilterData) : ''
+//             const { page, size } = data.pagination
+//             const pagination = page && size ? `&page=${page}&size=${size}` : page && !size ? `&page=${page}` : size && !page ? `&size=${size}` : ''
+//             if (!query && !pagination) sort = ''
+
+//             return Request<Paginate<T[]>>("GET", `${api}${sort}${pagination}${query}`);
+//         } else {
+//             return Request<T[]>("GET", `${api}/all`, {
+//                 sort: data?.sort,
+//                 pattern: data?.pattern,
+//                 ...data?.query
+//             });
+//         }
+//     }
+// };
+
+const buildQueryParams = (params: Record<string, any>): string => {
+    return Object.entries(params)
+        .filter(([_, value]) => value !== undefined && value !== null)
+        .map(([key, value]) => {
+            if (Array.isArray(value)) {
+                return `${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(value))}`;
+            }
+            return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+        })
+        .join('&');
+};
+
 export const getListAPI = <T>(api: string) => {
     return (data?: QueryData) => {
-        if (data?.pagination) {
-            let sort = data?.sort ? `?sort=${data?.sort}` : '?'
-            const query = ObjectToUrlParam(data?.query as FilterData) ? "&" + ObjectToUrlParam(data?.query as FilterData) : ''
-            const { page, size } = data.pagination
-            const pagination = page && size ? `&page=${page}&size=${size}` : page && !size ? `&page=${page}` : size && !page ? `&size=${size}` : ''
-            if (!query && !pagination) sort = ''
+        let queryParams: Record<string, any> = {};
 
-            return Request<Paginate<T[]>>("GET", `${api}${sort}${pagination}${query}`);
+        if (data?.sort) {
+            queryParams.sort = data.sort;
+        }
+
+        if (data?.query) {
+            queryParams = { ...queryParams, ...data.query };
+        }
+
+        if (data?.pagination) {
+            const { page, size } = data.pagination;
+            if (page) queryParams.page = page;
+            if (size) queryParams.size = size;
+        }
+
+        const queryString = buildQueryParams(queryParams);
+
+        if (data?.pagination) {
+            return Request<Paginate<T[]>>("GET", `${api}?${queryString}`);
         } else {
-            return Request<T[]>("GET", `${api}/all`, {
-                sort: data?.sort,
-                pattern: data?.pattern,
-                ...data?.query
-            });
-        }
+            return Request<T[]>("GET", `${api}/all?${queryString}`);
         }
+    };
 };

src/utils/request.ts

@@ -77,12 +77,11 @@ instance.interceptors.response.use(
 
 // 如果是GET传参就自动识别为query，POST为data
 const Request = <T>(method: string, url: string, reqParams?: object) => {
-    if (!method) method = "GET";
-
     return instance.request<any, Response<T>>({
         method,
         url,
-        [method.toLocaleUpperCase() === "GET" ? "params" : "data"]: reqParams
+        ...reqParams
+        // [method.toLocaleUpperCase() === "GET" ? "params" : "data"]: reqParams
     });
 };