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/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返回的结构
+
>
}