完善部门页面

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', '保存成功'))
-            store.set(selectedDepartAtom, prev => ({
-                ...prev,
-                ...(isAdd ? res.data : {})
-            }))
-            get(queryClientAtom).invalidateQueries({ queryKey: [ 'departTree', get(departPageAtom) ] }).then()
+
+            if (isAdd) {
+                store.set(selectedDepartAtom, prev => ({
+                    ...prev,
+                    id: res.data.id
+                }))
+            }
+
+            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,76 +7,78 @@ 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'
 
 const MenuTree = ({ form }: { form: FormInstance }) => {
 
 
-  const { styles } = useStyle()
-  const { t } = useTranslation()
-  const setCurrentMenu = useSetAtom(selectedMenuAtom)
-  const setIds = useSetAtom(batchIdsAtom)
-  const { data = [], isLoading } = useAtomValue(menuDataAtom)
-  const flattenMenusRef = useRef<MenuItem[]>([])
+    const { styles } = useStyle()
+    const { t } = useTranslation()
+    const setCurrentMenu = useSetAtom(selectedMenuAtom)
+    const setIds = useSetAtom(batchIdsAtom)
+    const { data = [], isLoading } = useAtomValue(menuDataAtom)
+    const flattenMenusRef = useRef<MenuItem[]>([])
 
-  useDeepCompareEffect(() => {
+    useDeepCompareEffect(() => {
 
-    if (isLoading) return
+        if (isLoading) return
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore array
-    if (data.length) {
-      // @ts-ignore flattenTree
-      flattenMenusRef.current = flattenTree<MenuItem[]>(data as any)
-      // console.log(flattenMenusRef.current)
-    }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore array
+        if (data.length) {
+            // @ts-ignore flattenTree
+            flattenMenusRef.current = flattenTree<MenuItem[]>(data as any)
+            // console.log(flattenMenusRef.current)
+        }
 
-    return () => {
-      setCurrentMenu({} as MenuItem)
-      setIds([])
-    }
+    }, [ data, isLoading ])
 
-  }, [ data, isLoading ])
+    useEffect(() => {
+        return () => {
+            setCurrentMenu({} as MenuItem)
+            setIds([])
+        }
+    }, [])
 
-  const renderEmpty = () => {
-    if ((data as any).length > 0 || isLoading) return null
-    return <Empty description={t('message.emptyDataAdd', '暂无数据，点击添加')}/>
-  }
+    const renderEmpty = () => {
+        if ((data as any).length > 0 || isLoading) return null
+        return <Empty description={t('message.emptyDataAdd', '暂无数据，点击添加')}/>
+    }
 
-  return (
-    <>
-      <Spin spinning={isLoading} style={{ minHeight: 200 }}>
-        {
-          renderEmpty()
-        }
-        <Tree.DirectoryTree
-          className={styles.tree}
-          treeData={data as any}
-          defaultExpandAll={true}
-          // draggable={true}
-          titleRender={(node) => {
-            return (<TreeNodeRender node={node as any} form={form}/>)
-          }}
-          fieldNames={{
-            title: 'title',
-            key: 'id'
-          }}
-          onSelect={(item) => {
-            const current = flattenMenusRef.current?.find((menu) => menu.id === item[0])
-            setCurrentMenu(current as MenuItem)
-            form.setFieldsValue({ ...current })
-          }}
-          onCheck={(item) => {
-            setIds(item as number[])
-          }}
-          checkable={true}
-          showIcon={false}
-        />
-      </Spin>
-    </>
-  )
+    return (
+            <>
+                <Spin spinning={isLoading} style={{ minHeight: 200 }}>
+                    {
+                        renderEmpty()
+                    }
+                    <Tree.DirectoryTree
+                            className={styles.tree}
+                            treeData={data as any}
+                            defaultExpandAll={true}
+                            // draggable={true}
+                            titleRender={(node) => {
+                                return (<TreeNodeRender node={node as any} form={form}/>)
+                            }}
+                            fieldNames={{
+                                title: 'title',
+                                key: 'id'
+                            }}
+                            onSelect={(item) => {
+                                const current = flattenMenusRef.current?.find((menu) => menu.id === item[0])
+                                setCurrentMenu(current as MenuItem)
+                                form.setFieldsValue({ ...current })
+                            }}
+                            onCheck={(item) => {
+                                setIds(item as number[])
+                            }}
+                            checkable={true}
+                            showIcon={false}
+                    />
+                </Spin>
+            </>
+    )
 }
 
 export default MenuTree

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', '保存成功'))
-      const menu = get(selectedMenuAtom)
-      store.set(selectedMenuAtom, {
-        ...menu,
-        id: res.data?.id
-      })
+
+      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