优化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,9 +9,11 @@ export default {
     sort: '排序',
     description: '备注',
     option: '操作',
-
   },
-  edit:{
+  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,
-        }
+    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[method](url, config)
+      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,54 +1,59 @@
 type TreeKey = string | number;
 
-interface TreeNode {
-    key: TreeKey;
-    id?: TreeKey;
-    children?: TreeNode[];
-}
-
-export function getTreeCheckedStatus(tree: TreeNode[], selectKeys: TreeKey[]): { checked: TreeKey[], halfChecked: TreeKey[] } {
-    const checked: TreeKey[] = []
-    const halfChecked: TreeKey[] = []
-
-    if (!tree || tree.length === 0) return { checked, halfChecked }
-    if (!selectKeys || selectKeys.length === 0) return { checked, halfChecked }
-
-    // 辅助函数来递归地检查每个节点
-    function checkNode(node: TreeNode, ancestors: TreeKey[]): void {
-        const key = node.key ?? node.id
-        const isLeaf = !node.children || node.children.length === 0
-        const isSelected = selectKeys.includes(key)
-
-        // 如果是叶节点并且被选中，则直接加入到checked数组
-        if (isLeaf && isSelected) {
-            checked.push(key)
-            // 标记所有祖先为半选状态，除非它们已经被完全选中
-            ancestors.forEach(ancestorKey => {
-                if (!halfChecked.includes(ancestorKey) && !checked.includes(ancestorKey)) {
-                    halfChecked.push(ancestorKey)
-                }
-            })
-            return
+type TreeNode<T> = {
+  [key in keyof T]: T[keyof T];
+} & {
+  key: TreeKey;
+  id?: TreeKey;
+  children?: TreeNode<T>[];
+};
+
+export function getTreeCheckedStatus<T>(tree: TreeNode<T>[], selectKeys: TreeKey[]): {
+  checked: TreeKey[],
+  halfChecked: TreeKey[]
+} {
+  const checked: TreeKey[] = []
+  const halfChecked: TreeKey[] = []
+
+  if (!tree || tree.length === 0) return { checked, halfChecked }
+  if (!selectKeys || selectKeys.length === 0) return { checked, halfChecked }
+
+  // 辅助函数来递归地检查每个节点
+  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)
+
+    // 如果是叶节点并且被选中，则直接加入到checked数组
+    if (isLeaf && isSelected) {
+      checked.push(key)
+      // 标记所有祖先为半选状态，除非它们已经被完全选中
+      ancestors.forEach(ancestorKey => {
+        if (!halfChecked.includes(ancestorKey) && !checked.includes(ancestorKey)) {
+          halfChecked.push(ancestorKey)
         }
+      })
+      return
+    }
 
-        // 非叶节点，递归检查其子节点
-        if (node.children) {
-            const childAncestors = [ ...ancestors, key ]
-            node.children.forEach(child => checkNode(child, childAncestors))
-
-            // 检查当前节点的所有子节点是否全部或部分被选中
-            const childSelectedCount = node.children.filter(child => checked.includes(child.key ?? child.id)).length
-            if (childSelectedCount === node.children.length) {
-                // 如果所有子节点都被选中，将当前节点标为全选
-                checked.push(key)
-            } else if (childSelectedCount > 0) {
-                // 如果部分子节点被选中，将当前节点标为半选
-                halfChecked.push(key)
-            }
-        }
+    // 非叶节点，递归检查其子节点
+    if (node.children) {
+      const childAncestors = [ ...ancestors, key ]
+      node.children.forEach(child => checkNode(child, childAncestors))
+
+      // 检查当前节点的所有子节点是否全部或部分被选中
+      const childSelectedCount = node.children.filter(child => checked.includes(child.key ?? child.id)).length
+      if (childSelectedCount === node.children.length) {
+        // 如果所有子节点都被选中，将当前节点标为全选
+        checked.push(key)
+      } else if (childSelectedCount > 0) {
+        // 如果部分子节点被选中，将当前节点标为半选
+        halfChecked.push(key)
+      }
     }
+  }
 
-    // 遍历每一个根节点
-    tree.forEach(node => checkNode(node, []))
-    return { checked, halfChecked }
+  // 遍历每一个根节点
+  tree.forEach(node => checkNode(node, []))
+  return { checked, halfChecked }
 }