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 => ({ stationCode: s.cd, label: s.cdNm, value: s.cd })));//
    } catch (error) {
      console.log(error);
    }
  }

  const getSlCode = async () => {
    try {
      const res = await httppost2(apiurl.gcaqjc.sjtjcx.wycx.slList)
      setSlStacodeList(res.data.map(s => ({ stationCode: s.dvcd, label: s.dvcd, value: s.dvcd })));
    } catch (error) {
      console.log(error);
    }
  }
  const getStationCode = async () => {
    try {
      const res = await httppost2(apiurl.gcaqjc.gcaqyj.yjgzpz.list)
      setStaCodeList(res.data.map(s => ({ stationCode: s.dvcd, label: s.dvcd, value: s.dvcd })));
    } 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>
        <Row>
          <Col span={24}>
            <Form.Item
              label="处理建议"
              name="resolveSuggest"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
              <Input.TextArea disabled={mode === 'view'} style={{ width: '100%', minHeight: '100px' }} 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;