Browse Source

完善菜单模块

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

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

@ -14,17 +14,17 @@ const BatchButton = () => {
return ( return (
<Popconfirm <Popconfirm
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>
) )
} }

18
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'
@ -10,13 +11,14 @@ type DataSourceType = {
} }
const fixRowKey = (data: DataSourceType[]) => { const fixRowKey = (data: DataSourceType[]) => {
return data.map((item, index) => ({ ...item, id: item.id ?? index+1 }))
return data.map((item, index) => ({ ...item, id: item.id ?? index + 1 }))
} }
const ButtonTable = (props: IDataProps & { 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,
@ -67,14 +69,14 @@ const ButtonTable = (props: IDataProps & {
<EditableProTable<DataSourceType> <EditableProTable<DataSourceType>
rowKey="id" rowKey="id"
value={values }
value={values}
onChange={onChange} onChange={onChange}
editableFormRef={editorFormRef} editableFormRef={editorFormRef}
recordCreatorProps={ recordCreatorProps={
{ {
newRecordType: 'dataSource', newRecordType: 'dataSource',
record: () => { record: () => {
return { id: ((value?? []).length + 1) } as DataSourceType
return { id: ((value ?? []).length + 1) } as DataSourceType
}, },
} }
} }

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