导航栏设计

frontend/saas-web/app/view/core/tab/Controller.js

@@ -4,10 +4,13 @@ Ext.define('saas.view.core.tab.Controller', {
 
     init: function() {
         var me = this,
-            tab = me.getView(),
-            tabConfig = tab.tabConfig,
-            viewType = tabConfig.viewtype;
+        tab = me.getView(),
+        tabConfig = tab.tabViewConfig,
+        type = tabConfig.type,
+        viewType = type == 'form' ? tabConfig.formtype : tabConfig.querytype;
 
+        console.log(viewType);
+        
         tab.add({
             xtype: viewType
         });

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

@@ -7,73 +7,39 @@ Ext.define('saas.view.main.MainController', {
 
     alias: 'controller.main',
 
-    onNavigationTreeItemClick: function(tree, info) {
-        var node = info.node;
-
-        if (node && node.get('viewType')) {
-            this.setActiveTab(node.getData());
-        }
-    },
-
-    menuItemClick: function(view, record, item, index, e, eOpts) {
-        var me = this,
-        target = e.target,
-        clsName = target.className;
-        debugger;
-        return;
-        if(clsName == 'item-text') {
-            me.setActiveTab(record);
-        }
-    },
-
-    setActiveTab: function(nodeData) {
+    setActiveTab: function(dataset) {
         var me = this,
-            refs = me.getReferences(),
-            mainTab = refs.mainTabPanel,
-            // existingItem = mainTab.child(type),
-            newView,
-            id = 'maintab-' + nodeData.id,
-            title = nodeData.text;
-            existingItem = mainTab.down('[id=' + id + ']'),
-            lastView = mainTab.getActiveTab();
+        refs = me.getReferences(),
+        mainTab = refs.mainTabPanel,
+        // existingItem = mainTab.child(type),
+        newView,
+        type = dataset.type,
+        title = dataset.text,
+        tabTitle = title + (type == 'form' ? '' : '查询'),
+        id = dataset.id,
+        tabId = 'maintab-' + type + '-' + id,
+        existingItem = mainTab.down('[id=' + tabId + ']'),
+        lastView = mainTab.getActiveTab();
 
         if (!existingItem) {
-            newView = Ext.create('saas.view.core.tab.Panel', {
-                id: id,
-                title: title,
-                tabConfig: nodeData
+            existingItem = Ext.create('saas.view.core.tab.Panel', {
+                id: tabId,
+                title: tabTitle,
+                tabViewConfig: dataset
             });
+            Ext.suspendLayouts();
+            mainTab.setActiveTab(mainTab.add(existingItem));
+            Ext.resumeLayouts(true);
+        }else {
+            mainTab.setActiveTab(existingItem);
         }
-
-        if (!newView || !newView.isWindow) {
-            // !newView means we have an existing view, but if the newView isWindow
-            // we don't add it to the card layout.
-            if (existingItem) {
-                // We don't have a newView, so activate the existing view.
-                if (existingItem !== lastView) {
-                    mainTab.setActiveTab(existingItem);
-                }
-                newView = existingItem;
-            }
-            else {
-                // newView is set (did not exist already), so add it and make it the
-                // activeItem.
-                Ext.suspendLayouts();
-                mainTab.setActiveTab(mainTab.add(newView));
-                Ext.resumeLayouts(true);
-            }
-        }
-
-        if (newView.isFocusable(true)) {
-            newView.focus();
-        }
+        
     },
 
     onToggleNavigationSize: function () {
         var me = this,
         refs = me.getReferences(),
         navigationList = refs.navigationTreeList,
-        wrapContainer = refs.mainContainerWrap,
         navCollapsed = !navigationList.navCollapsed,
         new_width = navCollapsed ? 64 : 160,
         ope = navCollapsed ? 'addCls' : 'removeCls';

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

@@ -3,6 +3,8 @@ Ext.define('saas.view.main.Navigation', {
     xtype: 'main-navigation',
     ui: 'nav',
 
+    reference: 'navigationTreeList',
+
     navCollapsed: false,
     cls: 'x-navpanel',
 
@@ -17,41 +19,27 @@ Ext.define('saas.view.main.Navigation', {
                     items: [{
                         text: '制单',
                         items: [{
-                            id: 'purchaseOrder',
-                            text: '采购单（维护界面）',
-                            viewType:'purchase-purchase-formpanel'
-                        }, {
-                            id: 'purchaseQuery',
-                            text: '采购单查询',
-                            viewType:'purchase-purchase-querypanel'
-                        }, {
-                            id: 'purchaseInOrder',
-                            text: '采购验收单（维护界面）',
-                            viewType:'purchase-purchaseIn-formpanel'
-                        }, {
-                            id: 'purchaseInQuery',
-                            text: '采购验收单查询',
-                            viewType:'purchase-purchaseIn-querypanel'
+                            id: 'purchase',
+                            text: '采购单',
+                            formType:'purchase-purchase-formpanel',
+                            queryType: 'purchase-purchase-querypanel'
                         }, {
-                            id: 'list1',
-                            text: '列表界面1',
-                            viewType: 'purchase-list-gridpanel1'
-                        }, {
-                            id: 'list2',
-                            text: '列表界面2',
-                            viewType: 'purchase-list-gridpanel2'
+                            id: 'purchaseIn',
+                            text: '采购验收单',
+                            formType:'purchase-purchase-formpanel',
+                            queryType: 'purchase-purchaseIn-querypanel'
                         }, {
                             id: 'form1',
                             text: '测试-采购单明细界面',
-                            viewType: 'test-order-formpanel'
+                            formType: 'test-order-formpanel'
                         }, {
                             id: 'myform',
                             text: '测试-明细界面',
-                            viewType: 'test-myform-formpanel'
+                            formType: 'test-myform-formpanel'
                         }, {
                             id: 'myquerytest',
                             text: '测试-采购单查询界面',
-                            viewType: 'test-query-querypanel',
+                            queryType: 'test-query-querypanel',
                         }]
                     }, {
                         text: '报表',
@@ -82,11 +70,12 @@ Ext.define('saas.view.main.Navigation', {
                                 '<ul class="menu-content">',
                                     '<tpl for="items">',
                                     '<li class="menuitem">',
-                                        '<span class="item-text" data-id="{id}" data-text="{text}" data-viewType="{viewType}">',
+                                        '<span class="item-text" data-id="{id}" data-text="{text}" data-type="form" data-formType="{formType}">',
                                             '{text}',
-                                            '<span class="hide"></span>',
                                         '</span>',
-                                        '<i class="item-icon">查询</i>',
+                                        '<tpl if="{queryType}">',
+                                        '<i class="item-icon" data-id="{id}" data-text="{text}" data-type="query" data-queryType="{queryType}">查询</i>',
+                                        '</tpl>',
                                     '</li>',
                                     '</tpl>',
                                 '</ul>',
@@ -119,9 +108,6 @@ Ext.define('saas.view.main.Navigation', {
         me.callParent();
     },
 
-    listeners: {
-    },
-
     toggleShowNavMenu: function(view, record, item, index, e, eOpts) {
         var menuBody = item.getElementsByClassName('x-navitem-menu')[0];
         if(menuBody) {
@@ -139,6 +125,7 @@ Ext.define('saas.view.main.Navigation', {
             // }
             // menuBody.classList[ope]('x-hidden');
 
+            menuBody.style.width = hidden ? 'auto' : '0';
             menuBody.style.display = hidden ? 'block' : 'none';
             // menuBody.animate({ opacity: o,opacity:1},1000);
             
@@ -149,13 +136,19 @@ Ext.define('saas.view.main.Navigation', {
     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;
         
-        if(clsName == 'item-text') {
+        if(clsName == 'item-text' || clsName == 'item-icon') {
             controller.setActiveTab(dataset);
         }
+        // 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;
+        // }
     },
 });

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

@@ -88,7 +88,7 @@
                                     border-bottom-right-radius: 4px;
 
                                     .menu {
-                                        width: 165px;
+                                        width: 200px;
                                         border-right: 1px dashed #ccc;
                                         letter-spacing: 1px;
                                         color: #444;
@@ -104,9 +104,35 @@
                                         .menu-content {
                                             list-style: none;
                                             padding-left: 10px;
+                                            padding-right: 10px;
 
                                             .menuitem {
                                                 margin: 5px 0;
+
+                                                .item-text {
+                                                    cursor: pointer;
+                                                }
+
+                                                .item-icon {
+                                                    cursor: pointer;
+                                                    display: none;
+                                                    float: right;
+                                                    font-style: inherit;
+                                                    background: green;
+                                                    color: white;
+                                                    border-radius: 4px;
+                                                }
+
+                                                &:hover {
+
+                                                    .item-icon {
+                                                        display: block;
+                                                    }
+                                                
+                                                    .tem-text {
+                                                        color: blue;
+                                                    }
+                                                }
                                             }
                                         }
                                     }