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

Ext.define('saas.view.main.Navigation', {
    extend: 'Ext.panel.Panel',
    xtype: 'main-navigation',
    ui: 'nav',

    reference: 'navigationTreeList',

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

    initComponent: function() {
        var me = this;
        var view = new Ext.DataView({
            store : Ext.create('Ext.data.Store', {
                fields: ['text', 'iconCls'],
                data: [{
                    text: '采购',
                    iconCls: 'x-fa fa-shopping-basket',
                    items: [{
                        text: '制单',
                        items: [{
                            id: 'purchase',
                            text: '采购单',
                            formType:'purchase-purchase-formpanel',
                            queryType: 'purchase-purchase-querypanel'
                        }, {
                            id: 'purchaseIn',
                            text: '采购验收单',
                            formType:'purchase-purchaseIn-formpanel',
                            queryType: 'purchase-purchaseIn-querypanel'
                        },{
                            id: 'purchaseOut',
                            text: '采购验退单',
                            formType:'purchase-purchaseOut-formpanel',
                            queryType: 'purchase-purchaseOut-querypanel'
                        },{
                            id: 'inquiry',
                            text: '采购询价单',
                            formType:'purchase-inquiry-formpanel',
                            queryType: 'purchase-inquiry-querypanel'
                        }
                        // ,{
                        //     id: 'form1',
                        //     text: '测试-采购单明细界面',
                        //     formType: 'test-order-formpanel'
                        // }, {
                        //     id: 'myform',
                        //     text: '测试-明细界面',
                        //     formType: 'test-myform-formpanel'
                        // }, {
                        //     id: 'myquerytest',
                        //     text: '测试-采购单查询界面',
                        //     queryType: 'test-query-querypanel',
                        // }
                    ]
                    }, {
                        text: '报表',
                        items: [{
                            text: '采购明细表'
                        }, {
                            text: '采购付款一览表'
                        }]
                    }]
                }, {
                    text: '销售',
                    iconCls: 'x-fa fa-shopping-cart',
                    items: [{
                        text: '制单',
                        items: [{
                            id: 'sale',
                            text: '销售订单',
                            formType:'sale-sale-formpanel',
                            queryType: 'sale-sale-querypanel'
                        },{
                            id: 'saleOut',
                            text: '销售出货单',
                            formType:'sale-saleOut-formpanel',
                            queryType: 'sale-saleOut-querypanel'
                        },{
                            id: 'saleIn',
                            text: '销售退货单',
                            formType:'sale-saleIn-formpanel',
                            queryType: 'sale-saleIn-querypanel'
                        },{
                            id: 'saleToPur',
                            text: '以销定购',
                            formType:'sale-saleToPur-formpanel',
                            queryType: 'sale-saleToPur-querypanel'
                        }]
                    }, {
                        text: '报表',
                        items: [{
                            text: '销售明细表'
                        },{
                            text: '销售收款一览表'
                        },{
                            text: '销售利润表'
                        }]
                    }]
                }, {
                    text: '库存',
                    iconCls: 'x-fa fa-shopping-cart',
                    items: [{
                        text: '制单',
                        items: [{
                            id: 'appropriationInOut',
                            text: '调拨单',
                            formType:'stock-appropriationInOut-formpanel',
                            queryType: 'stock-appropriationInOut-querypanel'
                        },{
                            id: 'make',
                            text: '制造单',
                            formType:'stock-make-formpanel',
                            queryType: 'stock-make-querypanel'
                        },{
                            id: 'otherIn',
                            text: '其它入库单',
                            formType:'stock-otherIn-formpanel',
                            queryType: 'stock-otherIn-querypanel'
                        },{
                            id: 'otherOut',
                            text: '其它出库单',
                            formType:'stock-otherOut-formpanel',
                            queryType: 'stock-otherOut-querypanel'
                        },{
                            id: 'inventory',
                            text: '盘点单',
                            formType:'stock-inventory-formpanel',
                            queryType: 'stock-inventory-querypanel'
                        }]
                    }, {
                        text: '报表',
                        items: [{
                            text: '物料出入库明细表'
                        },{
                            text: '物料收发汇总表'
                        },{
                            text: '物料库存数量金额表'
                        }]
                    }]
                }, {
                    text: '资金',
                    iconCls: 'x-fa fa-shopping-cart',
                    items: [{
                        text: '制单',
                        items: [{
                            id: 'payBalance',
                            text: '付款单',
                            formType:'money-payBalance-formpanel',
                            queryType: 'money-payBalance-querypanel'
                        },{
                            id: 'recBbalance',
                            text: '收款单',
                            formType:'money-recBbalance-formpanel',
                            queryType: 'money-recBbalance-querypanel'
                        },{
                            id: 'verification',
                            text: '核销单',
                            formType:'money-verification-formpanel',
                            queryType: 'money-verification-querypanel'
                        },{
                            id: 'othReceipts',
                            text: '其它收支单',
                            formType:'money-othReceipts-formpanel',
                            queryType: 'money-othReceipts-querypanel'
                        },{
                            id: 'fundTransfer',
                            text: '资金转存',
                            formType:'money-fundTransfer-formpanel',
                            queryType: 'money-fundTransfer-querypanel'
                        }]
                    }, {
                        text: '报表',
                        items: [{
                            text: '供应商对账单'
                        },{
                            text: '应付账款明细表'
                        },{
                            text: '客户对账单'
                        },{
                            text: '应收款明细表'
                        },{
                            text: '资金账户余额表'
                        }]
                    }]
                }, {
                    text: '资料',
                    iconCls: 'x-fa fa-shopping-cart',
                    items: [{
                        text: '基础资料',
                        items: [{
                            id: 'vendor',
                            text: '供应商资料',
                            formType:'document-vendor-formpanel',
                            queryType: 'document-vendor-querypanel'
                        },{
                            id: 'customer',
                            text: '客户资料',
                            formType:'document-customer-formpanel',
                            queryType: 'document-customer-querypanel'
                        },{
                            id: 'product',
                            text: '物料资料',
                            formType:'document-product-formpanel',
                            queryType: 'document-product-querypanel'
                        },{
                            id: 'warehouse',
                            text: '仓库资料',
                            formType:'document-warehouse-formpanel',
                            queryType: 'document-warehouse-querypanel'
                        },{
                            id: 'bom',
                            text: 'BOM资料',
                            formType:'document-bom-formpanel',
                            queryType: 'document-bom-querypanel'
                        },{
                            id: 'moneyAccount',
                            text: '资金账户',
                            formType:'document-moneyAccount-formpanel',
                            queryType: 'document-moneyAccount-querypanel'
                        },{
                            id: 'employee',
                            text: '人员资料',
                            formType:'document-employee-formpanel',
                            queryType: 'document-employee-querypanel'
                        }]
                    }, {
                        text: '辅助资料',
                        items: [{
                            id: 'vendorType',
                            text: '供应商类型',
                            formType:'document-vendorType-formpanel',
                            queryType: 'document-vendorType-querypanel'
                        },{
                            id: 'purcAddress',
                            text: '采购交货地址',
                            formType:'document-purcAddress-formpanel',
                            queryType: 'document-purcAddress-querypanel'
                        },{
                            id: 'customerType',
                            text: '客户类型',
                            formType:'document-customerType-formpanel',
                            queryType: 'document-customerType-querypanel'
                        },{
                            id: 'unit',
                            text: '计量单位',
                            formType:'document-unit-formpanel',
                            queryType: 'document-unit-querypanel'
                        },{
                            id: 'productType',
                            text: '物料类型',
                            formType:'document-productType-formpanel',
                            queryType: 'document-productType-querypanel'
                        },{
                            id: 'productBrand',
                            text: '物料品牌',
                            formType:'document-productBrand-formpanel',
                            queryType: 'document-productBrand-querypanel'
                        },{
                            id: 'moneyinoutType',
                            text: '收支类别',
                            formType:'document-moneyinoutType-formpanel',
                            queryType: 'document-moneyinoutType-querypanel'
                        },{
                            id: 'role',
                            text: '用户角色',
                            formType:'document-role-formpanel',
                            queryType: 'document-role-querypanel'
                        }]
                    }]
                }],
            }),
            tpl : new Ext.XTemplate('<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>',
                '</li>',
                '</tpl>',
            '</ul>'),
            trackOver: true,
            overItemCls : 'x-navitem-over',
            selectedClass : 'x-navitem-selected',
            singleSelect : true,
            itemSelector : '.x-navitem',
            listeners: {
                itemmouseenter: me.showNavMenu,
                itemmouseleave: me.hideNavMenu,
                itemClick: me.clickNavMenu,
                scope: me
            }
        });

        Ext.apply(me, {
            items: [view]
        });

        me.view = view;
        me.callParent();
    },

    clickNavMenu: function(view, record, item, index, e, eOpts) {
        var me = this;
        this.showNavMenu(view, record, item, index, e, eOpts);
    },

    showNavMenu: function(view, record, item, index, e, eOpts) {
        var recData = record.data,
        menuItems = recData.items || [],
        itemBox = item.getBoundingClientRect(),
        pos = [itemBox.left + itemBox.width, itemBox.top],
        id = recData.id,
        menuId = 'navMenu-' + id,
        menu = Ext.getCmp(menuId);

        if(!menu) {
            var view = new Ext.DataView({
                store : Ext.create('Ext.data.Store', {
                   fields: ['id', 'text', 'formType', 'queryType'],
                   data: menuItems
                }),
                tpl: new Ext.XTemplate('<div class="x-navitem-menu">',
                    '<div class="nav-menu-body">',
                        '<tpl for=".">',
                        '<div class="menu">',
                            '<h3 class="menu-title">{text}</h3>',
                            '<div class="menu-content">',
                                '<tpl for="items">',
                                '<div class="menuitem">',
                                    '<div class="item-text" title="{text}" data-id="{id}" data-text="{text}" data-type="query" data-queryType="{queryType}">',
                                        '{text}',
                                    '</div>',
                                    '<tpl if="{formType}">',
                                    '<div class="item-icon" data-id="{id}" data-text="{text}" data-type="form" data-formType="{formType}">新增</div>',
                                    '</tpl>',
                                '</div>',
                                '</tpl>',
                            '</div>',
                        '</div>',
                        '</tpl>',
                    '</div>',
                '</div>'),
                trackOver: true,
                overItemCls : 'menuitem-over',
                selectedClass : 'menuitem-selected',
                singleSelect : true,
                itemSelector : 'menu',
                listeners: {
                    boxready: function(view, width, height, eOpts) {
                        var menu = view.up('menu'),
                        menuView = view.el.dom.getElementsByClassName('x-navitem-menu')[0],
                        menuBox = menuView.getBoundingClientRect(),
                        menuViewWidth = menuBox.width,
                        menuViewHeight = menuBox.height,
                        menuItem = menuView.getElementsByClassName('menuitem');
                        
                        menu.setWidth(menuViewWidth);
                        menu.setHeight(menuViewHeight);
                        menu.updateLayout();

                        view.el.dom.addEventListener('mouseleave', function(e) {
                            var ex = e.clientX,
                            ey = e.clientY,
                            box = menuView.getBoundingClientRect();

                            if(ey <= box.top || ex >= (box.left + box.width) || ey >= (box.top + box.height) || (ex <= box.left && ey >= (box.top + 64))) {
                                menu.hide();
                            }
                        });

                        Ext.Array.each(menuItem, function(mi) {
                            var menuItemText = mi.getElementsByClassName('item-text');
                            var menuItemIcon = mi.getElementsByClassName('item-icon');

                            Ext.Array.each(menuItemText, function(item) {
                                item.addEventListener('click', function(e) {
                                    var target = e.target,
                                    dataset = target.dataset;
                                    mainView = Ext.getCmp('mainView'),
                                    controller = mainView.getController();
        
                                    controller.setActiveTab(dataset);
                                    menu.hide();
                                });
                            });
                            Ext.Array.each(menuItemIcon, function(item) {
                                item.addEventListener('click', function(e) {
                                    var target = e.target,
                                    dataset = target.dataset;
                                    mainView = Ext.getCmp('mainView'),
                                    controller = mainView.getController();
        
                                    controller.setActiveTab(dataset);
                                    menu.hide();
                                });
                            });
                        });
                    },
                }
            });
            var menu = Ext.create('Ext.menu.Menu', {
                id: menuId,
                width: window.innerWidth,
                style: {
                    borderTopRightRadius: '4px',
                    borderBottomRightRadius: '4px'
                },
                items: [view]
            });
        }
        menu.showAt(pos);
    },

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

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