tsg-web/src/views/KrLine/form.js

import React,{useEffect,useState,useRef} from 'react';
import { Form, Button, Input, Row, Col} from 'antd';
import { formItemLayout, btnItemLayout } from '../../components/crud/FormLayoutProps';
import apiurl from '../../service/apiurl';
const ModalForm = ({ mode, record,onEdit,onSave,onCrudSuccess }) => {
  const [form] = Form.useForm();
  const onFinish = async (values) => {
    values.resCode = "42112230001"
    values.id = record?.id
    if (mode === 'edit') {
      const params = {
        ...record,
        rz: Number(values?.rz),
        w: Number(values?.w),
      }
      onEdit(apiurl.krline.update,params)
    }
    if (mode === 'save') {
      onSave(apiurl.krline.save,values)
    }
  }
  
  return (
    <>
      <Form
        form={form}
        // {...formItemLayout}
        onFinish={onFinish}
        initialValues={record}>
      <Row>
          <Col span={24}>
              <Form.Item
                label="水位(m)"
                name="rz"
                labelCol={{ span: 5, offset: 0 }}
                wrapperCol={{span:19,offset:0}}
                rules={[{ required: true }]}
              >
              <Input
                style={{ width: '100%' }}
                allowClear
              />
              </Form.Item>
          </Col>
      </Row>

      <Row>
          <Col span={24}>
              <Form.Item
                label="库容(万m³)"
                name="w"
                labelCol={{ span: 5, offset: 0 }}
                wrapperCol={{span:19,offset:0}}
                rules={[{ required: true }]}
              >
               <Input
                style={{ width: '100%' }}
                allowClear
              />
              </Form.Item>
          </Col> 
      </Row>
      {
        mode==='view'?null:(
          <>
          <Form.Item {...btnItemLayout}>
            <Button type="primary" htmlType="submit">
              {mode === 'save' ? '提交' : '修改'}
            </Button>
          </Form.Item>
          </>
        )
      }
      </Form>
    </>
  );
}

export default ModalForm;