OperationalService/web/client/src/components/workflow/approval.jsx

'use strict';

import React from 'react';
import { connect } from 'react-redux';
import { Modal, Spin, Notification, Row, Space, Button } from '@douyinfe/semi-ui';
import { EmisRequest, EmisApiTable } from '$utils';
import { useState } from 'react';
import { useEffect } from 'react';
import { IconClose } from '@douyinfe/semi-icons';
import './index.less'

const WorkFlowApprovalModal = (props) => {
   const { visible, onCancel, webEmis, user, postData } = props;
   const [loading, setLoading] = useState(true);

   const iframeRef = React.createRef();

   return (
      <div>
         <Modal
            fullScreen
            visible={visible}
            width={'100%'}
            closable={false}
            hasCancel={false}
            footer={null}
            wrapClassName='process_modal_wrap'
         >
            <div className='workflow-body'>
               <div className='workflow-body-header'>
                  <img src='/assets/images/fs-logo.png' />
                  <span className='workflow-body-header_title'>
                     <span className='workflow-body-header_title_shu'>|</span>
                     <span className='workflow-body-header_title_zi'>让世间万物拥有感知，服务人类社会于美好</span>
                  </span>
                  <IconClose className="workflow-body-header_closeIcon" onClick={() => {
                     onCancel && onCancel();
                     setLoading(false);
                  }} />
               </div>
               <div className='workflow-body-form'>
                  <Spin
                     spinning={loading}
                  >
                     {
                        // webEmis && processId || 
                        1 ?
                           <iframe
                              id='workflowFrame'
                              onLoad={() => {
                                 let frameWin = document.getElementById('workflowFrame');
                                 frameWin.contentWindow.postMessage(JSON.stringify({
                                    
                                 }), '*');
                                 setLoading(false);
                              }}
                              allowTransparency="true"
                              ref={iframeRef}
                              src={`${webEmis}/approval/info?token=${user.token}`}
                              width={'100%'}
                              style={{ height: '100vh' }}
                              frameBorder="0"
                           ></iframe>
                           : ''
                     }
                  </Spin>
               </div>
            </div>
         </Modal >
      </div>
   )
}

function mapStateToProps (state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      clientHeight: global.clientHeight,
      webEmis: global.webEmis,
      webOa: global.webOa
   }
}

export default connect(mapStateToProps)(WorkFlowApprovalModal);