admin/src/pages/dish/edit/index.jsx

import { addDish, updataDish, getDishById, getDishList } from '@/services/api/dish';
import { queryTable } from '@/utils/request';
import { PageContainer, ProForm, ProFormDigit, ProFormText, ModalForm, Select, Option } from '@ant-design/pro-components';
import { history, useSearchParams } from '@umijs/max';
import { Card, Col, message, Row, Space, Image } from 'antd';
import { values } from 'lodash';
import { useEffect, useRef, useState } from 'react';

export default (props) => {
  const [searchParams, setSearchParams] = useSearchParams();
  const id = searchParams.get('id');
  const [data, setData] = useState({});
  const formRef = useRef();
  useEffect(() => {
    if (id) {
      getDishById(id).then((res) => {
        setData(res);

        formRef.current.setFieldsValue(res);
      });
    }
  }, [id]);

  const onFinish = async (values) => {
    console.log(values)

    if (id) {
      // 修改
      updataDish(id, { ...values }).then((res) => {
        message.success('修改成功');
        history.back();
      });
    } else {
      // 新增
      addDish({ ...values }).then((res) => {
        message.success('添加成功');
        history.back();
      });
    }

    return false;
  };

  return (
    <PageContainer>
      <Card>
        <ProForm
          formRef={formRef}
          layout={'horizontal'}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          initialValues={{ type: '1', state: '1' }}
          submitter={{
            searchConfig: {
              resetText: '返回',
            },
            onReset: () => history.back(),
            render: (props, doms) => {
              return (
                <Row>
                  <Col span={8} offset={8}>
                    <Space>{doms}</Space>

                  </Col>
                </Row>
              );
            },
          }}
        >
          <ProFormText name="name" label="菜肴名称" placeholder="请输入菜肴名称" width={460} />
          <ProFormText name="unit" label="菜肴单位" placeholder="请输入菜肴单位" width={460} />
          {/* <Select label="包含食材" mode="multiple" >
            <Option></Option>
            <Option></Option>
          </Select> */}

        </ProForm>
      </Card>
    </PageContainer>

  );
};