tsg-web/src/views/sz/zrrgl/form.js

import React, { useEffect, useState } from 'react';
import { Form, Button, Input, Row, Col, DatePicker, Modal,Image } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import apiurl from '../../../service/apiurl';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
const ModalForm = ({ mode, record, onEdit, onSave }) => {
 
  const [form] = Form.useForm();
  const types = [
    {
      label: "行政责任人",
      value: 1
    },
    {
      label: "主管部门责任人",
      value: 2
    }, {
      label: "管理单位责任人",
      value: 3
    }, {
      label: "巡查责任人",
      value: 4
    }, {
      label: "技术责任人",
      value: 5
    },
  ]
  const onFinish = (values) => {

    if (mode === 'edit') {
      values.id = record.id
      onEdit(apiurl.fxzb.sxfd.fxtj.edit, values)
    }
    if (mode === 'save') {
      onSave(apiurl.fxzb.sxfd.fxtj.save, values)
    }
  }


  return (
    <>
      <Form form={form} {...formItemLayout} onFinish={onFinish} initialValues={record}>
        <Row>
          <Col span={12}>
            <Form.Item
              label="责任类型"
              name="title"
              rules={[{ required: true }]}
            >
             <NormalSelect allowClear style={{ width: '100%' }} options={types} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="姓名"
              name="period"
              rules={[{ required: true }]}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="单位"
              name="org"
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="职务"
              name="tmPred"
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              label="联系方式"
              name="tmPred"
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              label="接收时间"
              name="tmRecv"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}

            >
              <Input.TextArea disabled={mode === 'view'} style={{width:'100%',minHeight:'50px'}}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;