|
@ -13,15 +13,31 @@ import { BetaSchemaForm, ProColumns, ProFormColumnsType } from '@ant-design/pro- |
|
|
import { useApiContext } from '@/context.ts' |
|
|
import { useApiContext } from '@/context.ts' |
|
|
import { useDeepCompareEffect } from 'react-use' |
|
|
import { useDeepCompareEffect } from 'react-use' |
|
|
import { RFormTypes } from '@/types/r-form/model' |
|
|
import { RFormTypes } from '@/types/r-form/model' |
|
|
|
|
|
import { ProCoreActionType } from '@ant-design/pro-utils/es/typing' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export interface RFormProps { |
|
|
export interface RFormProps { |
|
|
title?: ReactNode |
|
|
title?: ReactNode |
|
|
namespace?: string |
|
|
namespace?: string |
|
|
columns?: ProColumns[] //重写columns
|
|
|
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 { styles, cx } = useStyle() |
|
|
const apiCtx = useApiContext() |
|
|
const apiCtx = useApiContext() |
|
@ -50,20 +66,13 @@ const RForm = ({ namespace, columns: propColumns = [], title }: RFormProps) => { |
|
|
|
|
|
|
|
|
useDeepCompareEffect(() => { |
|
|
useDeepCompareEffect(() => { |
|
|
|
|
|
|
|
|
const res = transformAntdTableProColumns(curdModal?.columns || [], propColumns) |
|
|
|
|
|
const _columns = [ { |
|
|
|
|
|
title: 'ID', |
|
|
|
|
|
dataIndex: 'id', |
|
|
|
|
|
hideInTable: true, |
|
|
|
|
|
hideInSearch: true, |
|
|
|
|
|
formItemProps: { hidden: true } |
|
|
|
|
|
} ].concat(res as any).concat([ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '操作', |
|
|
|
|
|
dataIndex: 'option', |
|
|
|
|
|
valueType: 'option', |
|
|
|
|
|
fixed: 'right', |
|
|
|
|
|
render: (_, record) => [ |
|
|
|
|
|
|
|
|
let res = transformAntdTableProColumns(curdModal?.columns || [], propColumns) |
|
|
|
|
|
if (resolveColumns) { |
|
|
|
|
|
res = resolveColumns(res) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const options = (record: any) => { |
|
|
|
|
|
return [ |
|
|
<Action key="edit" |
|
|
<Action key="edit" |
|
|
as={'a'} |
|
|
as={'a'} |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
@ -82,10 +91,30 @@ const RForm = ({ namespace, columns: propColumns = [], title }: RFormProps) => { |
|
|
</a> |
|
|
</a> |
|
|
</Popconfirm> |
|
|
</Popconfirm> |
|
|
] |
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const _columns = [ { |
|
|
|
|
|
title: 'ID', |
|
|
|
|
|
dataIndex: 'id', |
|
|
|
|
|
hideInTable: true, |
|
|
|
|
|
hideInSearch: true, |
|
|
|
|
|
formItemProps: { hidden: true } |
|
|
|
|
|
} ].concat(res as any).concat([ |
|
|
|
|
|
{ |
|
|
|
|
|
title: '操作', |
|
|
|
|
|
dataIndex: 'option', |
|
|
|
|
|
valueType: 'option', |
|
|
|
|
|
fixed: 'right', |
|
|
|
|
|
render: (_, record, index, action) => { |
|
|
|
|
|
if (renderColumnOptions) { |
|
|
|
|
|
return renderColumnOptions(record, options(record), index, action) |
|
|
|
|
|
} |
|
|
|
|
|
return options(record) |
|
|
|
|
|
} |
|
|
} as any |
|
|
} as any |
|
|
]) |
|
|
]) |
|
|
setColumns(_columns) |
|
|
setColumns(_columns) |
|
|
}, [ curdModal?.columns, propColumns, deleteModel, form, isDeleting, setOpen, ]) |
|
|
|
|
|
|
|
|
}, [ curdModal?.columns, propColumns, renderColumnOptions, resolveColumns, deleteModel, form, isDeleting, setOpen, ]) |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
if (apiCtx.isApi && apiCtx.api) { |
|
|
if (apiCtx.isApi && apiCtx.api) { |
|
@ -144,6 +173,15 @@ const RForm = ({ namespace, columns: propColumns = [], title }: RFormProps) => { |
|
|
type={'primary'}>{'添加'}</Button> |
|
|
type={'primary'}>{'添加'}</Button> |
|
|
</> |
|
|
</> |
|
|
|
|
|
|
|
|
|
|
|
const _renderActions = () => { |
|
|
|
|
|
if (renderActions) { |
|
|
|
|
|
return renderActions(tableTitle) |
|
|
|
|
|
} |
|
|
|
|
|
return <Space> |
|
|
|
|
|
{[ tableTitle, ...actions ]} |
|
|
|
|
|
</Space> |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
<ListPageLayout |
|
|
<ListPageLayout |
|
@ -153,7 +191,7 @@ const RForm = ({ namespace, columns: propColumns = [], title }: RFormProps) => { |
|
|
<ProTable |
|
|
<ProTable |
|
|
{...curdModal?.table} |
|
|
{...curdModal?.table} |
|
|
rowKey="id" |
|
|
rowKey="id" |
|
|
headerTitle={tableTitle} |
|
|
|
|
|
|
|
|
headerTitle={_renderActions()} |
|
|
toolbar={{ |
|
|
toolbar={{ |
|
|
/*search: { |
|
|
/*search: { |
|
|
loading: isFetching && !!search?.key, |
|
|
loading: isFetching && !!search?.key, |
|
@ -247,6 +285,7 @@ const RForm = ({ namespace, columns: propColumns = [], title }: RFormProps) => { |
|
|
}} |
|
|
}} |
|
|
loading={isSubmitting} |
|
|
loading={isSubmitting} |
|
|
onFinish={async (values) => { |
|
|
onFinish={async (values) => { |
|
|
|
|
|
console.log(values) |
|
|
saveOrUpdate(values as any) |
|
|
saveOrUpdate(values as any) |
|
|
}} |
|
|
}} |
|
|
columns={columns as ProFormColumnsType[]}/> |
|
|
columns={columns as ProFormColumnsType[]}/> |
|
|