tsg-web/src/views/fxzb/txl/form.js

import React,{useEffect,useState} from 'react';
import { Form, Button, Input, Row, Col, DatePicker, Upload,message } from 'antd';
import { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import { createCrudService } from '../../../components/crud/_';
import apiurl from '../../../service/apiurl';
import moment from 'moment';
import "./index.less"
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const ModalForm = ({ mode, record,onEdit,onSave }) => {
  if(record.tmStart && record.tmEnd) {
    record.tmStart = moment(record.tmStart)
    record.tmEnd = moment(record.tmEnd)
  }
  const [form] = Form.useForm();

  console.log("record",record);
   /**
   * @description 表单重置
   */
   const onReset = () => {
    form.resetFields();
  };
  const onFinish = async(values) => {
    values.departmentCode = record.departmentCode
    if (mode === 'edit') {
      values.userId = record.userId
      onEdit(apiurl.fxzb.txl.edit,values)
    }
    if (mode === 'save') {
      onSave(apiurl.fxzb.txl.save,values)
    }
  }

  return (
    <>
    <Form form={form} {...formItemLayout} onFinish={onFinish} initialValues={record}>
      <Row>
          <Col span={24}>
              <Form.Item
                label="姓名"
                name="userName"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                rules={[{ required: true }]}
              >
                <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
      </Row>
      <Row>
          <Col span={24}>
              <Form.Item
                label="职务"
                name="duty"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                rules={[{ required: true }]}
              >
               <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />  
              </Form.Item>
          </Col>
      </Row>
      <Row>
          <Col span={24}>
              <Form.Item
                label="联系电话"
                name="phone"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                rules={[{ required: true }]}
              >
                <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
      </Row>
      
      {
        mode==='view'?null:(
          <>
              <Form.Item wrapperCol={{ span: 6, offset: 14 }}>
            <Button onClick={onReset} style={{marginRight:10}}>
              重置
            </Button>
            <Button type="primary" htmlType="submit">
              {mode === 'save' ? '提交' : '修改'}
            </Button>
          </Form.Item>
          </>
        )
      }
    </Form>
    </>
  );
}

export default ModalForm;