|
|
@ -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 |