| | |
| | | <script> |
| | | import {mapState} from "vuex"; |
| | | |
| | | export default { |
| | | name: 'BaseComputeHeight', |
| | | data () { |
| | | return { |
| | | tableHeightNew: 300 |
| | | // tableHeightNew: 300 |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapState(['tableHeightNew']) |
| | | }, |
| | | created() { |
| | | this.computeTableHeight() |
| | | // this.computeTableHeight() |
| | | }, |
| | | mounted () { |
| | | this.computeTableHeight() |
| | | window.addEventListener('resize', this.computeTableHeight) |
| | | // this.computeTableHeight() |
| | | // window.addEventListener('resize', this.computeTableHeight) |
| | | }, |
| | | activated() { |
| | | this.computeTableHeight() |
| | | // this.computeTableHeight() |
| | | }, |
| | | methods: { |
| | | computeTableHeight () { |
| | |
| | | <script> |
| | | import router from "@/router"; |
| | | import {mapState} from "vuex"; |
| | | |
| | | export default { |
| | | name: 'BaseComputeHeight', |
| | | name: 'BaseComputeHeightDefault', |
| | | data () { |
| | | return { |
| | | tableHeightNew: 300 |
| | | // tableHeightNew: 300 |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapState(['tableHeightNew']) |
| | | }, |
| | | created() { |
| | | this.computeTableHeight() |
| | | // console.log('created' ,this.tableHeightNew) |
| | | // this.computeTableHeight() |
| | | }, |
| | | mounted () { |
| | | this.computeTableHeight() |
| | | window.addEventListener('resize', this.computeTableHeight) |
| | | // this.computeTableHeight() |
| | | // console.log('mounted' ,this.tableHeightNew) |
| | | // window.addEventListener('resize', this.computeTableHeight) |
| | | }, |
| | | activated() { |
| | | this.computeTableHeight() |
| | | // console.log('activated' ,this.tableHeightNew) |
| | | // this.computeTableHeight() |
| | | }, |
| | | methods: { |
| | | computeTableHeight () { |
| | |
| | | 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// 打印高度 |
| | | this.tableHeightNew = height-height4-height3-height2-height1-height5 -height6 |
| | | // this.tableHeightNew = height-height4-height3-height2-height1-height5 -height6 |
| | | console.log('defualt',height,height6,height3 ,height1,height2,height4,height4) |
| | | console.log('defualt',this.tableHeightNew) |
| | | console.log('defualtlength',document.getElementsByClassName('table-search-form').length) |
| | | router.app.$store.commit('setTableHeightNew', height-height4-height3-height2-height1-height5 -height6) |
| | | }) |
| | | } |
| | | } |
| | |
| | | // 默认展开的菜单index |
| | | defaultOpeneds() { |
| | | // return this.menuData.list.map(menu => menu.index) |
| | | |
| | | return [this.menuData.list[0].index] |
| | | } |
| | | }, |
| | | watch: { |
| | | /* $route (to, from) { |
| | | var that =this |
| | | this.$nextTick(() => { |
| | | setTimeout(function(){ that.computeTableHeight()},1000) |
| | | }) |
| | | }*/ |
| | | }, |
| | | methods: { |
| | | // 处理菜单选中 |
| | |
| | | return |
| | | } |
| | | if (menuConfig.params != null && menuConfig.params != '') { |
| | | this.$router.push({ path: menuConfig.url, query: { index: menuConfig.index, param: menuConfig.params } }) |
| | | // this.$router.push({ path: menuConfig.url, query: { index: menuConfig.index, param: menuConfig.params } }) |
| | | } else { |
| | | this.$router.push(menuConfig.url) |
| | | // this.$router.push(menuConfig.url) |
| | | } |
| | | |
| | | this.$router.push({ path: menuConfig.url, query: { index: menuConfig.index, param: menuConfig.params, time: (Math.random().toString()) } }) |
| | | this.$store.commit('pushtags', menuConfig) |
| | | }, |
| | | // 获取菜单配置 |
| | |
| | | } |
| | | } |
| | | return null |
| | | }, |
| | | computeTableHeight () { |
| | | this.$nextTick(() => { |
| | | const height = window.innerHeight |
| | | 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 |
| | | } |
| | | } |
| | | } |
| | |
| | | :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)" |
| | | > |
| | |
| | | }, |
| | | $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) { |
| | |
| | | } |
| | | } |
| | | }) |
| | | /* var that =this |
| | | this.$nextTick(() => { |
| | | setTimeout(function(){ that.computeTableHeight()},1000) |
| | | })*/ |
| | | } |
| | | |
| | | }, |
| | | mounted() { |
| | | // window.addEventListener('resize', this.computeTableHeight) |
| | | this.$refs.tags.addEventListener('scroll', e => { |
| | | if (this.$refs.tags.scrollLeft > 0) { |
| | | this.leftStatus = true |
| | |
| | | // 判断:当前路由不等于当前选中项的url,也就代表你点击的不是现在选中的标签,是另一个标签就跳转过去,如果你点击的是现在已经选中的标签就不用跳转了,因为你已经在这个路由了还跳什么呢。 |
| | | if (this.$route.path !== item.url) { |
| | | // 用path的跳转方法把当前项的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) |
| | | 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) |
| | | 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 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 |
| | | }, |
| | | // 通过判断路由一致返回布尔值添加class,添加高亮效果 |
| | | isActive(route,params, index) { |
| | | const res =(route === this.$route.path && params== this.$route.query.param) |
| | | const res = (route === this.$route.path && params == this.$route.query.index) |
| | | return res |
| | | }, |
| | | scrollToStart() { |
| | |
| | | console.log(tag, e) |
| | | this.left = e.clientX - offsetLeft + 60 // 右键菜单距离左边的距离 |
| | | this.top = e.clientY + 20 // 右键菜单距离上面的距离 这两个可以更改,看看自己的右键菜单在什么位置,自己调 |
| | | // this.computeTableHeight() |
| | | }, |
| | | // 隐藏右键菜单 |
| | | closeMenu() { |
| | |
| | | </header> |
| | | <main ref="containerS"> |
| | | <transition name="fade"> |
| | | <!-- <keep-alive>--> |
| | | <keep-alive :include="cachedViews"> |
| | | <router-view></router-view> |
| | | <!-- </keep-alive>--> |
| | | </keep-alive> |
| | | </transition> |
| | | </main> |
| | | </el-main> |
| | | </el-container> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | components: { AppHeader: Header, Menu, CommonHeader }, |
| | | data() { |
| | | return { |
| | | cachedViews:['abccdd'], |
| | | isFinishData: false, |
| | | orgBackground: '' |
| | | } |
| | |
| | | mounted() { |
| | | |
| | | }, |
| | | |
| | | methods: { |
| | | |
| | | }, |
| | | } |
| | | </script> |
| | |
| | | const state = { |
| | | // 登录用户信息 |
| | | userInfo: null, |
| | | tableHeightNew: 300, |
| | | primaryColor: '#2080f7', |
| | | // 首页 |
| | | homePage: null, |
| | |
| | | ...data |
| | | } |
| | | }, |
| | | |
| | | setTableHeightNew: (state, data) => { |
| | | state.tableHeightNew = data |
| | | }, |
| | | clearUserInfo: (state) => { |
| | | state.userInfo = null |
| | | }, |
| | |
| | | if (result === -1) { |
| | | state.tags.push({ ...val, keepAlive: false }) |
| | | } else { |
| | | state.tags[result] = { ...val, keepAlive: true } |
| | | state.tags[result] = { ...val, keepAlive: false } |
| | | } |
| | | // result === -1 ? state.tags.push(val) : (state.tags[result]==val) |
| | | }, |
| | |
| | | this.getPositionList() |
| | | }, |
| | | mounted() { |
| | | this.$nextTick(() => { |
| | | this.tableHeight = document.body.scrollHeight - this.$refs.QueryFormRef.offsetHeight - 276 |
| | | }) |
| | | // this.$nextTick(() => { |
| | | // this.tableHeight = document.body.scrollHeight - this.$refs.QueryFormRef.offsetHeight - 276 |
| | | // }) |
| | | }, |
| | | methods: { |
| | | startEmpowerBatch() { |
| | |
| | | <el-form-item label="" prop="keyword"> |
| | | <el-input v-model="searchForm.keyword" placeholder="请输入姓名/手机号/工号" @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="" prop="positionId"> |
| | | <el-select v-model="searchForm.positionId" clearable filterable placeholder="岗位"> |
| | | <el-option v-for="item in positionList" :key="item.id" :label="item.name" :value="item.id"> |
| | |
| | | this.getPositionList() |
| | | }, |
| | | mounted() { |
| | | this.$nextTick(() => { |
| | | /* this.$nextTick(() => { |
| | | this.tableHeight = document.body.scrollHeight - this.$refs.QueryFormRef.offsetHeight - 276 |
| | | }) |
| | | })*/ |
| | | }, |
| | | methods: { |
| | | startEmpowerBatch() { |