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.map(s=>({label:s.stationCode,value:s.stationCode,profileCode:s.profileCode})));
    } 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="tm"
                getValueFromEvent={(e,dateString) => dateString}
                getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
                rules={[{required: true}]}
              >
                <DatePicker disabled={mode==='view'||mode==='edit'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear showTime />
              </Form.Item>
          </Col>  
          <Col span={12}>
              <Form.Item
                label="监测断面"
                name="profileCode"
                rules={[{ required: true }]}
              >
              <NormalSelect
                disabled={mode==='view'||mode==='edit'}
                allowClear
                style={{ width: "100%" }}
                options={dmList}
                onChange={(v)=>{
                  form.setFieldValue('stationCode',null)
                  setDmCode(v)
                }}
              />
              </Form.Item>
          </Col>  
      </Row>

      <Row>
          <Col span={12}>
              <Form.Item
                label="测点编号"
                rules={[{ required: true }]}
                name="stationCode"
               
              >
              <NormalSelect
                disabled={mode==='view'||mode==='edit'}
                allowClear
                style={{ width: "100%" }}
                options={codeList.filter(o=>dmCode?o.profileCode===dmCode:true)}
              />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="通道号"
                rules={[{ required: true }]}
                name="chan"
              >
                <InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>  
      </Row>
      <Row>
          <Col span={12}>
              <Form.Item
                label="测压管水位(m)"
                name="value"
              >
                <InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="渗压(KPa)"
                name="press"
              >
                <InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>  
      </Row>
      <Row>
          <Col span={12}>
              <Form.Item
                label="振弦(Hz)"
                name="vib"
              >
                <InputNumber disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="温度(℃)"
                name="temp"
              >
                <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;