Browse Source

完善菜单模块

main
李金 7 months ago
parent
commit
f27bc41eed
  1. 4
      src/pages/system/menus/components/BatchButton.tsx
  2. 12
      src/pages/system/menus/components/ButtonTable.tsx
  3. 18
      src/pages/system/menus/components/TreeNodeRender.tsx

4
src/pages/system/menus/components/BatchButton.tsx

@ -17,14 +17,14 @@ const BatchButton = () => {
onConfirm={() => { onConfirm={() => {
mutate(ids as number[]) mutate(ids as number[])
}} }}
title={t('system.menus.batchDel.confirm', '确定要删除所选数据吗?')}>
title={t('message.batchDelete', '确定要删除所选数据吗?')}>
<Button <Button
type="primary" type="primary"
danger={true} danger={true}
size={'small'} size={'small'}
disabled={ids.length === 0} disabled={ids.length === 0}
loading={isPending} loading={isPending}
>{t('t.system.menus.batchDel', '批量删除')}</Button>
>{t('actions.batchDel', '批量删除')}</Button>
</Popconfirm> </Popconfirm>
) )
} }

12
src/pages/system/menus/components/ButtonTable.tsx

@ -1,3 +1,4 @@
import { useTranslation } from '@/i18n.ts'
import { EditableFormInstance, EditableProTable } from '@ant-design/pro-components' import { EditableFormInstance, EditableProTable } from '@ant-design/pro-components'
import { useMemo, useRef, useState } from 'react' import { useMemo, useRef, useState } from 'react'
import { IDataProps } from '@/types' import { IDataProps } from '@/types'
@ -17,6 +18,7 @@ const ButtonTable = (props: IDataProps & {
form: FormInstance form: FormInstance
}) => { }) => {
const { t } = useTranslation()
const { value, onChange } = props const { value, onChange } = props
const editorFormRef = useRef<EditableFormInstance<DataSourceType>>() const editorFormRef = useRef<EditableFormInstance<DataSourceType>>()
const [ editableKeys, setEditableRowKeys ] = useState<any[]>(() => { const [ editableKeys, setEditableRowKeys ] = useState<any[]>(() => {
@ -34,26 +36,26 @@ const ButtonTable = (props: IDataProps & {
hideInTable: true, hideInTable: true,
}, },
{ {
title: '名称',
title: t('system.menus.form.table.columns.name', '名称'),
dataIndex: 'label', dataIndex: 'label',
formItemProps: () => { formItemProps: () => {
return { return {
rules: [ { required: true, message: '此项为必填项' } ],
rules: [ { required: true, message: t('message.required') } ],
} }
}, },
}, },
{ {
title: '标识',
title: t('system.menus.form.table.columns.code', '标识'),
dataIndex: 'code', dataIndex: 'code',
formItemProps: () => { formItemProps: () => {
return { return {
rules: [ { required: true, message: '此项为必填项' } ],
rules: [ { required: true, message: t('message.required') } ],
} }
}, },
}, },
{ {
title: '操作',
title: t('system.menus.form.table.columns.option', '操作'),
valueType: 'option', valueType: 'option',
width: 80, width: 80,

18
src/pages/system/menus/components/TreeNodeRender.tsx

@ -5,7 +5,7 @@ import { FormInstance } from 'antd/lib'
import { useTranslation } from '@/i18n.ts' import { useTranslation } from '@/i18n.ts'
import { useStyle } from '../style.ts' import { useStyle } from '../style.ts'
import { useAtomValue, useSetAtom } from 'jotai/index' import { useAtomValue, useSetAtom } from 'jotai/index'
import { deleteMenuAtom, selectedMenuAtom } from '../store.ts'
import { defaultMenu, deleteMenuAtom, selectedMenuAtom } from '../store.ts'
import { PlusOutlined } from '@ant-design/icons' import { PlusOutlined } from '@ant-design/icons'
import ActionIcon, { DeleteAction } from '@/components/icon/action' import ActionIcon, { DeleteAction } from '@/components/icon/action'
@ -25,29 +25,21 @@ export const TreeNodeRender = memo(({ node, form }: { node: MenuItem & TreeDataN
<ActionIcon <ActionIcon
size={12} size={12}
icon={<PlusOutlined/>} icon={<PlusOutlined/>}
title={t('system.menus.add', '添加')}
title={t('actions.add', '添加')}
onClick={(e) => { onClick={(e) => {
// console.log('add') // console.log('add')
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
const menu = { const menu = {
...defaultMenu,
parent_id: node.id, parent_id: node.id,
type: 'menu',
name: '',
title: '',
icon: '',
path: '',
component: '',
sort: 0,
id: 0,
} as MenuItem
}
setMenuData(menu) setMenuData(menu)
form.setFieldsValue(menu) form.setFieldsValue(menu)
}}/> }}/>
<Popconfirm <Popconfirm
title={t('system.menus.delConfirm', '确定要删除吗?')}
title={t('message.deleteConfirm', '确定要删除吗?')}
onConfirm={() => { onConfirm={() => {
mutate([ (node as any).id ]) mutate([ (node as any).id ])
}} }}

Loading…
Cancel
Save