|
|
@@ -0,0 +1,449 @@
|
|
|
+<template>
|
|
|
+ <el-aside :width="!isCollapse ? '250px' : '100px'" class="asideBox">
|
|
|
+ <div class="homeBox"></div>
|
|
|
+ <el-menu
|
|
|
+ collapse-transition
|
|
|
+ ref="menu"
|
|
|
+ class="mt-3 el-menu-vertical-demo"
|
|
|
+ @open="handleOpen"
|
|
|
+ @close="handleClose"
|
|
|
+ background-color="#eff1f3"
|
|
|
+ text-color="#000"
|
|
|
+ :active-text-color="activeTextColor"
|
|
|
+ :router="true"
|
|
|
+ :default-active="defaultActive"
|
|
|
+ :collapse="isCollapse"
|
|
|
+ :default-openeds="openMenus"
|
|
|
+ >
|
|
|
+ <template v-for="item in routerList">
|
|
|
+ <el-submenu
|
|
|
+ v-if="
|
|
|
+ item.children && item.children.length && item.meta?.hidden === false
|
|
|
+ "
|
|
|
+ :index="item.path"
|
|
|
+ >
|
|
|
+ <template slot="title">
|
|
|
+ <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
|
|
|
+ <i v-else class="svnIcon">
|
|
|
+ <svg-icon :icon-class="item.iconName" />
|
|
|
+ </i>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item
|
|
|
+ v-for="child in item.children"
|
|
|
+ v-if="child.meta?.hidden === false"
|
|
|
+ :key="child.id"
|
|
|
+ :index="`${child.path}?id=${child.id}`"
|
|
|
+ @click="handleChangeMenuUrl(child, `${child.path}?id=${child.id}`)"
|
|
|
+ >
|
|
|
+ <i v-if="isElPrefix(child.iconName)" class="el-icon-menu"></i>
|
|
|
+ <i v-else class="svnIcon">
|
|
|
+ <svg-icon :icon-class="child.iconName" />
|
|
|
+ </i>
|
|
|
+ <span>{{ child.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ <el-menu-item
|
|
|
+ v-else-if="item.meta?.hidden === false"
|
|
|
+ :key="item.id"
|
|
|
+ :index="`${item.path}?id=${item.id}`"
|
|
|
+ @click="handleChangeMenuUrl(item, `${item.path}?id=${item.id}`)"
|
|
|
+ >
|
|
|
+ <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
|
|
|
+ <i v-else-if="item.iconName" class="svnIcon">
|
|
|
+ <svg-icon :icon-class="item.iconName" />
|
|
|
+ </i>
|
|
|
+ <i class="svnIcon" v-else-if="item.path === '/home/laserRangeFinder'">
|
|
|
+ <svg-icon
|
|
|
+ style="width: 22px; height: 22px"
|
|
|
+ icon-class="laserRangeFinder"
|
|
|
+ />
|
|
|
+ </i>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </template>
|
|
|
+ </el-menu>
|
|
|
+
|
|
|
+ <div class="foldBox flexCenter">
|
|
|
+ <span
|
|
|
+ v-show="isCollapse"
|
|
|
+ class="el-icon-s-unfold icon"
|
|
|
+ @click.stop="isCollapse = false"
|
|
|
+ >展开</span
|
|
|
+ >
|
|
|
+ <el-switch
|
|
|
+ v-show="!isCollapse"
|
|
|
+ :value="isExpanded"
|
|
|
+ @change="toggleAllMenus"
|
|
|
+ >
|
|
|
+ <!-- :inactive-text="isExpanded ? '收起全部菜单' : '展开全部菜单'" -->
|
|
|
+ </el-switch>
|
|
|
+ <span
|
|
|
+ v-show="!isCollapse"
|
|
|
+ class="el-icon-s-fold icon"
|
|
|
+ @click.stop="isCollapse = true"
|
|
|
+ >收起</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-aside>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapActions, mapState } from "vuex";
|
|
|
+import { orgList } from "./mockData";
|
|
|
+import Vue from "vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isExpanded: false, // 控制是否展开所有子菜单
|
|
|
+ openMenus: [], // 用来存储展开的菜单
|
|
|
+ isCollapse: true,
|
|
|
+ orgList: orgList,
|
|
|
+ searchInputValue: "",
|
|
|
+ defaultActive: this.$route.fullPath,
|
|
|
+ activeIndex: false,
|
|
|
+ keyObject: {},
|
|
|
+ activeTextColor: Vue.prototype.$backgroundColor,
|
|
|
+ routerList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ path: "/home/cockpitManage",
|
|
|
+ name: "首页",
|
|
|
+ iconName: "gps",
|
|
|
+ meta: {
|
|
|
+ hidden: false,
|
|
|
+ },
|
|
|
+ // children: [
|
|
|
+ // {
|
|
|
+ // id: 11,
|
|
|
+ // iconName: "",
|
|
|
+ // meta: {
|
|
|
+ // hidden: false,
|
|
|
+ // },
|
|
|
+ // path: "electronic-map",
|
|
|
+ // name: "电子地图",
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.routerList = [
|
|
|
+ ...this.routerList,
|
|
|
+ ...this.$store.state.auth.dynamicRouter,
|
|
|
+ ];
|
|
|
+ console.log(this.routerList, "routerList");
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ currentMenuIndex: (state) => state.breadStore?.currentUrl?.routeUrl,
|
|
|
+ }),
|
|
|
+ // 获取所有父级菜单的 index
|
|
|
+ allMenuIndexes() {
|
|
|
+ return this.routerList.map((item) => {
|
|
|
+ if (
|
|
|
+ item.children &&
|
|
|
+ item.children.length &&
|
|
|
+ item.meta?.hidden === false
|
|
|
+ ) {
|
|
|
+ return item.path;
|
|
|
+ } else {
|
|
|
+ return `${item.path}?id=${item.id}`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ currentMenuIndex: {
|
|
|
+ deep: true,
|
|
|
+ handler(newVale, oldVal) {
|
|
|
+ if (newVale) {
|
|
|
+ this.$refs.menu.close(newVale);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ keyObject: {
|
|
|
+ deep: true,
|
|
|
+ handler(newVale) {
|
|
|
+ if (newVale && newVale.key === this.defaultActive) {
|
|
|
+ this.getBreadcrumbList(newVale.keyPath);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions("menuTag", ["addTag"]),
|
|
|
+ // 切换展开/收起所有菜单
|
|
|
+ toggleAllMenus() {
|
|
|
+ this.isExpanded = !this.isExpanded;
|
|
|
+
|
|
|
+ if (this.isExpanded) {
|
|
|
+ // 展开所有子菜单
|
|
|
+ this.openMenus = this.routerList
|
|
|
+ .filter((item) => item.children && item.children.length)
|
|
|
+ .map((item) => item.path);
|
|
|
+ } else {
|
|
|
+ // 收起所有子菜单
|
|
|
+ this.openMenus = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleChangeMenuUrl(item, path) {
|
|
|
+ this.defaultActive = path;
|
|
|
+ this.$router.push(path); // 跳转到指定的路由
|
|
|
+ },
|
|
|
+ isElPrefix(str) {
|
|
|
+ const regex = /^el-/;
|
|
|
+ return regex.test(str);
|
|
|
+ },
|
|
|
+ getBreadcrumbList(keyPath) {
|
|
|
+ const urls = keyPath;
|
|
|
+ const result = urls.map((url, index) => {
|
|
|
+ const params = new URLSearchParams(url.split("?")[1]);
|
|
|
+ const id = params.get("id");
|
|
|
+ const name = params.get("name");
|
|
|
+ const routeUrl = url;
|
|
|
+ if (index === urls.length - 1) {
|
|
|
+ return { id, name, routeUrl, currentPage: true };
|
|
|
+ }
|
|
|
+ return { id, name, routeUrl };
|
|
|
+ });
|
|
|
+ this.$store.commit("breadStore/ADD_BREAD", result);
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ handleOpen(key, keyPath) {
|
|
|
+ this.activeIndex = false;
|
|
|
+ this.keyObject = {
|
|
|
+ key,
|
|
|
+ keyPath,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ handleClose(key, keyPath) {
|
|
|
+ this.activeIndex = false;
|
|
|
+ this.keyObject = {
|
|
|
+ key,
|
|
|
+ keyPath,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ shrinkTree() {
|
|
|
+ this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
|
|
|
+ },
|
|
|
+ handleChangeRouter() {
|
|
|
+ this.activeIndex = true;
|
|
|
+ this.defaultActive = "";
|
|
|
+ this.$store.commit("breadStore/ADD_BREAD", []);
|
|
|
+ this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
|
|
|
+ this.$router.push("/");
|
|
|
+ },
|
|
|
+ handleChangeMenuUrl(item, key) {
|
|
|
+ this.defaultActive = key;
|
|
|
+ if (item) {
|
|
|
+ item.activeIndex = true;
|
|
|
+ }
|
|
|
+ const tag = {
|
|
|
+ path: key,
|
|
|
+ name: item.name,
|
|
|
+ label: item.name,
|
|
|
+ };
|
|
|
+ this.addTag(tag);
|
|
|
+ this.$router.push({
|
|
|
+ path: key,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
+ width: 200px;
|
|
|
+ min-height: 400px;
|
|
|
+}
|
|
|
+.stop-animation,
|
|
|
+.active-animation {
|
|
|
+ font-size: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.asideBox {
|
|
|
+ height: 100vh;
|
|
|
+ overflow-y: scroll;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ padding-top: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-direction: column;
|
|
|
+ border-right: 1px solid #d8d8d8;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .homeBox {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .logoItem {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ span {
|
|
|
+ line-height: 50px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logoImg {
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ width: inherit;
|
|
|
+ }
|
|
|
+
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .el-icon-search {
|
|
|
+ margin-top: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ width: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #666;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .homeIndex {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 18px;
|
|
|
+
|
|
|
+ .home_active {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ color: #666;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ p {
|
|
|
+ color: #19436d;
|
|
|
+ }
|
|
|
+
|
|
|
+ transition: width 0.5s ease, transform 0.5s ease;
|
|
|
+ transform-origin: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ left: 50%;
|
|
|
+ transform: scaleX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ left: 0;
|
|
|
+ transform: scaleX(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-menu {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border: none;
|
|
|
+ overflow-y: auto;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flexCenter {
|
|
|
+ display: flex;
|
|
|
+ align-items: center !important;
|
|
|
+ justify-content: space-between !important;
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+.foldBox {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 20px;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-submenu__title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-submenu__icon-arrow {
|
|
|
+ right: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .svnIcon {
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 5px;
|
|
|
+ width: 24px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #aaabaa;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: #efeff0;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-track-piece {
|
|
|
+ background-color: #efeff0;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.asideBox:hover ::-webkit-scrollbar {
|
|
|
+ display: block !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-menu-item {
|
|
|
+ margin-left: 18px;
|
|
|
+}
|
|
|
+</style>
|
rui.jiang