You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
2.2 KiB
59 lines
2.2 KiB
|
|
import { memo } from 'react'
|
|
import { MenuItem } from '@/global'
|
|
import { Popconfirm, Space, TreeDataNode } from 'antd'
|
|
import { FormInstance } from 'antd/lib'
|
|
import { useTranslation } from '@/i18n.ts'
|
|
import { useStyle } from '../style.ts'
|
|
import { useAtomValue, useSetAtom } from 'jotai'
|
|
import { defaultMenu, deleteMenuAtom, selectedMenuAtom } from '@/store/menu.ts'
|
|
import { PlusOutlined } from '@ant-design/icons'
|
|
import ActionIcon, { DeleteAction } from '@/components/icon/action'
|
|
|
|
export const TreeNodeRender = memo(({ node, form }: { node: MenuItem & TreeDataNode, form: FormInstance }) => {
|
|
const { title } = node
|
|
const { t } = useTranslation()
|
|
const { styles } = useStyle()
|
|
const { mutate } = useAtomValue(deleteMenuAtom)
|
|
|
|
const setMenuData = useSetAtom(selectedMenuAtom)
|
|
|
|
return (
|
|
<div className={styles.treeNode}>
|
|
<span>{title as any}</span>
|
|
<span className={'actions'}>
|
|
<Space size={'middle'}>
|
|
<ActionIcon
|
|
size={12}
|
|
icon={<PlusOutlined/>}
|
|
title={t('actions.add', '添加')}
|
|
onClick={(e) => {
|
|
// console.log('add')
|
|
e.stopPropagation()
|
|
e.preventDefault()
|
|
const menu = {
|
|
...defaultMenu,
|
|
parent_id: node.id,
|
|
}
|
|
setMenuData(menu)
|
|
form.setFieldsValue(menu)
|
|
|
|
}}/>
|
|
<Popconfirm
|
|
title={t('message.deleteConfirm', '确定要删除吗？')}
|
|
onConfirm={() => {
|
|
mutate([ (node as any).id ])
|
|
}}
|
|
>
|
|
<DeleteAction
|
|
size={12}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
e.stopPropagation()
|
|
}}/>
|
|
</Popconfirm>
|
|
</Space>
|
|
</span>
|
|
</div>
|
|
)
|
|
})
|