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

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

class DataSourceDetailHeader extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visibleConfirm: false,
            visibleSaveConfirm: false,
        }
    }

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

    handleVisibleSaveConfirmChange = (visible) => {
        if(this.isValid()) {
            this.setState({ visibleSaveConfirm: visible });
        }
    }

    isValid = () => {
        const { dataSourceDetail } = this.props;
        const { type, name, columns, targetDirty, description } = dataSourceDetail; 
        return type === 'database' ? (
            !!name && name.length < 50 && !targetDirty && !!columns && columns.length > 0 && (description === undefined || description === null || description.length <= 150)
        ) : ( type === 'file' ? (
            +1 === 2
        ) : false )
    }

    render() {
        const { dataSourceDetail, dispatch } = this.props;
        const { name } = dataSourceDetail;

        return (
            <div className='dataSourcedetail-header'>
                <div style={{ maxWidth: '400px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    <span className='title-label' title={name || '未命名'}>{name || '未命名'}</span>
                </div>
                <div className='buttons'>
                    <Popconfirm
                        overlayClassName={`close-popconfirm${this.isValid() ? '' : ' confirm-disabled'}`}
                        placement="bottomLeft"
                        title="离开前保存修改吗？"
                        visible={this.state.visibleConfirm}
                        onVisibleChange={this.handleVisibleChange}
                        onConfirm={() => {
                            if(this.isValid()) {
                                dispatch({ type: 'dataSource/remoteModify' });
                                dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                            }
                            this.setState({
                                visibleConfirm: false
                            });
                        }}
                        onCancel={() => {
                            this.setState({
                                visibleConfirm: false
                            }, () => {
                                dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                            });
                        }}
                        okText="保存"
                        cancelText="不保存"
                        >
                        <Button onClick={(e) => {
                            if(!dataSourceDetail.dirty) {
                                dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                            }
                        }}>
                            返回
                        </Button>
                    </Popconfirm>
                    <Popconfirm
                        placement="bottomLeft"
                        title={<span style={{ color: 'red' }}>修改数据源可能会对已创建的图表/报表产生影响，是否确认修改？</span>}
                        visible={this.state.visibleSaveConfirm}
                        onVisibleChange={this.handleVisibleSaveConfirmChange}
                        onConfirm={() => {
                            this.setState({
                                visibleSaveConfirm: false
                            }, () => {
                                dispatch({ type: 'dataSource/remoteModify' });
                            });
                        }}
                        onCancel={() => {
                            this.setState({
                                visibleSaveConfirm: false
                            });
                        }}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button disabled={!this.isValid()} onClick={() => {
                            this.setState({
                                visibleSaveConfirm: true
                            });
                        }}>
                            保存
                        </Button>
                    </Popconfirm>
                </div>
            </div>
        );
    }
}

export default connect(({ present: { dataSourceDetail } }) => ({ dataSourceDetail }))(DataSourceDetailHeader);