|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <el-aside :width="!isCollapse ? '300px' : '100px'" class="asideBox">
|
|
|
+ <el-aside :width="!isCollapse ? '250px' : '100px'" class="asideBox">
|
|
|
<div class="homeBox">
|
|
|
<div class="logoItem" :class="{ 'flexCenter ': isCollapse }">
|
|
|
<div
|
|
|
@@ -38,71 +38,49 @@
|
|
|
ref="menu"
|
|
|
class="mt-3 el-menu-vertical-demo"
|
|
|
@open="handleOpen"
|
|
|
- @select="handleOpen"
|
|
|
@close="handleClose"
|
|
|
background-color="#eff1f3"
|
|
|
text-color="#000"
|
|
|
active-text-color="#0754a1"
|
|
|
- :router="false"
|
|
|
+ :router="true"
|
|
|
:default-active="defaultActive"
|
|
|
:unique-opened="true"
|
|
|
:collapse="isCollapse"
|
|
|
>
|
|
|
- <el-submenu
|
|
|
- v-for="(item, index) in orgList"
|
|
|
- :key="index"
|
|
|
- :index="item.id"
|
|
|
- >
|
|
|
- <template slot="title">
|
|
|
- <div class="flex items-center justify-start">
|
|
|
- <i
|
|
|
- class="flex items-center justify-center mr-2"
|
|
|
- style="margin-left: 3px"
|
|
|
- >
|
|
|
- <SvgIcons
|
|
|
- :name="item.iconName"
|
|
|
- class="dnao"
|
|
|
- width="20px"
|
|
|
- height="22px"
|
|
|
- color="#222"
|
|
|
- ></SvgIcons>
|
|
|
- </i>
|
|
|
- <span
|
|
|
- slot="title"
|
|
|
- style="display: inline-block"
|
|
|
- :class="{
|
|
|
- 'active-menu':
|
|
|
- defaultActive ===
|
|
|
- `/windField?id=${item.id}&name=${item.name}`,
|
|
|
- }"
|
|
|
- >{{ item.name }}</span
|
|
|
- >
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <el-menu-item
|
|
|
- v-for="(child, childIndex) in item.children"
|
|
|
- :key="childIndex"
|
|
|
- :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
|
|
|
+ <template v-for="item in routerList">
|
|
|
+ <el-submenu
|
|
|
+ :index="item.path"
|
|
|
+ v-if="item.children && item.children.length > 0"
|
|
|
>
|
|
|
<template slot="title">
|
|
|
- <span
|
|
|
- slot="title"
|
|
|
- style="padding-left: 22px; width: 100%; display: inline-block"
|
|
|
- :class="{
|
|
|
- 'active-menu':
|
|
|
- defaultActive === `/dynamo?id=${item.id}&name=${item.name}`,
|
|
|
- }"
|
|
|
- @click="
|
|
|
- handleChangeMenuUrl(
|
|
|
- item,
|
|
|
- `/home/${item.path}/${child.path}?id=${item.id}&name=${item.name}`
|
|
|
- )
|
|
|
- "
|
|
|
- >{{ child.name }}</span
|
|
|
- >
|
|
|
+ <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></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"
|
|
|
+ :key="child.id"
|
|
|
+ :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
|
|
|
+ >
|
|
|
+ <i class="el-icon-menu" v-if="isElPrefix(child.iconName)"></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
|
|
|
+ :key="item.id"
|
|
|
+ :index="`/home/${item.path}?id=${item.id}&name=${item.name}`"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
|
|
|
+ <i v-else class="svnIcon"><svg-icon :icon-class="item.iconName" /></i>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
</el-menu-item>
|
|
|
- </el-submenu>
|
|
|
+ </template>
|
|
|
</el-menu>
|
|
|
<div class="foldBox flexCenter">
|
|
|
<span
|
|
|
@@ -120,30 +98,46 @@
|
|
|
</div>
|
|
|
</el-aside>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
import { orgList } from "./mockData";
|
|
|
-
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- // 展开收起
|
|
|
isCollapse: false,
|
|
|
- // 三级菜单数组
|
|
|
orgList: orgList,
|
|
|
- // 搜索值
|
|
|
searchInputValue: "",
|
|
|
defaultActive: "",
|
|
|
activeIndex: false,
|
|
|
keyObject: {},
|
|
|
+ routerList: [
|
|
|
+ {
|
|
|
+ path: "cockpitManage",
|
|
|
+ name: "驾驶舱",
|
|
|
+ iconName: "gps",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ iconName: "gps",
|
|
|
+ path: "electronic-map",
|
|
|
+ name: "电子地图",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
-
|
|
|
+ created() {
|
|
|
+ this.routerList = [
|
|
|
+ ...this.routerList,
|
|
|
+ ...this.$store.state.auth.dynamicRouter,
|
|
|
+ ];
|
|
|
+ console.log(this.routerList, "组件内dynamicRouter");
|
|
|
+ },
|
|
|
computed: {
|
|
|
currentMenuIndex() {
|
|
|
return this.$store.state.breadStore?.currentUrl?.routeUrl;
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
watch: {
|
|
|
currentMenuIndex: {
|
|
|
deep: true,
|
|
|
@@ -162,27 +156,27 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
- created() {},
|
|
|
methods: {
|
|
|
+ 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]); // 解析 URL 参数
|
|
|
+ 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 };
|
|
|
});
|
|
|
- // console.log(result)
|
|
|
this.$store.commit("breadStore/ADD_BREAD", result);
|
|
|
return result;
|
|
|
},
|
|
|
handleOpen(key, keyPath) {
|
|
|
- // console.log(key, keyPath)
|
|
|
this.activeIndex = false;
|
|
|
this.keyObject = {
|
|
|
key,
|
|
|
@@ -190,14 +184,12 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
handleClose(key, keyPath) {
|
|
|
- // console.log(key, keyPath)
|
|
|
this.activeIndex = false;
|
|
|
this.keyObject = {
|
|
|
key,
|
|
|
keyPath,
|
|
|
};
|
|
|
},
|
|
|
-
|
|
|
shrinkTree() {
|
|
|
this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
|
|
|
},
|
|
|
@@ -220,6 +212,7 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
width: 200px;
|
|
|
@@ -318,26 +311,19 @@ export default {
|
|
|
&:hover {
|
|
|
p {
|
|
|
color: #19436d;
|
|
|
- // border-bottom: 1px solid #409eff;
|
|
|
}
|
|
|
-
|
|
|
- // background-color: rgb(64, 158, 255, 0.6);
|
|
|
transition: width 0.5s ease, transform 0.5s ease;
|
|
|
- /* 过渡效果 */
|
|
|
transform-origin: left;
|
|
|
- /* 设置变换的原点在左侧 */
|
|
|
}
|
|
|
|
|
|
.left {
|
|
|
left: 50%;
|
|
|
transform: scaleX(0);
|
|
|
- /* 初始时将左侧元素宽度设为 0 */
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
left: 0;
|
|
|
transform: scaleX(0);
|
|
|
- /* 初始时将右侧元素宽度设为 0 */
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -371,19 +357,27 @@ export default {
|
|
|
}
|
|
|
|
|
|
::v-deep .el-submenu__title {
|
|
|
- padding-left: 30px !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
::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;
|
|
|
@@ -394,7 +388,6 @@ export default {
|
|
|
background-color: #efeff0;
|
|
|
}
|
|
|
|
|
|
-/* 滚动条没有滑块的轨道部分 */
|
|
|
::-webkit-scrollbar-track-piece {
|
|
|
background-color: #efeff0;
|
|
|
border-radius: 10px;
|
liujiejie