优化request包装代码

完善role的多语言

src/components/switch/index.tsx

@@ -3,7 +3,6 @@ import { Switch as AntSwitch, SwitchProps } from 'antd'
 
 
 export const Switch = ({ value, ...props }: SwitchProps) => {
-  console.log(value, props)
   return (
     <AntSwitch {...props} value={convertToBool(value)}/>
   )

src/locales/lang/pages/system/roles/en-US.ts

@@ -10,7 +10,10 @@ export default {
     description: 'Remarks',
     option: 'Operation',
   },
+  search: {
+    placeholder: 'Please enter a name'
+  },
   edit: {
     title: 'Edit Role',
   },
-};
+}

src/locales/lang/pages/system/roles/zh-CN.ts

@@ -9,7 +9,9 @@ export default {
     sort: '排序',
     description: '备注',
     option: '操作',
-
+  },
+  search: {
+    placeholder: '请输入名称'
   },
   edit: {
     title: '编辑角色',

src/pages/system/roles/index.tsx

@@ -1,4 +1,5 @@
 import Switch from '@/components/switch'
+import { IMenu } from '@/types/menus'
 import {
   ActionType,
   PageContainer,
@@ -9,7 +10,7 @@ import {
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { useStyle } from './style.ts'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 import {
   deleteRoleAtom,
   pageAtom,
@@ -42,7 +43,7 @@ const MenuTree = (props: any) => {
   return <Tree treeData={menuList}
                fieldNames={{ title: 'title', key: 'id' }}
                disabled={mode !== 'edit'} checkable={true} onCheck={onCheck}
-               checkedKeys={getTreeCheckedStatus(menuList, value)}/>
+               checkedKeys={getTreeCheckedStatus<IMenu>(menuList!, value)}/>
 
 
 }
@@ -54,7 +55,7 @@ const Roles = memo(() => {
   const [ form ] = Form.useForm()
   const actionRef = useRef<ActionType>()
   const [ page, setPage ] = useAtom(pageAtom)
-  const setSearch = useSetAtom(searchAtom)
+  const [ search, setSearch ] = useAtom(searchAtom)
   const [ roleIds, setRoleIds ] = useAtom(roleIdsAtom)
   const { data, isLoading, isFetching, refetch } = useAtomValue(rolesAtom)
   const { isPending, mutate, isSuccess } = useAtomValue(saveOrUpdateRoleAtom)
@@ -178,9 +179,11 @@ const Roles = memo(() => {
         }}
         toolbar={{
           search: {
+            loading: isFetching && !!search.key,
             onSearch: (value: string) => {
               setSearch({ key: value })
             },
+            placeholder: t('system.roles.search.placeholder')
           },
           actions: [
             <Button

src/pages/system/roles/store.ts

@@ -17,7 +17,9 @@ export const roleIdsAtom = atom<number[]>([])
 
 export const roleAtom = atom<IRole>(undefined as unknown as IRole)
 
-export const searchAtom = atom<SearchParams>({} as SearchParams)
+export const searchAtom = atom<SearchParams>({
+  key: ''
+} as SearchParams)
 
 export const pageAtom = atom<IPage>({
   pageSize: 10,

src/request.ts

@@ -109,18 +109,22 @@ axiosInstance.interceptors.response.use(
   })
 
 
+//创建返回IApiResult类型的request
 export const createFetchMethods = () => {
   const methods = {}
 
   for (const method of Object.keys(axiosInstance)) {
-    methods[method] = <T = any, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>) => {
-      if (config && data) {
-        config = {
-          ...config,
-          data,
-        }
-      }
-      return axiosInstance[method](url, config)
+    methods[method] = async <T = any, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>) => {
+      config = config ?? {}
+      config.url = url
+      config.method = method
+      const isGet = method === 'get'
+      if (isGet) {
+        config.params = data
+      } else {
+        config.data = data
+      }
+      return axiosInstance(config)
         .then((response: AxiosResponse<IApiResult<T>>) => {
           if (response.data.code !== 200) {
             throw new Error(response.data.message)

src/service/base.ts

@@ -6,13 +6,13 @@ export const createCURD = <TParams, TResult>(api: string, options?: AxiosRequest
 
   return {
     list: (params?: TParams & IPage) => {
-      return request.post<IPageResult<TResult>>(`${api}/list`, { ...options, ...params })
+      return request.post<IPageResult<TResult>>(`${api}/list`, { ...params }, options)
     },
     add: (data: TParams) => {
-      return request.post<TResult>(`${api}/add`, data, options)
+      return request.post<TResult>(`${api}/add`, { ...data }, options)
     },
     update: (data: TParams) => {
-      return request.post<TResult>(`${api}/edit`, data, options)
+      return request.post<TResult>(`${api}/edit`, { ...data }, options)
     },
     delete: (id: number) => {
       return request.post<TResult>(`${api}/delete`, { id }, options)

src/utils/tree.ts

@@ -1,12 +1,17 @@
 type TreeKey = string | number;
 
-interface TreeNode {
+type TreeNode<T> = {
+  [key in keyof T]: T[keyof T];
+} & {
   key: TreeKey;
   id?: TreeKey;
-    children?: TreeNode[];
-}
+  children?: TreeNode<T>[];
+};
 
-export function getTreeCheckedStatus(tree: TreeNode[], selectKeys: TreeKey[]): { checked: TreeKey[], halfChecked: TreeKey[] } {
+export function getTreeCheckedStatus<T>(tree: TreeNode<T>[], selectKeys: TreeKey[]): {
+  checked: TreeKey[],
+  halfChecked: TreeKey[]
+} {
   const checked: TreeKey[] = []
   const halfChecked: TreeKey[] = []
 
@@ -14,7 +19,7 @@ export function getTreeCheckedStatus(tree: TreeNode[], selectKeys: TreeKey[]): {
   if (!selectKeys || selectKeys.length === 0) return { checked, halfChecked }
 
   // 辅助函数来递归地检查每个节点
-    function checkNode(node: TreeNode, ancestors: TreeKey[]): void {
+  function checkNode(node: TreeNode<T>, ancestors: TreeKey[]): void {
     const key = node.key ?? node.id
     const isLeaf = !node.children || node.children.length === 0
     const isSelected = selectKeys.includes(key)