new Vue({ el: '#app', data: function () { return { // iframeSrc: "../../new-quailty-manager/html/new-quailty-manager.html", loading: false, historyArr:[{url:'../html/home.html',text:'全文病历检索'}], //历史记录 activeIndex:'0' , //当前历史记录选中的下标 leftTabActive:'2-0',//左边菜单中当前高亮下标 isCollapse: false, //导航栏是否隐藏 screenWidth: document.body.clientWidth,//屏幕宽度 } }, computed: { navWidth:function() { //左边菜单的的宽度 return this.isCollapse ? '51px' : '200px' }, titleTip:function() { return this.isCollapse ? '显示导航栏' : '隐藏导航栏' }, }, mounted:function() { if(sessionStorage.lastRouter){ this.setHistory(JSON.parse(sessionStorage.lastRouter)) } this.resize() this.bidnEvent() }, methods: { bidnEvent:function(){ //供子页面调用的事件 (子页面是iframe) var vm =this; GlobalEventBus.$on("setLoading", function(arg) { //控制整个界面加载 if(arg && arg.loading){ vm.loading = true } else{ vm.loading = false } }); GlobalEventBus.$on("setIframeUrl", function(arg) { //新打开窗口并且记录历史记录 vm.setHistory(arg.history) }); GlobalEventBus.$on("setleftTabUrl", function(arg) { //打开左边菜单中的页面 可直接传对应 vm.handleSelect(arg.key) }); }, resize:function() { //监听页面改变大小 const that = this this.isCollapse = this.screenWidth >= 786 ? false : true; window.onresize = function() { return (function(){ window.screenWidth = document.body.clientWidth; that.screenWidth = window.screenWidth; })() } }, handleSelect: function (key) { console.log(key) var vm = this; var activeObj =null; switch (key) { case '1': this.isCollapse = !this.isCollapse; break; case '2-0': activeObj = {url:'../html/home.html',text:'全文病历检索'}; break; case '2-1': window.open('../../bigData/html/medical.html') break; case '2-2': window.open('../../bigData/html/insurance.html') break; case '2-3': window.open('../../bigData/html/home.html') break; case '2-4': activeObj = {url:'../html/tableChange.html',text:'医保控费分析'}; break; } if(!activeObj)return this.leftTabActive=key activeObj.fromLeft=true // key=key.toString() // this.isActive = key.substring(0, 1) // var childrenIndex= key.split('-')[1]-1; // var activeObj = this.tabList[(this.isActive-1)].children[childrenIndex]; vm.setHistory(activeObj) }, deleteHistory:function(index){ this.historyArr.splice(index,1); if(!this.historyArr[this.activeIndex] && this.activeIndex-1>=0){ this.activeIndex-=1 } }, setHistory:function(obj){ var vm = this; var exist = false; var index = null; // if(typeof(obj)=='string'){ //如果左边菜单换成数组的话 现在暂时没空 // vm.tabList.forEach(function(v){ // v.children.forEach(function(value){ // if(typeof(obj)=='string' && obj.indexOf(value.url) != -1){ // var obj1 =newObj(value); // obj1.url=obj; // obj=obj1; // } // }) // }) // } vm.historyArr= vm.historyArr.map(function(v,i){ //检测要跳转的url是否在历史记录中 if(obj.url.indexOf(v.url.split('?')[0]) != -1 ){ switch (obj.url){ //已经存在并且在左边的菜单的话则需要高亮左边菜单 case "../html/home.html":obj.index='2-0';break; case "../html/search.html":obj.index='2-0';break; case "../html/tableChange.html":obj.index='2-4';break; } exist=true; index = i; if(v.url!=obj.url && !obj.fromLeft) v.url=obj.url //如果参数不同则重新赋值 按左边的则不需要比较 } return v }) sessionStorage.lastRouter = JSON.stringify(obj) if(!exist){ //不存在则添加进历史记录 vm.historyArr.push(obj); this.activeIndex =vm.historyArr.length-1 } else{ //存在则直接跳转 this.activeIndex =index } if(obj.index) this.leftTabActive=obj.index //控制左边菜单选中 }, controlRouter:function(key) { switch (key) { case '1': this.closeAllHistory(); break; case '2': this.closeAllHistory(true); break; } }, closeAllHistory:function(is) { //不传参则全部关闭 传参则关闭除了自己之外的 var that =this; if (is && this.activeIndex !=0) { this.historyArr = this.historyArr.filter(function(v,i) { return i == that.activeIndex || i==0 }) this.activeIndex=1 } else{ this.historyArr = this.historyArr.filter(function(v,i) { return i ==0 }) this.activeIndex=0 } }, }, watch: { screenWidth:function(value) { this.isCollapse = value >= 786 ? false : true; }, } })