spfm-market-front/src/pages/main/achievements/achievementsIndex.vue

<template>
	<div class="inner-container">
		<el-col :span="3">
			<el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane v-for="(item, index) in menuList" :key="index" :name="item.path" :label="item.label">
				</el-tab-pane>
			</el-tabs>
		</el-col>
		<el-col :span="21">
			<div style="height: 100%">
				<router-view />
			</div>
		</el-col>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				activeName: "budget",
				userNo: JSON.parse(window.sessionStorage.userInfo).loginNo,
				showList: [],
				routerList: [{
						label: "集团绩效",
						path: "/recallJt",
						name: "recallJt"
					},
					{
						label: "部门绩效",
						path: "/recallBm",
						name: "recallBm"
					},
					{
						label: "副总GS",
						path: "/recallGs",
						name: "recallGs"
					},
					{
						label: "绩效回复列表",
						path: "/kpiRecall",
						name: "kpiRecall"
					},
					{
						label: "绩效模板管理",
						path: "/kpiMuban",
						name: "kpiMuban"
					},
				],
			};
		},
		computed: {
			menuList: function() {
				let arr = [];
				this.routerList.map((item) => {
					this.showList.map((row) => {
						if (item.path == row) {
							arr.push(item);
						}
					});
				});
				return arr;
			},
		},
		methods: {
			handleClick(val) {
				if (this.$route.path != this.activeName) {
					this.$router.push(this.activeName);
				}
			},
		},
		mounted() {
			this.activeName = this.$route.path;
		},
		created() {
			JSON.parse(sessionStorage.childrenMenus).map((item) => {
				this.showList.push(item.jspUrl);
			});
		},
		watch: {
			$route(to, from) {
				this.activeName = this.$route.path;
			},
		},
	};
</script>
<style>
	.el-tabs__content {
		display: none;
	}
</style>