alarm-component/src/pages/Alarm/components/complex.jsx

import React, {
  useRef,
  useState,
  useEffect,
  forwardRef,
  useImperativeHandle,
} from "react";
import { Form, Input, Select, message } from "antd";
import { Modal, Button, Table } from "antd";
import Formular from "./components/Formular";
import API2 from "../../../api/alarm";
import styles from "./complex.module.less";
import oneNode from "./components/oneNode";

const { Search } = Input;

function TranslateText(arr) {
  const dtLanguage = localStorage.getItem("dtLanguage");
  if (!Array.isArray(arr)) {
    return arr;
  }

  if (arr.length < 2 && arr.length > 0) {
    return arr?.[0];
  }

  if (dtLanguage === "en") {
    return arr?.[1];
  }

  return arr?.[0];
}

const Complex = (props, ref) => {
  const { alarmId, groupList = [] } = props;

  const [form] = Form.useForm();
  const formuRef = useRef();
  // const [alarmId, setAlarmId] = useState(searchParams.get('alarm_id'))
  // const [token, setToken] = useState(searchParams.get('token'))
  // const [apiUrl, setApiUrl] = useState(decodeURIComponent(searchParams.get('api_url')) + '/')
  const [data, setData] = useState();

  const [loading, setLoading] = useState(false);
  const [deviceList, setDeviceList] = useState([]);
  const [paginationProps, setPaginationProps] = useState({
    pageSize: 10,
    current: 1,
    showTotal: (total) => `共${total}条`,
    // showQuickJumper: true,
    // showSizeChanger:true,
    // size:'Large',
  });

  const handleTableChange = async (pagination) => {
    setPaginationProps({ ...pagination, showTotal: (total) => `共${total}条` });
    // setCurrentPage(pagination.current);
    // setPageSize(pagination.pageSize)
  };

  useEffect(() => {
    onSearch("");
  }, []);

  useEffect(() => {
    async function run() {
      if (alarmId && alarmId != -1) {
        const { state, data } = await API2.detailAlarm(Number(alarmId));
        form.setFieldsValue({
          name: data.name,
          alarm_level: data.alarm_level,
          group_id: data.group_id,
        });
        formuRef.current.backEndInput(data.formula);
        setData(data);
      }
    }
    run();
  }, [alarmId]);

  const onModalOk = async () => {
    if (alarmId == -1) {
      const value = await form.validateFields();
      const obj = {
        ...value,
        formula: formuRef.current.getFinalStr(),
        ext_notify_list: [],
        is_complex: true,
        type: 1,
        sub_type: 12,
        status: 1,
        defer_unit: 2,
      };

      const { state } = await API2.addRule(obj);
      if (state === 0) {
        message.success("保存成功");
        props.onConfirm();
      }
    } else {
      const value = await form.validateFields();

      const obj = {
        ...data,
        ...value,
        formula: formuRef.current.getFinalStr(),
        ext_notify_list: [],
      };
      const { state } = await API2.editRule(obj);
      if (state === 0) {
        message.success("保存成功");
        props.onConfirm();
      }
    }
    form.resetFields();
    props.onConfirm();
  };

  useImperativeHandle(ref, () => {
    return {
      ok: onModalOk,
    };
  });

  const symbClick = (e) => {
    let innerText = e.target.innerText;
    if (innerText === "≥") {
      innerText = ">=";
    } else if (innerText === "≤") {
      innerText = "<=";
    } else if (innerText === "&&(and)") {
      innerText = "&&";
    } else if (innerText === "||(or)") {
      innerText = "||";
    }
    formuRef.current.dtInsertFormular(innerText);
    if (innerText === "()") {
      //判断为括号则把光标移到括号中间
      formuRef.current.moveInTextNode();
    }
  };

  const insertToFomular = (poi) => {
    const { point_id, name } = poi;
    const res = oneNode(point_id, name);
    formuRef.current.dtInsertFormular(res);
  };

  const columns = [
    {
      title: TranslateText(["点位编号", "Point id"]),
      dataIndex: "point_id",
      ellipsis: true,
    },
    {
      title: TranslateText(["点位名称", "Point name"]),
      dataIndex: "name",
      ellipsis: true,
    },
  ];

  const onSearch = async (v) => {
    const res = await API2.searchPoint({
      key_word: v ?? "",
      count: 50,
      type: 1,
      no_child: true,
    });
    if (res.state === 0) {
      setDeviceList(res.data || []);
      return;
    }
    setDeviceList([]);
  };

  const clickTableRow = (record) => {
    // child.current.handlePickPoint({name:record.name, point_id:record.point_id})
    insertToFomular({ name: record.name, point_id: record.point_id });
  };
  const onModalCancel = () => {
    props.onConfirm();
    form.resetFields();
  };

  return (
    <div className={styles.wrapper}>
      <div className="main">
        <div className="left">
          <Form
            name="basic"
            autoComplete="off"
            form={form}
            requiredMark={false}
            labelAlign="right"
            colon={false}
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 15,
            }}
          >
            <Form.Item
              label={TranslateText(["告警名称", "Alarm name"])}
              name="name"
              rules={[
                {
                  required: true,
                  message: TranslateText(["请输入告警名称", "Please input"]),
                },
              ]}
            >
              <Input
                placeholder={TranslateText(["请输入告警名称", "Please input"])}
                style={{ width: "240px" }}
              />
            </Form.Item>

            <Form.Item
              label={TranslateText(["条件符号", "Symbol"])}
              // name="symb"
            >
              <div className="symb" style={{ width: "500px" }}>
                <Button type="primary" onClick={symbClick}>
                  ()
                </Button>
                <Button type="primary" onClick={symbClick}>
                  {"&&(and)"}
                </Button>
                <Button type="primary" onClick={symbClick}>
                  {"||(or)"}
                </Button>
                <Button type="primary" onClick={symbClick}>
                  ≥
                </Button>
                <Button type="primary" onClick={symbClick}>
                  {">"}
                </Button>
                <Button type="primary" onClick={symbClick}>
                  =
                </Button>
                <Button type="primary" onClick={symbClick}>{`<`}</Button>
                <Button type="primary" onClick={symbClick}>
                  ≤
                </Button>
                <Button type="primary" onClick={symbClick}>
                  +
                </Button>
                <Button type="primary" onClick={symbClick}>
                  -
                </Button>
                <Button type="primary" onClick={symbClick}>
                  ×
                </Button>
                <Button type="primary" onClick={symbClick}>
                  ÷
                </Button>
              </div>
            </Form.Item>

            <Form.Item
              label={TranslateText(["条件编辑", "Edit"])}
              // name="formu"
            >
              <Formular ref={formuRef} />
            </Form.Item>

            <Form.Item
              label={TranslateText(["告警组", "Alarm group"])}
              name={"group_id"}
            >
              <Select
                style={{ width: 240 }}
                options={[
                  ...[
                    {
                      label: "未分组",
                      value: 0,
                    },
                  ],
                  ...(groupList?.map((item) => {
                    return {
                      label: item?.name,
                      value: item?.id,
                    };
                  }) ?? []),
                ]}
                placeholder={TranslateText(["请选择", "Please choose"])}
              />
            </Form.Item>

            <Form.Item
              label={TranslateText(["告警级别", "Alarm level"])}
              name="alarm_level"
              rules={[
                {
                  required: true,
                  message: TranslateText(["请输入告警级别", "Please input"]),
                },
              ]}
            >
              <Select
                placeholder={TranslateText(["请选择", "Please choose"])}
                style={{ width: "240px" }}
              >
                <Select.Option value={1}>
                  {TranslateText(["低", "Low"])}
                </Select.Option>
                <Select.Option value={2}>
                  {TranslateText(["中", "Medium"])}
                </Select.Option>
                <Select.Option value={3}>
                  {TranslateText(["高", "High"])}
                </Select.Option>
              </Select>
            </Form.Item>
          </Form>
        </div>

        <div
          style={{
            borderRight: "1px solid rgba(255, 255, 255, 0.12)",
            marginLeft: "16px",
          }}
        ></div>

        <div className="right">
          <div className="header">
            <Search
              placeholder={TranslateText(["请输入点位名称", "Please input"])}
              onSearch={onSearch}
              style={{ width: "240px" }}
              // className={styles.deviceListTreeSearch}
            />
          </div>
          <Table
            onRow={(record) => {
              return {
                onClick: (event) => {
                  clickTableRow(record);
                }, // 点击行
              };
            }}
            key={deviceList}
            loading={loading}
            columns={columns}
            dataSource={deviceList}
            rowKey="point_id"
            // className="deviceListTable"
            pagination={paginationProps}
            onChange={handleTableChange}
            size="middle"
          />
        </div>
      </div>
    </div>
  );
};

export default forwardRef(Complex);