|
@@ -1,14 +1,20 @@
|
|
|
<template>
|
|
|
<div id="gainLeft">
|
|
|
<el-row>
|
|
|
- <el-col :span="24" class="leftMenu">
|
|
|
- <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
|
|
- <el-menu-item index="1">
|
|
|
- <span slot="title">中心成果</span>
|
|
|
- </el-menu-item>
|
|
|
- <el-menu-item index="2">
|
|
|
- <span slot="title">工作成果</span>
|
|
|
- </el-menu-item>
|
|
|
+ <el-col :span="24" class="gainLeft">
|
|
|
+ <el-menu :default-active="path" class="el-menu-vertical-demo" :router="true">
|
|
|
+ <template v-for="(item, index) in subMenu">
|
|
|
+ <template v-if="item.children&&item.children.length>0">
|
|
|
+ <template v-for="(sec) in item.children">
|
|
|
+ <el-menu-item :index="sec.path" :key="sec.id" v-if="sec.type !== 'url'">{{ sec.title }}</el-menu-item>
|
|
|
+ <el-menu-item :index="``" :key="sec.id" @click="turnTo(sec.url)" v-else> {{ sec.title }}</el-menu-item>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <el-menu-item :index="item.path" :key="index" v-else-if="item.type === 'content'||item.type==='column'">
|
|
|
+ {{ item.title }}</el-menu-item>
|
|
|
+ <el-menu-item :index="`${index}-${subIndex}`" :key="index" @click="turnTo(item.url)" v-else>
|
|
|
+ {{ item.title }}</el-menu-item>
|
|
|
+ </template>
|
|
|
</el-menu>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -16,27 +22,46 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { mapActions, mapState, mapMutations } from 'vuex';
|
|
|
export default {
|
|
|
name: 'gainLeft',
|
|
|
props: {},
|
|
|
components: {},
|
|
|
data: () => ({}),
|
|
|
- created() { },
|
|
|
- computed: {},
|
|
|
+ created() { this.getSubMenu() },
|
|
|
+ watch: {
|
|
|
+ path: 'getSubMenu',
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['subMenu']),
|
|
|
+ path() {
|
|
|
+ return this.$route.path;
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
- handleOpen(key, keyPath) {
|
|
|
- console.log(key, keyPath);
|
|
|
+ ...mapMutations(['setSubMenu']),
|
|
|
+ getSubMenu() {
|
|
|
+ this.setSubMenu(this.path);
|
|
|
},
|
|
|
- handleClose(key, keyPath) {
|
|
|
- console.log(key, keyPath);
|
|
|
- }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.leftMenu {
|
|
|
+.gainLeft {
|
|
|
min-height: 500px;
|
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
|
}
|
|
|
+.info {
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ padding: 0 15px;
|
|
|
+}
|
|
|
+.info .title {
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ display: inline-block;
|
|
|
+ height: 40px;
|
|
|
+ width: 260px;
|
|
|
+ padding: 0 0px;
|
|
|
+}
|
|
|
</style>
|