导航栏设计

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

@@ -6,7 +6,7 @@ Ext.define('saas.view.core.tab.Controller', {
         var me = this,
             tab = me.getView(),
             tabConfig = tab.tabConfig,
-            viewType = tabConfig.viewType;
+            viewType = tabConfig.viewtype;
 
         tab.add({
             xtype: viewType

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

@@ -1,10 +1,3 @@
-/**
- * This class is the main view for the application. It is specified in app.js as the
- * "mainView" property. That setting automatically applies the "viewport"
- * plugin causing this view to become the body element (i.e., the viewport).
- *
- * TODO - Replace this content of this view to suite the needs of your application.
- */
 Ext.define('saas.view.main.Main', {
     extend: 'Ext.container.Container',
     xtype: 'main',
@@ -12,11 +5,12 @@ Ext.define('saas.view.main.Main', {
     requires: [
         'Ext.list.Tree'
     ],
-
+    
     controller: 'main',
     viewModel: 'main',
-
+    
     cls: 'main-ct',
+    id: 'mainView',
     itemId: 'mainView',
 
     layout: {
@@ -36,7 +30,7 @@ Ext.define('saas.view.main.Main', {
                     reference: 'mainLogo',
                     cls: 'main-logo-wrap',
                     html: '<div class="main-logo"><img src="resources/images/default/logo-default.png">优企云服</div>',
-                    width: 250
+                    width: 160
                 },
                 {
                     margin: '0 0 0 8',
@@ -81,7 +75,7 @@ Ext.define('saas.view.main.Main', {
                 }
             ]
         },
-        {         
+        {
             xtype: 'maincontainerwrap'
         }
     ]

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

@@ -2,43 +2,16 @@ Ext.define('saas.view.main.MainContainerWrap', {
     extend: 'Ext.container.Container',
     xtype: 'maincontainerwrap',
 
-    // requires : [
-    //     'Ext.layout.container.HBox'
-    // ],
-
     id: 'main-view-detail-wrap',
-    reference: 'mainContainerWrap',
     flex: 1,
 
     layout: 'border',
 
-    // layout: {
-    //     type: 'hbox',
-    //     align: 'stretchmax',
-
-    //     // Tell the layout to animate the x/width of the child items.
-    //     animate: true,
-    //     animatePolicy: {
-    //         x: true,
-    //         width: true
-    //     }
-    // },
-
     items: [
         {
-            xtype: 'treelist',
+            xtype: 'main-navigation',
             region: 'west',
-            reference: 'navigationTreeList',
-            itemId: 'navigationTreeList',
-            ui: 'nav',
-            bind: '{navItems}',
-            width: 250,
-            expanderFirst: false,
-            expanderOnly: false,
-            floatLeafItems: true,
-            listeners: {
-                itemClick: 'onNavigationTreeItemClick'
-            }
+            width: 160,
         },
         {
             xtype: 'tabpanel',
@@ -61,25 +34,4 @@ Ext.define('saas.view.main.MainContainerWrap', {
             ]
         }
     ],
-
-    beforeLayout : function() {
-        // We setup some minHeights dynamically to ensure we stretch to fill the height
-        // of the viewport minus the top toolbar
-
-        var me = this,
-            height = Ext.Element.getViewportHeight() - 64,  // offset by topmost toolbar height
-            // We use itemId/getComponent instead of "reference" because the initial
-            // layout occurs too early for the reference to be resolved
-            navTree = me.getComponent('navigationTreeList');
-
-        me.minHeight = height;
-        me.maxHeight = height;
-
-        navTree.setStyle({
-            'min-height': height + 'px',
-            'max-height': height + 'px'
-        });
-
-        me.callParent(arguments);
-    }
 });

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

@@ -15,6 +15,17 @@ Ext.define('saas.view.main.MainController', {
         }
     },
 
+    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) {
         var me = this,
             refs = me.getReferences(),
@@ -60,57 +71,19 @@ Ext.define('saas.view.main.MainController', {
 
     onToggleNavigationSize: function () {
         var me = this,
-            refs = me.getReferences(),
-            navigationList = refs.navigationTreeList,
-            wrapContainer = refs.mainContainerWrap,
-            collapsing = !navigationList.getMicro(),
-            new_width = collapsing ? 64 : 250;
-
-        if (Ext.isIE9m || !Ext.os.is.Desktop) {
-            Ext.suspendLayouts();
-
-            refs.mainLogo.setWidth(new_width);
-
-            navigationList.setWidth(new_width);
-            navigationList.setMicro(collapsing);
-
-            Ext.resumeLayouts(); // do not flush the layout here...
-
-            // No animation for IE9 or lower...
-            wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null;
-            wrapContainer.updateLayout();  // ... since this will flush them
-        }
-        else {
-            if (!collapsing) {
-                // If we are leaving micro mode (expanding), we do that first so that the
-                // text of the items in the navlist will be revealed by the animation.
-                navigationList.setMicro(false);
-            }
-            navigationList.canMeasure = false;
-
-            // Start this layout first since it does not require a layout
-            refs.mainLogo.animate({dynamic: true, to: {width: new_width}});
-
-            // Directly adjust the width config and then run the main wrap container layout
-            // as the root layout (it and its chidren). This will cause the adjusted size to
-            // be flushed to the element and animate to that new size.
-            navigationList.width = new_width;
-            wrapContainer.updateLayout({isRoot: true});
-            navigationList.el.addCls('nav-tree-animating');
-
-            // We need to switch to micro mode on the navlist *after* the animation (this
-            // allows the "sweep" to leave the item text in place until it is no longer
-            // visible.
-            if (collapsing) {
-                navigationList.on({
-                    afterlayoutanimation: function () {
-                        navigationList.setMicro(true);
-                        navigationList.el.removeCls('nav-tree-animating');
-                        navigationList.canMeasure = true;
-                    },
-                    single: true
-                });
-            }
-        }
-    },
+        refs = me.getReferences(),
+        navigationList = refs.navigationTreeList,
+        wrapContainer = refs.mainContainerWrap,
+        navCollapsed = !navigationList.navCollapsed,
+        new_width = navCollapsed ? 64 : 160,
+        ope = navCollapsed ? 'addCls' : 'removeCls';
+        
+        refs.mainLogo.animate({dynamic: true, to: {width: new_width}});
+        navigationList.body.animate({dynamic: true, to: {width: new_width}});
+        navigationList.animate({dynamic: true, to: {width: new_width}});
+
+        navigationList.el[ope]('nav-collapsed');
+
+        navigationList.navCollapsed = navCollapsed;
+    }
 });

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

@@ -0,0 +1,161 @@
+Ext.define('saas.view.main.Navigation', {
+    extend: 'Ext.panel.Panel',
+    xtype: 'main-navigation',
+    ui: 'nav',
+
+    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: '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: 'list1',
+                            text: '列表界面1',
+                            viewType: 'purchase-list-gridpanel1'
+                        }, {
+                            id: 'list2',
+                            text: '列表界面2',
+                            viewType: 'purchase-list-gridpanel2'
+                        }, {
+                            id: 'form1',
+                            text: '测试-采购单明细界面',
+                            viewType: 'test-order-formpanel'
+                        }, {
+                            id: 'myform',
+                            text: '测试-明细界面',
+                            viewType: 'test-myform-formpanel'
+                        }, {
+                            id: 'myquerytest',
+                            text: '测试-采购单查询界面',
+                            viewType: 'test-query-querypanel',
+                        }]
+                    }, {
+                        text: '报表',
+                        items: [{
+                            text: '采购明细表'
+                        }, {
+                            text: '采购付款一览表'
+                        }]
+                    }]
+                }, {
+                    text: '销售',
+                    iconCls: 'x-fa fa-shopping-cart',
+                }],
+            }),
+            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>',
+                    '<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-viewType="{viewType}">',
+                                            '{text}',
+                                            '<span class="hide"></span>',
+                                        '</span>',
+                                        '<i class="item-icon">查询</i>',
+                                    '</li>',
+                                    '</tpl>',
+                                '</ul>',
+                            '</div>',
+                            '</tpl>',
+                        '</div>',
+                    '</div>',
+                '</li>',
+                '</tpl>',
+            '</ul>'),
+            trackOver: true,
+            overItemCls : 'x-navitem-over',
+            selectedClass : 'x-navitem-selected',
+            singleSelect : true,
+            itemSelector : '.x-navitem',
+            menuSeletor: '.menuitem',
+            listeners: {
+                itemmouseenter: me.toggleShowNavMenu,
+                itemmouseleave: me.toggleShowNavMenu,
+                itemclick: me.menuItemClick,
+                scope: me
+            }
+        });
+
+        Ext.apply(me, {
+            items: [view]
+        });
+
+        me.view = view;
+        me.callParent();
+    },
+
+    listeners: {
+    },
+
+    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';
+
+            // 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');
+
+            menuBody.style.display = hidden ? 'block' : 'none';
+            // menuBody.animate({ opacity: o,opacity:1},1000);
+            
+            // menuBody.animate({dynamic: true, to: {display: newDisplay}});
+        }
+    },
+
+    menuItemClick: function(view, record, item, index, e, eOpts) {
+        var me = this,
+        mainView = Ext.getCmp('mainView'),
+        controller = mainView.getController(),
+        target = e.target,
+        clsName = target.className,
+        dataset = target.dataset;
+        
+        if(clsName == 'item-text') {
+            controller.setActiveTab(dataset);
+        }
+    },
+});

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

@@ -0,0 +1,126 @@
+.x-navpanel {
+    overflow: visible;
+
+    .x-panel-bodyWrap {
+        overflow: visible;
+        
+        .x-panel-body-nav {
+            color: #404040;
+            font-size: 13px;
+            line-height: 17px;
+            font-weight: 400;
+            font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
+            background: #f6f6f6;
+            overflow: visible;
+    
+            .x-autocontainer-outerCt {
+                background-color: #3C4A57;
+    
+                .x-autocontainer-innerCt {
+    
+                    .x-navlist {
+                        position: relative;
+                        list-style: none;
+                        padding: 0;
+                        margin: 0;
+                        width: 100%;
+    
+                        .x-navitem {
+                            cursor: default;
+                            position: relative;
+                            list-style: none;
+                            padding: 0;
+                            margin: 0;
+                            outline: none !important;
+                            
+                            .x-navitem-body {
+                                background-color: #3C4A57;
+    
+                                .nav-inner-wrap {
+                                    position: relative;
+                                    position: relative;
+                                    overflow: hidden;
+                                    list-style: none;
+                                    max-height: 64px;
+                                    padding: 0 10px;
+    
+                                    .nav-inner-icon {
+                                        color: #adb3b8;
+                                        font-size: 18px;
+                                        text-align: center;
+                                        background-repeat: no-repeat;
+                                        background-position: 0 center;
+                                        margin-left: 10px;
+                                        display: inline;
+    
+                                        &:before {
+                                            line-height: 64px;
+                                        }
+                                    }
+    
+                                    .nav-inner-text {
+                                        cursor: default;
+                                        color: #adb3b8;
+                                        margin-left: 20px;
+                                        margin-right: 24px;
+                                        font-size: 14px;
+                                        line-height: 64px;
+                                        display: inline;
+                                    }
+                                }
+                            }
+                            .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;
+
+                                .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;
+
+                                    .menu {
+                                        width: 165px;
+                                        border-right: 1px dashed #ccc;
+                                        letter-spacing: 1px;
+                                        color: #444;
+
+                                        &:last-child {
+                                            border: none;
+                                        }
+                                        
+                                        .menu-title {
+                                            padding-left: 10px;
+                                        }
+
+                                        .menu-content {
+                                            list-style: none;
+                                            padding-left: 10px;
+
+                                            .menuitem {
+                                                margin: 5px 0;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        .x-navitem-over {
+                            .x-navitem-body {
+                                background-color: #475360;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

frontend/saas-web/app/view/purchase/purchaseIn/FormPanel.js

@@ -13,7 +13,7 @@ Ext.define('saas.view.purchase.purchaseIn.FormPanel', {
     _detnoColumn:  'pd_pdno',
     _dataModelUrl:'http://192.168.253.58:8800/purchase/read/',
     _saveUrl:'http://192.168.253.58:8800/purchase/save',
-    _auditUrl:'http://192.168.253.58:8800/purchase/audit',
+    // _auditUrl:'http://192.168.253.58:8800/purchase/audit',
     _deleteUrl:'http://192.168.253.58:8800/purchase/delete/',
     _deleteDetailUrl:'http://192.168.253.58:8800/purchase/deleteItem/',
     initId:0,