添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

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

New file
@@ -0,0 +1,156 @@
<template>
  <div class="AsideBar">
    <!-- 二级侧边栏 -->
    <el-aside width="200px" class="aside">
      <el-scrollbar>
        <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"
              @click="Jump(child.index)">
              <span class="firstSpan">{{child.name}}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          name: '/home/system', children: [
            {
              name: "基础设置", index: '/home/system/base', children: [
                {
                  name: '用户管理', index: '/home/system/user',
                },
                {
                  name:'角色管理', index:'/home/system/role',
                },
                {
                  name:'权限管理',index:'/home/system/authority',
                },
                {
                  name:'部门管理',index:'/home/system/department',
                }
              ]
            },
            { name: "平台设置", index: "/home/system/plateform", children: [
              {
                name:'门户设置',index:'/home/system/portalSetting'
              },
              {
                name:'第三方接口管理',index:'/home/system/otherInterface'
              }
            ] },
          ],
        }
      ],
      asideList: null,
    }
  },
  created() {
    this.getAsideList(this.$route.path);
  },
  watch: {
    $route(to, from) {
      this.getAsideList(to.fullPath);
    }
  },
  methods: {
    getAsideList(path) {
      let { menu } = this;
      const that = this;
      this.asideList = null;
      menu.forEach(item => {
        if (path.indexOf(item.name) !== -1) {
          that.asideList = item.children;
        }
      })
    },
    Jump(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style lang="scss" scpoed>
.icon-padding {
  padding-right: 10px;
}

.aside {
  background: #eaedf1;
  color: black;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  //    固定标题
  .siderbar-title {
    position: fixed;
    text-align: center;
    margin: 0;
    font-size: 26px;
    width: 200px;
    line-height: 66px;
    top: 0;
    left: 0;
    z-index: 999;
    // box-shadow: 0 -5px 5px #0ff inset;
  }

  .el-scrollbar {
    height: calc(100vh - 66px);
    box-sizing: border-box;

    .el-menu {
      border: 0;
      .AsideBarTitle {
        display: block;
        line-height: 60px;
        color: #999;
        font-weight: 650;
        background-color: #f2f2f2;
        border-bottom: 1px solid #e4e4e4;
      }

      .firstMenu {
        background: #eaedf1;
        text-align: center;
        height: 40px;
        line-height: 40px;
        background-color: #eaedf1;
        color: #666666;
        border-bottom: 1px solid #e4e4e4;

        &:hover .firstSpan {
          color: #1a87fe;
        }

        .el-menu-item {
          &:hover {
            color: #22d3eb;
          }
        }
      }

      .is-active {
        background-color: #fff;
        color: #1a87fe;
      }
    }

    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>