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

import React from 'react'
import { Layout, Tag, Icon } from 'antd'
import { connect } from 'dva'
import ViewLayout from './viewLayout'
import FilterBox from '../common/filterBox/filterBox2'
import Filter from '../common/filterBox/filter2'
import ConfigSider from './configSider'

const { Header, Content, Sider } = Layout

class DashboardDesignerContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            lastContentSize: {
                scroll: false,
                width: 0,
                height: 0,
            },
            visibleFilterBox: false,
            closeFilters: false,
        };
        this.contentRef=React.createRef();
    }

    componentDidMount() {
        // this.refreshContentSize();
        const { dashboardDesigner } = this.props;
        const { filters } = dashboardDesigner;
        this.setState({
            closeFilters: filters.length > 6
        });
        window.addEventListener("resize", this.refreshContentSize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.refreshContentSize);
    }

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

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

    /**
     * 重设容器宽度
     */
    refreshContentSize = () => {
        this.setState({
            refresh: true
        });
    }

    getContentSize = () => {
        const { lastContentSize } = this.state;
        let contentEl = this.contentRef.current;
        if(!contentEl) {
            return {
                width: 0,
                height: 0
            }; 
        }
        let viewcontent = contentEl.getElementsByClassName('dashboard-viewcontent')[0];
        let _scroll = viewcontent.scrollHeight > viewcontent.clientHeight;
        let padding = 0;

        let width = contentEl.offsetWidth - padding * 2 - (_scroll ? 10 : 2) // 有滚动条时需要减去滚动条的宽度
        if(width > 0 && width !== lastContentSize.width) {
            this.setState({
                lastContentSize: {
                    width,
                    height: contentEl.clientHeight,
                    scroll: _scroll
                }
            });
        }
        return {
            width: width,
            height: contentEl.clientHeight
        }
    }

    createFilters = (filters) => {
        const { dispatch, afterRefresh } = this.props;
        dispatch({ type: 'dashboardDesigner/changeFilters', filters }).then(() => {
            afterRefresh && typeof afterRefresh === 'function' && afterRefresh()
        });
    }

    filterUsingChange = (e) => {
        const key = e.target.dataset.key;
        const { dashboardDesigner, dispatch, afterRefresh } = this.props;
        const filters = dashboardDesigner.filters;
        let filter = filters.find(f => +f.key === +key);
        dispatch({ type: 'dashboardDesigner/changeFilter', filter: { ...filter, using: filter.type ? !filter.using : false} }).then(() => {
            afterRefresh && typeof afterRefresh === 'function' && afterRefresh()
        });
    }

    changeFilterValue = (filter) => {
        const { dispatch, afterRefresh } = this.props;
        dispatch({ type: 'dashboardDesigner/changeFilter', filter }).then(() => {
            afterRefresh && typeof afterRefresh === 'function' && afterRefresh()
        });
    }

    render() {
        const { dashboardDesigner, isOwner, isShareView, isShareKeyView, isViewMode } = this.props;
        const { dataSources, editMode, filters, relationColumns } = dashboardDesigner;
        const { visibleFilterBox, lastContentSize, closeFilters } = this.state;

        const contentSize = this.getContentSize();

        return <Layout className='content'>
            <Content className={`dashboard-content${(isShareView || isShareKeyView || isViewMode) ? ' nomargin' : ''}`}>
                <Layout className='content-layout'>
                    {isOwner && editMode && !isShareView && !isShareKeyView && !isViewMode && <Sider className={`config-sider${ (isOwner && editMode) ? '' : ' config-sider-closed' }`} width={(isOwner && editMode && !isShareView && !isShareKeyView && !isViewMode) ? 200 : 0}>
                        <ConfigSider/>
                    </Sider>}
                    {/**
                        这里直接用main标签而不用antd的Header组件是为了让ref能够定位到对应的dom元素
                    */}
                    <main ref={this.contentRef} className='viewlayout ant-layout-content'>
                        {(editMode || (filters && filters.length > 0) )&& <Header>
                            {/* <div className='toggle'><Icon type="caret-up" /></div> */}
                            <div className={`filters${closeFilters ? ' closed': ''}`}>
                                <div className='content'>
                                    {isOwner && editMode && !isShareView && !isShareKeyView && !isViewMode && <Tag
                                        onClick={this.showFilterBox}
                                        className={`filter-tag filter-tag-add`}
                                    >
                                        <Icon type="filter" theme="outlined" />
                                    </Tag>}
                                    {filters.map(f => (
                                        <Filter
                                            key={f.key}
                                            filter={f}
                                            changeFilterValue={this.changeFilterValue}
                                        />
                                    ))}
                                </div>
                                <div className='right' style={{ display: filters.length > 0 ? 'block' : 'none' }}>
                                    <Icon title={closeFilters ? '展开' : '收起'} type={closeFilters ? 'caret-up' : 'caret-down'} onClick={() => {
                                        this.setState({
                                            closeFilters: !closeFilters
                                        });
                                    }}/>
                                </div>
                            </div>
                            {visibleFilterBox && <FilterBox key={Math.random()} dataSources={dataSources} relationColumns={relationColumns} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />}
                        </Header>}
                        <ViewLayout isOwner={isOwner} isShareView={isShareView} isShareKeyView={isShareKeyView} isViewMode={isViewMode} contentSize={contentSize} lastContentSize={lastContentSize} editMode={editMode}/>
                    </main>
                </Layout>
            </Content>
        </Layout>
    }
}

export default connect(({ present: { dashboardDesigner } }) => ({ dashboardDesigner }))(DashboardDesignerContent);