Merge branch 'dev' of ssh://10.10.100.21/source/saas-platform into dev

frontend/saas-web/app/view/core/form/FormPanel.js

@@ -57,7 +57,7 @@ Ext.define('saas.view.core.form.FormPanel', {
                 }, {
                     xtype: 'button',
                     text: '保存',
-                    handler: 'save',
+                    handler: 'onSave',
                     formBind: true
                 }, {
                     xtype: 'button',

frontend/saas-web/app/view/core/form/FormPanelController.js

@@ -59,7 +59,7 @@ Ext.define('saas.view.core.form.FormPanelController', {
         }
     },
 
-    save:function(){
+    onSave: function() {
         var me = this,
         form = this.getView(),
         viewModel = me.getViewModel(),
@@ -76,6 +76,11 @@ Ext.define('saas.view.core.form.FormPanelController', {
         }
         //form里面数据
         var formData = form.getFormData();
+        
+        me.save(formData, detailData);
+    },
+
+    save:function(formData){
         var gridData = formData.detail?formData.detail:[];
         var dirtyGridData = [];
         if(gridData.length>0){
@@ -94,7 +99,7 @@ Ext.define('saas.view.core.form.FormPanelController', {
                     dirtyGridData.push(d);
                 }
             });
-        }  
+        }
         var params = {
             main:formData.main,
             items:dirtyGridData

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

@@ -67,27 +67,6 @@ Ext.define('saas.view.main.Navigation', {
                         '<div class="nav-inner-icon {iconCls}"></div>',
                         '<div class="nav-inner-text">{text}</div>',
                     '</div>',
-                    '<div class="x-navitem-menu" style="display: none;">',
-                        '<div class="nav-menu-body">',
-                            '<tpl for="items">',
-                            '<div class="menu">',
-                                '<h3 class="menu-title">{text}</h3>',
-                                '<ul class="menu-content">',
-                                    '<tpl for="items">',
-                                    '<li class="menuitem">',
-                                        '<span class="item-text" data-id="{id}" data-text="{text}" data-type="form" data-formType="{formType}">',
-                                            '{text}',
-                                        '</span>',
-                                        '<tpl if="{queryType}">',
-                                        '<i class="item-icon" data-id="{id}" data-text="{text}" data-type="query" data-queryType="{queryType}">查询</i>',
-                                        '</tpl>',
-                                    '</li>',
-                                    '</tpl>',
-                                '</ul>',
-                            '</div>',
-                            '</tpl>',
-                        '</div>',
-                    '</div>',
                 '</li>',
                 '</tpl>',
             '</ul>'),
@@ -96,10 +75,9 @@ Ext.define('saas.view.main.Navigation', {
             selectedClass : 'x-navitem-selected',
             singleSelect : true,
             itemSelector : '.x-navitem',
-            menuSeletor: '.menuitem',
             listeners: {
-                itemmouseenter: me.toggleShowNavMenu,
-                itemmouseleave: me.toggleShowNavMenu,
+                itemmouseenter: me.showNavMenu,
+                itemmouseleave: me.hideNavMenu,
                 itemclick: me.menuItemClick,
                 scope: me
             }
@@ -113,47 +91,117 @@ Ext.define('saas.view.main.Navigation', {
         me.callParent();
     },
 
-    toggleShowNavMenu: function(view, record, item, index, e, eOpts) {
-        var menuBody = item.getElementsByClassName('x-navitem-menu')[0];
-        if(menuBody) {
-            var display = menuBody.style.display,
-            hidden = display == 'none';
+    showNavMenu: function(view, record, item, index, e, eOpts) {
+        var me = this,
+        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(hidden) {
-            //     menuBody.animate({ to: { opacity: 1} }, 500, function() {
-            //         console.log('hidden');
-            //     });
-            // }else {
-            //     menuBody.animate({ to: { opacity: 0} }, 500, function() {
-            //         console.log('show');
-            //     });
-            // }
-            // menuBody.classList[ope]('x-hidden');
+        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>',
+                            '<ul class="menu-content">',
+                                '<tpl for="items">',
+                                '<li class="menuitem">',
+                                    '<span class="item-text" data-id="{id}" data-text="{text}" data-type="query" data-queryType="{queryType}">',
+                                        '{text}',
+                                    '</span>',
+                                    '<tpl if="{formType}">',
+                                    '<i class="item-icon" data-id="{id}" data-text="{text}" data-type="form" data-formType="{formType}">新增</i>',
+                                    '</tpl>',
+                                '</li>',
+                                '</tpl>',
+                            '</ul>',
+                        '</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();
 
-            menuBody.style.width = hidden ? 'auto' : '0';
-            menuBody.style.display = hidden ? 'block' : 'none';
-            // menuBody.animate({ opacity: o,opacity:1},1000);
-            
-            // menuBody.animate({dynamic: true, to: {display: newDisplay}});
-        }
-    },
+                        view.el.dom.addEventListener('mouseleave', function() {
+                            menu.hide();
+                        });
 
-    menuItemClick: function(view, record, item, index, e, eOpts) {
-        var me = this,
-        mainView = Ext.getCmp('mainView'),
-        mainViewEl = mainView.getEl().dom,
-        controller = mainView.getController(),
-        target = e.target,
-        clsName = target.className,
-        dataset = target.dataset;
+                        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();
         
-        if(clsName == 'item-text' || clsName == 'item-icon') {
-            controller.setActiveTab(dataset);
+                                    controller.setActiveTab(dataset);
+                                    menu.hide();
+                                });
+                            });
+                        });
+                    },
+                }
+            });
+            var menu = Ext.create('Ext.menu.Menu', {
+                id: menuId,
+                width: window.innerWidth,
+                items: [view]
+            });
         }
-        // var menuBody = mainViewEl.getElementsByClassName('x-navitem-menu');
-        // for(var i = 0; i < menuBody.length; i++) {
-        //     menuBody[i].style.display = 'none';
-        //     menuBody[i].style.width = 0;
-        // }
+        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();
+            }
+        }
+    }
 });

frontend/saas-web/app/view/main/Navigation.scss

@@ -69,80 +69,80 @@
                                     }
                                 }
                             }
-                            .x-navitem-menu {
-                                position: absolute;
-                                z-index: 9999;
-                                margin-left: 100%;
-                                top: 0;
-                                background: white;
-                                overflow: hidden;
-                                // animation: name duration timing-function delay iteration-count direction;
+                        }
+                        .x-navitem-over {
+                            .x-navitem-body {
+                                background-color: #475360;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
 
-                                .nav-menu-body {
-                                    display: flex;
-                                    padding: 5px;
-                                    border: 4px solid #c7c7c7;
-                                    border-color: rgba(0,0,0,.2);
-                                    border-left: 0;
-                                    border-top-right-radius: 4px;
-                                    border-bottom-right-radius: 4px;
+.x-navitem-menu {
+    position: absolute;
+    z-index: 9999;
+    top: 0;
+    background: white;
+    overflow: hidden;
+    // animation: name duration timing-function delay iteration-count direction;
 
-                                    .menu {
-                                        width: 200px;
-                                        border-right: 1px dashed #ccc;
-                                        letter-spacing: 1px;
-                                        color: #444;
+    .nav-menu-body {
+        display: flex;
+        padding: 5px;
+        border: 4px solid #c7c7c7;
+        border-color: rgba(0,0,0,.2);
+        border-left: 0;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
 
-                                        &:last-child {
-                                            border: none;
-                                        }
-                                        
-                                        .menu-title {
-                                            padding-left: 10px;
-                                        }
+        .menu {
+            width: 200px;
+            border-right: 1px dashed #ccc;
+            letter-spacing: 1px;
+            color: #444;
 
-                                        .menu-content {
-                                            list-style: none;
-                                            padding-left: 10px;
-                                            padding-right: 10px;
+            &:last-child {
+                border: none;
+            }
+            
+            .menu-title {
+                padding-left: 10px;
+            }
 
-                                            .menuitem {
-                                                margin: 5px 0;
+            .menu-content {
+                list-style: none;
+                padding-left: 10px;
+                padding-right: 10px;
 
-                                                .item-text {
-                                                    cursor: pointer;
-                                                }
+                .menuitem {
+                    margin: 5px 0;
 
-                                                .item-icon {
-                                                    cursor: pointer;
-                                                    display: none;
-                                                    float: right;
-                                                    font-style: inherit;
-                                                    background: green;
-                                                    color: white;
-                                                    border-radius: 4px;
-                                                }
+                    .item-text {
+                        cursor: pointer;
+                    }
 
-                                                &:hover {
+                    .item-icon {
+                        cursor: pointer;
+                        display: none;
+                        float: right;
+                        font-style: inherit;
+                        background: green;
+                        color: white;
+                        border-radius: 4px;
+                    }
 
-                                                    .item-icon {
-                                                        display: block;
-                                                    }
-                                                
-                                                    .tem-text {
-                                                        color: blue;
-                                                    }
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
+                    &:hover {
+
+                        .item-icon {
+                            display: block;
                         }
-                        .x-navitem-over {
-                            .x-navitem-body {
-                                background-color: #475360;
-                            }
+                    
+                        .tem-text {
+                            color: blue;
                         }
                     }
                 }