preview.js 2.58 KB
Newer Older
1
import React, { useEffect, useState, useCallback } from 'react';
2 3 4
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { notification } from 'antd';
import classnames from 'classnames';
杨思琦's avatar
杨思琦 committed
5
import { getAccountPageListSite } from '@/api/service/cloud';
6
import { connect } from 'react-redux';
7 8 9 10 11 12 13 14 15 16
import useFullScreen from '../iframe/useFullScreen';
import styles from './index.less';
const PrevieView = props => {
  const params = Object.assign({}, props.params, {
    fullscreen: props.params !== undefined && props.params.fullscreen === 'true',
    canScroll: props.params !== undefined && props.params.longImg === 'true',
  });
  const { imgName, accountName, fullscreen, canScroll } = params;
  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(fullscreen);
  const [imgUrl, setImgUrl] = useState('');
杨思琦's avatar
杨思琦 committed
17
  const { userInfo = {} } = props.global;
18
  const getImgUrl = useCallback(() => {
杨思琦's avatar
杨思琦 committed
19 20
    getAccountPageListSite(
      {
21 22 23 24 25 26
        pageIndex: 1,
        pageSize: 5,
        sortFields: '录入时间',
        direction: 'desc',
        info: imgName,
        accountName,
杨思琦's avatar
杨思琦 committed
27 28 29 30 31
        ignoreSite: true,
      },
      props.global,
      userInfo.site,
    )
32 33 34 35 36
      .then(res => {
        const configData = JSON.parse(res.data.jsonData || '[]');
        if (configData.length > 0 && configData[0]['演示图片']) {
          const url = `${window.location.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=${
            configData[0]['演示图片']
杨思琦's avatar
杨思琦 committed
37
          }&_site=${userInfo.site}`;
38 39 40 41
          setImgUrl(url);
        }
      })
      .catch(err => {
杨思琦's avatar
杨思琦 committed
42
        // notification.error({ message: '提示', duration: 3, description: '获取图片信息错误' });
43
      });
杨思琦's avatar
杨思琦 committed
44
  }, [accountName, imgName, props.global, userInfo.site]);
45 46 47

  useEffect(() => {
    getImgUrl();
杨思琦's avatar
杨思琦 committed
48
  }, [getImgUrl]);
49 50 51 52 53 54 55 56 57 58 59 60 61

  return (
    <div className={classnames(styles['tab-preview'], canScroll ? styles['long-img'] : styles['normal-img'])} ref={ref}>
      <div className={styles['oper-wrap']}>
        <div className={styles['oper-btn']}>
          {isFullscreen ? (
            <FullscreenExitOutlined className={styles['btn-fullscreen_exit']} onClick={handleExitFullScreen} />
          ) : (
            <FullscreenOutlined className={styles['btn-fullscreen']} onClick={handleFullScreen} />
          )}
        </div>
      </div>

张瑶's avatar
张瑶 committed
62
      {imgUrl && <img src={imgUrl} display="block" position="relative" alt="演示图片" />}
63 64 65
    </div>
  );
};
66 67 68 69
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
});
export default connect(mapStateToProps)(PrevieView);