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

import React from 'react'
import { connect } from 'dva'
import { Form, Input, Cascader, Select, Icon } from 'antd'
import ChooseChartBox from './chooseChartBox'
import CusFilterBox from './cusFilterBox'
import copy from 'copy-to-clipboard'
import themes from '../chartDesigner/sections/style/theme/index'
import './configSider.less'
const FormItem = Form.Item

class ConfigSider extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            description: props.dashboardDesigner.description,
            visibleChooseChartBox: false,
            visibleCusFilterBox: false,
            copyDisabled: false,
            copyText: '复制',
            validInfo: { description: { status: 'success', help: '' } }
        };
    }

    componentDidMount() {
        this.props.dispatch({ type: 'dashboard/remoteMenuTree' })
    }

    showChooseChartBox = (o) => {
        this.setState({
            visibleChooseChartBox: true
        });
    }

    hideChooseChartBox = (o) => {
        this.setState({
            visibleChooseChartBox: false
        });
    }

    showCusFilterBox = (o) => {
        this.setState({
            visibleCusFilterBox: true
        });
    }

    hideCusFilterBox = (o) => {
        this.setState({
            visibleCusFilterBox: false
        });
    }

    generateViewTypes = () => {
        const { dispatch } = this.props;
        const { visibleChooseChartBox } = this.state;

        return (<div className='view-types'>
            <div  className='view-type-item'onClick={() => {
                this.showChooseChartBox("create");
            }}>
                <Icon type='area-chart'/>
                <span>图表选择</span>
            </div>
            <div className='view-type-item' onClick={() => {
                dispatch({ type: 'dashboardDesigner/addRichText' });
                setTimeout(() => {
                    // 滚动到最底部
                    let viewScrollContent = document.querySelector('.viewlayout');
                    viewScrollContent.scrollTo && viewScrollContent.scrollTo(0, viewScrollContent.scrollHeight - viewScrollContent.clientHeight);
                    
                    var e = document.createEvent("Event");
                    e.initEvent("resize", true, true);
                    window.dispatchEvent(e);
                }, 500);
            }}>
                <Icon type='book'/>
                <span>富文本</span>
            </div>
            {visibleChooseChartBox && <ChooseChartBox visibleBox={visibleChooseChartBox} hideBox={this.hideChooseChartBox} />}
        </div>)
    }

    generateMenuOptions = (menuTree) => {
        let menuList = [];
        menuTree.forEach(t => {
            t.children = t.children instanceof Array ? t.children : [];
            if(t.type === 'menu') {
                menuList.push({
                    key: t.code,
                    value: t.code,
                    label: t.name,
                    children: this.generateMenuOptions(t.children)
                });
            }
        })
        return menuList;
    }

    getParens = (menu) => {
        const { menuList } = this.props.dashboard;
        let pmenus = [menu];
        let fmenu = menuList.find(l => l.code === menu.pcode);
        if(fmenu) {
            pmenus = pmenus.concat(this.getParens(fmenu));
        }
        return pmenus;
    }

    getMenuValue = () => {
        const { dashboard, dashboardDesigner } = this.props;
        const { menuCode: key } = dashboardDesigner;
        let menu = dashboard.menuList.find(m => m.code === key);
        if(menu) {
            let menus = this.getParens(menu);
            let val = menus.reverse().map(m => m.code);
            return val;
        }else {
            return null;
        }
    }

    render() {
        const { dashboard, dashboardDesigner, dispatch } = this.props;
        const { description, visibleCusFilterBox, copyDisabled, copyText, validInfo } = this.state;
        const { theme } = dashboardDesigner;
        const { menuTree } = dashboard;

        return <Form className='form-config' layout={'vertical'}>
            <div className='divider'>报表制作</div>
            {this.generateViewTypes()}
            <div className='divider'>字段过滤</div>
            <div className="cus-filter-button" onClick={this.showCusFilterBox}>
                <Icon type='bulb' theme='outlined' />自定义过滤字段
            </div>
            {visibleCusFilterBox && <CusFilterBox visibleBox={visibleCusFilterBox} hideBox={this.hideCusFilterBox} />}
            <div className='divider'>其他设置</div>
            <FormItem label='所属目录'>
                <Cascader
                    value={this.getMenuValue()}
                    allowClear={false}
                    changeOnSelect={true}
                    expandTrigger='hover'
                    placeholder='无'
                    options={this.generateMenuOptions(menuTree)}
                    onChange={(value, items) => {
                        let v = value[value.length - 1];
                        dispatch({ type: 'dashboardDesigner/setField', name: 'menuCode', value: v });
                    }}
                    
                >
                </Cascader>
            </FormItem>
            <FormItem label='备注' validateStatus={validInfo.description.status} help={validInfo.description.help}>
                <Input.TextArea
                    autosize={{ minRows: 2, maxRows: 6 }}
                    value={description}
                    onChange={e => {
                        let val = e.target.value;
                        let status = 'success', help = '';
                        if(val.length > 150) {
                            status = 'error';
                            help = '备注不能超过150个字符'
                        }
                        this.setState({
                            description: val,
                            validInfo: {
                                description: { status, help, }
                            }
                        });
                        window.clearTimeout(this.descriptionKey);
                        this.descriptionKey = window.setTimeout(() => {
                            if(val.trim().length <= 150) {
                                dispatch({ type: 'dashboardDesigner/setField', name: 'description', value: val });
                            }
                        }, 200);
                    }}
                    onBlur={(e) => {
                        if(validInfo.description.status === 'success') {
                            dispatch({ type: 'dashboardDesigner/setField', name: 'description', value: e.target.value });
                        }else {
                            this.setState({
                                description: dashboardDesigner.description
                            }, () => {
                                window.setTimeout(() => {
                                    this.setState({
                                        validInfo: {
                                            description: { status: 'success', help: '', }
                                        }
                                    });
                                }, 500);
                            })
                        }
                    }}
                />
            </FormItem>
            <FormItem label='报表编号'>
                <Input
                    value={dashboardDesigner.shareCode}
                    onChange={(e) => {
                        dispatch({ type: 'dashboardDesigner/setField', name: 'shareCode', value: e.target.value });
                    }}
                    addonAfter={<span style={{ cursor: (copyDisabled || !dashboardDesigner.shareCode) ? 'not-allowed' : 'pointer' }} onClick={() => {
                        if(copyDisabled || !dashboardDesigner.shareCode) {
                            return;
                        }
                        copy(dashboardDesigner.shareCode);
                        this.setState({
                            copyDisabled: true,
                            copyText: '已复制'
                        }, () => {
                            setTimeout(() => {
                                this.setState({
                                    copyDisabled: false,
                                    copyText: '复制'
                                });
                            }, 3000)
                        });
                    }}>{copyText}</span>}
                />
            </FormItem>
            <div className='divider'>看板主题</div>
            <FormItem>
                <Select
                    defaultValue={theme || 'default'}
                    onChange={(value, item) => {
                        dispatch({ type: 'dashboardDesigner/setField', name: 'theme', value: value });
                        dispatch({ type: 'dashboardDesigner/refresh' });
                    }}
                >
                    {themes.map((theme) => (
                        <Select.Option value={theme.name} key={theme.name}>{theme.label}</Select.Option>
                    ))}
                </Select>
            </FormItem>
        </Form>
    }
}

export default connect(({ dashboard, dashboardDesigner }) => ({ dashboard, dashboardDesigner }))(ConfigSider);