ss-system-web/src/views/jczd/aqjcd/form.js

import React, { useEffect, useState, useRef } from 'react';
import apiurl from '../../../service/apiurl';
import { message, Tabs, Form, Input, Button, Col, Row, DatePicker, InputNumber, TreeSelect } from 'antd'
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
import { httppost2 } from '../../../utils/request';

const ModalForm = ({ mode, record, onEdit, onSave, onCrudSuccess, close }) => {
  const dataList = [
    { label: '自动', value: 0 },
    { label: '手动', value: 1 },
  ]

   const typeList = [
    { label: '渗流', value: 1 },
    { label: '水文', value: 2 },
    { label: '位移', value: 3 },
  ]
  const statusList = [
    { label: '有效', value: 1 },
    { label: '无效', value: 0 },
  ]

  const [form] = Form.useForm();
    const [list, setList] = useState([])
  
 const getDmList = async () => {
    try {
      const { data } = await httppost2(apiurl.jctx.aqjcd.list);
      setList(data.map(item=>({label:item.profileName,value:item.profileCode})))
    } catch (error) {
      console.log(error);
    }
  }
  const onFinish = (val) => {
    const year = val.year ? (moment.isMoment(val.year) ? val.year.format('YYYY') : moment(val.year).format('YYYY')) : undefined;
    val.year = year;
    if (mode == 'save') {
      onSave(apiurl.jctx.aqjcd.save,val)
    }
     if (mode == 'edit') {
      onEdit(apiurl.jctx.aqjcd.edit,{...record,...val},'post')
    }
  }

  useEffect(() => {
    if (mode != "save" && record) {
      const year = record.year ? moment(record.year) : null;
      const obj = {...record,year}
      form.setFieldsValue(obj);
    }
  }, [mode, record])
  
  useEffect(() => {
      getDmList();
    }, [])
  return (
    <>
      <Form form={form} {...formItemLayout} onFinish={onFinish} >
        <Row>
          <Col span={12}>
            <Form.Item
              label="测站编码"
              name="code"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
              rules={[{ required: true }]}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="监测类型"
              name="type"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
              rules={[{ required: true }]}
            >
              <NormalSelect options={typeList} disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="监测断面"
              name="dm"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
            >
              <NormalSelect options={list} disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
              <Col span={12}>
            <Form.Item
              label="经度"
              name="lgtd"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
              rules={[{ required: true }]}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="纬度"
              name="lttd"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
              rules={[{ required: true }]}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="管口高程(m)"
              name="pipeElevation"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="管底高程(m)"
              name="pipeBottomElevation"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="数据采集方式"
              name="dataCollection"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
              rules={[{ required: true }]}
            >
              <NormalSelect options={dataList} disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
           <Col span={12}>
            <Form.Item
              label="站点状态"
              name="stationStatus"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
              rules={[{ required: true }]}
            >
              <NormalSelect options={statusList} disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
           <Col span={12}>
            <Form.Item
              label="建设年份"
              name="year"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
            >
              <DatePicker
                picker="year"
                style={{ width: '100%' }}
                disabled={mode === 'view'}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="承建单位"
              name="buildUnit"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="运维单位"
              name="operateUnit"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 14 }}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="站址"
              name="address"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
         
          
          <Col span={24}>
            <Form.Item
              label="备注"
              name="remark"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
              <Input disabled={mode === 'view'} 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;