2023/2/10 肖辉 修改侧边导航高亮

odc.xiaohui

2023-02-10 bd832982f2697f80650c3c0e83331323039b6faf

2023/2/10
肖辉
修改侧边导航高亮

 src/views/layout/components/AsideBar/index.vue

@@ -3,7 +3,9 @@
    <!-- 二级侧边栏 -->
    <el-aside width="200px" class="aside">
      <el-scrollbar>
        <el-menu class="el-menu-vertical" :default-active="$route.path">
        <el-menu class="el-menu-vertical" :default-active="$route.path"

        >
          <div v-for="item in asideList" :key="item.name">
            <span class="AsideBarTitle">{{item.name}}</span>
            <el-menu-item v-for="child in item.children" :key="child.name" :index="child.index" class="firstMenu"
@@ -16,7 +18,7 @@
    </el-aside>
  </div>
</template>
  

<script>
export default {
  data() {
@@ -79,7 +81,7 @@
  }
};
</script>
  

<style lang="scss" scpoed>
.icon-padding {
  padding-right: 10px;
@@ -151,4 +153,4 @@
    }
  }
}
</style>
</style>

 src/views/layout/components/Menu/index.vue

@@ -5,9 +5,12 @@
      <h2 class="siderbar-title" @click="toHome()">遂昌执法平台</h2>
      <el-scrollbar>
        <!-- 路由 -->
        <el-menu router class="el-menu-vertical" :default-active="$route.path">
        <el-menu router
                 class="el-menu-vertical"
                 :default-active="$route.path.name"
                 @select="handleSelect">
          <el-submenu
            :index="menu.url ? menu.url : menu.id.toString()"
            :index="String(menu.id)"
            v-for="menu in menuList"
            :key="menu.id"
            class="firstMenu"
@@ -23,9 +26,7 @@
                <el-submenu
                  :key="secondMenu.id"
                  v-if="secondMenu.menuVoArrayList.length > 0"
                  :index="
                    secondMenu.url ? secondMenu.url : secondMenu.id.toString()
                  "
                  :index="secondMenu.url ? secondMenu.url : secondMenu.id.toString()"
                  class="secondMenu"
                >
                  <template slot="title">
@@ -39,16 +40,13 @@
                    >{{ thirdMenu.title }}</el-menu-item
                  >
                </el-submenu>

                <el-menu-item
                  v-else
                  :index="`${secondMenu.id}`"
                  :route="{ name: secondMenu.url }"
                  >{{ secondMenu.title }}</el-menu-item
                >
                  >{{ secondMenu.title }}</el-menu-item>
              </template>
            </template>

            <el-menu-item
              v-else
              :key="menu.id"
@@ -71,16 +69,27 @@
  data() {
    return {
      menuList: [],
      isActive:''
    };
  },
  created() {
    this.loadMenu();
  },
  watch: {
    $route(){
      this.handleSelect(this.$route.fullPath)
      console.log(this.$route)
    }
  },
  methods: {
    handleSelect(path){
      this.isActive = path
    },
    loadMenu() {
      const userName = sessionStorage.getItem('name');
      users.getMenu({ name: userName })
          .then(res => {
            console.log(res)
            this.menuList = res.menus;
            sessionStorage.setItem('user', JSON.stringify(res));
          })
@@ -155,13 +164,13 @@
        }

        .el-menu-item:hover {
          background-color: #092c4a;
          background-color: #409EFF;
          color: #22d3eb;
        }

        .is-active {
          background-color: #313350;
          color: #22d3eb;
          background-color: #409EFF;
          color: #fff;
        }
      }


 src/views/systemSetting/baseSetting/department/updateUser/index.vue

@@ -39,6 +39,12 @@
              <li class="li-btn" v-if="updateFlag">
                <i class="el-icon-plus" @click="openUser = true"></i>
              </li>
              <li class="li-btn" v-if="updateFlag">
                <el-tooltip class="item" effect="light" content="清除选中人员" placement="top" :enterable="false">
                  <i class="el-icon-minus" @click="clrarUser"></i>
                </el-tooltip>

              </li>
            </ul>
            <div class="card" v-if="openUser">
              <el-card class="box-card">
@@ -201,6 +207,11 @@
        }
      });
    },
    // 清除选中用户
    clrarUser(){
      this.checkedList=[]
    },

    addUser() {
      this.checkedList = [];
      this.userList.forEach((item) => {
@@ -316,6 +327,12 @@
  width: 36px;
  height: 36px;
  border-radius: 50%;
  .el-icon-plus{
    cursor: pointer;
  }
  .el-icon-minus{
    cursor: pointer;
  }
}

.card {
@@ -377,4 +394,4 @@
.el-input {
  width: 280px !important;
}
</style>
</style>