vite-antd-admin/src/components/Page/Edit.jsx

import React from 'react';
import { Button, Card, Form } from 'antd';
import { useSearchParams, useNavigate } from "react-router-dom";
import useBool from '@/utils/hooks/useBool';
import { restful } from '@/utils/request';
import Page from './index';

const FormItem = Form.Item;
const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };

export default (props) => {
  /**
   * resource 用来确定应该调用哪个接口
   * dataFunc 将 form 表单数据转换为接口需要格式, 一般情况下不需要这个操作
   * formDataFunc 将接口返回的值转换为 form 表单数据格式, 一般情况下不需要这个操作
   * width form 表单宽度, 默认 800px
   */
  const { resource, dataFunc, formDataFunc, width = '800px' } = props;
  const [loading, startLoading, stopLoading] = useBool();
  const [form] = Form.useForm();
  const navigate = useNavigate();

  // 获取 id query 参数, 如果存在说明是编辑，而不是新增
  const [params] = useSearchParams();
  const id = params.get("id");

  // 接口汇总
  const api = React.useMemo(() => {
    // 通过 resource 知道是哪个接口
    // 通过 restfule 生成 增删改查的接口
    const apis = restful(resource);

    // 返回三个接口
    // 1. 获取详情
    // 2. 新增
    // 3. 更新
    return {
      get: apis[1],
      save: apis[2],
      update: apis[3],
    }
  }, [resource]);
  
  const navBack = () => {
    const t = setTimeout(() => {
      navigate(-1);
      clearTimeout(t);
    }, 600);
  }

  // 表单提交
  const onFinish = (values) => {    
    startLoading();
    // 可能需要转换下格式
    const data = dataFunc ? dataFunc(id, values) : values;
    if (id) {
      api.update(id, data).then(() => {
        stopLoading();
        navBack();
      }).catch(stopLoading);
    } else {
      api.save(data)
        .then(() => {
          stopLoading();
          navBack();
        }).catch(stopLoading);
    }
  }

  // 查询详情
  React.useEffect(() => {
    if (id) {
      api.get(id).then(res => {
        // 此处可能需要转换下数据格式
        const formData = formDataFunc ? formDataFunc(res) : res;
        form.setFieldsValue(formData);
      })
    }
  }, [id]);

  return (
    <Page>
      <Card>
        <Form {...formItemLayout} form={form} onFinish={onFinish} style={{width}}>
          {props.children}
          <FormItem label=" " colon={false}>
            <Button type="default" onClick={() => navigate(-1)}>
              取消
            </Button>
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginLeft: '4em' }}
              loading={loading}
            >
              确认
            </Button>
          </FormItem>
        </Form>
      </Card>
    </Page>
  )
}