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'>
            <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="table"
               v-if="levelData.length">
            <ul>
              <li> <i class="el-icon-arrow-left"
                   @click="hanlebottom"></i></li>
              <li>

                <div class="Navigation"
                     v-if="levelData.length"
                     id="Navigation">
                  <div id="top"></div>
                  <div v-for="(item , index) in levelData"
                       :key="index"
                       class="tab">
                    <span :class="head===item.name?'red':''"
                          @click="handlerclick(item.path)">{{item.name}}</span>
                    <div class="closure"
                         :class="head===item.name?'red_1':''"
                         @click="hanblDelete(index,item.name)">
                      <i class="el-icon-close"></i>
                    </div>
                  </div>
                  <div id="bottom"></div>
                </div>

              </li>
              <li><i class="el-icon-arrow-right"
                   @click="hanletop"></i></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
    })
  },
  data() {
    return {
      menu: [], // 侧边栏
      show: false, // 导航栏折叠
      levelData: [], // table导航栏
      titie: [], // 面包线
      head: '', // 路由name
      onindex: 0, // 索引
    }
  },
  watch: {
    // table构造
    $route: {
      handler: function (val) {
        // console.log(val, 99999)
        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
      },
      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: '/logo' })
    },
    /**
     * @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: 300px !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>