saas-platform/frontend/saas-web/app/view/main/Navigation.js

Ext.define('saas.view.main.Navigation', {
    extend: 'Ext.view.View',
    xtype: 'main-navigation',
    reference: 'navigationTreeList',

    width: 180,

    navCollapsed: false,
    cls: 'x-navpanel',

    menuPadding: 0,

    bind: {
        store: '{navMenu}'
    },

    renderTpl: [
        '<div id="{id}-innerCt" data-ref="innerCt" role="presentation">',
        '{%this.renderContent(out,values)%}',
        '</div>'
    ],
    tpl: ['<ul class="x-navlist">',
        '<tpl for=".">',
        '<li class="x-navitem">',
        '<div class="x-navitem-body">',
        '<div class="nav-inner-wrap" style="margin-left: 0px;">',
        '<div class="nav-inner-icon {iconCls}"></div>',
        '<div class="nav-inner-text">{text}</div>',
        '</div>',
        '</div>',
        '</li>',
        '</tpl>',
        '</ul>'
    ],

    overItemCls: 'x-navitem-over',
    selectedItemCls: 'x-navitem-selected',
    singleSelect: true,
    itemSelector: '.x-navitem',

    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            listeners: {
                itemmouseenter: function(navView, record, navItem, index, e, eOpts) {
                    window.clearTimeout(me.Timer);
                    me.Timer = setTimeout(function() {
                        me.showNavMenu(navView, record, navItem, index, e, eOpts);
                    }, 80);
                },
                itemmouseleave: function(view, record, item, index, e, eOpts) {
                    window.clearTimeout(me.Timer);
                    me.hideNavMenu(view, record, item, index, e, eOpts);
                },
                itemClick: function(navView, record, navItem, index, e, eOpts) {
                    window.clearTimeout(me.Timer);
                    me.Timer = setTimeout(function() {
                        me.showNavMenu(navView, record, navItem, index, e, eOpts);
                    }, 20);
                },
                scope: me
            }
        });
        me.callParent(arguments);
    },

    showNavMenu: function (navView, record, navItem, index, e, eOpts) {
        var me = this,
            recData = record.data,
            d = recData.items || [],
            menuItems = JSON.parse(JSON.stringify(d)),
            itemBox = navItem.getBoundingClientRect(),
            pos = [itemBox.left + itemBox.width, itemBox.top],
            menuId = 'navMenu-' + record.get('id'),
            menu = Ext.getCmp(menuId);

        //获取b2b权限
        var enableB2B = me.ownerCt.ownerCt.getViewModel().get('enableB2B');

        Ext.each(menuItems,function(item,index){
            if(item.items.length>0){
                var l = item.items.length;
                for(var i = 0;i<l;i++){
                    if(item.items[i].hasOwnProperty('b2b')){
                        if(((!enableB2B || enableB2B == '0') && item.items[i].b2b == true) || (!!enableB2B && item.items[i].b2b == false)) {
                            item.items.splice(i--,1);
                            l--;
                        }
                    }
                };
            }
        })

        if (!menu) {
            view = new Ext.DataView({
                store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'text', 'addType', 'viewType'],
                    data: menuItems
                }),
                tpl: new Ext.XTemplate('<div class="x-navitem-menu">',
                    '<div class="nav-menu-body">',
                        '<tpl for=".">',
                            '<div class="menu">',
                                '<div class="menu-title">',
                                    '<span class="menu-title-text">{text}</span>',
                                '</div>',
                                '<div class="menu-content">',
                                    '<tpl for="items">',
                                        '<div class="menuitem">',
                                            '<div data-boundView="{id}" data-recordId="{id}" class="item-text" data-config="{config}" data-id="{id}" data-text="{text}" data-type="query" data-viewType="{viewType}">',
                                                '{text}',
                                            '</div>',
                                            '<tpl if="this.hasAddType(addType)">',
                                                '<div class="item-icon" data-id="{id}" data-text="{text}" data-type="form" data-viewType="{addType}">新增</div>',
                                            '</tpl>',
                                        '</div>',
                                    '</tpl>',
                                '</div>',
                            '</div>',
                        '</tpl>',
                    '</div>',
                '</div>', {
                    disableFormats: true,
                    hasAddType: function(addType) {
                        return !!addType;
                    }
                }),
                trackOver: true,
                overItemCls: 'menuitem-over',
                selectedItemCls: 'menuitem-selected',
                singleSelect: true,
                itemSelector: '.menu',
                /** override */
                updateIndexes: function(startIndex, endIndex) {
                    var self = this,
                        menu = self.up('menu'),
                        nodes = self.all.elements,
                        records = self.getViewRange(),
                        selModel = self.getSelectionModel(),
                        myId = self.id,
                        i, j;

                    startIndex = startIndex || 0;
                    endIndex = endIndex || ((endIndex === 0) ? 0 : (nodes.length - 1));
                    for (i = startIndex; i <= endIndex; i++) {
                        let node = nodes[i];
                        let record = records[i];

                        
                        let cnodes = node.children[1].children;

                        for(j = 0; j < cnodes.length; j++) {
                            let cnode = cnodes[j];
                            let crecord = record.data.items[j];
                            !!Ext.get(cnode.children[0]) && Ext.get(cnode.children[0]).on('click', function() {
                                me.openTab('', crecord);
                                menu.hide();
                            });
                            !!Ext.get(cnode.children[1]) && Ext.get(cnode.children[1]).on('click', function() {
                                me.openTab('add', crecord);
                                menu.hide();
                            });
                        }
                    }
                },
            });
            var menu = Ext.create('Ext.menu.Menu', {
                navView: navView,
                navItem: navItem,
                id: menuId,
                width: window.innerWidth,
                cls: 'x-nav-menu',
                layout: 'fit',
                shadow: 'drop',
                bodyPadding: me.menuPadding,
                items: [view]
            });
        }
        menu.items.items[0].store.removeAll();
        menu.items.items[0].store.loadData(menuItems);
        menu.showAt(pos);
        me.refreshMenu(menu.items.items[0], pos)
    },

    openTab: function(type, data) {
        var viewType = data.viewType,
            text = data.text,
            config = data.config,
            id = data.id,
            addType = data.addType;

        saas.util.BaseUtil.openTab(type == 'add' ? addType : viewType, text, 'maintab-' + type + '-' + id, config);

    },

    refreshMenu: function (view, pos) {
        var me = this;
        var menu = view.up('menu'),
            menuView = view.el.dom.getElementsByClassName('x-navitem-menu')[0],
            menuBox = menuView.getBoundingClientRect(),
            menuViewWidth = menuBox.width + me.menuPadding * 2,
            menuViewHeight = menuBox.height + me.menuPadding * 2,
            menuItem = menuView.getElementsByClassName('menuitem');

        menu.setX(pos[0]);
        menu.setWidth(menuViewWidth);
        menu.setHeight(menuViewHeight);
        menu.updateLayout();

        view.el.dom.addEventListener('mouseenter', function (e) {
            menu.show();
            menu.navItem.classList.add(menu.navView.overItemCls);
        });

        view.el.dom.addEventListener('mouseleave', function (e) {
            menu.navItem.classList.remove(menu.navView.overItemCls);
            menu.hide();
        });
    },

    hideNavMenu: function (view, record, item, index, e, eOpts) {
        var recData = record.data,
            id = recData.id,
            menuId = 'navMenu-' + id,
            menu = Ext.getCmp(menuId),
            cx, cy, itemBox;

        if (menu) {
            cx = e.browserEvent.clientX,
            cy = e.browserEvent.clientY,
            itemBox = item.getBoundingClientRect();

            if (cx <= itemBox.left || cy <= itemBox.top || (cy >= (itemBox.top + itemBox.height) && cx <= (itemBox.left + itemBox.width - 10))) {
                menu.hide();
            }
        }
    }
});