完善角色页

src/i18n.ts

@@ -1,7 +1,7 @@
 import { changeLanguage } from '@/store/system.ts'
-import i18n, { InitOptions } from 'i18next'
+import i18n, { InitOptions, t  } from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
-import { initReactI18next, useTranslation } from 'react-i18next'
+import { initReactI18next, useTranslation,  } from 'react-i18next'
 import { zh, en } from './locales'
 
 const detectionOptions = {
@@ -43,10 +43,9 @@ export const initI18n = (options?: InitOptions) => {
       ...options,
     })
 
-
 }
 
 export {
-  useTranslation
+  useTranslation, t
 }
 export default i18n

src/locales/lang/en-US.ts

@@ -60,7 +60,8 @@ export default {
     warningTitle: 'Warning',
     batchDelete: 'Are you sure to delete the selected data?',
     deleteConfirm: 'Are you sure to delete it?',
-    success: 'Submission successful',
+    success: 'Submission successfully',
+    deleteSuccess: 'Delete successfully',
     fail: 'Submission failed',
     saveSuccess: 'Save successfully',
     saveFail: 'Save failed',

src/locales/lang/zh-CN.ts

@@ -63,6 +63,7 @@ export default {
     success: '提交成功',
     fail: '提交失败',
     saveSuccess: '保存成功',
+    deleteSuccess: '删除成功',
     saveFail: '保存失败',
     emptyData: '暂无数据',
     emptyDataAdd: '暂无数据，点击添加',

src/pages/system/menus/components/BatchButton.tsx

@@ -8,6 +8,8 @@ const BatchButton = () => {
     const { t } = useTranslation()
     const { isPending, mutate, } = useAtomValue(deleteMenuAtom)
     const ids = useAtomValue(batchIdsAtom)
+
+
     if (ids.length === 0) {
         return null
     }

src/pages/system/menus/components/TreeNodeRender.tsx

@@ -13,7 +13,7 @@ export const TreeNodeRender = memo(({ node, form }: { node: MenuItem & TreeDataN
     const { title } = node
     const { t } = useTranslation()
     const { styles } = useStyle()
-  const { mutate, } = useAtomValue(deleteMenuAtom)
+    const { mutate } = useAtomValue(deleteMenuAtom)
 
     const setMenuData = useSetAtom(selectedMenuAtom)
 

src/pages/system/menus/index.tsx

@@ -1,7 +1,7 @@
 import Glass from '@/components/glass'
 import { useTranslation } from '@/i18n.ts'
 import { PageContainer, ProCard } from '@ant-design/pro-components'
-import { Button, Form, Input, message, Radio, TreeSelect, InputNumber, notification, Alert } from 'antd'
+import { Button, Form, Input, Radio, TreeSelect, InputNumber, notification, Alert } from 'antd'
 import { useAtomValue } from 'jotai'
 import { menuDataAtom, saveOrUpdateMenuAtom, selectedMenuAtom } from './store.ts'
 import IconPicker from '@/components/icon/picker'
@@ -26,9 +26,6 @@ const Menus = () => {
   const currentMenu = useAtomValue<MenuItem>(selectedMenuAtom) ?? {}
 
   useEffect(() => {
-    if (isSuccess) {
-      message.success(t('message.saveSuccess', '保存成功'))
-    }
 
     if (isError) {
       notification.error({

src/pages/system/menus/store.ts

@@ -1,9 +1,10 @@
 import systemServ from '@/service/system.ts'
 import { IApiResult, IPage, IPageResult, MenuItem } from '@/types'
 import { IMenu } from '@/types/menus'
-import { AxiosResponse } from 'axios'
 import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
 import { atom, createStore } from 'jotai'
+import { message } from 'antd'
+import { t } from '@/i18n.ts'
 
 
 export const defaultMenu = {
@@ -17,7 +18,7 @@ export const defaultMenu = {
     sort: 0,
     id: 0,
     button: [],
-} as MenuItem
+} as unknown as MenuItem
 
 export const menuPageAtom = atom<IPage>({})
 
@@ -59,11 +60,8 @@ export const saveOrUpdateMenuAtom = atomWithMutation<IApiResult<IMenu>>((get) =>
             return await systemServ.menus.update(data)
         },
         onSuccess: (res) => {
+            message.success(t('message.saveSuccess', '保存成功'))
             const menu = get(selectedMenuAtom)
-      console.log({
-        ...menu,
-        id: res.data?.id
-      })
             store.set(selectedMenuAtom, {
                 ...menu,
                 id: res.data?.id
@@ -85,6 +83,7 @@ export const deleteMenuAtom = atomWithMutation((get) => {
             return await systemServ.menus.batchDelete(ids ?? get(batchIdsAtom))
         },
         onSuccess: () => {
+            message.success(t('message.deleteSuccess', '删除成功'))
             store.set(batchIdsAtom, [])
             get(queryClientAtom).refetchQueries([ 'menus', get(menuPageAtom) ]).then()
         }

src/pages/system/roles/index.tsx

@@ -1,29 +1,33 @@
-import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components'
+import { ActionType, PageContainer, ProColumns, ProTable,BetaSchemaForm } from '@ant-design/pro-components'
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { useStyle } from './style.ts'
-import { useMemo, useRef } from 'react'
-import { useAtomValue } from 'jotai'
-import { rolesAtom } from './store.ts'
+import { useMemo, useRef, useState } from 'react'
+import { useAtom, useAtomValue } from 'jotai'
+import { roleAtom, rolesAtom } from './store.ts'
 import { useTranslation } from '@/i18n.ts'
-import { Button, Space, Table } from 'antd'
+import { Button, Form, Space, Table } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
 
 const Roles = () => {
 
     const { t } = useTranslation()
     const { styles } = useStyle()
+    const [form] = Form.useForm()
     const actionRef = useRef<ActionType>()
     const { data, isLoading } = useAtomValue(rolesAtom)
+    const [ role, setRole ] = useAtom(roleAtom)
+    const [ open, setOpen] = useState(false)
 
     const columns = useMemo(() => {
 
         return [
-            { title: 'id', dataIndex: 'id', hideInTable: true, hideInSearch: true, },
-            { title: '名称', dataIndex: 'name' },
-            { title: '别名', dataIndex: 'code' },
-            { title: '状态', dataIndex: 'status' },
+            { title: 'id', dataIndex: 'id', hideInTable: true, hideInSearch: true, hideInForm: true,},
+            { title: '名称', dataIndex: 'name', valueType: 'text',},
+            { title: '别名', dataIndex: 'code', valueType: 'text', },
+            { title: '状态', dataIndex: 'status', valueType: 'switch', },
             { title: '排序', dataIndex: 'sort', valueType: 'indexBorder', },
-            { title: '备注', dataIndex: 'remark' },
+            { title: '备注', dataIndex: 'remark' ,valueType: 'textarea' },
+            { title: '权限', dataIndex: 'permissions', valueType: 'treeSelect', },
             {
                 title: '操作', valueType: 'option',
                 key: 'option',
@@ -31,14 +35,14 @@ const Roles = () => {
                     <a
                             key="editable"
                             onClick={() => {
-                                action?.startEditable?.(record.id)
+                                // action?.startEditable?.(record.id)
+                                setRole(record)
+                                setOpen(true)
+                                form.setFieldsValue(record)
                             }}
                     >
                         编辑
                     </a>,
-                    <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
-                        查看
-                    </a>,
                     <a href={record.url} target="_blank" rel="noopener noreferrer" key="del">
                         删除
                     </a>,
@@ -99,6 +103,24 @@ const Roles = () => {
                             }
                         }}
                 />
+                <BetaSchemaForm
+                        width={600}
+                        form={form}
+                        layout={'horizontal'}
+                        title={t('system.roles.edit.title', '角色编辑')}
+                        colProps={{ span: 24 }}
+                        labelCol={{ span: 6 }}
+                        wrapperCol={{ span: 16 }}
+                        layoutType={'ModalForm'}
+                        open={open}
+                        modalProps={{
+                            maskClosable: false,
+                        }}
+                        onOpenChange={(open) => {
+                            console.log('open', open)
+                            setOpen(open)
+                        }}
+                        columns={columns} />
             </PageContainer>
     )
 }

src/service/base.ts

@@ -15,10 +15,10 @@ export const createCURD = <TParams, TResult>(api: string, options?: AxiosRequest
       return request.post(`${api}/edit`, data, options)
     },
     delete: (id: number) => {
-      return request.delete(`${api}/delete`, { ...options, params: { id } })
+      return request.post(`${api}/delete`, { id }, options)
     },
     batchDelete: (ids: number[]) => {
-      return request.delete(`${api}/deletes`, { ...options, params: { ids } })
+      return request.post(`${api}/deletes`, { ids }, options )
     },
     info: (id: number) => {
       return request.get<TResult>(`${api}/${id}`, options)

src/store/user.ts

@@ -4,7 +4,7 @@ import { AxiosResponse } from 'axios'
 import { atom } from 'jotai/index'
 import { IApiResult, IAuth, MenuItem } from '@/types'
 import { LoginRequest } from '@/types/login'
-import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
+import { atomWithMutation, atomWithQuery } from 'jotai-tanstack-query'
 import systemServ from '@/service/system.ts'
 import { formatMenuData, isDev } from '@/utils'
 
@@ -54,9 +54,5 @@ export const userMenuDataAtom = atomWithQuery<any, MenuItem[]>((get) => ({
   select: (data: AxiosResponse) => {
     return formatMenuData(data.data.rows as any ?? [])
   },
-  initialData: () => {
-    const queryClient = get(queryClientAtom)
-    return queryClient.getQueryData([ 'user_menus', get(appAtom).token ])
-  },
   retry: false,
 }))