Detail.js

import React, { Component } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Shell from '@/baseComponent/Shell';
import ButtonDiy from '@/baseComponent/ButtonDiy';
import router from 'umi/router';
import { getToken } from '@/utils/authority';
import config from '@/config/config';
import { message, Modal, notification, Popconfirm } from 'antd';
import DetailOneStop from '@/webPublic/one_stop_public/DetailForAudit/IframeForDetail';

window.iframeParentComponent = {
  Modal,
  message,
  notification,
  Popconfirm,
};

const getUrlInfo = (param) => {
  let url = window.document.location.href.toString();
  let u = url.split('?');
  if (typeof u[1] == 'string') {
    u = u[1].split('&');
    let get = {};
    for (let i in u) {
      let j = u[i].split('=');
      get[j[0]] = decodeURIComponent(j[1]);
    }
    return get;
  } else {
    return {};
  }
};

export default class Detail extends Component {
  constructor(props) {
    super(props);
    const { state } = this.props.location;
    let id = '';
    if (state && state.record && state.record.id) {
      const { record } = state;
      id = record.id;
    }
    if (!id) {
      id = getUrlInfo()?.id;
    }
    this.state = {
      id,
      showAll: props.from !== 'onestopApp2.0'
    };
  }

  componentDidMount() {
    window.addEventListener(
      'message',
      (event) => {
        if (event.data && event.data.indexOf && event.data.indexOf('iframeDetailHeight') > -1) {
          const height = Number(event.data.split('-')[1]);
          const dom = document.getElementById('detailIframeId');
          if(dom){
            document.getElementById('detailIframeId').height = height +  50;
          }
        }
      },
      false,
    );
  }

  showAll = () => {
    this.setState({
      showAll: true,
    });
  };

  render() {
    const { from } = this.props;
    const { id, showAll } = this.state;
    const url = config.onestopPC.split('/#/');
    let showPrint = this.props.location?.state?.showPrint;

    let iframeUrl = `${url[0]}/#/IframeForDetail?id=${id}&token=${getToken()}`;
    if (showPrint) {
      iframeUrl = iframeUrl + '&showPrint=true';
    }
    if (from === 'onestopApp2.0') {
      iframeUrl = config.gateWayPort + `/portal/#/showAuditIframe?id=${id}&hasSingle=false&token=${getToken()}&isPrint=false`;
    }
    // iframeUrl = `http://localhost:8000/onestop/IframeForDetail?id=${id}&token=${getToken()}`;
    return (
      <PageHeaderWrapper title=''>
        <Shell>
          <div
            style={{
              height: '54px',
              padding: '12px 0 12px 12px',
            }}>
            {showAll ? (
              <ButtonDiy
                name='返回'
                className='defaultBlue'
                handleClick={() => {
                  router.goBack();
                }}
                icon='arrow-left'
              />
            ) : null}
            <ButtonDiy
              name={'全屏查看'}
              className='defaultBlue'
              handleClick={() => {
                document.getElementById('detailIframeId').requestFullscreen();
              }} />
          </div>
        </Shell>
        <Shell>
          {
            from === 'onestopApp2.0' ?
              <iframe
                src={iframeUrl}
                frameBorder={0}
                id='detailIframeId'
                name='applyIframe'
                marginWidth='0'
                marginHeight='0'
                onLoad={this.showAll}
                allowtransparency='yes'
                seamless
                scrolling={'no'}
                style={{
                  width: '100%',
                  overflowY: 'hidden',
                  minHeight: '80vh',
                }}
              /> :
              <div id={'detailIframeId'}>
              <DetailOneStop id={id} {...this.props} showPrint={showPrint || false}/>
              </div>
          }

        </Shell>
        <Shell>
          <div
            style={{
              height: '54px',
              padding: '12px 0 12px 12px',
            }}>
            {showAll ? (
              <ButtonDiy
                name='返回'
                className='defaultBlue'
                handleClick={() => {
                  router.goBack();
                }}
                icon='arrow-left'
              />
            ) : null}
            <ButtonDiy
              name={'全屏查看'}
              type={'primary'}
              // className='primaryBlue'
              handleClick={() => {
                document.getElementById('detailIframeId').requestFullscreen();
              }} />
          </div>
        </Shell>
      </PageHeaderWrapper>
    );
  }
}