Browse Source

优化request包装代码

完善role的多语言
main
李金 7 months ago
parent
commit
8e0f0843bb
  1. 1
      src/components/switch/index.tsx
  2. 5
      src/locales/lang/pages/system/roles/en-US.ts
  3. 4
      src/locales/lang/pages/system/roles/zh-CN.ts
  4. 9
      src/pages/system/roles/index.tsx
  5. 4
      src/pages/system/roles/store.ts
  6. 20
      src/request.ts
  7. 6
      src/service/base.ts
  8. 15
      src/utils/tree.ts

1
src/components/switch/index.tsx

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

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

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

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

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

9
src/pages/system/roles/index.tsx

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

4
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 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>({ export const pageAtom = atom<IPage>({
pageSize: 10, pageSize: 10,

20
src/request.ts

@ -109,18 +109,22 @@ axiosInstance.interceptors.response.use(
}) })
//创建返回IApiResult类型的request
export const createFetchMethods = () => { export const createFetchMethods = () => {
const methods = {} const methods = {}
for (const method of Object.keys(axiosInstance)) { 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>>) => { .then((response: AxiosResponse<IApiResult<T>>) => {
if (response.data.code !== 200) { if (response.data.code !== 200) {
throw new Error(response.data.message) throw new Error(response.data.message)

6
src/service/base.ts

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

15
src/utils/tree.ts

@ -1,12 +1,17 @@
type TreeKey = string | number; type TreeKey = string | number;
interface TreeNode {
type TreeNode<T> = {
[key in keyof T]: T[keyof T];
} & {
key: TreeKey; key: TreeKey;
id?: 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 checked: TreeKey[] = []
const halfChecked: TreeKey[] = [] const halfChecked: TreeKey[] = []
@ -14,7 +19,7 @@ export function getTreeCheckedStatus(tree: TreeNode[], selectKeys: TreeKey[]): {
if (!selectKeys || selectKeys.length === 0) return { checked, halfChecked } 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 key = node.key ?? node.id
const isLeaf = !node.children || node.children.length === 0 const isLeaf = !node.children || node.children.length === 0
const isSelected = selectKeys.includes(key) const isSelected = selectKeys.includes(key)

Loading…
Cancel
Save