LiaoNingDangAn/src/views/index.vue

<template>
  <div class="container">
    <myHeader></myHeader>
    <div class="body-container">
      <div class="tree-menu">
        <!-- <router-link
          tag="div"
          :to="{ path: item.path }"
          v-for="(item, index) in myRouter"
          :key="index"
          active-class="routerActive"
        >
          <div class="view-child">
            <img :src="item.icon" alt=""   class="router-icon"  />
            {{ item.name }}
          </div>
          <div></div>
        </router-link> -->
        <el-menu
          :default-active="routerIndex"
          class="el-menu-vertical-demo"
          :router="true"
          background-color="#465970"
          text-color="#fff"
        >
          <div
            :index="item.path"
            v-for="(item, index) in routerList"
            :key="index"
          >
            <div v-if="item.children && item.children.length > 0">
              <el-submenu index="">
                <template slot="title">
                  <img :src="item.icon" alt="" class="leftIcon" />
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item-group v-if="item.children">
                  <el-menu-item
                    :index="itemb.path + '66'"
                    v-for="(itemb, index) in item.children"
                    :key="index + '3'"
                    :route="itemb.path"
                    >{{ itemb.name }}</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </div>
            <div v-else>
              <el-menu-item
                :index="item.path + '2'"
                :key="index"
                :route="item.path"
              >
                <template slot="title">
                  <img :src="item.icon" alt="" class="leftIcon" />
                  <span>{{ item.name }}</span>
                </template></el-menu-item
              >
            </div>
          </div>
        </el-menu>
      </div>
      <div class="view-box">
        <tags-view ref="tagsView" />
        <div class="child-views">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myHeader from "@/components/myHeader";
import TagsView from "@/layout/components/TagsView";
import router from "@/router";
export default {
  components: { myHeader, TagsView },
  data() {
    return {
      routerIndex: "1-1",
      routerList: [
        {
          path: "/administrative",
          name: "行政审批",
          icon: require("@/assets/images/tree4.svg"),
          component: () => import("@/views/administrative/index"),
          meta: { title: "行政审批", icon: "netWork" },
        },
        {
          path: "/A/enterpriseMsg",
          name: "企业档案",
          icon: require("@/assets/images/tree4.svg"),
          component: () => import("@/views/enterpriseMsg/index"),
          meta: { title: "企业档案", icon: "netWork" },
        },
        {
          path: "/productsMsg",
          name: "产品档案",
          icon: require("@/assets/images/tree4.svg"),
          component: () => import("@/views/index"),
          redirect: "drugArchives",
          isDiy: true,
          children: [
            {
              path: "/productsMsg/drugArchives",
              name: "药品档案",
              icon: require("@/assets/images/tree4.svg"),
              component: () =>
                import("@/views/productsMsg/components/drugArchives.vue"),
              meta: { title: "药品档案", icon: "netWork" },
            },
            {
              path: "/productsMsg/cosmeticsArchives",
              name: "化妆品档案",
              icon: require("@/assets/images/tree4.svg"),
              component: () =>
                import("@/views/productsMsg/components/cosmeticsArchives.vue"),
              meta: { title: "化妆品档案", icon: "netWork" },
            },
            {
              path: "/productsMsg/health",
              name: "医疗器械档案",
              icon: require("@/assets/images/tree4.svg"),
              component: () =>
                import("@/views/productsMsg/components/health.vue"),
              meta: { title: "医疗器械档案", icon: "netWork" },
            },
          ],
        },
        {
          path: "/B/logout",
          name: "依法注销",
          icon: require("@/assets/images/tree4.svg"),
          component: () => import("@/views/logout/index"),
          meta: { title: "依法注销", icon: "netWork" },
        },

      ],
    };
  },
  computed: {
    //获取自定义路由
    myRouter() {
      console.log(this.$router.options.routes);
      // let staticRouter = router.options.routes.filter(
      //   (item) => item.isDiy == true
      // )[0].children;
      // return staticRouter;
      // return this.$store.state.myselfPermission.routerList;
      console.log(this.$router.options.routes[6].children);
      return this.$router.options.routes[6].children;
    },
    get1(e) {
      console.log(e);
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-submenu {
  margin-right: -1px;
}
.leftIcon {
  display: inline-block;
  height: 14px;
  width: 14px;
  margin-right: 10px;
}
::v-deep .el-submenu__title {
  padding: 0 8px !important;
}
::v-deep .el-menu-item {
  padding: 0 8px !important;
  margin-right: -1px;
}
::v-deep .el-menu-item-group .el-menu-item {
  padding-left: 35px !important;
}
::v-deep .el-menu-item-group__title {
  padding: 0 !important;
}
.container {
  height: 100%;
  .body-container {
    height: calc(100vh - 50px);
    display: flex;
    align-items: center;
    & > div {
      height: 100%;
    }
    .tree-menu {
      background: #465970;
      width: 220px;
      box-sizing: border-box;
      padding: 14px 10px;
      & > div {
        width: 200px;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        padding: 0 10px;
        cursor: pointer;
        .router-icon {
          display: inline-block;
          height: 14px;
          width: 14px;
          margin-right: 10px;
        }
      }
    }
    .view-box {
      flex: 1;
      height: 100%;
      background: #f2f2f2;

      overflow: hidden;
    }
    .child-views {
      height: calc(100% - 40px);
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
    }
  }
  .routerActive {
    background: #1e80eb;
    border-radius: 4px;
  }
  .view-child {
    display: flex;
    align-items: center;
  }
}
</style>