diff --git a/src/components/r-form/index.tsx b/src/components/r-form/index.tsx index c47f638..4c9a3cf 100644 --- a/src/components/r-form/index.tsx +++ b/src/components/r-form/index.tsx @@ -13,15 +13,31 @@ import { BetaSchemaForm, ProColumns, ProFormColumnsType } from '@ant-design/pro- import { useApiContext } from '@/context.ts' import { useDeepCompareEffect } from 'react-use' import { RFormTypes } from '@/types/r-form/model' +import { ProCoreActionType } from '@ant-design/pro-utils/es/typing' export interface RFormProps { title?: ReactNode namespace?: string columns?: ProColumns[] //重写columns + actions?: ReactNode[] | JSX.Element[] //左上角的操作按钮 + + toolbar?: ReactNode //工具栏 + renderActions?: (addAction: ReactNode) => ReactNode //渲染操作按钮 + resolveColumns?: (columns: ProColumns[]) => ProColumns[] //处理columns + renderColumnOptions?: (record: any, defaultOptions: ReactNode[], index: number, action: ProCoreActionType | undefined) => ReactNode //渲染列的操作 } -const RForm = ({ namespace, columns: propColumns = [], title }: RFormProps) => { +const RForm = ( + { + namespace, + actions = [], + toolbar, + resolveColumns, + renderActions, + renderColumnOptions, + columns: propColumns = [], title + }: RFormProps) => { const { styles, cx } = useStyle() const apiCtx = useApiContext() @@ -50,7 +66,33 @@ const RForm = ({ namespace, columns: propColumns = [], title }: RFormProps) => { useDeepCompareEffect(() => { - const res = transformAntdTableProColumns(curdModal?.columns || [], propColumns) + let res = transformAntdTableProColumns(curdModal?.columns || [], propColumns) + if (resolveColumns) { + res = resolveColumns(res) + } + + const options = (record: any) => { + return [ + { + form.setFieldsValue(record) + setOpen(true) + }}>{'编辑'}, + { + deleteModel([ record.id ]) + }} + title={'确定要删除吗?'}> + + 删除 + + + ] + } + const _columns = [ { title: 'ID', dataIndex: 'id', @@ -63,29 +105,16 @@ const RForm = ({ namespace, columns: propColumns = [], title }: RFormProps) => { dataIndex: 'option', valueType: 'option', fixed: 'right', - render: (_, record) => [ - { - form.setFieldsValue(record) - setOpen(true) - }}>{'编辑'}, - { - deleteModel([ record.id ]) - }} - title={'确定要删除吗?'}> - - 删除 - - - ] + render: (_, record, index, action) => { + if (renderColumnOptions) { + return renderColumnOptions(record, options(record), index, action) + } + return options(record) + } } as any ]) setColumns(_columns) - }, [ curdModal?.columns, propColumns, deleteModel, form, isDeleting, setOpen, ]) + }, [ curdModal?.columns, propColumns, renderColumnOptions, resolveColumns, deleteModel, form, isDeleting, setOpen, ]) useEffect(() => { if (apiCtx.isApi && apiCtx.api) { @@ -144,6 +173,15 @@ const RForm = ({ namespace, columns: propColumns = [], title }: RFormProps) => { type={'primary'}>{'添加'} + const _renderActions = () => { + if (renderActions) { + return renderActions(tableTitle) + } + return + {[ tableTitle, ...actions ]} + + } + return ( <> { { }} loading={isSubmitting} onFinish={async (values) => { + console.log(values) saveOrUpdate(values as any) }} columns={columns as ProFormColumnsType[]}/> diff --git a/src/components/r-form/utils/index.tsx b/src/components/r-form/utils/index.tsx index d96665b..fe09b6f 100644 --- a/src/components/r-form/utils/index.tsx +++ b/src/components/r-form/utils/index.tsx @@ -72,7 +72,7 @@ export const transformAntdTableProColumns = (columns: ProColumns[], overwriteCol return { title: i.label || i[label || 'name'], label: i.label || i[label || 'name'], - value: i.value || i[value || 'id'], + value: i.value ?? i[value || 'id'], disabled, data: i } diff --git a/src/layout/RootLayout.tsx b/src/layout/RootLayout.tsx index 04c9ad1..09f60ae 100644 --- a/src/layout/RootLayout.tsx +++ b/src/layout/RootLayout.tsx @@ -127,7 +127,7 @@ export default () => { color: '#00000012', size: 17, }, - zindex: 1009, + zIndex: 1009, } as any } style={{ width: '100vw', height: '100vh' }}> { + const [ json, setJson ] = useState('') + const [ open, setOpen ] = useState(false) + const [ columns, setColumns ] = useState() + + const actions = [ + + ] + + const renderOptions = (record: any, defaultOptions: ReactNode[], index: number, action: ProCoreActionType | undefined) => { + return [ + ...defaultOptions, + + ] + } + return <> - + columns ?? cols}/> + setOpen(false)} + onOk={() => { + try { + const data = JSON.parse(json) + //如果是Array, 检查元素是否为ProColumns + if (Array.isArray(data)) { + if (data.length > 0 && hasIn(data[0], 'dataIndex')) { + setColumns(data as any) + setOpen(false) + return + } + } + if (hasIn(data, 'data.page.columns')) { + setColumns(get(data, 'data.page.columns')) + setOpen(false) + return + } + message.error('JSON格式错误, 请确保是ProColumns或者包含data.page.columns的对象') + + } catch (e) { + message.error('JSON格式错误') + } + }} + > + { + setJson(e.target.value) + }}/> + 请确保是Antd.Table.Columns数组或者xxx/ui/curd返回的结构 + }