导航栏屏幕自适应调整

src/HManagement/department/staff/list/modules/add.vue

@@ -253,7 +253,7 @@ export default {
         this.$store.commit('setLoading',false)
         if (res.code === 0)  return this.$notify({
             title: '失败',
-            message: res.data,
+            message: res.msg,
             type: 'error'
           });
 

src/HManagement/department/staff/list/modules/edit.vue

@@ -74,7 +74,7 @@
               <el-input v-model="form.officetelephone" placeholder="输入办公电话" autocomplete="off"></el-input>
             </el-form-item>
           </el-col>
-          
+
           <el-col class="mb-30" :span="12">
             <el-form-item label="职位:">
               <el-input v-model="form.position" placeholder="输入职位" autocomplete="off"></el-input>
@@ -212,7 +212,7 @@ export default {
           depno:node['depno'],
           children: []
         }
-          
+
         if (node.subdep && node.subdep.length > 0) {
           // 如果存在子节点
           for (var index = 0; index < node.subdep.length; index++) {
@@ -251,7 +251,7 @@ export default {
         })
         if (res.code === 0)  return this.$notify({
             title: '失败',
-            message: res.data,
+            message: res.msg,
             type: 'error'
           });
 
@@ -291,4 +291,4 @@ export default {
 .mb-30{
   margin-bottom:12px
 }
-</style>
+</style>

src/components/newLayout/index.vue

@@ -5,8 +5,9 @@
       <div style="flex:100" class="body__panel">
         <headeTemp></headeTemp>
         <div>
-          <menuTemp class="sticky normal-margin" :style="marginTrue ? 'margin-bottom:70px !important' : 'margin-bottom:16px'" ref="menu"></menuTemp>
-          <div class="radius">
+<!--          <menuTemp class="sticky normal-margin" :style="marginTrue ? 'margin-bottom:70px !important' : 'margin-bottom:16px'" ref="menu" style="background: red"></menuTemp>-->
+          <menuTemp class="sticky normal-margin"  ref="menu" ></menuTemp>
+          <div class="radius" ref="divContent" :style="{'marginTop':divTop,'height':divHeight}">
             <keep-alive :include="pageCache">
               <router-view></router-view>
             </keep-alive>
@@ -34,7 +35,8 @@ export default {
     asideTemp,
     menuTemp,
     navTemp,
-    socketMessage
+    socketMessage,
+
   },
   computed: {
     ...mapGetters({
@@ -44,7 +46,9 @@ export default {
   data () {
     return {
       timer:null,
-      marginTrue:false
+      marginTrue:false,
+      divHeight:'',
+      divTop:''
     }
   },
   methods:{
@@ -56,23 +60,41 @@ export default {
         clearTimeout(this.timer)
       }
       this.timer = setTimeout(() => {
-        if (this.$refs.menu.$el.clientWidth < 1206 && Array.from(this.$refs.menu.$el.getElementsByTagName('li')).filter(item => item.className.indexOf('el-submenu') != -1).length > 8) {
+        console.log(this.$refs.menu.$refs.menuList.$el.clientHeight,'高度')
+        console.log(this.$refs.menu.$refs.menuList.$el.clientHeight / 60)
+        let size = this.$refs.menu.$refs.menuList.$el.clientHeight / 60 -1
+        if (this.$refs.menu.$refs.menuList.$el.clientHeight === 120){
+          this.divTop =(this.$refs.menu.$refs.menuList.$el.clientHeight - (45 * size))  + 'px'
+        }else {
+          this.divTop = 0 + 'px'
+        }
+
+       /* this.divHeight = (this.$refs.divContent.clientHeight - this.$refs.menu.$refs.menuList.$el.clientHeight + 10) + 'px'*/
+        console.log(this.divTop,this.divHeight)
+       /* if (this.$refs.menu.$el.clientWidth < 1206 && Array.from(this.$refs.menu.$el.getElementsByTagName('li')).filter(item => item.className.indexOf('el-submenu') != -1).length > 8) {
           this.marginTrue = true
         } else {
           this.marginTrue = false
-        }
+        }*/
       },200)
     }
   },
+  mounted() {
+    this.debouned()
+   /* console.log('长度')
+    console.log(this.$refs.menu.$refs.menuList.$el.clientHeight,'高度')
+    console.log(this.$refs.menu.$refs.menuList.$el.clientHeight % 60)
+    if (this.$refs.menu.$refs.menuList.$el.clientHeight === 120){
+      this.divTop =(this.$refs.menu.$refs.menuList.$el.clientHeight - 50)  + 'px'
+    }else {
+      this.divTop = 0 + 'px'
+    }*/
+  },
   created() {
-    window.addEventListener('resize',this.debouned)
 
+    window.addEventListener('resize',this.debouned)
     this.$nextTick(() => {
-      if (this.$refs.menu.$el.clientWidth < 1206) {
-        this.marginTrue = true
-      } else {
-        this.marginTrue = false
-      }
+
     })
   },
 }

src/components/newLayout/modules/menu.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="menu_panel">
+  <div class="menu_panel" >
     <div  v-if="show">
-      <el-menu v-if="show"  :default-active="activeIndex" active-text-color="#3874f6" text-color="#333" class="el-menu-demo shadow" mode="horizontal" @select="handleSelect">
-        <el-submenu v-for="(mod,index) in sys_modules" :key="index" :index="String(index)">
+      <el-menu v-if="show"  :default-active="activeIndex" active-text-color="#3874f6" text-color="#333" class="el-menu-demo shadow" mode="horizontal" @select="handleSelect" ref="menuList" >
+        <el-submenu v-for="(mod,index) in sys_modules" :key="index" :index="String(index)" >
           <template slot="title"><b>{{mod.systemmodulename}}</b></template>
           <el-menu-item :index="app.path" v-for="(app) in mod.apps" :key="app.index" @click="setActiveModules(mod,app)">{{app.meta.title}}</el-menu-item>
         </el-submenu>
@@ -67,7 +67,7 @@ export default {
       setTimeout(() => {
         this.show = true
         this.activeIndex = val.path
-      }, 0);   
+      }, 0);
     }
   }
 }
@@ -94,4 +94,4 @@ export default {
   background: #fff;
   border-radius: 10px;
 }
-</style>
+</style>