platform-bi-web/src/components/dashboard/list.jsx

import React from 'react'
import { Layout, Button, Icon, Table, Menu, Dropdown, Card, Col, Row, Select } from 'antd'
import { connect } from 'dva'
import TransferBox from '../common/selectUserBox/selectUserBox';
import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
import { dateFormat } from '../../utils/baseUtils'
import DeleteBox from '../common/deleteBox/deleteBox'
import ShareBox from './shareBox'
import CopyBox from './copyBox'
import ListFilter from '../common/listFilter/index'
import EllipsisTooltip from '../common/ellipsisTooltip/index'
import CusIcon from '../common/cusIcon/index'
import './list.less'
const { Content } = Layout
const { Option } = Select


class DashboardList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedRecord: null,
            visibleChooseDataSourceBox: false,
            visibleDistributeBox: false,
            visibleShareBox: false,
            shareUrl: '',
            visibleTransferBox: false,
            visibleGroupMenu: false, // 显示分组菜单
            visibleDeleteBox: false,
            visibleCopyBox: false,
            defaultSelectedGroups: [],
            defaultSelectedUsers: [],
        }
    }

    componentDidMount() {
        const { dashboard, dispatch } = this.props;
        const { currentMenu } = dashboard;
        this.setScrollTableHeight();
        console.log(currentMenu);
        if(currentMenu && currentMenu.code !== '-1') {
            dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: currentMenu.code });
        }else {
            // dispatch({ type: 'dashboard/fetchList' });
        }
        document.getElementsByClassName('ant-table-body')[0].scrollTo(0, dashboard.listScrollTop);
    }

    componentWillUnmount() {
        const { dispatch } = this.props;
        window.removeEventListener('resize', this.setBodyWidth);
        dispatch({ type: 'dashboard/setField', name: 'listScrollTop', value: document.getElementsByClassName('ant-table-body')[0].scrollTop });
    }

    /**
     * 根据视图设置表格高度以呈现滚动条
     */
    setScrollTableHeight() {
        const view = document.getElementsByClassName('dashboard-view')[0];
        const mainContentBody = view.getElementsByClassName('dashboard-body')[0];
        const tableContentBody = mainContentBody.getElementsByClassName('ant-card-body')[0];
        const tableHeader = tableContentBody.getElementsByClassName('ant-table-header')[0];
        const tableBody = tableContentBody.getElementsByClassName('ant-table-body')[0];

        // 如果上下padding不一致就有问题了
        const padding = tableContentBody.children[0].getBoundingClientRect().top - tableContentBody.getBoundingClientRect().top;
        // table容器高度 - 上下padding - 表头高度 - 边框线宽
        tableBody.style.maxHeight = `${tableContentBody.offsetHeight - padding * 2 - tableHeader.offsetHeight - 2}px`;
    }

    getShareList = () => {
        new Promise((resolve, reject) => {
            const { dispatch } = this.props;
            const { selectedRecord } = this.state;
            dispatch({ type: 'dashboard/shareList', code: selectedRecord.code })
            .then(
                (resolve) => {
                    const resData = resolve.data.data;
                    const { groupNames: defaultSelectedGroups, userNames: defaultSelectedUsers } = resData;
                    this.setState({
                        visibleDistributeBox: true,
                        defaultSelectedGroups: defaultSelectedGroups.map(g => ({
                            code: g.id + '',
                            name: g.name
                        })),
                        defaultSelectedUsers: defaultSelectedUsers.map(u => ({
                            code: u.id + '',
                            name: u.name
                        })), 
                    });
                }
            ).catch(reject => {
                console.log(reject);
            });
        });
    }

    handleVisibleChange = (flag) => {
        this.setState({ visibleGroupMenu: flag });
    }

    hideGroupMenu = () => {
        this.setState({
            visibleGrouMenu: false
        });
    }

    distribute = (group, geren) => {
        const { dispatch } = this.props;
        const { selectedRecord } = this.state;
        let targets = group.map(g => ({
            code: g.code,
            name: g.name,
            isGroup: true
        })).concat(geren.map(g => ({
            code: g.code,
            name: g.name,
            isGroup: false
        })))
        dispatch({ type: 'dashboard/share', code: selectedRecord.code, targets });
    }

    onSearch(list, dashboard) {
        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
        let filterLabel = dashboard.filterLabel ? (dashboard.filterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
        let filterItem = dashboard.filterItem;
        let filterReg = new RegExp('(' + filterLabel + '){1}', 'ig');
        return list.map(l => {
            let o = Object.assign({}, l);

            if(filterItem.type === 'date') {
                if(filterLabel===""){
                    return o;
                }else if(filterLabel.indexOf('#')>-1){
                    let start = filterLabel.split('#')[0]
                    let end = filterLabel.split('#')[1]
                    let nowTime = new Date(o[filterItem.name]).getTime();
                    if(nowTime>=start && nowTime<=end){
                        return o;
                    }
                    return null 
                }else{
                    return null 
                }
            }else {
                return ((o[filterItem.name] + '').search(filterReg) > -1) ? o : null
            }
        }).filter(a => a!==null);
    }

    onSort(list) {
        return list.sort((a, b) => {
            return new Date(b.createTime) - new Date(a.createTime);
        });
    }

    generateFilterItems = () => {
        const { filterItems } = this.props.dashboard;
        return filterItems.map(t => <Option key={t.name} value={t.name}>{t.label}</Option>);
    }

    generateMenuItems = (menuTree) => {
        const { dispatch } = this.props;
        const { selectedRecord } = this.state;
        return menuTree.filter(t => t.type === 'menu').map(t => {
            if(t.children && t.children.length > 0) {
                return <Menu.SubMenu
                    key={t.code}
                    title={selectedRecord.menuCode === t.code ? <span className='current' style={{ fontWeight: 'bold' }}>{t.name}</span> : t.name}
                    onTitleClick={() => {
                        dispatch({ type: 'dashboard/remoteSetMenu', dashboard: selectedRecord, menu: t });
                        let obj = {selectedRecord: null};
                        obj['visibleOperatingMenu' + selectedRecord.code] = false;
                        this.setState(obj);
                    }}
                >
                    {this.generateMenuItems(t.children)}
                </Menu.SubMenu>
            }else {
                return <Menu.Item key={t.code} onClick={() => {
                    dispatch({ type: 'dashboard/remoteSetMenu', dashboard: selectedRecord, menu: t });
                    let obj = {selectedRecord: null};
                    obj['visibleOperatingMenu' + selectedRecord.code] = false;
                    this.setState(obj);
                }}>{selectedRecord.menuCode === t.code ? <span className='current' style={{ fontWeight: 'bold' }}>{t.name}</span> : t.name}</Menu.Item>
            }
        })
    }

    // generateCurrentMenu = () => {
    //     const { currentMenuParents } = this.props.dashboard;
    //     let arr = [];
    //     for(let i = currentMenuParents.length - 1; i >= 0; i--) {
    //         arr.push();
    //     }
    //     return arr;
    // }

    render() {
        const { dispatch, dashboard, main } = this.props;
        const { visibleShareBox, shareUrl, visibleDistributeBox, visibleTransferBox, visibleDeleteBox,
            visibleCopyBox, selectedRecord, defaultSelectedGroups, defaultSelectedUsers } = this.state
        const { currentUser } = main;
        const { menuTree, filterItem, currentMenu, currentMenuParents } = dashboard;

        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
        let filterLabel = dashboard.filterLabel ? (dashboard.filterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号

        const moreOperatingMenu = (
            <Menu className='menu-operation'>
                { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Item onClick={() => {
                    dispatch({ type: 'dashboard/getShareKey', record: selectedRecord, delay: 7 }).then((key) => {
                        let obj = { visibleShareBox: true, shareUrl: window.location.origin + '/#/dashboard/share_key/' + key };
                        obj['visibleOperatingMenu' + selectedRecord.code] = false;
                        this.setState(obj);
                    });
                }}> 
                    <Icon type='share-alt'/>分享
                </Menu.Item>}
                { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Divider />}
                {/* { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Item onClick={this.getShareList}> 
                    <Icon type='share-alt'/>分发
                </Menu.Item>} */}
                { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Item
                    onClick={()=>{
                        let obj = {visibleTransferBox: true};
                        obj['visibleOperatingMenu' + selectedRecord.code] = false;
                        this.setState(obj);
                    }}
                >
                    <Icon type="swap" />移交
                </Menu.Item>}
                { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Divider />}
                { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.SubMenu className='setgroupmenu' title={<div><Icon style={{ marginRight: '6px' }} type='profile' />移动到</div>}>
                    {this.generateMenuItems(menuTree)}
                </Menu.SubMenu>}
                { selectedRecord && (selectedRecord.dataConnects.length <= 1) && <Menu.Item
                    onClick={()=>{
                        let obj = {visibleCopyBox: true};
                        obj['visibleOperatingMenu' + selectedRecord.code] = false;
                        this.setState(obj);
                    }}
                >
                    <Icon type="copy" />复制
                </Menu.Item> }
                { selectedRecord && currentUser.code === selectedRecord.creatorCode && <Menu.Item
                    onClick={(e) => {
                        let obj = {visibleDeleteBox: true};
                        obj['visibleOperatingMenu' + selectedRecord.code] = false;
                        this.setState(obj);
                    }}
                >
                    <Icon type="delete" />删除
                </Menu.Item>}
            </Menu>
        )

        const dashboardColumns = [{
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 100,
            render: (text, record) => {
                return (
                    <span style={{ color: '#1890ff', cursor: 'pointer' }} onClick={() => {
                        dispatch({ type: 'dashboardDesigner/reset' });
                        dispatch({ type: 'main/redirect', path: '/dashboard/' + record.code });
                        dispatch({ type: 'recent/addRecentRecord', tarId: record.code, recordType: 1});
                    }}>
                        { filterLabel && filterItem.name === 'name' ?
                            ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                return (
                                    fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
                                    <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                                    fragment
                                )
                            }
                            )) : text
                        }
                    </span>
                )
            }
        }, {
            title: '备注',
            dataIndex: 'description',
            key: 'description',
            width: 200,
            onCell: () => {
                return {
                    style: {
                        whiteSpace: 'nowrap',
                        maxWidth: 200,
                    }
                }
            },
            render: (text) => <EllipsisTooltip title={text}>{
                filterLabel && filterItem.name === 'description' ? ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                    return (
                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
                        <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                        fragment
                    )
                })) : text
            }</EllipsisTooltip>,
        }, {
            title: '创建人',
            dataIndex: 'creatorName',
            key: 'creatorName',
            width: 100,
            render: (text, record) => {
                return (
                    <span>
                        { filterLabel && filterItem.name === 'creatorName' ?
                            ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                return (
                                    fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
                                    <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
                                    fragment
                                )
                            }
                            )) : text
                        }
                    </span>
                )
            }
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            render: (text, record) => dateFormat(text, 'yyyy-MM-dd hh:mm:ss'),
            width: 100
        }, {
            title: '操作',
            key: 'action',
            render: (text, record, index) => (
                <Dropdown key={record.code} code={record.code} overlay={moreOperatingMenu} trigger={['click']} visible={this.state['visibleOperatingMenu' + record.code]} onVisibleChange={visible => {
                    let obj = {};
                    obj['visibleOperatingMenu' + record.code] = visible;
                    this.setState(obj)
                }}>
                    <Icon type="setting" />
                </Dropdown>
            ),
            width: 50
        }];

        return (
            <Layout className='dashboard-view'>
                <Content>
                    <Card className="dashboard-body" title={
                        <Row className='dashboard-tools' type='flex' justify='space-between'>
                            <Col className='menus' style={{ display: 'flex' }}>
                                {/* { this.generateCurrentMenu() } */}
                                { [].concat(currentMenuParents).reverse().map(m => m.name).join(' > ') }
                            </Col>
                            <Col className='search'>
                                <Col>
                                    <Button className='btn-refresh' onClick={() => {
                                        dispatch({ type: 'dashboard/setFilterLabel', label: '' });
                                        if(!currentMenu ||  currentMenu.code === '-1') {
                                            // dispatch({ type: 'dashboard/fetchList', mandatory: true });
                                        }else {
                                            dispatch({ type: 'dashboard/remoteMenuDashboardList', menuCode: currentMenu.code });
                                        }
                                    }}>
                                        <CusIcon type='bi-refresh'/>
                                    </Button>
                                </Col>
                                <Col>
                                    <ListFilter modelName='dashboard' model={dashboard}/>
                                </Col>
                                <Col>
                                    <Button disabled={!currentMenu || currentMenu.code === '-1'} onClick={() => {
                                        dispatch({ type: 'dashboardDesigner/reset' });
                                        dispatch({ type: 'dashboard/remoteQucikAdd', menuCode: currentMenu.code });
                                    }}>
                                        <Icon type="layout" />创建报表
                                    </Button>
                                </Col>
                            </Col>
                        </Row>
                    }>
                        <Table
                            className='dashboard-table'
                            columns={dashboardColumns}
                            dataSource={
                                this.onSort(
                                    this.onSearch(dashboard.list, dashboard)
                                )
                            }
                            size='small'
                            scroll={{x: false, y: true}}
                            pagination={false}
                            onRow={(record) => {
                                return {
                                    onClick: () => {
                                        this.setState({ selectedRecord:  record})
                                    }
                                }
                            }}
                        />
                    </Card>
                </Content>
                {visibleDistributeBox && <AccessObjectBox
                    visibleBox={visibleDistributeBox}
                    hideBox={() => {
                        this.setState({
                            visibleDistributeBox: false
                        })
                    }}
                    okHandler={this.distribute}
                    defaultSelectedGroups={defaultSelectedGroups}
                    defaultSelectedUsers={defaultSelectedUsers}
                />}
                {visibleTransferBox && <TransferBox
                    visibleBox={visibleTransferBox}
                    title='选择移交对象'
                    okHandler={(user) => {
                        dispatch({ type: 'dashboard/transfer', dashboardCode: this.state.selectedRecord.code, userCode: user.code });
                    }}
                    hideBox={() => {
                        this.setState({
                            visibleTransferBox: false
                        })
                    }}
                />}
                {visibleDeleteBox && <DeleteBox
                    visibleBox={visibleDeleteBox}
                    text={`确定要删除报表【${selectedRecord.name}】吗？`}
                    hideBox={() => {
                        this.setState({
                            visibleDeleteBox: false
                        })
                    }}
                    okHandler={() => {
                        dispatch({ type: 'dashboard/remoteDelete', code: this.state.selectedRecord.code })
                    }} 
                />}
                {visibleShareBox && <ShareBox
                    visibleBox={visibleShareBox}
                    shareUrl={shareUrl}
                    hideBox={() => {
                        this.setState({
                            visibleShareBox: false
                        })
                    }}
                    onRefreshKey={(delay) => {
                        return dispatch({ type: 'dashboard/getShareKey', record: this.state.selectedRecord, delay: delay })
                        .then((key) => {
                            this.setState({
                                shareUrl: window.location.origin + '/#/dashboard/share_key/' + key
                            })
                            
                        })
                    }}
                />}
                {visibleCopyBox && <CopyBox
                    visibleBox={visibleCopyBox}
                    hideBox={()=>{this.setState({visibleCopyBox: false})}}
                    currentDashboardCode={selectedRecord.code}
                    currentDataConnect={selectedRecord.dataConnects[0]}
                />}
            </Layout>
        )
    }
}

export default connect(({ present: { main, dashboard } }) => ({ main, dashboard }))(DashboardList)