tsg-web/src/views/gcaqjc/sjtjcx/sjlr/sy/form.js

import React,{useEffect,useState,useMemo} from 'react';
import { Form, Button, Input, Row, Col, DatePicker, Upload,message,Image,Modal,Radio, InputNumber } from 'antd';
import { formItemLayout, btnItemLayout } from '../../../../../components/crud/FormLayoutProps';
import apiurl from '../../../../../service/apiurl';
import NormalSelect from '../../../../../components/Form/NormalSelect';
import { httppost2 } from '../../../../../utils/request';

import moment from 'moment';
const ModalForm = ({ mode, record,onEdit,onSave,onSimilarSave }) => {
  console.log("record",record);
  const [form] = Form.useForm();
  const [dmList, setDmList] = useState([])
  const [codeList, setCodeList] = useState([])
  const [dmCode,setDmCode] = useState('')

  const onFinish = (values) => {
    if (mode === 'edit') {
      onEdit(apiurl.gcaqjc.sjtjcx.sjlr.syjc.edit,{...record,...values})
    }
    if (mode === 'save') {
      onSave(apiurl.gcaqjc.sjtjcx.sjlr.syjc.save,values)
    }
  
  }



  const getDmList = async () => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.sycx.list)
      setDmList(res.data.map(s=>({label:s.profileName,value:s.profileCode})));
    } catch (error) {
      console.log(error);
    }
  } 

  const getStationCode = async () => {
    try {
      const res = await httppost2(apiurl.gcaqjc.gcaqyj.yjgzpz.list)
      setCodeList(res.data);
    } catch (error) {
      console.log(error);
    }
  }
  
 
  useEffect(()=>{
    getDmList()
    getStationCode()
  }, [])
  
  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onFinish}
        initialValues={record}
      >
      <Row>
         <Col span={12}>
              <Form.Item
                label="水库代码"
                name="rscd"
                rules={[{ required: true }]}
              >
              <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="水工建筑物编号"
                name="hycncd"
                rules={[{ required: true }]}
              >
              <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
           <Col span={12}>
              <Form.Item
                label="测点编号"
                rules={[{ required: true }]}
                name="mpcd"
              >
              <NormalSelect
                disabled={true}
                allowClear
                style={{ width: "100%" }}
                options={codeList.map(o => ({ label: o.mpcd, value: o.mpcd }))}
              />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="测量时间"
                name="mstm"
                getValueFromEvent={(e,dateString) => dateString}
                getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
              >
                <DatePicker disabled={true} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear showTime />
              </Form.Item>
          </Col>    
          <Col span={12}>
              <Form.Item
                label="温度(℃)"
                name="tm"
              >
                <InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="渗流压力水位(m)"
                name="spprwl"
              >
                <InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>  
      </Row>
      
      {
        mode==='view'?null:(
          <>
          <Form.Item {...btnItemLayout}>
            <Button type="primary" htmlType="submit">
                  {mode === 'save' ? '保存' :
                    mode === "similarSave" ? "保存" :
                    '修改'}
            </Button>
          </Form.Item>
          </>
        )
      }
      </Form>
    </>
  );
}

export default ModalForm;