platform-bi-web/src/components/homePage/toolbar.jsx

import React from 'react'
import { Icon, Modal } from 'antd'
import { connect } from 'dva'
import DashboardDesigner from '../dashboardDesigner/layout'
import CusIcon from '../common/cusIcon/index'
import './toolbar.less'

class Toolbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visibleFullscreenBox: false,
        }
    }
    // 全屏展示
    fullscreen = () => {
        this.setState({
            visibleFullscreenBox: true,
        });
    }
    // 刷新
    refresh = () => {
        this.props.dispatch({ type: 'dashboardDesigner/refresh' });
    }
    // 收藏
    collect = () => {
        const { dispatch, home } = this.props;
        const { selectedTab } = home;
        dispatch({ type: 'home/collect', data: selectedTab });
    }
    // 取消收藏
    uncollect = () => {
        const { dispatch, home } = this.props;
        const { selectedTab } = home;
        dispatch({ type: 'home/uncollect', data: selectedTab });
    }
    
    onFixed = (code) => {
        const { dispatch, home } = this.props;
        const { selectedTab } = home;
        dispatch({ type: 'home/onFixedDashboard', tab: selectedTab });
    }

    onCancelFixed = (code) => {
        const { dispatch, home } = this.props;
        const { selectedTab } = home;
        dispatch({ type: 'home/onCancelFixedDashboard', tab: selectedTab });
    }

    afterRefresh = () => {
        const { dispatch, home } = this.props;
        dispatch({ type: 'home/saveCurrentTabDashboardConfig', code: home.selectedTab.code });
    }

    exportToExcel = () => {
        const { dispatch } = this.props;
        dispatch({ type: 'dashboardDesigner/exportToExcel' });
    }

    render() {
        const { home } = this.props;
        const { tabs, selectedTab, collectionDashboards, fixedDashboard } = home;
        let { config } = tabs.find(t => t.code === selectedTab.code);
        return <div className='dashboardview-toolbar'>
            <div className='toos'>
                <div className='tool'><span onClick={this.fullscreen}><Icon title="全屏" type="fullscreen" /></span></div>
                <div className='tool'><span onClick={this.refresh}><Icon title="刷新" type="sync" /></span></div>
                <div className='tool'>{
                    collectionDashboards.findIndex(c => c.code === selectedTab.code) > -1 ? 
                        <span onClick={this.uncollect}><Icon title="取消收藏" type="star" theme="filled" /></span> :
                        <span onClick={this.collect}><Icon title="收藏" type="star" /></span>
                }</div>
                <div className='tool'>{
                    (!!fixedDashboard && fixedDashboard.code === selectedTab.code) ? 
                        <span onClick={this.onCancelFixed}><CusIcon title="取消固定到首页" type="bi-fixed" /></span> :
                        <span onClick={this.onFixed}><CusIcon title="固定到首页" type="bi-no-fixed" /></span>
                }</div>
                <div className='tool'><span onClick={this.exportToExcel}><CusIcon title="导出Excel" type="bi-export-excel" /></span></div>
            </div>
            {/** 全屏展示modal */}
            {this.state.visibleFullscreenBox && <Modal
                className='modal-full'
                width='100%'
                height='100%'
                visible={this.state.visibleFullscreenBox}
                footer={null}
                onCancel={() => {
                    this.setState({
                        visibleFullscreenBox: false
                    })
                }}
            >
                <DashboardDesigner
                    dashboardDesigner={this.props.dashboardDesigner}
                    code={selectedTab.code}
                    isViewMode
                    afterLoad={null}
                    afterRefresh={this.afterRefresh}
                    config={config}
                />
            </Modal>}
        </div>
    }
}

export default connect(({ present: { dashboardDesigner, home } }) => ({ dashboardDesigner, home }))(Toolbar)