增删改查的 ProTable,配合 ModalForm。
## 添加
### ModalFormCreate
```typescript
import { Button } from 'antd';
import { ModalForm, ProFormText } from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
import * as SPXH from '@/services/erp/sp-xh';
type Props = {
afterCreate: (params: TYPE.Info) => void;
};
async function operateCreate(values: TYPE.Info, props: Props) {
return SPXH.store(values).then((res) => {
props.afterCreate(res);
return true;
});
}
export default (props: Props) => {
return (
title="添加数据"
trigger={
}
onFinish={(values) => {
return operateCreate(values, props);
}}
>
);
};
```
这是 Button 和 Form 绑定的逻辑,通过 trigger 触发。我封装了 request,增加了 afterAdd。
### ProTable
```typescript
export default () => {
const tableAction = useRef();
return ([
[
{
tableAction.current?.reload();
}}/>,
]}
/>
]);
};
```
为了添加后刷新列表,增加了回调。
## 编辑
### ModalFormEdit
```typescript
import { ModalForm, ProFormText } from '@ant-design/pro-form';
import { forwardRef, useImperativeHandle, useState } from 'react';
import * as SPXH from '@/services/erp/sp-xh';
type Props = {
key?: string | number;
afterSubmit: (params: TYPE.Info) => void;
};
async function afterSubmit(values: TYPE.Info, props: Props) {
const result = await SPXH.update(values);
props.afterSubmit(result);
return true;
}
async function getInfo(id: number) {
return await SPXH.getInfo(id);
}
export default forwardRef((props: Props, ref: any) => {
const [visit, setVisit] = useState(false);
const [formData, setFormData] = useState();
useImperativeHandle(ref, () => ({
showModal: async (params: { id: number }) => {
setFormData(await getInfo(params.id));
setVisit(true);
},
}));
if(!visit){
return (<>>);
}
return (
visible={true}
title="编辑数据"
onFinish={(values) => {
return afterSubmit({ ...values }, props);
}}
onVisibleChange={setVisit}
>
);
});
```
### ProTable
```typescript
export default () => {
const modalFormEdit = useRef(ModalFormEdit);
const columns: ProColumns[] = [
{
title: '操作',
valueType: 'option',
width: 100,
align: 'center',
render: (text, record, _, action) => [
{
modalFormEdit.current.showModal({id:record.id});
}}>,
],
},
];
};
```
### 说明
**useImperativeHandle** 是函数组件间通讯的 Hook,将子组件的操作暴露给父组件。这里为了让外部控制 modal 的隐藏和显示,定义了 showModal,外部通过 useRef 调用。
**if(!visit)**是因为 initialValue 只在第一次 render 时生效,后续 setFormData 不会更新。只好通过 visit 控制,进行重新渲染。