index.js 1.67 KB
import React, { useEffect, useState } from "react";
import { Button, Modal, Space } from "antd";
import RouterComponent from "@/routes/mes/routerComponent";

// 通用方法
import * as commonUtils from "@/utils/utils";

const CommonModalComponent = props => {
  const {
    visible,
    title,
    width = "calc(100vw - 110px)",
    height = "calc(100vh - 60px)",
    onCancel
  } = props;

  if (!visible) return "";

  let { style } = props;
  if (commonUtils.isEmptyObject(style)) {
    style = {
      padding: 0,
      margin: 0,
      top: 60,
      left: 110
    };
  }

  const [extraBtns, setExtraBtns] = useState([]);

  const titleNew =
    props.sModelsId === "12710101117087374661080"
      ? props.parentProps.btnConfig.showName
      : title;

  const closable = !window.deviceTargetInfoModalAutoShow;
  useEffect(() => {
    return () => {
      window.deviceTargetInfoModalAutoShow = false;
    };
  }, []);

  return (
    <Modal
      title={titleNew}
      open={visible}
      width={width}
      height={height}
      style={style}
      className="mesCommonModal"
      closable={closable}
      keyboard={closable}
      footer={
        <Space>
          {extraBtns}
          <Button
            size="large"
            disabled={!closable}
            onClick={() => {
              props.onCancel && props.onCancel();
            }}
          >
            取消
          </Button>
        </Space>
      }
      onCancel={onCancel}
    >
      <div
        style={{
          width: "100%",
          height: "100%"
        }}
      >
        <RouterComponent {...props} setExtraBtns={setExtraBtns} />
      </div>
    </Modal>
  );
};

export default CommonModalComponent;