封装获取数据列表逻辑

2024-08-17 15:19:08 +08:00
parent 73882884cf
commit bd35e09eb8
7 changed files with 117 additions and 22 deletions
--- a/src/api/Article.ts
+++ b/src/api/Article.ts
@@ -1,5 +1,6 @@
 import Request from "@/utils/request";
-import { Article } from "@/types/article";
+import { Article } from "@/types/app/article";
+import { getListAPI } from '@/utils'

 // 新增文章
 export const addArticleDataAPI = (data: Article) =>
@@ -17,11 +18,22 @@ export const editArticleDataAPI = (data: Article) =>
 export const getArticleDataAPI = (id?: number) => Request<Article>("GET", `/article/${id}`)

 // 获取文章列表
-export const getArticleListAPI = (pagination?: Page) => {
-  if (pagination) {
-    const { page, size } = pagination
-    return Request<Paginate<Article[]>>("GET", `/article?page=${page}&size=${size}`);
-  } else {
-    return Request<Article[]>("GET", `/article/all`);
-  }
-};
+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}`);
+//   }
+// };
--- a/src/api/Comment.ts
+++ b/src/api/Comment.ts
@@ -24,4 +24,4 @@ export const getCommentListAPI = (pattern?: "list" | "recursion", pagination?: P
    } else {
        return Request<Comment[]>("GET", `/comment/all?pattern=${pattern ? pattern : "recursion"}`);
    }
-};
+};
--- a/src/api/Web.ts
+++ b/src/api/Web.ts
@@ -1,5 +1,6 @@
 import Request from '@/utils/request'
 import { Web, LinkType } from '@/types/app/web'
+import { getListAPI } from '@/utils'

 // 新增网站
 export const addLinkDataAPI = (data: Web) => Request<Web>("POST", "/link", data)
@@ -14,14 +15,15 @@ export const editLinkDataAPI = (data: Web) => Request<Web>("PATCH", "/link", dat
 export const getLinkDataAPI = (id?: number) => Request<Web>("GET", `/link/${id}`)

 // 获取网站列表
-export const getLinkListAPI = (pagination?: Page) => {
-    if (pagination) {
-        const { page, size } = pagination
-        return Request<Paginate<Web[]>>("GET", `/link?page=${page}&size=${size}`);
-    } else {
-        return Request<Web[]>("GET", `/link/all`);
-    }
-};
+// export const getLinkListAPI = (pagination?: Page) => {
+//     if (pagination) {
+//         const { page, size } = pagination
+//         return Request<Paginate<Web[]>>("GET", `/link?page=${page}&size=${size}`);
+//     } else {
+//         return Request<Web[]>("GET", `/link/all`);
+//     }
+// };
+export const getLinkListAPI = getListAPI<Web>("/link")

 // 获取网站类型列表
 export const getLinkTypeListAPI = () => {
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -5,7 +5,8 @@ import { BiEditAlt, BiFolderOpen, BiHomeSmile, BiSliderAlt } from "react-icons/b
 import { LuCrown } from "react-icons/lu";
 import { BiCategoryAlt, BiBug } from "react-icons/bi";
 import { LiaRssSolid } from "react-icons/lia";
-import { IoIosStats } from "react-icons/io";
+import { BiLineChart } from "react-icons/bi";
+import { BiShieldQuarter } from "react-icons/bi";

 interface SidebarProps {
  sidebarOpen: boolean;
@@ -245,6 +246,30 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                              轮播图管理
                            </NavLink>
                          </li>
+
+                          <li>
+                            <NavLink
+                              to="/user"
+                              className={({ isActive }) =>
+                                'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +
+                                (isActive && '!text-white')
+                              }
+                            >
+                              用户管理
+                            </NavLink>
+                          </li>
+
+                          <li>
+                            <NavLink
+                              to="/role"
+                              className={({ isActive }) =>
+                                'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +
+                                (isActive && '!text-white')
+                              }
+                            >
+                              角色管理
+                            </NavLink>
+                          </li>
                        </ul>
                      </div>
                      {/* <!-- Dropdown Menu End --> */}
@@ -253,6 +278,16 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                }}
              </SidebarLinkGroup>

+              <li>
+                <NavLink
+                  to="/rights"
+                  className={`${sidebarItemSty} ${pathname.includes('rights') && sidebarItemActiveSty}`}
+                >
+                  <BiShieldQuarter className='text-[22px]' />
+                  权限
+                </NavLink>
+              </li>
+
              <li>
                <NavLink
                  to="/setup"
@@ -299,7 +334,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                  className={`${sidebarItemSty} ${pathname.includes('stats') && 'bg-graydark dark:bg-meta-4'
                    }`}
                >
-                  <IoIosStats className='text-[22px]' />
+                  <BiLineChart className='text-[22px]' />
                  数据可视化
                </NavLink>
              </li>
--- a/src/pages/Article/index.tsx
+++ b/src/pages/Article/index.tsx
@@ -29,7 +29,8 @@ const Article: React.FC = () => {
    };

    useEffect(() => {
-        getArticleList();
+        // getArticleList();
+        getArticleList()
    }, []);

    const delArticleData = async (id: number) => {
--- a/src/types/response.d.ts
+++ b/src/types/response.d.ts
@@ -17,4 +17,16 @@ interface Paginate<T> {
 interface Page {
    page?: number,
    size?: number,
-}
+}
+
+interface FilterData {
+    key?: string,
+    startDate?: number,
+    endDate?: number
+  }
+  
+  interface QueryData {
+    sort?: "asc" | "desc",
+    query?: FilterData,
+    pagination?: Page
+  }
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -0,0 +1,33 @@
+import Request from "@/utils/request";
+import { Article } from "@/types/app/article";
+
+// 对象转url参数
+export const ObjectToUrlParam = (obj: Object): string => {
+    return obj && new URLSearchParams(
+        Object.keys(obj).reduce((acc, key) => {
+            acc[key] = String(obj[key as keyof Object]);
+            return acc;
+        }, {} as Record<string, string>)
+    ).toString();
+}
+
+// 查询数据相关逻辑
+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 {
+            let sort = data?.sort ? `?sort=${data?.sort}` : '?'
+            const query = ObjectToUrlParam(data?.query as FilterData) ? "&" + ObjectToUrlParam(data?.query as FilterData) : ''
+            if (!query) sort = ''
+
+            return Request<T[]>("GET", `${api}/all${sort}${query}`);
+        }
+    }
+};