第一个 ModalForm

5

5

增删改查的 ProTable，配合 ModalForm。

添加

ModalFormCreate

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 (
    <ModalForm<TYPE.Info>
      title="添加数据"
      trigger={
        <Button type="primary">
          <PlusOutlined />
          添加
        </Button>
      }
      onFinish={(values) => {
        return operateCreate(values, props);
      }}
    >
      <ProFormText
        width="xl"
        name="title"
        label="名称"
        placeholder="请输入名称"
        rules={[
          {
            required: true,
            message: '请输入名称!',
          },
        ]}
      />
    </ModalForm>
  );
};

这是 Button 和 Form 绑定的逻辑，通过 trigger 触发。我封装了 request，增加了 afterAdd。

ProTable

export default () => {
  const tableAction = useRef<ActionType>();
  return ([
    <ProTable
      actionRef={tableAction}
      toolBarRender={()=>[
        <ModalFormCreate key="button" afterCreate={()=>{
          tableAction.current?.reload();
        }}/>,
      ]}
    />
  ]);
};

为了添加后刷新列表，增加了回调。

编辑

ModalFormEdit

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<TYPE.Info>();
  useImperativeHandle(ref, () => ({
    showModal: async (params: { id: number }) => {
      setFormData(await getInfo(params.id));
      setVisit(true);
    },
  }));
  if(!visit){
    return (<></>);
  }
  return (
  <ModalForm<TYPE.Info>
      visible={true}
      title="编辑数据"
      onFinish={(values) => {
        return afterSubmit({ ...values }, props);
      }}
      onVisibleChange={setVisit}
    >
      <ProFormText
        hidden={true}
        name="id"
        label="编号"
        initialValue={formData?.id}
      />
      <ProFormText
        width="xl"
        name="title"
        label="名称"
        placeholder="请输入名称"
        initialValue={formData?.title}
        rules={[
          {
            required: true,
            message: '请输入名称!',
          },
        ]}
      />
    </ModalForm>
  );
});

ProTable

export default () => {
  const modalFormEdit = useRef(ModalFormEdit);
  const columns: ProColumns<TYPE.Info>[] = [
    {
      title: '操作',
      valueType: 'option',
      width: 100,
      align: 'center',
      render: (text, record, _, action) => [
        <ButtonEdit key={'edit'} afterClick={()=>{
          modalFormEdit.current.showModal({id:record.id});
        }}></ButtonEdit>,
      ],
    },
  ];
};

说明

useImperativeHandle 是函数组件间通讯的 Hook，将子组件的操作暴露给父组件。这里为了让外部控制 modal 的隐藏和显示，定义了 showModal，外部通过 useRef 调用。
if(!visit)是因为 initialValue 只在第一次 render 时生效，后续 setFormData 不会更新。只好通过 visit 控制，进行重新渲染。