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

import React from 'react';
import { Tag, Icon, Modal, Button } from 'antd';
import FilterBox from './filterBox';
import emitter from '../../../eventManger/ev';
import './toolbar.less';

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

    filterUsingChange = (e) => {
        const key = e.target.dataset.key;
        const { filters } = this.state;
        let nextFilters = filters.map(f => {
            if(f.key == key) {
                f.using = !f.using
            }
            return f;
        });
        this.setState({ filters: nextFilters });
    }

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

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

    /**
     * 生成过滤条件
     */
    createFilters = () => {
        emitter.emit('getFilters', function(filters) {
            this.setState({
                filters: filters
            }, ()=>{console.log(this.state.filters)});
            this.hideFilterBox()
        }.bind(this));
    }

    /**
     * 生成过滤规则文本
     */
    createFilterLabel = (filter) => {
        let { label, name, operator, operatorLabel, type, using, value1, value2 } = filter;
        let filterLabel;
        if(type == 'string') {
            if(operator == 'null') {
                filterLabel = `${label} ${operatorLabel}`;
            }else {
                filterLabel = `${label} ${operatorLabel} ${value1}`;
            }
        }else if(type == 'number') {
            if(operator == 'null') {
                filterLabel = `${label} ${operatorLabel}`;
            }else if(operator == 'betwen') {
                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 == 'betwen') {
                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, showFilterBox } = 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="bars" />
                        筛选条件管理
                    </Tag>
                </div>
                <div className='tools'>
                    <Button className='tools-button' size='small'>按钮</Button>
                </div>
                <Modal 
                    className='filter-box'
                    title="筛选条件管理"
                    visible={showFilterBox}
                    onOk={this.createFilters}
                    onCancel={this.hideFilterBox}
                    maskClosable={false}
                    destroyOnClose={true}
                >
                    <FilterBox filterData={filters}/>  
                </Modal>
            </div>
        );
    }
}
export default Toolar;