diff --git a/src/pages/system/departments/components/DepartmentTree.tsx b/src/pages/system/departments/components/DepartmentTree.tsx index 4931a56..2aeabb3 100644 --- a/src/pages/system/departments/components/DepartmentTree.tsx +++ b/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(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 diff --git a/src/pages/system/departments/components/TreeNodeRender.tsx b/src/pages/system/departments/components/TreeNodeRender.tsx index 31eec28..4044f2b 100644 --- a/src/pages/system/departments/components/TreeNodeRender.tsx +++ b/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) diff --git a/src/pages/system/departments/index.tsx b/src/pages/system/departments/index.tsx index 2291df5..88734f3 100644 --- a/src/pages/system/departments/index.tsx +++ b/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() - const { defaultDepart, selectedDepartAtom, departTreeAtom, saveOrUpdateDepartAtom } = useDepartStore() const { data } = useAtomValue(departTreeAtom) const { mutate, isPending, isError, error } = useAtomValue(saveOrUpdateDepartAtom) const [ current, setCurrent ] = useAtom(selectedDepartAtom) diff --git a/src/pages/system/departments/store.ts b/src/pages/system/departments/store.ts index a130b34..4a582a8 100644 --- a/src/pages/system/departments/store.ts +++ b/src/pages/system/departments/store.ts @@ -9,9 +9,9 @@ import { message } from 'antd' const store = createStore() -const departPageAtom = atom({}) +export const departPageAtom = atom({}) -const defaultDepart = { +export const defaultDepart = { id: 0, parent_id: 0, name: '', @@ -20,11 +20,11 @@ const defaultDepart = { sort: 0, } as IDepartment -const batchIdsAtom = atom([]) +export const batchIdsAtom = atom([]) -const selectedDepartAtom = atom({} as IDepartment) +export const selectedDepartAtom = atom({} as IDepartment) -const departTreeAtom = atomWithQuery(() => { +export const departTreeAtom = atomWithQuery(() => { return { queryKey: [ 'departTree' ], @@ -37,10 +37,10 @@ const departTreeAtom = atomWithQuery(() => { } }) -const saveOrUpdateDepartAtom = atomWithMutation((get) => { +export const saveOrUpdateDepartAtom = atomWithMutation((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((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((get) => { +export const deleteDepartAtom = atomWithMutation((get) => { return { mutationKey: [ 'deleteDepart', get(batchIdsAtom) ], @@ -71,19 +75,10 @@ const deleteDepartAtom = atomWithMutation((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, -}) diff --git a/src/pages/system/menus/components/MenuTree.tsx b/src/pages/system/menus/components/MenuTree.tsx index dc234c0..ae1ee6c 100644 --- a/src/pages/system/menus/components/MenuTree.tsx +++ b/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([]) + const { styles } = useStyle() + const { t } = useTranslation() + const setCurrentMenu = useSetAtom(selectedMenuAtom) + const setIds = useSetAtom(batchIdsAtom) + const { data = [], isLoading } = useAtomValue(menuDataAtom) + const flattenMenusRef = useRef([]) - 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(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(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 - } + const renderEmpty = () => { + if ((data as any).length > 0 || isLoading) return null + return + } - return ( - <> - - { - renderEmpty() - } - { - return () - }} - 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} - /> - - - ) + return ( + <> + + { + renderEmpty() + } + { + return () + }} + 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} + /> + + + ) } export default MenuTree \ No newline at end of file diff --git a/src/pages/system/menus/store.ts b/src/pages/system/menus/store.ts index 2092cbc..7c07cd7 100644 --- a/src/pages/system/menus/store.ts +++ b/src/pages/system/menus/store.ts @@ -62,11 +62,14 @@ export const saveOrUpdateMenuAtom = atomWithMutation((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