添加导航菜单

src/common/biConfig.js

@@ -6,7 +6,7 @@
  */
 import $ from 'jquery'
 
-const baseUrl = 'http://192.168.1.8:8080/rsbi-os-4.7/';
+const baseUrl = 'http://localhost:8080/';
 //const baseUrl = "http://112.124.13.251:8081/";
 
 export {

src/components/NavMenu.vue

@@ -2,18 +2,31 @@
       <div class="tabpanel_tab_content">
             <div class="tabpanel_header">
               <ul class="tabpanel_mover">
-                <li id="t_home" class=""><div class="title"><i class="fa fa-home"></i> 首页</div></li>
-                <li id="t_93" class="active" u="../detail/Report.action"><div class="title">数据查询</div><div class="closer fa fa-close"></div></li>
+                  <template v-for="(item) in menus">
+                      <li :id="item.id" :key="item.id" :class="item.active" @click="selectmenu(item.url)">
+                          <div class="title"><i :class="item.icon"></i> {{item.text}}</div>
+                          <div @click.stop="closemenu(item.url)" v-if="item.closeBtn === true" class="closer fa fa-close"></div>
+                     </li>
+                  </template>
+                
             </ul>
             </div>
             <div class="tabpanel_header_ref">
-                 <a class="btn btn-link btn-xs" onclick="gotab('right')" title="右移选项卡">
+                 <a class="btn btn-link btn-xs" @click="gotab('right')" title="右移选项卡">
                         <i class="glyphicon glyphicon-chevron-left"></i>
                     </a>
-                    <a class="btn btn-link btn-xs" id="taboptbtn">
+                    <el-dropdown @command="handleCommand" menu-align='start'>
+                        <span class="avator">
                         <i class="fa fa-exchange"></i>
-                    </a>
-                    <a class="btn btn-link btn-xs" onclick="gotab('left')" title="左移选项卡">
+                        </span>
+                        <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item command="flash">刷新当前页面</el-dropdown-item>
+                        <el-dropdown-item command="fullScreem">全屏当前页面</el-dropdown-item>
+                        <el-dropdown-item command="closeother">关闭其他页面</el-dropdown-item>
+                        <el-dropdown-item command="closeall">关闭全部页面</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                    <a class="btn btn-link btn-xs" @click="gotab('left')" title="左移选项卡">
                         <i class="glyphicon glyphicon-chevron-right"></i>
                     </a>
             </div>
@@ -28,19 +41,125 @@ export default {
   name: "navMenu",
   data() {
     return {
-
+        menus:[{
+            id:"b_home",
+            text:"首页",
+            icon:"fa fa-home",
+            url:"/Welcome",
+            active:"active",
+            closeBtn:false
+        }]
     };
   },
   mounted:function(){
     
   },
   methods: {
-
+      gotab(pos){
+        var o = $(".tabpanel_mover");
+        var left = Number(o.css("marginLeft").replace("px", ""));
+        if(pos =='left'){
+            left = left - 110;
+        }else{
+            left = left + 110;
+        }
+        if(left > 0){
+            left = 0;
+        }
+        var size = $(".tabpanel_mover li").length;
+        if(Math.abs(left/110) < size){
+            o.css("marginLeft", left+"px");
+        }
+      },
+      menuAdd(menu){
+          for(let m of this.menus){
+              m.active = "";
+          }
+          //如果菜单存在，让菜单选中
+          let ls = this.menus.filter(function(m){
+            return m.url === menu.menuUrl
+          });
+          if(ls.length >= 1){ //存在
+            ls[0].active = "active";
+          }else{ //不存在,添加
+            this.menus.push({
+                id:"b_"+menu.menuId,
+                text:menu.menuName,
+                icon:menu.avatar,
+                url:menu.menuUrl,
+                active:"active",
+                closeBtn:true
+            });
+          }
+      },
+      closemenu(url){
+          let ts = this;
+          $(this.menus).each((a, b)=>{
+              if(b.url === url){
+                  if(b.active === 'active'){  //删除的刚好是active
+                    let provNode = ts.menus[a - 1]; //前一个节点
+                    provNode.active = 'active';
+                    ts.$router.push(provNode.url);
+                  }
+                  ts.menus.splice(a, 1);
+                  return false;
+              }
+          });
+      },
+      selectmenu(url){
+          let ts = this;
+          for(let m of this.menus){
+              m.active = "";
+          }
+          $(this.menus).each((a, b)=>{
+              if(b.url === url){
+                  b.active = "active";
+                  ts.$router.push(url);
+                  return false;
+              }
+          });
+      },
+       handleCommand(cmd){
+           if(cmd === "closeother"){
+               this.menus = this.menus.filter(m=>m.id==='b_home' || m.active === 'active');
+               $(this.menus).each((a, b)=>{
+                   if(b.active === 'active'){
+                       this.$router.push(b.url);
+                       return false;
+                   }
+               });
+           }else if(cmd === "closeall"){
+               this.menus.splice(1, this.menus.length);
+               this.menus[0].active = "active";
+               this.$router.push(this.menus[0].url);
+           }else if(cmd === 'flash'){
+               $(this.menus).each((a, b)=>{
+                   if(b.active === 'active'){
+                       //this.$router.push(b.url);
+                       //刷新页面暂时能用。
+                       return false;
+                   }
+               });
+           }
+       }
   },
 };
 </script>
 
 <style lang="css">
+.tabpanel_header {
+    width: calc(100% - 80px);
+    overflow: hidden;
+    display: inline-block;
+}
+.btn-link {
+    color: inherit;
+}
+.tabpanel_header_ref {
+	width: 80px; 
+	float: right;
+	margin-top:5px;
+}
 .tabpanel_tab_content {
     height: 29px;
     background-color: #f9f9f9;
@@ -48,6 +167,7 @@ export default {
     white-space: nowrap;
     position: relative;
     box-shadow: 0 2px 3px 0 rgba(0,0,0,.16), 0 2px 5px 0 rgba(0,0,0,.12);
+    z-index: 100;
 }
 .tabpanel_mover {
 	  margin: 0px;

src/style/common.less

@@ -37,9 +37,13 @@ html,body{
 }
 .wrapper-content {
     padding: 20px;
+    height: calc(100% - 30px);
+    overflow: auto;
 }
 .ibox {
+    /**
     margin-bottom: 20px;
+    **/
     background-color: #fff;
     border: 1px solid #dee5e7;
     /**

src/view/Main.vue

@@ -3,7 +3,7 @@
 		<frame-top></frame-top>
 		<transition name="el-fade-in">
 			<div class="navbar-static-side" v-show="isShowMenu">
-				<el-menu style="min-height: 100%;" router>
+				<el-menu style="min-height: 100%;" router @select="selectMenu">
 					<template v-for="(item) in menus">
 						<el-submenu v-if="item.children&&item.children.length>0" :key="item.menuId" :index=" 'p' + item.menuId">
 							<template slot="title">
@@ -20,7 +20,7 @@
 			</div>
 		</transition>
 		<div class="page-wrapper">
-			<navMenu></navMenu>
+			<navMenu ref="navMenuForm"></navMenu>
 			<keep-alive>
 				<router-view></router-view>
 			</keep-alive>
@@ -59,7 +59,31 @@
 		},
 		computed: {
 		},
-		methods: {				
+		methods: {		
+			selectMenu(index){
+				let m = null;
+				this.menus.forEach(element => { //第一层
+					if(element.children && element.children.length > 0){  
+						$(element.children).each((a,b)=>{  //第二层
+							if(b.children && b.children.length > 0){
+								$(b.children).each((c,d)=>{  //第三层
+									if(d.menuUrl === index){
+										m = d;
+										return false;
+									}
+								});
+							}else if(b.menuUrl === index){
+								m = b;
+								return false;
+							}
+						});
+					}else if(element.menuUrl === index){
+						m = element;
+						return false;
+					}
+				});
+				this.$refs['navMenuForm'].menuAdd(m);
+			}		
 		},
 		watch: {
 		}