完善部门页面

src/pages/system/departments/components/DepartmentTree.tsx

@@ -2,18 +2,17 @@ import { Empty, Spin, Tree } from 'antd'
 import { useStyle } from '../style.ts'
 import { useTranslation } from '@/i18n.ts'
 import { useSetAtom } from 'jotai'
-import { useDepartStore } from '../store.ts'
+import { selectedDepartAtom, departTreeAtom, batchIdsAtom } from '../store.ts'
 import { FormInstance } from 'antd/lib'
 import { useAtomValue } from 'jotai/index'
 import { TreeNodeRender } from './TreeNodeRender.tsx'
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { flattenTree } from '@/utils'
 import { useDeepCompareEffect } from 'react-use'
 import { IDepartment } from '@/types/department'
 
 export const DepartmentTree = ({ form }: { form: FormInstance }) => {
 
-    const { selectedDepartAtom, departTreeAtom, batchIdsAtom } = useDepartStore()
     const { styles } = useStyle()
     const { t } = useTranslation()
     const setIds = useSetAtom(batchIdsAtom)
@@ -30,14 +29,16 @@ export const DepartmentTree = ({ form }: { form: FormInstance }) => {
         if (data.length) {
             // @ts-ignore flattenTree
             flattenMenusRef.current = flattenTree<IDepartment[]>(data as any)
-            // console.log(flattenMenusRef.current)
         }
 
+    }, [ data, isLoading ])
+
+    useEffect(() => {
+
         return () => {
             setCurrent({} as IDepartment)
         }
-
-    }, [ data, isLoading ])
+    }, [])
 
     const renderEmpty = () => {
         if ((data as any).length > 0 || isLoading) return null

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

@@ -5,7 +5,7 @@ import { FormInstance } from 'antd/lib'
 import { useTranslation } from '@/i18n.ts'
 import { useStyle } from '../style.ts'
 import { useAtomValue, useSetAtom } from 'jotai/index'
-import { useDepartStore } from '../store.ts'
+import { selectedDepartAtom, deleteDepartAtom, defaultDepart } from '../store.ts'
 import { PlusOutlined } from '@ant-design/icons'
 import ActionIcon, { DeleteAction } from '@/components/icon/action'
 
@@ -13,7 +13,6 @@ export const TreeNodeRender = memo(({ node, form }: { node: MenuItem & TreeDataN
     const { name } = node
     const { t } = useTranslation()
     const { styles } = useStyle()
-    const { selectedDepartAtom, deleteDepartAtom, defaultDepart } = useDepartStore()
     const { mutate } = useAtomValue(deleteDepartAtom)
 
     const setCurrent = useSetAtom(selectedDepartAtom)

src/pages/system/departments/index.tsx

@@ -6,7 +6,7 @@ import { useStyle } from './style.ts'
 import DepartmentTree from './components/DepartmentTree.tsx'
 import { Alert, Button, Divider, Form, Input, InputNumber, InputRef, notification, TreeSelect } from 'antd'
 import { PlusOutlined } from '@ant-design/icons'
-import { useDepartStore } from './store.ts'
+import { defaultDepart, selectedDepartAtom, departTreeAtom, saveOrUpdateDepartAtom } from './store.ts'
 import { useAtom, useAtomValue, } from 'jotai'
 import Glass from '@/components/glass'
 import { useEffect, useRef } from 'react'
@@ -17,7 +17,6 @@ const Departments = () => {
     const { styles, cx } = useStyle()
     const [ form ] = Form.useForm()
     const inputRef = useRef<InputRef>()
-    const { defaultDepart, selectedDepartAtom, departTreeAtom, saveOrUpdateDepartAtom } = useDepartStore()
     const { data } = useAtomValue(departTreeAtom)
     const { mutate, isPending, isError, error } = useAtomValue(saveOrUpdateDepartAtom)
     const [ current, setCurrent ] = useAtom(selectedDepartAtom)

src/pages/system/departments/store.ts

@@ -9,9 +9,9 @@ import { message } from 'antd'
 
 const store = createStore()
 
-const departPageAtom = atom<IPage>({})
+export const departPageAtom = atom<IPage>({})
 
-const defaultDepart = {
+export const defaultDepart = {
     id: 0,
     parent_id: 0,
     name: '',
@@ -20,11 +20,11 @@ const defaultDepart = {
     sort: 0,
 } as IDepartment
 
-const batchIdsAtom = atom<number[]>([])
+export const batchIdsAtom = atom<number[]>([])
 
-const selectedDepartAtom = atom<IDepartment>({} as IDepartment)
+export const selectedDepartAtom = atom<IDepartment>({} as IDepartment)
 
-const departTreeAtom = atomWithQuery(() => {
+export const departTreeAtom = atomWithQuery(() => {
 
     return {
         queryKey: [ 'departTree' ],
@@ -37,10 +37,10 @@ const departTreeAtom = atomWithQuery(() => {
     }
 })
 
-const saveOrUpdateDepartAtom = atomWithMutation<IApiResult, IDepartment>((get) => {
+export const saveOrUpdateDepartAtom = atomWithMutation<IApiResult, IDepartment>((get) => {
 
     return {
-        mutationKey: [ 'saveOrUpdateDepart', get(selectedDepartAtom) ],
+        mutationKey: [ 'saveOrUpdateDepart' ],
         mutationFn: async (data: IDepartment) => {
             if (data.id) {
                 return await systemServ.dept.update(data)
@@ -50,18 +50,22 @@ const saveOrUpdateDepartAtom = atomWithMutation<IApiResult, IDepartment>((get) =
         onSuccess: (res) => {
             const isAdd = !!res.data?.id
             message.success(t(isAdd ? 'message.saveSuccess' : 'message.editSuccess', '保存成功'))
+
+            if (isAdd) {
                 store.set(selectedDepartAtom, prev => ({
                     ...prev,
-                ...(isAdd ? res.data : {})
+                    id: res.data.id
                 }))
-            get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree', get(departPageAtom) ] }).then()
+            }
+
+            get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree' ] }).then()
         }
     }
 
 })
 
 
-const deleteDepartAtom = atomWithMutation<IApiResult, number[]>((get) => {
+export const deleteDepartAtom = atomWithMutation<IApiResult, number[]>((get) => {
 
     return {
         mutationKey: [ 'deleteDepart', get(batchIdsAtom) ],
@@ -71,19 +75,10 @@ const deleteDepartAtom = atomWithMutation<IApiResult, number[]>((get) => {
         onSuccess: () => {
             message.success(t('message.deleteSuccess', '删除成功'))
             store.set(batchIdsAtom, [])
-            get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree', get(departPageAtom) ] }).then()
+            get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree' ] }).then()
 
         }
     }
 
 })
 
-export const useDepartStore = () => ({
-    defaultDepart,
-    departPageAtom,
-    selectedDepartAtom,
-    departTreeAtom,
-    deleteDepartAtom,
-    batchIdsAtom,
-    saveOrUpdateDepartAtom,
-})

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

@@ -7,7 +7,7 @@ import { batchIdsAtom, menuDataAtom, selectedMenuAtom } from '../store.ts'
 import { FormInstance } from 'antd/lib'
 import { useAtomValue } from 'jotai/index'
 import { TreeNodeRender } from './TreeNodeRender.tsx'
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { flattenTree } from '@/utils'
 import { useDeepCompareEffect } from 'react-use'
 
@@ -33,12 +33,14 @@ const MenuTree = ({ form }: { form: FormInstance }) => {
             // console.log(flattenMenusRef.current)
         }
 
+    }, [ data, isLoading ])
+
+    useEffect(() => {
         return () => {
             setCurrentMenu({} as MenuItem)
             setIds([])
         }
-
-  }, [ data, isLoading ])
+    }, [])
 
     const renderEmpty = () => {
         if ((data as any).length > 0 || isLoading) return null

src/pages/system/menus/store.ts

@@ -62,11 +62,14 @@ export const saveOrUpdateMenuAtom = atomWithMutation<IApiResult, IMenu>((get) =>
     onSuccess: (res) => {
       const isAdd = !!res.data?.id
       message.success(t(isAdd ? 'message.saveSuccess' : 'message.editSuccess', '保存成功'))
+
+      if(isAdd) {
         const menu = get(selectedMenuAtom)
         store.set(selectedMenuAtom, {
           ...menu,
           id: res.data?.id
         })
+      }
       //更新列表
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore fix