From 35a90e467732d7f33cf0ebbaa5b3f20ed67982cb Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期二, 11 三月 2025 19:54:25 +0800 Subject: [PATCH] 最新版本541200007 --- admin/src/components/common/tagsview.vue | 101 ++++++++++++++++++++++++++++++++++---------------- 1 files changed, 68 insertions(+), 33 deletions(-) diff --git a/admin/src/components/common/tagsview.vue b/admin/src/components/common/tagsview.vue index 50d9800..5fbfe86 100644 --- a/admin/src/components/common/tagsview.vue +++ b/admin/src/components/common/tagsview.vue @@ -12,7 +12,7 @@ :key="index" :id="'tags-box-' + index" @contextmenu.prevent="openMenu(item, $event)" - :class="isActive(item.url, item.params,index) ? 'active' : ''" + :class="isActive(item.url, item.index,index) ? 'active' : ''" class="tagsview" @click="tagsmenu(item, index)" > @@ -42,7 +42,7 @@ // 杩欎釜灏辨槸瀵煎叆vuex鐨勬暟鎹紝閰嶅悎涓嬮潰...map鐢� import { mapState, mapMutations } from 'vuex' export default { - data() { + data () { return { // 鍙抽敭鑿滃崟闅愯棌瀵瑰簲甯冨皵鍊� visible: false, @@ -59,15 +59,16 @@ }, watch: { // 鐩戝惉鍙抽敭鑿滃崟鐨勫�兼槸鍚︿负true锛屽鏋滄槸灏卞垱寤哄叏灞�鐩戝惉鐐瑰嚮浜嬩欢锛岃Е鍙慶loseMenu浜嬩欢闅愯棌鑿滃崟锛屽鏋滄槸false灏卞垹闄ょ洃鍚� - visible(value) { + visible (value) { if (value) { document.body.addEventListener('click', this.closeMenu) } else { document.body.removeEventListener('click', this.closeMenu) } }, - $route(to, from) { + $route (to, from) { this.tags.forEach((item, index) => { + // if (item.url === to.path && item.index === to.query.index) { if (item.url === to.path && item.index === to.query.index) { const tagsDiv = document.getElementById('tags-box') if (index) { @@ -77,10 +78,14 @@ } } }) + /* var that =this + this.$nextTick(() => { + setTimeout(function(){ that.computeTableHeight()},1000) + })*/ } - }, - mounted() { + mounted () { + // window.addEventListener('resize', this.computeTableHeight) this.$refs.tags.addEventListener('scroll', e => { if (this.$refs.tags.scrollLeft > 0) { this.leftStatus = true @@ -98,7 +103,7 @@ // 寮曞叆vuex涓璵utation鏂规硶锛屽彲浠ョ洿鎺his.xxx璋冪敤浠� ...mapMutations(['closeTab', 'cleartagsview']), // 鐐瑰嚮鍙夊弶鍒犻櫎鐨勪簨浠� - rightClose() { + rightClose () { this.visible = false if (this.tags.length == 1) { return @@ -106,7 +111,7 @@ const index = this.tags.indexOf(this.selectedTag) this.handleClose(this.selectedTag, index) }, - handleClose(item, index) { + handleClose (item, index) { if (this.tags.length == 1) { return } @@ -129,71 +134,101 @@ } } else { // 閭d箞锛屽鏋滀笂闈㈢殑鏉′欢閮戒笉鎴愮珛锛屾病鏈塴ength=0.涔熷氨鏄浣犺繕鏈夊ソ鍑犱釜鏍囩锛屽苟涓斾綘鍒犻櫎鐨勬槸鏈�鍚庝竴浣嶆爣绛撅紝閭d箞灏卞線宸﹁竟鎸竴浣嶈烦杞矾鐢� - this.$router.push({ path: this.tags[index - 1].url,query:{param: this.tags[index - 1].params} }) + this.$router.push({ path: this.tags[index - 1].url, query: { param: this.tags[index - 1].params } }) } } else { // 濡傛灉浣犵偣鍑讳笉鏄渶鍚庝竴浣嶆爣绛撅紝鐐圭殑鍓嶉潰鐨勶紝閭e氨寰�鍙宠竟璺宠浆 - this.$router.push({ path: this.tags[index].url ,query:{param: this.tags[index].params}}) + this.$router.push({ path: this.tags[index].url, query: { param: this.tags[index].params } }) } }, // 鐐瑰嚮璺宠浆璺敱 - tagsmenu(item, index) { + tagsmenu (item, index) { console.log('tagsmenu') // 鍒ゆ柇锛氬綋鍓嶈矾鐢变笉绛変簬褰撳墠閫変腑椤圭殑url锛屼篃灏变唬琛ㄤ綘鐐瑰嚮鐨勪笉鏄幇鍦ㄩ�変腑鐨勬爣绛撅紝鏄彟涓�涓爣绛惧氨璺宠浆杩囧幓锛屽鏋滀綘鐐瑰嚮鐨勬槸鐜板湪宸茬粡閫変腑鐨勬爣绛惧氨涓嶇敤璺宠浆浜嗭紝鍥犱负浣犲凡缁忓湪杩欎釜璺敱浜嗚繕璺充粈涔堝憿銆� if (this.$route.path !== item.url) { // 鐢╬ath鐨勮烦杞柟娉曟妸褰撳墠椤圭殑url褰撲綔鍦板潃璺宠浆銆� - this.$router.push({ path: item.url ,query:{param: this.tags[index].params}}) + this.$router.push({ path: item.url, query: { index: this.tags[index].index, param: this.tags[index].params, time: (Math.random().toString())} }) + // this.$router.push( item.url) const tagsDiv = document.getElementById('tags-box') if (index) { tagsDiv.scrollTo(index * 110, 0) } } - this.computeTableHeightView(); + // this.computeTableHeight() }, - computeTableHeightView () { state.tags = [] + computeTableHeight () { this.$nextTick(() => { - let height = window.innerHeight - let height6 = (document.getElementsByClassName('common-header') && document.getElementsByClassName('common-header')[0] ? document.getElementsByClassName('common-header')[0].clientHeight:0) - // alert(height) - let height1 = (document.getElementsByClassName('table-search-form') && document.getElementsByClassName('table-search-form')[0])? document.getElementsByClassName('table-search-form')[document.getElementsByClassName('table-search-form').length-1].clientHeight:0 - height1 = height1===0? 40:height1+10 - let height3 = document.getElementsByClassName('main-header') && document.getElementsByClassName('main-header')[0]?document.getElementsByClassName('main-header')[0].clientHeight:0 - let height4 = document.getElementsByClassName('table-pagination') && document.getElementsByClassName('table-pagination')[0]? document.getElementsByClassName('table-pagination')[0].clientHeight:0 - let height2 = document.getElementsByClassName('toolbar') && document.getElementsByClassName('toolbar')[0]?document.getElementsByClassName('toolbar')[0].clientHeight:0 - let height5 = document.getElementsByTagName('thead') && document.getElementsByTagName('thead')[0]? document.getElementsByTagName('thead')[0].clientHeight:0 - // this.tableHeightNew = height-height4-height3-height2-height1-height5-height6-height7-height8-height9 -height10// 鎵撳嵃楂樺害 - console.log('view',height,height6,height3 ,height1,height2,height4,height4) - console.log('view', height-height4-height3-height2-height1-height5 -height6) + const height = window.innerHeight + console.log('toolbar********************************', document.getElementsByClassName('toolbar').length) + // console.log('main_app========================锛�' + height) + const height13 = this.getEleHeghtByClassName('common-header', 0) + const height5 = document.getElementsByTagName('thead') && document.getElementsByTagName('thead')[0] ? document.getElementsByTagName('thead')[0].clientHeight : 0 + if (document.getElementsByClassName('main_app') && document.getElementsByClassName('main_app')[0]) { + // console.log('main_app========================') + // alert(height) + const height3 = this.getEleHeghtByClassName('main-header', 0) + const height4 = this.getEleHeghtByClassName('table-pagination', 0) + const height2 = this.getEleHeghtByClassName('toolbar', 0) + const height6 = this.getEleHeghtByClassName('doumee-filter', 0, 16) + const height7 = this.getEleHeghtByClassName('pt16', 0, 0) + const height9 = this.getEleHeghtByClassName('static_wrap', 0) + const height10 = this.getEleHeghtByClassName('query_btns', 0) + const height11 = this.getEleHeghtByClassName('el-tabs-ele', 0) + const height12 = this.getEleHeghtByClassName('platgroup_tabs', 0) + this.$router.app.$store.commit('setTableHeightNew', height - height13 - height3 - height5 - height6 - height2 - height7 - height4 - height9 - height10 - height11 - height12) + // console.log('gableHeightNew', this.$router.app.$store.state.tableHeightNew) + } else { + // console.log('tableLayout========================') + const height1 = this.getEleHeghtByClassName('table-search-form', 40, 16) + const height3 = this.getEleHeghtByClassName('main-header', 0) + const height4 = this.getEleHeghtByClassName('table-pagination', 0) + const height2 = this.getEleHeghtByClassName('toolbar', 0) + // console.log('defualtlength', document.getElementsByClassName('table-search-form').length) + this.$router.app.$store.commit('setTableHeightNew', height - height4 - height3 - height2 - height1 - height5 - height13) + // console.log('gableHeightNew', this.$router.app.$store.state.tableHeightNew) + } }) }, + getEleHeghtByClassName (name, dv, margin) { + if ((document.getElementsByClassName(name) && document.getElementsByClassName(name)[0])) { + let t = 0 + document.getElementsByClassName(name).forEach(e => { + // console.log(name + '========================' + t + ':' + e.clientHeight) + t++ + }) + return document.getElementsByClassName(name)[document.getElementsByClassName(name).length - 1].clientHeight + (margin || 0) + } + return dv || 0 + }, // 閫氳繃鍒ゆ柇璺敱涓�鑷磋繑鍥炲竷灏斿�兼坊鍔燾lass锛屾坊鍔犻珮浜晥鏋� - isActive(route,params, index) { - const res =(route === this.$route.path && params== this.$route.query.param) + isActive (route, params, index) { + const res = (route === this.$route.path && params == this.$route.query.index) return res }, - scrollToStart() { + scrollToStart () { const tagsDiv = document.getElementById('tags-box') tagsDiv.scrollTo(0, 0) }, - scrollToEnd() { + scrollToEnd () { const tagsDiv = document.getElementById('tags-box') tagsDiv.scrollTo(tagsDiv.scrollWidth, 0) }, // 鍙抽敭浜嬩欢锛屾樉绀哄彸閿彍鍗曪紝骞跺浐瀹氬ソ浣嶇疆銆� - openMenu(tag, e) { + openMenu (tag, e) { this.visible = true this.selectedTag = tag const offsetLeft = this.$el.getBoundingClientRect().left console.log(tag, e) this.left = e.clientX - offsetLeft + 60 // 鍙抽敭鑿滃崟璺濈宸﹁竟鐨勮窛绂� this.top = e.clientY + 20 // 鍙抽敭鑿滃崟璺濈涓婇潰鐨勮窛绂� 杩欎袱涓彲浠ユ洿鏀癸紝鐪嬬湅鑷繁鐨勫彸閿彍鍗曞湪浠�涔堜綅缃紝鑷繁璋� + // this.computeTableHeight() }, // 闅愯棌鍙抽敭鑿滃崟 - closeMenu() { + closeMenu () { this.visible = false }, // 鍙抽敭鑿滃崟鍏抽棴鎵�鏈夐�夐」锛岃Е鍙憊uex涓殑鏂规硶锛屾妸褰撳墠璺敱褰撳弬鏁颁紶杩囧幓鐢ㄤ簬鍒ゆ柇 - cleartags(val) { + cleartags (val) { this.visible = false this.cleartagsview(val) } -- Gitblit v1.9.3