From f27bc41eedee9d9ac8bc8d7bbb8b7e7d48ff2c3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E9=87=91?= Date: Mon, 22 Apr 2024 17:57:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=8F=9C=E5=8D=95=E6=A8=A1?= =?UTF-8?q?=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/system/menus/components/BatchButton.tsx | 42 +++--- src/pages/system/menus/components/ButtonTable.tsx | 144 +++++++++++---------- .../system/menus/components/TreeNodeRender.tsx | 78 +++++------ 3 files changed, 129 insertions(+), 135 deletions(-) diff --git a/src/pages/system/menus/components/BatchButton.tsx b/src/pages/system/menus/components/BatchButton.tsx index 2a55c67..ec15cfd 100644 --- a/src/pages/system/menus/components/BatchButton.tsx +++ b/src/pages/system/menus/components/BatchButton.tsx @@ -5,28 +5,28 @@ import { useTranslation } from '@/i18n.ts' const BatchButton = () => { - const { t } = useTranslation() - const { isPending, mutate, } = useAtomValue(deleteMenuAtom) - const ids = useAtomValue(batchIdsAtom) - if (ids.length === 0) { - return null - } + const { t } = useTranslation() + const { isPending, mutate, } = useAtomValue(deleteMenuAtom) + const ids = useAtomValue(batchIdsAtom) + if (ids.length === 0) { + return null + } - return ( - { - mutate(ids as number[]) - }} - title={t('system.menus.batchDel.confirm', '确定要删除所选数据吗？')}> - - - ) + return ( + { + mutate(ids as number[]) + }} + title={t('message.batchDelete', '确定要删除所选数据吗？')}> + + + ) } export default BatchButton \ No newline at end of file diff --git a/src/pages/system/menus/components/ButtonTable.tsx b/src/pages/system/menus/components/ButtonTable.tsx index dab5635..52d4124 100644 --- a/src/pages/system/menus/components/ButtonTable.tsx +++ b/src/pages/system/menus/components/ButtonTable.tsx @@ -1,97 +1,99 @@ +import { useTranslation } from '@/i18n.ts' import { EditableFormInstance, EditableProTable } from '@ant-design/pro-components' import { useMemo, useRef, useState } from 'react' import { IDataProps } from '@/types' import { FormInstance } from 'antd/lib' type DataSourceType = { - id: number, - name: string, - code: string, + id: number, + name: string, + code: string, } 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 & { - form: FormInstance + form: FormInstance }) => { - const { value, onChange } = props - const editorFormRef = useRef>() - const [ editableKeys, setEditableRowKeys ] = useState(() => { - return fixRowKey(value || []).map(item => item.id) - }) + const { t } = useTranslation() + const { value, onChange } = props + const editorFormRef = useRef>() + const [ editableKeys, setEditableRowKeys ] = useState(() => { + return fixRowKey(value || []).map(item => item.id) + }) - const values = fixRowKey(value || []) + const values = fixRowKey(value || []) - const columns = useMemo(() => { + const columns = useMemo(() => { - return [ - { - title: 'id', - dataIndex: 'id', - hideInTable: true, - }, - { - title: '名称', - dataIndex: 'label', - formItemProps: () => { - return { - rules: [ { required: true, message: '此项为必填项' } ], - } - }, - }, - { - title: '标识', - dataIndex: 'code', - formItemProps: () => { - return { - rules: [ { required: true, message: '此项为必填项' } ], - } - }, - }, + return [ + { + title: 'id', + dataIndex: 'id', + hideInTable: true, + }, + { + title: t('system.menus.form.table.columns.name', '名称'), + dataIndex: 'label', + formItemProps: () => { + return { + rules: [ { required: true, message: t('message.required') } ], + } + }, + }, + { + title: t('system.menus.form.table.columns.code', '标识'), + dataIndex: 'code', + formItemProps: () => { + return { + rules: [ { required: true, message: t('message.required') } ], + } + }, + }, - { - title: '操作', - valueType: 'option', - width: 80, + { + title: t('system.menus.form.table.columns.option', '操作'), + valueType: 'option', + width: 80, - } - ] + } + ] - }, []) + }, []) - return ( + return ( - - rowKey="id" - value={values } - onChange={onChange} - editableFormRef={editorFormRef} - recordCreatorProps={ - { - newRecordType: 'dataSource', - record: () => { - return { id: ((value?? []).length + 1) } as DataSourceType - }, - } - } - editable={{ - type: 'multiple', - editableKeys, - actionRender: (_row, _config, defaultDoms) => { - return [ defaultDoms.delete ] - }, - onValuesChange: (_record, recordList) => { - onChange?.(recordList) - }, - onChange: setEditableRowKeys, - }} - columns={columns as any} - /> - ) + + rowKey="id" + value={values} + onChange={onChange} + editableFormRef={editorFormRef} + recordCreatorProps={ + { + newRecordType: 'dataSource', + record: () => { + return { id: ((value ?? []).length + 1) } as DataSourceType + }, + } + } + editable={{ + type: 'multiple', + editableKeys, + actionRender: (_row, _config, defaultDoms) => { + return [ defaultDoms.delete ] + }, + onValuesChange: (_record, recordList) => { + onChange?.(recordList) + }, + onChange: setEditableRowKeys, + }} + columns={columns as any} + /> + ) } export default ButtonTable \ No newline at end of file diff --git a/src/pages/system/menus/components/TreeNodeRender.tsx b/src/pages/system/menus/components/TreeNodeRender.tsx index d857cd2..8091ae6 100644 --- a/src/pages/system/menus/components/TreeNodeRender.tsx +++ b/src/pages/system/menus/components/TreeNodeRender.tsx @@ -5,62 +5,54 @@ import { FormInstance } from 'antd/lib' import { useTranslation } from '@/i18n.ts' import { useStyle } from '../style.ts' 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 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 { title } = node + const { t } = useTranslation() + const { styles } = useStyle() + const { mutate, } = useAtomValue(deleteMenuAtom) - const setMenuData = useSetAtom(selectedMenuAtom) + const setMenuData = useSetAtom(selectedMenuAtom) - return ( -
- {title as any} - + return ( +
+ {title as any} + } - title={t('system.menus.add', '添加')} - onClick={(e) => { - // console.log('add') - e.stopPropagation() - e.preventDefault() + size={12} + icon={} + 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) - const menu = { - parent_id: node.id, - type: 'menu', - name: '', - title: '', - icon: '', - path: '', - component: '', - sort: 0, - id: 0, - } as MenuItem - setMenuData(menu) - form.setFieldsValue(menu) - - }}/> + }}/> { - mutate([ (node as any).id ]) - }} + title={t('message.deleteConfirm', '确定要删除吗？')} + onConfirm={() => { + mutate([ (node as any).id ]) + }} > { - e.stopPropagation() - e.stopPropagation() - }}/> + size={12} + onClick={(e) => { + e.stopPropagation() + e.stopPropagation() + }}/> -
- ) +
+ ) }) \ No newline at end of file