弹窗组件修改为 支持iframe 页面

one_stop_public/2023yunshangguizhou/DiyIframeModal.js

 import React from 'react';
 import { Modal } from 'antd';
 
-export default function DiyIframeModal(props){
+const formatProps = (ModalFuncProps) => {
+  ModalFuncProps.getContainer = ModalFuncProps.getContainer || false;
+  return ModalFuncProps;
+};
 
+window.addEventListener(
+  'message',
+  (event) => {
+    if (event.data && event.data.indexOf) {
+      if (event.data.indexOf('iframeGetScrollHeight') > -1) {
+        const height = event.data.split('-')[1];
+        console.log('父页面向子iframe页面发送滚动高度: ', event.data);
+        let dom = document.getElementsByClassName('ant-modal-wrap');
+        if(dom && dom.length){
+          dom[0].style.top = height + 'px';
+        }
+      }
+    }
+});
 
-  return Modal;
-}
+const sendMessageAndGetHeight = () => { // 获取当前屏幕滚动的高度 并将Modal 弹窗的高度绝对定位到屏幕以内
+  window.top.postMessage('iframeGetScrollHeight', '*');
+
+};
+
+const DiyIframeModal = (props) => {
+  return <Modal {...props}/>;
+};
+
+const ModalFuncs = function (ModalFuncProps, type = 'info') {
+  sendMessageAndGetHeight();
+
+  return Modal[type](formatProps(ModalFuncProps));
+};
+
+DiyIframeModal.info = function(ModalFuncProps) {
+  return ModalFuncs(ModalFuncProps, 'info');
+};
+
+DiyIframeModal.success = function (ModalFuncProps) {
+  return ModalFuncs(ModalFuncProps, 'success');
+};
+
+DiyIframeModal.error = function (ModalFuncProps) {
+  return ModalFuncs(ModalFuncProps, 'error');
+};
+
+DiyIframeModal.warning = function (ModalFuncProps) {
+  return ModalFuncs(ModalFuncProps, 'warning');
+};
+
+DiyIframeModal.confirm = function (ModalFuncProps) {
+  return ModalFuncs(ModalFuncProps, 'confirm');
+};
+
+DiyIframeModal.warn = function (ModalFuncProps) {
+  return ModalFuncs(ModalFuncProps, 'warn');
+};
+
+DiyIframeModal.destroyAll = function (){
+  return Modal.destroyAll();
+};
+
+export default DiyIframeModal;

zyd_public/components/lowCodeEdit/EditDrawer.js

@@ -11,7 +11,8 @@ const { TextArea } = Input;
 function EditDrawer(props) {
 	const { dispatch, templateData, TEMPLATE } = props;
 	const [loading, setLoading] = useState(false);
-	const [showEdit, setShowEdit] = useState(process.env.NODE_ENV === 'development');
+  // const [showEdit, setShowEdit] = useState(process.env.NODE_ENV === 'development');
+  const [showEdit, setShowEdit] = useState(false);
 	const saveTimeOut = useRef();
 	const [lowCodeEdit, setLowCodeEdit] = useState({});
 
@@ -140,7 +141,7 @@ function EditDrawer(props) {
 				data-edit-point={'EditDrawer'}
 				className={styles.editPoint}
 				style={{
-					display: getUserInfo().stuNo === 'admin' ? 'block' : 'none',
+					display: getUserInfo().stuNo === 'admin' ? 'none' : 'none',
 				}}
 				onClick={() => {
 					setShowEdit(!showEdit);