platform-bi-web/src/components/dashboardDesigner/header.jsx

import React from 'react'
import { Input, Icon, Button, Popconfirm } from 'antd'
import { connect } from 'dva'
import './header.less'

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visibleConfirm: false,
        }
    }

    handleVisibleChange = (visible) => {
        this.setState({ visibleConfirm: visible });
    }

    render() {
        const { dashboardDesigner, dispatch, updateThumbnail } = this.props;
        return (
            <div className='dashboarddesigner-header'>
                <div className='header-item toolbar-back'>
                    <Popconfirm
                        placement="bottomLeft"
                        title="离开前保存修改吗？"
                        visible={this.state.visibleConfirm}
                        onVisibleChange={this.handleVisibleChange}
                        onConfirm={() => {
                            this.setState({
                                visibleConfirm: false
                            });
                            updateThumbnail()// 添加更新thumbnail
                            dispatch({ type: 'dashboard/remoteModify' });
                            dispatch({ type: 'main/redirect', path: '/dashboard' });
                        }}
                        onCancel={() => {
                            this.setState({
                                visibleConfirm: false
                            });
                            dispatch({ type: 'main/redirect', path: '/dashboard' });
                        }}
                        okText="保存"
                        cancelText="不保存"
                    >
                        <Button onClick={() => {
                            console.log(dashboardDesigner.dirty);
                            if(!dashboardDesigner.dirty) {
                                dispatch({ type: 'main/redirect', path: '/dashboard' });
                            }
                        }}>
                            <Icon type='left' />返回
                        </Button>
                    </Popconfirm>
                    <Button onClick={() => {
                        if(dashboardDesigner.code && dashboardDesigner.code !== -1) {
                            updateThumbnail()// 添加更新thumbnail
                            dispatch({ type: 'dashboard/remoteModify' });
                        }else {
                            updateThumbnail()// 添加更新thumbnail
                            dispatch({ type: 'dashboard/remoteAdd' });
                        }
                    }}><Icon type='save' />保存</Button>
                    <Button onClick={updateThumbnail}
                    ><Icon type='save' />保存Thumbnail(Debug用)</Button>
                </div>
                <div className='header-item toolbar-title'>
                    <Input
                        className='input-title'
                        value={dashboardDesigner.title}
                        addonAfter={<Icon type="edit" 
                            onClick={(e) => {
                                const input = e.currentTarget.parentElement.parentElement.getElementsByTagName('input')[0];
                                input && input.focus()
                            }}
                        />}
                        onChange={(e) => {
                            dispatch({ type: 'dashboardDesigner/setField', name: 'title', value: e.target.value });
                        }}
                    />
                </div>
                <div className='header-item toolbar-buttons'>
                    
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    const dashboardDesigner = state.present.dashboardDesigner;
    return { dashboardDesigner }
}
export default connect(mapStateToProps)(Header);