platform-bi-web/app/components/chartDesigner/sections/toolbar.jsx

import React from 'react';
import { Tag, Icon, Modal, Button } from 'antd';
import FilterBox from './filterBox';
import { connect } from 'dva';
import chartDesigner from '../../../models/chartDesigner';
import './toolbar.less';

class Toolbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            filters: props.chartDesigner.filters || [],
            visibleFilterBox: false
        }
    }

    filterUsingChange = (e) => {
        const key = e.target.dataset.key;
        const props = this.props;
        const chartDesigner = props.chartDesigner;
        const filters = chartDesigner.filters;
        props.dispatch({ type: 'chartDesigner/setModel', name: 'filters', value: filters.map( f => {
            if(f.key == key) {
                f = { ...f, using: !f.using }
            }
            return f;
        }) });
    }

    showFilterBox = (e) => {
        this.setState({
            visibleFilterBox: true
        });
    }

    hideFilterBox = (e) => {
        this.setState({
            visibleFilterBox: false,
        });
    }

    createFilters = (filters) => {
        this.props.dispatch({ type: 'chartDesigner/setModel', name: 'filters', value: filters });
        this.hideFilterBox()
    }

    /**
     * 生成过滤规则文本
     */
    createFilterLabel = (filter) => {
        let { label, name, operator, operatorLabel, type, using, value1, value2 } = filter;
        let filterLabel;
        if(type == 'string' || type == 'index') {
            if(operator == 'null') {
                filterLabel = `${label} ${operatorLabel}`;
            }else {
                filterLabel = `${label} ${operatorLabel} ${value1}`;
            }
        }else if(type == 'scale') {
            if(operator == 'null') {
                filterLabel = `${label} ${operatorLabel}`;
            }else if(operator == 'between') {
                filterLabel = `${label} ${operatorLabel} ${value1} ~ ${value2}`; 
            }else {
                filterLabel = `${label} ${operatorLabel} ${value1}`; 
            }
        }else if(type == 'time') {
            value1 = new Date(value1).format('yyyy/MM/dd');
            value2 = new Date(value2).format('yyyy/MM/dd');
            if(operator == 'null') {
                filterLabel = `${label} ${operatorLabel}`;
            }else if(operator == 'between') {
                filterLabel = `${label} ${operatorLabel} ${value1} ~ ${value2}`;
            }else {
                filterLabel = `${label} ${operatorLabel} ${value1}`;
            }
        }else if(type == 'categorical') {
            if(operator == 'null') {
                filterLabel = `${label} ${operatorLabel}`;
            }else {
                filterLabel = `${label} ${operatorLabel} ${value1}`;
            }
        }else {
            filterLabel = '错误条件';
        }
        return filterLabel;
    }

    render() {
        const filters = this.props.chartDesigner.filters;
        const columns = this.props.chartDesigner.columns;
        const { visibleFilterBox } = this.state;

        let tags = filters.map((f, i)=>{
            return {
                key: f.key,
                label: this.createFilterLabel(f),
                using: f.using
            }
        });

        return (
            <div className='toolbar'>
                <div className='filters'>
                    <h6 style={{ marginRight: 8, display: 'inline' }}>筛选:</h6>
                    {tags.map(tag => (
                        <Tag
                            className={`filter-tag ${tag.using?'filter-tag-using':''}`}
                            key={tag.key}
                            closable={false}
                            onClick={this.filterUsingChange}
                            data-key={tag.key}
                        >
                            {tag.label}
                        </Tag>
                    ))}
                    <Tag
                        onClick={this.showFilterBox}
                        className={`filter-tag filter-tag-add`}
                    >
                        <Icon type="setting" />
                    </Tag>
                </div>
                <div className='tools'>
                    <Button className='tools-button' size='small'>按钮</Button>
                </div>
                <FilterBox key={Math.random()} columns={columns} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />  
            </div>
        );
    }
}
function mapStateToProps({ present: { chartDesigner } }) {
    return { chartDesigner: chartDesigner }
}

export default connect(mapStateToProps)(Toolbar);