李金
7 months ago
3 changed files with 129 additions and 135 deletions
-
42src/pages/system/menus/components/BatchButton.tsx
-
144src/pages/system/menus/components/ButtonTable.tsx
-
78src/pages/system/menus/components/TreeNodeRender.tsx
@ -1,97 +1,99 @@ |
|||||
|
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' |
||||
import { FormInstance } from 'antd/lib' |
import { FormInstance } from 'antd/lib' |
||||
|
|
||||
type DataSourceType = { |
type DataSourceType = { |
||||
id: number, |
|
||||
name: string, |
|
||||
code: string, |
|
||||
|
id: number, |
||||
|
name: string, |
||||
|
code: string, |
||||
} |
} |
||||
|
|
||||
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 { value, onChange } = props |
|
||||
const editorFormRef = useRef<EditableFormInstance<DataSourceType>>() |
|
||||
const [ editableKeys, setEditableRowKeys ] = useState<any[]>(() => { |
|
||||
return fixRowKey(value || []).map(item => item.id) |
|
||||
}) |
|
||||
|
const { t } = useTranslation() |
||||
|
const { value, onChange } = props |
||||
|
const editorFormRef = useRef<EditableFormInstance<DataSourceType>>() |
||||
|
const [ editableKeys, setEditableRowKeys ] = useState<any[]>(() => { |
||||
|
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 ( |
||||
|
|
||||
<EditableProTable<DataSourceType> |
|
||||
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} |
|
||||
/> |
|
||||
) |
|
||||
|
<EditableProTable<DataSourceType> |
||||
|
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 |
export default ButtonTable |
Write
Preview
Loading…
Cancel
Save
Reference in new issue