gt_client_pad/src/components/ThresholdDetail/ThresholdModal.js

import {
  Button,
  Card,
  Col,
  Form,
  Input,
  InputNumber,
  Modal,
  Row,
  Select,
} from 'antd';
import { useEffect, useState } from 'react';
const { Option } = Select;

export default function ThresholdModal(props) {
  const { data, onOk, visible, onClose, form, edit = false, loading } = props;
  const [jsonNumThreshold, setJsonNumThreshold] = useState({});

  const renderThresholdItem = (item, index, key) => {
    // const { ThresholdType } = this.state;
    const ThresholdType =
      form.getFieldValue(`JsonNumThreshold[${key}][${index}].ThresholdType`) ||
      item?.ThresholdType;

    return (
      <Col span={24}>
        <Card
          size="small"
          style={{ marginBottom: 16 }}
          title={`阈值${index + 1}`}
        >
          <Form.Item
            label="阈值类型"
            name={`JsonNumThreshold[${key}][${index}].ThresholdType`}
            initialValue={item.ThresholdType}
            rules={[{ required: true, message: '请选择阈值类型' }]}
          >
            <Select disabled={!edit} style={{ width: '100%' }}>
              <Option value={0}>无</Option>
              <Option value={1}>大于</Option>
              <Option value={2}>小于</Option>
              <Option value={3}>等于</Option>
              <Option value={4}>区间</Option>
              <Option value={5}>区间外</Option>
              <Option value={6}>区间左包含</Option>
              <Option value={7}>区间右包含</Option>
              <Option value={8}>区间全包含</Option>
              <Option value={9}>区间外左包含</Option>
              <Option value={10}>区间外右包含</Option>
              <Option value={11}>区间外全包含</Option>
              <Option value={12}>大于等于</Option>
              <Option value={13}>小于等于</Option>
            </Select>
          </Form.Item>

          {ThresholdType !== 0 && (
            <Form.Item
              label="阈值"
              name={`JsonNumThreshold[${key}][${index}].ThresholdValue`}
              initialValue={item.ThresholdValue}
              rules={[{ required: true, message: '请输入阈值' }]}
            >
              <InputNumber
                style={{ width: '100%' }}
                disabled={!edit}
                placeholder="请输入阈值"
              />
            </Form.Item>
          )}

          {ThresholdType >= 4 && ThresholdType < 12 && (
            <Form.Item
              label="阈值2"
              name={`JsonNumThreshold[${key}][${index}].ThresholdValue2`}
              initialValue={item.ThresholdValue2}
              rules={[{ required: true, message: '请输入阈值' }]}
            >
              <InputNumber
                style={{ width: '100%' }}
                disabled={!edit}
                placeholder="请输入阈值"
              />
            </Form.Item>
          )}
          <Form.Item
            label="处理意见"
            name={`JsonNumThreshold[${key}][${index}].ThresholdDesc`}
            initialValue={item.ThresholdDesc}
          >
            <Input style={{ width: '100%' }} disabled={!edit} />
          </Form.Item>
        </Card>
      </Col>
    );
  };
  const addThreshold = (key) => {
    if (!jsonNumThreshold[key]) jsonNumThreshold[key] = [];
    jsonNumThreshold[key].push({});
    setJsonNumThreshold({ ...jsonNumThreshold });
  };
  const deleteThreshold = (index, key) => {
    jsonNumThreshold[key].splice(index, 1);
    setJsonNumThreshold({ ...jsonNumThreshold });
  };

  const handleOk = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      onOk(fieldsValue.JsonNumThreshold);
    });
  };
  useEffect(() => {
    // console.log(data);
    setJsonNumThreshold(JSON.parse(JSON.stringify(data || {})));
  }, [data]);

  return (
    <Modal
      title="阈值详情"
      onOk={handleOk}
      open={visible}
      footer={!edit ? null : undefined}
      onCancel={onClose}
      width={800}
      confirmLoading={loading}
    >
      <Form.Item
        className="btn-item"
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 16 }}
        label="警告阈值范围"
      >
        {edit && (
          <Button
            style={{ marginBottom: 20 }}
            onClick={() => addThreshold('exception')}
          >
            增加阈值
          </Button>
        )}
        <Row gutter={16}>
          {jsonNumThreshold.exception?.map((item, index) =>
            renderThresholdItem(item, index, 'exception'),
          )}
        </Row>
      </Form.Item>

      <Form.Item
        className="btn-item"
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 16 }}
        label="异常阈值范围"
      >
        {edit && (
          <Button
            style={{ marginBottom: 20 }}
            onClick={() => addThreshold('breakdown')}
          >
            增加阈值
          </Button>
        )}
        <Row gutter={16}>
          {jsonNumThreshold.breakdown?.map((item, index) =>
            renderThresholdItem(item, index, 'breakdown'),
          )}
        </Row>
      </Form.Item>
    </Modal>
  );
}