SideMenu.vue

<template id="SideMenu">
  <c-row>
    <div class="eContainer-menu-search">
      <el-button
        icon="el-icon-s-fold"
        v-if="menuOpen"
        @click="closeMenu"
      ></el-button>
      <el-button icon="el-icon-s-unfold" v-else @click="openMenu"></el-button>
      <c-search-input v-show="menuOpen"></c-search-input>
    </div>
    <c-content :height="menusHeight">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        v-bind:router="true"
        @open="handleOpen"
        @close="handleClose"
        :collapse="!menuOpen"
      >
        <SubMenu :subMenuList="menus" :openFlgArr="openFlgArr"></SubMenu>
      </el-menu>
    </c-content>
  </c-row>
</template>
<script>
import Button from "../../components/Button.vue";
import SubMenu from "~/components/SubMenu.vue";

export default {
  components: { Button, SubMenu },
  data: function() {
    return {
      openFlgArr: [],
      menuOpen: true,
      menuList: [
        // { inifrm: "0", ininam: "公共夹", pntmiu: "" },
        // { inifrm: "sptsel", ininam: "待办任务", pntmiu: "0" },
        // { inifrm: "trnrel", ininam: "复核任务", pntmiu: "0" },
        // { inifrm: "diasel", ininam: "备忘录选择交易", pntmiu: "0" },
        { inifrm: "1", ininam: "汇款业务", pntmiu: "" },
        { inifrm: "infcpd", ininam: "汇款查询", pntmiu: "1" },
        { inifrm: "cptopn", ininam: "汇出汇款", pntmiu: "1" },
        { inifrm: "cptadv", ininam: "汇入汇款", pntmiu: "1" },
        { inifrm: "2", ininam: "买方信用证", pntmiu: "" },
        { inifrm: "ditopn", ininam: "信用证开立", pntmiu: "2" },
        { inifrm: "ditame", ininam: "信用证修改", pntmiu: "2" },
        { inifrm: "ditcan", ininam: "信用证注销", pntmiu: "2" },
        { inifrm: "infdid", ininam: "信用证交易查询", pntmiu: "2" },
        { inifrm: "infbdd", ininam: "信用证单据查询", pntmiu: "2" },
        { inifrm: "bdtudp", ininam: "信用证承兑", pntmiu: "2" },
        { inifrm: "bdtdcr", ininam: "信用证不符点/拒付", pntmiu: "2" },
		    { inifrm: "ditdck", ininam: "信用证到单", pntmiu: "2" },
		    { inifrm: "bdtset", ininam: "信用证付款", pntmiu: "2" },
        { inifrm: "3", ininam: "出口信用证", pntmiu: "" },
        { inifrm: "letsel", ininam: "出口信用证查询", pntmiu: "3" },
        { inifrm: "letopn", ininam: "出口信用证通知", pntmiu: "3" },
        { inifrm: "letame", ininam: "出口信用证修改", pntmiu: "3" },
        { inifrm: "letrsv", ininam: "出口信用证补通知", pntmiu: "3" },
        { inifrm: "infled", ininam: "出口信用证查询infled", pntmiu: "3" },
        { inifrm: "infbed", ininam: "出口信用证单据查询", pntmiu: "3" },
        { inifrm: "letcan", ininam: "出口信用证注销", pntmiu: "3" },
        { inifrm: "betacc", ininam: "出口信用证单据承兑", pntmiu: "3" },
        { inifrm: "betrcl", ininam: "出口信用证单据索汇", pntmiu: "3" },
        { inifrm: "4", ininam: "进口信用证", pntmiu: "" },
        { inifrm: "inflid", ininam: "进口信用证查询", pntmiu: "4" },
        { inifrm: "litopn", ininam: "进口信用证开立", pntmiu: "4" },
        { inifrm: "litdav", ininam: "进口信用证通知到单", pntmiu: "4" },
        { inifrm: "litdck", ininam: "进口信用证到单", pntmiu: "4" },
        { inifrm: "brtlat", ininam: "进口信用证单据偿还垫款", pntmiu: "4" },
        { inifrm: "litcan", ininam: "进口信用证注销", pntmiu: "4" },
        { inifrm: "inftrd", ininam: "进口押汇查询", pntmiu: "4" },
        { inifrm: "trtame", ininam: "进口融资修改", pntmiu: "4" },
        { inifrm: "infbpd", ininam: "进口单据查询", pntmiu: "4" },
        { inifrm: "inftxm", ininam: "条式语句查询", pntmiu: "4" },
        { inifrm: "5", ininam: "进口代收", pntmiu: "" },
        { inifrm: "bctdav", ininam: "进口代收到单通知", pntmiu: "5" },
        { inifrm: "bctame", ininam: "进口代收修改", pntmiu: "5" },
        { inifrm: "bctacc", ininam: "进口代收承兑", pntmiu: "5" },
        { inifrm: "bctrad", ininam: "进口代收二次收单", pntmiu: "5" },
        { inifrm: "bctdor", ininam: "进口代收拒付", pntmiu: "5" },
        { inifrm: "bctset", ininam: "进口代收付款", pntmiu: "5" },
        { inifrm: "bctcan", ininam: "进口代收注销", pntmiu: "5" },
        { inifrm: "infbcd", ininam: "进口代收查询", pntmiu: "5" },
		    { inifrm: "6", ininam: "出口托收", pntmiu: "" },
        { inifrm: "botdav", ininam: "出口托收寄单", pntmiu: "6" },
        { inifrm: "botame", ininam: "出口托收修改", pntmiu: "6" },
        { inifrm: "botdcr", ininam: "出口托收拒付/不符点", pntmiu: "6" },
        { inifrm: "botset", ininam: "出口托收收汇", pntmiu: "6" },
        { inifrm: "botcan", ininam: "出口托收闭卷", pntmiu: "6" },
        { inifrm: "7", ininam: "转让信用证", pntmiu: "" },
        { inifrm: "lttopn", ininam: "转让证开立", pntmiu: "7" },
        { inifrm: "lttame", ininam: "转让证修改", pntmiu: "7" },
        { inifrm: "lttcan", ininam: "转让证注销", pntmiu: "7" },
		    { inifrm: "bttsnd", ininam: "转让证单据寄单", pntmiu: "7" },
		    { inifrm: "bttdrv", ininam: "转让证修改单据金额", pntmiu: "7" },
		    { inifrm: "bttdcr", ininam: "转让证单据拒单", pntmiu: "7" },
        { inifrm: "lttdav", ininam: "转让信用证单据第一受益人换单", pntmiu: "7" },
        { inifrm: "bttdck", ininam: "转让信用证通知到单", pntmiu: "7" },
        { inifrm: "8", ininam: "打包托收", pntmiu: "" },
        { inifrm: "cltdav", ininam: "打包托收开立", pntmiu: "8" },
        { inifrm: "clttra", ininam: "打包托收催收", pntmiu: "8" },
        { inifrm: "cltset", ininam: "打包托收解包", pntmiu: "8" },
        { inifrm: "9",ininam: "光票托收", pntmiu: "" },
        { inifrm: "ccttra", ininam: "光票托收催收", pntmiu: "9" },
        { inifrm: "cctdcr", ininam: "光票托收退票", pntmiu: "9" },
        { inifrm: "cctset", ininam: "光票托收收汇", pntmiu: "9" },
        //{ inifrm: "cltdav", ininam: "光票托收开立", pntmiu: "10" },
        //{ inifrm: "clttra", ininam: "光票托收", pntmiu: "10" },
        { inifrm: "10", ininam: "参数管理", pntmiu: "" },
        { inifrm: "infusr", ininam: "用户信息", pntmiu: "10" },
      ],
      menus: [],
      menusHeight: 0
    };
  },
  computed: {
    activeMenu() {
      return this.$route.path;
    },
  },
  watch: {
    $route: function () {
      this.$nextTick(() => {
        const arr = []
        this.getOpenMenusIndex(this.menus, arr)
        this.openFlgArr = [...new Set([...this.openFlgArr, ...arr])]
      })
    }
  },
  created() {
    this.menusHeight = 60 + 46 + 8;
  },
  mounted() {
    const arr = [];
    this.generateMenuTree(arr);
    this.menus = arr;
    this.initOpenFlgIndex();
  },
  methods: {
    generateMenuTree(list, item) {
      const cc = [],
        c = [];
      let n = 0;
      for (let i = 0; i < this.menuList.length; i++) {
        const menuItem = this.menuList[i];
        if (!item) {
          if (menuItem.pntmiu === undefined || menuItem.pntmiu === "") {
            const children = [];
            menuItem.path = "/business";
            this.generateMenuTree(children, menuItem);
            const child = {
              name: menuItem.ininam,
              path: menuItem.path,
              children,
            };
            if (children.length > 0) {
              child["index"] = child.path + "_" + n++;
              cc.push(child);
            } else {
              c.push(child);
            }
          }
        } else {
          if (menuItem.pntmiu === item.inifrm) {
            const children = [];
            menuItem.path = item.path + "/" + menuItem.inifrm;
            this.generateMenuTree(children, menuItem);
            const child = {
              name: menuItem.ininam,
              path: menuItem.path,
              icon: "el-icon-document",
              children,
            };
            if (children.length > 0) {
              child["index"] = child.path + "_" + n++;
              cc.push(child);
            } else {
              c.push(child);
            }
          }
        }
      }
      list.push(...cc, ...c);
    },
    handleOpen(index, indexPath) {
      // console.log(index, indexPath);
      const arr = Object.assign([], this.openFlgArr);
      arr.push(index);
      this.openFlgArr = arr;
    },
    handleClose(index, indexPath) {
      // console.log(index, indexPath);
      const arr = Object.assign([], this.openFlgArr);
      this.openFlgArr = arr.filter((idx) => idx !== index);
    },
    openMenu() {
      this.menuOpen = true;
      const aside = document.querySelector("aside");
      aside.className = aside.className.split(" ")[0];
      this.initOpenFlgIndex();
    },
    initOpenFlgIndex() {
      const r = [];
      this.getOpenMenusIndex(this.menus, r);
      this.openFlgArr = r;
    },
    getOpenMenusIndex(menus, arr) {
      for (let i = 0; i < menus.length; i++) {
        const menu = menus[i];
        if (menu.path === this.activeMenu) {
          return true;
        }
        if (menu.children.length > 0) {
          if (this.getOpenMenusIndex(menu.children, arr)) {
            arr.push(menu.index);
            return true;
          }
        }
      }
      return false;
    },
    closeMenu() {
      this.menuOpen = false;
      const aside = document.querySelector("aside");
      aside.className = aside.className + " fold";
      this.openFlgArr = [];
    },
  },
};
</script>
<style scoped>
.eContainer-menu-search .el-button {
  border: none;
  font-size: 20px;
  padding: 12px 20px;
}

.eContainer-menu-search .el-input {
  width: auto;
  position: absolute;
  right: 20px;
  top: 10px;
  left: 60px;
}

.eContainer-scroller .el-scrollbar__wrap {
  overflow: auto;
  margin-right: 0px !important;
}

.eContainer-menu-search {
  width: 100%;
  position: relative;
}

.eContainer-menu-search .el-input,
.eContainer-menu-search .search-wrapper {
  width: auto;
  position: absolute;
  right: 20px;
  top: 10px;
  left: 60px;
}

.eContainer-menu-search .el-input .el-input__inner {
  height: 30px;
}

.eContainer-menu-search .el-icon-search {
  line-height: 30px;
}

.eContainer-scroller {
  height: calc(100% - 44px);
}

.eContainer-scroller .el-scrollbar__bar {
  display: none;
}

.el-icon-s-fold {
  float: left;
  font-size: 20px;
}

.el-icon-s-unfold {
  float: left;
  font-size: 20px;
}

.el-menu {
  border-right: none;
}

.eContainer-refresh {
  width: auto;
  overflow: auto;
  height: calc(100% - 44px);
}

.el-button-refresh {
  width: 100%;
  height: 40px;
}
</style>

<style>
.el-menu-vertical-demo.el-menu--collapse {
  width: 60px;
}

.el-submenu__title,
.el-menu-item,
.el-submenu .el-menu-item {
  font-size: 12px;
  height: 35px;
  line-height: 35px;
}
.el-menu-vertical-demo [class^=el-icon-caret-] {
  color: #606266;
}
</style>