flx：修改企业后台 menu太多会掉入第二行

src/views/companyAdmin/layout.vue

@@ -4,24 +4,47 @@
       <div class="title_l flex">
         <!-- <img v-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="icon" />
         <span>{{$t('message.companyDiagram.pageTitle')}}</span> -->
-        <img v-if="systemInfo.platformLogo" :src="systemInfo.platformLogo" class="logo" height="25" />
+        <img
-        <img v-else-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="logo" height="25" />
+          v-if="systemInfo.platformLogo"
-        <span v-if="company != 'nanchang'" style="cursor: pointer" @click="back">{{systemInfo.platformName}} </span>
+          :src="systemInfo.platformLogo"
+          class="logo"
+          height="25"
+        />
+        <img
+          v-else-if="LOGO_white"
+          :src="'./img/logo/' + LOGO_white + '.png'"
+          class="logo"
+          height="25"
+        />
+        <span v-if="company != 'nanchang'" style="cursor: pointer" @click="back"
+          >{{ systemInfo.platformName }}
+        </span>
         <span v-if="company != 'nanchang'"> - </span>
-        <span v-if="company != 'nanchang'">{{$t('message.companyDiagram.pageTitle')}}</span>
+        <span v-if="company != 'nanchang'">{{
+          $t("message.companyDiagram.pageTitle")
+        }}</span>
         <!-- 南昌地铁头部样式 -->
-        <span v-if="company == 'nanchang'" style="cursor: pointer" @click="back">{{$t('message.companyDiagram.pageTitle')}}</span>
+        <span
+          v-if="company == 'nanchang'"
+          style="cursor: pointer"
+          @click="back"
+          >{{ $t("message.companyDiagram.pageTitle") }}</span
+        >
       </div>
       <!-- <div class="title_near flex" v-if="![1,2].includes($store.state.userInfo.accountType)">
         <userChange></userChange>
       </div> -->
-      <div class="title_near-tow flex" v-if="![11,1,2].includes($store.state.userInfo.accountType) && workSpaceShow">
+      <div
+        class="title_near-tow flex"
+        v-if="
+          ![11, 1, 2].includes($store.state.userInfo.accountType) &&
+          workSpaceShow
+        "
+      >
         <div class="divider-line"></div>
         <centerChange></centerChange>
       </div>
-      <div
+      <div class="title_r flex">
-        class="title_r flex"
-      >
         <account></account>
       </div>
     </div>
@@ -34,24 +57,22 @@
         active-text-color="#5181F6"
         router
       >
+        <div class="wrapper" ref="wrapper">
+          <div class="cont" ref="cont">
             <div
               v-for="(item, index) in menuList"
               :key="index"
               class="menuInnerBox"
             >
-          <el-menu-item class="firstLevelMenu"
+              <el-menu-item
+                class="firstLevelMenu"
                 v-if="!hasSubMenu(item.menuList)"
                 :index="item.modulePath"
               >
-            {{ item.moduleName}}
+                {{ item.moduleName }}
               </el-menu-item>
-          <el-submenu
+              <el-submenu :index="item.modulePath" v-else>
-            :index="item.modulePath"
+                <template slot="title">{{ item.moduleName }}</template>
-            v-else
-          >
-            <template slot="title">{{
-              item.moduleName
-            }}</template>
                 <el-menu-item
                   :index="data.path"
                   v-for="(data, i) in item.menuList"
@@ -60,6 +81,8 @@
                 >
               </el-submenu>
             </div>
+          </div>
+        </div>
         <!-- <el-menu-item :index="item.modulePath" v-for="(item,index) in menuList" :key="index">{{item.moduleName}}</el-menu-item> -->
       </el-menu>
     </div>
@@ -74,24 +97,19 @@
 import account from "@/components/account.vue";
 import userChange from "@/components/userChange.vue";
 import centerChange from "@/components/centerChange.vue";
-import {
+import BScroll from "better-scroll";
-  getNewUserAllModulePageApi,
+import { getNewUserAllModulePageApi } from "@/assets/js/api/jxjadmin.js";
-} from "@/assets/js/api/jxjadmin.js";
 export default {
   data() {
     return {
-      LOGO_white:LOGO_white,
+      LOGO_white: LOGO_white,
-      currentUrl:'',
+      currentUrl: "",
-      menuList:[
+      menuList: [
         //  { name: this.$t('message.companyDiagram.menuName1'), url: "/companyAdmin/companyDiagram" },
         // { name: '系统设置', url: "/companyAdmin/systemSetup/enterpriseInfo" },
         // { name: '文档管理', url: "/companyAdmin/docManage" },
         // { name: '质量检查模板设置', url: "/companyAdmin/basicSetup/checkItem" },
-
-
-
         //  { name: '权限管理', url: "/companyAdmin/companyDiagram" },
-       
         // { name: '基础设置', url: "/companyAdmin/basicSetup/checkItem" },
         // { name: '企业发文', url: "/companyAdmin/firmNotice/notice" },
         // { name: '系统设置', url: "/companyAdmin/systemSetup/index" },
@@ -99,35 +117,42 @@ export default {
         // { name: '工程进度', url: "/companyAdmin/progressOfWorks/index" },
         // { name: '学习管理', url: "/companyAdmin/studyManage/courseList" },
       ],
-        systemInfo:{
+      systemInfo: {
-            "loginBackgroundImage": "",
+        loginBackgroundImage: "",
-            "loginLogo": "",
+        loginLogo: "",
-            "platformLogo": "",
+        platformLogo: "",
-            "platformName": "智慧工地云平台"
+        platformName: "智慧工地云平台",
       },
-      workSpaceShow: false
+      workSpaceShow: false,
     };
   },
-  components:{
+  components: {
     account,
     userChange,
-    centerChange
+    centerChange,
   },
   created() {
     this.company = COMPANY;
-    console.log(COMPANY)
+    console.log(COMPANY);
-    if(this.$store.state.projectSn){
+    if (this.$store.state.projectSn) {
       this.getModuleList();
     }
   },
-  mounted(){
+  mounted() {
-    this.getAllModule()
+    this.getAllModule();
-    if(localStorage.getItem('systemInfo')){
+    if (localStorage.getItem("systemInfo")) {
-      this.systemInfo=JSON.parse(localStorage.getItem('systemInfo'))
+      this.systemInfo = JSON.parse(localStorage.getItem("systemInfo"));
     }
-    document.title='企业后台'
+    document.title = "企业后台";
-    console.log('mounted',this.$route.path)
+    console.log("mounted", this.$route.path);
-    
+    this.$nextTick(() => {
+      let timer = setTimeout(() => {
+        if (timer) {
+          clearTimeout(timer);
+          this.verScroll();
+        }
+      }, 0);
+    });
   },
   methods: {
     // 查询全部模块(拿到工作流的模块菜单)
@@ -161,11 +186,11 @@ export default {
       // console.log("onoff", onoff);
       return onoff;
     },
-    getAllModule(){
+    getAllModule() {
-            var half = this.$store.state.userInfo.menuAuthority.moduleList
+      var half = this.$store.state.userInfo.menuAuthority.moduleList;
-            half.forEach(element => {
+      half.forEach((element) => {
-                if(element.moduleType==3){
+        if (element.moduleType == 3) {
-                    this.menuList.push(element)
+          this.menuList.push(element);
         }
       });
       //   getAllModuleApi({moduleType:4}).then(res => {
@@ -189,16 +214,49 @@ export default {
       // this.$store.dispatch('currentUrl',url)
     },
     back() {
-      this.$router.push("/firm/projectManage")
+      this.$router.push("/firm/projectManage");
+    },
+    verScroll() {
+      // console.log(this.$route.path)
+      if (
+        this.$route.path.indexOf("/firm/") != -1 ||
+        this.$route.path.indexOf("/page") != -1
+      ) {
+        this.$refs.cont.style.width = "100%";
+        return;
+      } else {
+        // let width = this.$store.state.menuList.length * 150// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
+        // this.$refs.cont.style.width = width + 'px'
+        this.$refs.cont.style.width = "max-content";
+        this.$nextTick(() => {
+          if (!this.scroll) {
+            this.scroll = new BScroll(this.$refs.wrapper, {
+              startX: 0,
+              click: true,
+              mouseWheel: true,
+              scrollX: true,
+              scrollY: false,
+              eventPassthrough: "vertical",
+            });
+          } else {
+            console.log(this.scroll.refresh());
+            this.scroll.refresh(); //如果dom结构发生改变调用该方法
           }
+          console.log(this.scroll);
+        });
+      }
+      this.reload;
+    },
   },
 };
 </script>
 <style lang="less" scoped>
 .el-menu.el-menu--horizontal {
   box-sizing: border-box;
-  padding: 0 162px 4px;
+  // padding: 0 162px 4px;
+  margin: 0 40px;
   border-bottom: none;
+  overflow:hidden;
 }
 .el-menu--horizontal {
   .el-menu-item,
@@ -219,13 +277,15 @@ export default {
     }
   }
 }
-/deep/.el-submenu__title{
+
-  padding-right: 20px!important;
+/deep/.el-submenu__title {
-  .el-submenu__icon-arrow{
+  padding-right: 20px !important;
+  .el-submenu__icon-arrow {
     right: 0px;
   }
 }
-.el-menu--horizontal .firstLevelMenu.is-active,/deep/.is-active .el-submenu__title {
+.el-menu--horizontal .firstLevelMenu.is-active,
+/deep/.is-active .el-submenu__title {
   border-bottom: 3px solid #409eff;
 }
 .menuInnerBox {
@@ -260,7 +320,7 @@ export default {
 // .menuInnerBox {
 //   display: inline-block;
 // }
-.menuBox{
+.menuBox {
   position: relative;
 }
 .title {
@@ -272,7 +332,7 @@ export default {
   height: 61px;
   display: flex;
   align-items: center;
-  justify-content: flex-end
+  justify-content: flex-end;
 }
 .title_l {
   font-family: PingFangSC-Semibold;
@@ -284,14 +344,14 @@ export default {
     margin-right: 14px;
   }
 }
-.title_near{
+.title_near {
   margin-right: 50px;
 }
-.title_near-tow{
+.title_near-tow {
-  .divider-line{
+  .divider-line {
     width: 1px;
     height: 16px;
-    background: #FFFFFF;
+    background: #ffffff;
     margin-right: 50px;
   }
 }