erp/resources/frontend/src/views/index.vue

<template>
  <div>
    <el-container>
      <el-container>
        <el-aside :class="show ? 'width' : 'width1'">
          <el-menu
            router
            background-color="#282c34"
            text-color="#fff"
            :default-active="$route.path"
            :default-openeds="openeds"
          >
            <div v-for="item in menu" :key="item.id">
              <el-menu-item :index="item.code" v-if="!item.children">
                <span>{{ item.name }}</span>
              </el-menu-item>
              <el-submenu v-else :index="item.code">
                <template slot="title">
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item
                  :index="items.code"
                  :key="items.id"
                  v-for="items in item.children"
                  >{{ items.name }}</el-menu-item
                >
              </el-submenu>
            </div>
          </el-menu>
        </el-aside>

        <el-main>
          <div class="head">
            <ul>
              <li>
                <div @click="add" class="add">
                  <i class="el-icon-s-unfold" v-if="show"></i>
                  <i class="el-icon-s-fold" v-else></i>
                </div>
                <div class="right">
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item
                      v-for="(item, index) in titie"
                      :key="index"
                      >{{ item.name }}</el-breadcrumb-item
                    >
                  </el-breadcrumb>
                </div>
              </li>
              <li>
                <div class="token" @click="hanleLogout">退出</div>
              </li>
            </ul>
          </div>

          <div class="box-card">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { removeToken } from "@/util/auth";
import { getMenu } from "../api/menu.js";
export default {
  mounted() {
    getMenu().then((res) => {
      this.menu = res.data.data;
      console.log(this.menu);
    });
  },
  data() {
    return {
      menu: [], // 侧边栏
      show: false, // 导航栏折叠
      levelData: [], // table导航栏
      titie: [], // 面包线
      head: "", // 路由name
      onindex: 0, // 索引
      openeds: ["GOODS_MANAGE"],
    };
  },
  watch: {
    // table构造
    $route: {
      handler: function (val) {
        // console.log("0.0", val);
        this.titie = val.matched;
        this.head = val.name;
        this.levelData.push({ name: val.name, path: val.path });
        const newArr = [];
        const obj = {};
        for (var i = 0; i < this.levelData.length; i++) {
          if (!obj[this.levelData[i].name]) {
            newArr.push(this.levelData[i]);
            obj[this.levelData[i].name] = true;
          }
        }

        this.levelData = newArr;
        // console.log("table构造", this.levelData);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    /**
     * @author: czw (725551805@qq.com)
     * @description: 滚动条下一个
     * @param {*}
     * @return {*}
     * @Date: 2022-03-02 19:50:50
     */
    next() {
      this.hanletop();
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description: 滚动最底部
     * @param {*}
     * @return {*}
     * @Date: 2022-03-02 19:51:03
     */
    hanletop() {
      document.getElementById("bottom").scrollIntoView({ behavior: "smooth" });
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description: 滚动最顶部
     * @param {*}
     * @return {*}
     * @Date: 2022-03-02 19:51:07
     */
    hanlebottom() {
      document.getElementById("top").scrollIntoView({ behavior: "smooth" });
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description: 退出登录
     * @param {*}
     * @return {*}
     * @Date: 2022-03-02 09:41:37
     */
    hanleLogout() {
      removeToken();
      this.$router.push({ path: "/Login" });
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description: table页跳转
     * @param {*}
     * @return {*}
     * @Date: 2022-03-01 22:27:27
     */
    handlerclick(e) {
      if (this.$route.path !== e) {
        this.$router.push({ path: e });
      }
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description: 导航栏折叠
     * @param {*}
     * @return {*}
     * @Date: 2022-03-01 22:25:47
     */
    add() {
      this.show = !this.show;
    },
    /**
     * @author: czw (725551805@qq.com)
     * @description: 删除
     * @param {*}
     * @return {*}
     * @Date: 2022-03-01 16:53:49
     */
    hanblDelete(index, titie) {
      var list = this.levelData[index].name;

      this.onindex = index;
      this.levelData.splice(this.onindex, 1);
      if (titie === this.head) {
        var item;
        var name;
        for (let i = 0; i < this.levelData.length; i++) {
          item = this.levelData[i].path;
          name = this.levelData[i].name;
        }
        if (this.levelData.length) {
          if (name !== list) {
            this.$router.push({ path: item });
          }
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.table {
  background-color: #fff;
  ul {
    li {
      padding: 20px 10px;
      .Navigation {
        display: flex;
        span {
          padding: 5px 30px;
          border: 1px solid #dcdfe6;
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          border-radius: 4px;
          cursor: pointer;
          margin-right: 10px;
        }
        .tab {
          margin-right: 10px;
          flex-shrink: 0;
        }

        .red {
          color: #5470c6;
          border: 1px solid #5470c6;
        }
        .closure {
          display: inline-block;
          text-align: center;
          cursor: pointer;
          width: 15px;
          height: 15px;
          line-height: 15px;
          background-color: #ddd;
          color: #000;
          border-radius: 50%;
          font-size: 12px;
        }
        .red_1 {
          background-color: #5470c6;
          color: #fff;
        }
      }
    }
    li:nth-child(2) {
      overflow-x: auto;
    }
    display: flex;
  }
}
.width {
  transition: all 0.3s;
  opacity: 0;
  width: 0px !important;
}
.width1 {
  transition: all 0.3s;
  opacity: 1;
  width: 200px !important;
}
.el-container {
  height: 100vh;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  overflow-x: hidden;
}
.el-aside::-webkit-scrollbar {
  width: 8px; /*对垂直流动条有效*/
}
.el-aside::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 20px;
}
.el-main {
  background-color: #f0f2f5;
  color: #333;
  padding: 0 0 !important;
}
.el-main::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
}
.el-main::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
}
.box-card {
  background-color: #fff;
  min-height: calc(100vh - 200px);
  margin: 10px;
  padding: 20px;
}
.add {
  cursor: pointer;
  font-size: 25px;
  color: #606266;
}
.head {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #f6f6f6;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  ul {
    display: flex;
    justify-content: space-between;

    li {
      display: flex;
      align-items: center;
      .right {
        margin-left: 20px;
      }
      .token {
        cursor: pointer;
      }
    }
  }
}
.el-aside {
  background: #282c34;
  box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
}
::v-deep .el-menu {
  border: none;
}
// .el-menu-item {
//   margin: 0 20px 10px;
// }
.el-menu-item:hover {
  outline: 0 !important;
  background: #5470c6 !important;
  border-radius: 5px !important;
}
.el-menu-item.is-active {
  color: #fff !important;
  background: #5470c6 !important;
  border-radius: 5px !important;
}
.el-menu-item-group__title {
  padding: 0 0 !important;
}
</style>