menu按钮修改

src/components/common/HomePage.vue

@@ -2,90 +2,116 @@
   <el-container :class="getRole">
     <el-aside v-show="onshow">
       <div class="logo">
-        <p v-if="userLoginDTO&&userLoginDTO.type=='1'">
+        <p v-if="userLoginDTO && userLoginDTO.type == '1'">
           <b>朗通后台管理系统</b>
         </p>
-        <p v-if="userLoginDTO&&userLoginDTO.type=='0'">
+        <p v-if="userLoginDTO && userLoginDTO.type == '0'">
           <b>DiagbotCloud</b>
         </p>
-        <p v-if="userLoginDTO&&userLoginDTO.type=='0'">
+        <p v-if="userLoginDTO && userLoginDTO.type == '0'">
           <b>后台管理系统</b>
         </p>
       </div>
 
       <lt-menu
-        v-if="menuWrappers&&menuWrappers.length"
+        v-if="menuWrappers && menuWrappers.length"
         v-bind:role="getRole"
         v-bind:data="menuWrappers"
       ></lt-menu>
       <div class="version">
         <p>
           <span>版本信息：</span>
-          <a href="javascript:void(0)" @click="showVersion">{{versionName}}</a>
+          <a href="javascript:void(0)" @click="showVersion">{{
+            versionName
+          }}</a>
           <i v-if="isNewV">
             <img src="../../images/new.png" alt />
           </i>
         </p>
       </div>
     </el-aside>
-    <img src="../../images/icon-collect-right.png" v-show="!onshow" class="collect" @click="collect" />
-    <img src="../../images/icon-collect-left.png" v-show="onshow" class="collect-left" @click="collect" />
+    <img
+      src="../../images/icon-collect-right.png"
+      v-show="!onshow"
+      class="collect"
+      @click="collect"
+    />
+    <img
+      src="../../images/icon-collect-left.png"
+      v-show="onshow"
+      class="collect-left"
+      @click="collect"
+    />
     <el-container>
       <el-header class="clearfix">
         <div class="title fl">
-          <h2>{{organization&&organization.name}}</h2>
+          <h2>{{ organization && organization.name }}</h2>
         </div>
         <div class="userInfo fr">
-          <span class="username" @click="goCenter">{{userLoginDTO&&userLoginDTO.linkman}}</span>
-          <lt-badge v-if="getRole=='user'" class="green" :authStatus="authStatus">{{authStatusName}}</lt-badge>
-          <el-button type="info" size="small" plain @click="logout">退出</el-button>
+          <span class="username" @click="goCenter">{{
+            userLoginDTO && userLoginDTO.linkman
+          }}</span>
+          <lt-badge
+            v-if="getRole == 'user'"
+            class="green"
+            :authStatus="authStatus"
+            >{{ authStatusName }}</lt-badge
+          >
+          <el-button type="info" size="small" plain @click="logout"
+            >退出</el-button
+          >
         </div>
       </el-header>
       <el-main>
         <router-view v-if="ok" v-on:status-change="changeStatus"></router-view>
       </el-main>
     </el-container>
-    <el-dialog title="版本信息" :visible.sync="versionVisible" width="50%" class="version-info">
+    <el-dialog
+      title="版本信息"
+      :visible.sync="versionVisible"
+      width="50%"
+      class="version-info"
+    >
       <div v-html="versionInfo"></div>
     </el-dialog>
   </el-container>
 </template>
 
 <script>
-import LtMenu from '../common/Menu.vue';
-import LtBadge from '@base/LtBadge.vue';
-import api from '@api/index.js';
-import userApi from '@api/user.js';
-import Console from '@components/user/Console.vue';
-import newIcon from '../../images/new.png';
+import LtMenu from "../common/Menu.vue";
+import LtBadge from "@base/LtBadge.vue";
+import api from "@api/index.js";
+import userApi from "@api/user.js";
+import Console from "@components/user/Console.vue";
+import newIcon from "../../images/new.png";
 export default {
-  name: 'homepage',
+  name: "homepage",
   components: {
-    'lt-badge': LtBadge,
-    'lt-menu': LtMenu,
+    "lt-badge": LtBadge,
+    "lt-menu": LtMenu,
     console: Console
   },
-  data: function() {
+  data: function () {
     return {
       menuWrappers: null,
       organization: null,
       userLoginDTO: null,
       authStatus: null,
-      authStatusName: '',
+      authStatusName: "",
       ok: false, //是否已获取到菜单
-      versionName: '',
+      versionName: "",
       versionVisible: false,
-      versionInfo: '',
+      versionInfo: "",
       isNewV: false,
       version: null, //版本信息接口返回的数据
       onshow: true
     };
   },
   computed: {
-    getRole: function() {
-      return this.userLoginDTO && this.userLoginDTO.type == '0'
-        ? 'user'
-        : 'admin';
+    getRole: function () {
+      return this.userLoginDTO && this.userLoginDTO.type == "0"
+        ? "user"
+        : "admin";
     }
   },
   created() {
@@ -93,17 +119,27 @@ export default {
     this.getMenuList();
   },
   watch: {
-    $route: function(to, from) {
-      if (from.name == 'login') {
+    $route: function (to, from) {
+      if (from.name == "login") {
         this.getMenuList();
       }
-      if (to.path == '/') {
+      if (to.path == "/") {
         // 退出时清空菜单
         this.menuWrappers = [];
         this.isNewV = false;
       }
     }
   },
+  mounted() {
+    let elSide = document.querySelector(".el-aside"),
+      tabWidth = document.querySelector(".collect-left");
+    tabWidth.style.left = elSide.offsetWidth - 36 + "px";
+    window.onresize = () => {
+      return (() => {
+        tabWidth.style.left = elSide.offsetWidth - 36 + "px";
+      })();
+    };
+  },
   methods: {
     collect() {
       this.onshow = !this.onshow;
@@ -111,31 +147,31 @@ export default {
     getMenuList() {
       api
         .getAccessdMenu()
-        .then(res => {
-          if (res.data.code == '0') {
+        .then((res) => {
+          if (res.data.code == "0") {
             const data = res.data.data;
             this.ok = true;
-            const hasConcole = data.menuWrappers.find(it => {
-              return it.code.indexOf('-KZT') > -1;
+            const hasConcole = data.menuWrappers.find((it) => {
+              return it.code.indexOf("-KZT") > -1;
             });
             //this.hasConcole = hasConcole!=-1;
             this.menuWrappers = data.menuWrappers;
             this.organization = data.organization;
             this.userLoginDTO = data.userLoginDTO;
             localStorage.setItem(
-              'userLoginDTO',
+              "userLoginDTO",
               JSON.stringify(data.userLoginDTO)
             );
-            this.getRole == 'user' && this.getAuthStatus();
+            this.getRole == "user" && this.getAuthStatus();
             if (hasConcole) {
               const url =
-                this.getRole == 'user' ? '/user/YH-KZT' : '/admin/LT-KZT';
+                this.getRole == "user" ? "/user/YH-KZT" : "/admin/LT-KZT";
               this.$router.push({ path: url });
             }
             this.getVersionInfo();
           }
         })
-        .catch(error => {
+        .catch((error) => {
           console.log(error);
         });
     },
@@ -144,9 +180,9 @@ export default {
     },
     getVersionInfo() {
       const getInfo =
-        this.getRole == 'user' ? api.getVersionOuter : api.getVersionInner;
-      getInfo().then(res => {
-        if (res.data.code == '0') {
+        this.getRole == "user" ? api.getVersionOuter : api.getVersionInner;
+      getInfo().then((res) => {
+        if (res.data.code == "0") {
           const data = res.data.data;
           this.fillVersionInfo(data);
         } else {
@@ -158,16 +194,16 @@ export default {
       //进入时获取版本信息，如版本时间与localStorage中不一致或者一致但localStorage中未被点过，
       // 则要显示更新图标
       let htl = data.refreshTime
-        ? '<h3>当前版本：' +
+        ? "<h3>当前版本：" +
           data.name +
-          '<span>' +
+          "<span>" +
           data.refreshTime.substr(0, 10) +
-          '</span></h3>'
-        : '<h3>当前版本：' + data.name + '</h3>';
+          "</span></h3>"
+        : "<h3>当前版本：" + data.name + "</h3>";
       let prags = data.detail || [];
       this.versionName = data.name;
       const versionTime = JSON.parse(
-        localStorage.getItem('versionInfo-' + this.userLoginDTO.username)
+        localStorage.getItem("versionInfo-" + this.userLoginDTO.username)
       );
       if (
         !versionTime ||
@@ -179,7 +215,7 @@ export default {
       }
       for (let i = 0; i < prags.length; i++) {
         htl +=
-          '<p>' + prags[i].title + '</p><p>' + prags[i].description + '</p>';
+          "<p>" + prags[i].title + "</p><p>" + prags[i].description + "</p>";
       }
       this.versionInfo = htl;
       this.version = { date: data.refreshTime };
@@ -189,7 +225,7 @@ export default {
       this.version.showed = true;
       this.isNewV = false;
       localStorage.setItem(
-        'versionInfo-' + this.userLoginDTO.username,
+        "versionInfo-" + this.userLoginDTO.username,
         JSON.stringify(this.version)
       );
     },
@@ -203,37 +239,37 @@ export default {
       this.authStatusName = text;
     },
     goCenter() {
-      const url = this.getRole == 'user' ? '' : '/admin/LT-GRZX';
+      const url = this.getRole == "user" ? "" : "/admin/LT-GRZX";
       this.$router.push({ path: url });
     },
     getAuthStatus() {
       //获取用户认证状态
       userApi
         .getUserAuthStatus()
-        .then(res => {
-          if (res.data.code == '0') {
+        .then((res) => {
+          if (res.data.code == "0") {
             const data = res.data.data;
             // this.authStatus = data[0];
             this.authStatusName = data.authStatusName;
             this.authStatus = data.authStatus;
           }
         })
-        .catch(error => {
+        .catch((error) => {
           console.log(error);
         });
     },
     logout() {
       //退出
-      localStorage.removeItem('token');
-      localStorage.removeItem('menuPath');
-      this.$router.push({ path: '/' });
+      localStorage.removeItem("token");
+      localStorage.removeItem("menuPath");
+      this.$router.push({ path: "/" });
     }
   }
 };
 </script>
 
 <style lang="less">
-@import '../../less/common.less';
+@import "../../less/common.less";
 .collect {
   width: 36px;
   height: 32px;
@@ -242,11 +278,11 @@ export default {
   top: 70%;
   z-index: 20;
 }
-.collect-left{
+.collect-left {
   width: 36px;
   height: 32px;
   position: fixed;
-  left:calc(20% - 36px); 
+  // left: calc(20% - 36px);
   top: 65%;
   z-index: 20;
 }
@@ -270,7 +306,7 @@ export default {
 }
 </style>
 <style lang="less" scoped>
-@import '../../less/common.less';
+@import "../../less/common.less";
 .el-menu-vertical-demo.el-menu {
   height: calc(100% - 120px);
   overflow-y: auto;