tsg-web/src/views/gcaqjc/gcaqyj/yjgzpz/form.js

import React,{useEffect,useState,useMemo} from 'react';
import { Form, Button, Input, Row, Col, DatePicker, Upload,message,Image,Modal,Radio } 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 }) => {
  const optionsType = [
    {
      label: "渗压监测",
      value:1
    },
    {
      label: "渗流监测",
      value:2
    },
    {
      label:"位移监测",
      value:3
    },
  ]
  const optionsLevel = [
    {
      label: "黄色告警",
      value:1
    },
    {
      label: "红色告警",
      value:2
    },
  ]

  const conditionOneType = [
    {
      label: ">",
      value:">"
    },
    {
      label: "<",
      value:"<"
    },
    {
      label: "=",
      value:"="
    },
    {
      label: ">=",
      value:">="
    },
    {
      label: "<=",
      value:"<="
    },
    {
      label: "!=",
      value:"!="
    },
  ]
 

  const condition = [
    {
      label: "且",
      value:1
    },
    {
      label: "或",
      value:2
    },
  ]

  const wyOptions = [
    {
      label: "X方向",
      value:"x"
    },
    {
      label: "Y方向",
      value:"y"
    },
    {
      label: "H方向",
      value:"h"
    },
  ]

  console.log("record",record);
  const [form] = Form.useForm();
  const [staCodeList, setStaCodeList] = useState([])
  const [Condition, setCondition] = useState("")
  const [types, setTypes] = useState('')
  const [slStacodeList, setSlStacodeList] = useState([])
  const onFinish = (values) => {
    values.valueOne = values.valueOne ? Number(values.valueOne) : ''
    values.valueTwo = values.valueTwo ? Number(values.valueTwo)  : ''
    if (mode === 'edit') {
      values.id = record.id;
      values.createTime = record.createTime
      onEdit(apiurl.gcaqjc.gcaqyj.yjgzpz.edit,values)
    }
    if (mode === 'save') {
      onSave(apiurl.gcaqjc.gcaqyj.yjgzpz.save,values)
    }
  
  }

  const [codeList, setCodeList] = useState([])

  const getwYCode = async () => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.wycx.list)
      setCodeList(res.data.map(s=>({label:s.stationCode,value:s.stationCode})));
    } catch (error) {
      console.log(error);
    }
  }

  const getSlCode = async () => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.wycx.slList)
      setSlStacodeList(res.data.map(s=>({label:s.stationCode,value:s.stationCode})));
    } catch (error) {
      console.log(error);
    }
  }
 const getStationCode = async () => {
  try {
    const res = await httppost2(apiurl.gcaqjc.gcaqyj.yjgzpz.list)
    setStaCodeList(res.data.map(s=>({label:s.stationCode,value:s.stationCode})));
  } catch (error) {
    console.log(error);
  }
}
 
  useEffect(()=>{
    if (mode !== "save" ) {
        // getFileInfo(record)
      setCondition(record?.condition)
      setTypes(record.type)
    }
  }, [record, mode])

  useEffect(() => {
    getwYCode()
    getStationCode()
    getSlCode()
  }, [])
  useEffect(() => {
    if (mode == "save") {
        form.setFieldValue("status", 1)
    }
  }, [mode])
  
  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onFinish}
        initialValues={record}
      >
      <Row>
          <Col span={12}>
              <Form.Item
                label="告警类型"
                name="type"
                rules={[{ required: true }]}
              >
              <NormalSelect
                disabled={mode === 'view'}
                style={{ width: '100%' }}
                allowClear options={optionsType}
                onChange={(e) => setTypes(e)}
              />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="告警级别"
                name="level"
                rules={[{ required: true }]}
              >
              <NormalSelect
                disabled={mode === 'view'}
                style={{ width: '100%' }}
                allowClear
                options={optionsLevel}

              />
              </Form.Item>
          </Col>  
      </Row>

      <Row>
          <Col span={12}>
              <Form.Item
                label="测点编号"
                rules={[{ required: true }]}
                name="stationCode"
               
              >
              <NormalSelect
                disabled={mode === 'view'}
                style={{ width: '100%' }}
                allowClear 
                options={
                  types == 3 ? codeList : 
                    types == 1 ? staCodeList : slStacodeList
                  } />
              </Form.Item>
          </Col>
          <Col span={12}>
              <Form.Item
                label="校验规则描述"
                rules={[{ required: true }]}
                name="ruleDesc"
              >
                <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>  
      </Row>
        {types != 3 ?
          <>
             <Row>
          <Col span={12}>
              <Form.Item
                label="阈值"
                name="conditionOne"
              rules={[{ required: true }]}
              >
              
              <NormalSelect  disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={conditionOneType} />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
                label=""
                name="valueOne"
              rules={[{ required: true }]}
              >
              <Input type='num' disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
            </Col>
          <Col span={6}>
             <Form.Item
                label=""
                name="condition"

              >
              <NormalSelect
                disabled={mode === 'view'}
                style={{ width: '100%' }}
                allowClear
                options={condition}
                onChange={(e) => { setCondition(e)} }
              />
            </Form.Item>
          </Col>
      </Row>
      <Row>
          <Col span={12}>
              <Form.Item
                label=""
                name="conditionTwo"
                wrapperCol={{span:18,offset:6}}
                rules={[{ required: Condition ? true : false}]}
              >
                <NormalSelect  disabled={mode === 'view' || !Condition} style={{ width: '78%' }} allowClear options={conditionOneType} />
              </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
                label=""
                name="valueTwo"
                rules={[{ required: Condition ? true : false}]}
              >
              <Input type='num' disabled={mode === 'view'|| !Condition} style={{ width: '100%' }} allowClear />
            </Form.Item>
            </Col>
        </Row>
          </>
          :
          <>
             <Row>
          <Col span={12}>
              <Form.Item
                label="阈值"
                name="direction"
              rules={[{ required: true }]}
              >
              
              <NormalSelect  disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={wyOptions} />
            </Form.Item>
          </Col>
       
      </Row>
      <Row >
      <Col span={6} >
            <Form.Item
                label=""
                name="conditionOne"
              rules={[{ required: true }]}
              wrapperCol={{span:12,offset:12}}
              >
              <NormalSelect  disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={conditionOneType} />
            </Form.Item>
            </Col>
       <Col span={4}>
            <Form.Item
                label=""
                name="valueOne"
                wrapperCol={{span:20,offset:4}}
                // wrapperCol={{span:20,offset:9}}
              >
              <Input type='num' disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
            </Form.Item>
            </Col>    
          <Col span={3}>
             <Form.Item
                label=""
                name="condition"
                wrapperCol={{span:12,offset:12}}
              >
              <NormalSelect
                disabled={mode === 'view'}
                style={{ width: '100%' }}
                allowClear
                options={condition}
                onChange={(e) => { setCondition(e)} }
              />
            </Form.Item>
          </Col>
          <Col span={6}>
              <Form.Item
                label=""
                name="conditionTwo"
                wrapperCol={{span:12,offset:12}}
                rules={[{ required: Condition ? true : false}]}
              >
                <NormalSelect  disabled={mode === 'view' || !Condition} style={{ width: '100%' }} allowClear options={conditionOneType} />
              </Form.Item>
          </Col>
          <Col span={3}>
            <Form.Item
                label=""
                name="valueTwo"
                // wrapperCol={{span:10,offset:12}}
                wrapperCol={{span:20,offset:4}}
                rules={[{ required: Condition ? true : false}]}
              >
              <Input type='num' disabled={mode === 'view'|| !Condition} style={{ width: '100%' }} allowClear />
            </Form.Item>
            </Col>
        </Row>
          </>
     }
        <Row>
          <Col span={12}>
              <Form.Item
                label="是否启用"
                name="status"
                rules={[{ required: true }]}
              >
                 <Radio.Group disabled={mode === 'view'} >
                  <Radio value={1}>启用</Radio>
                  <Radio value={0}>不启用</Radio>
              </Radio.Group>
              </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;