spfm-market-front/src/pages/main/budget/budgetIndex.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: "",
				showList: [],
				routerList: [{
						label: "月度部门预算",
						path: "/monthExcel",
						name: "monthExcel"
					},
					{
						label: "季度部门预算",
						path: "/quarterExcel",
						name: "quarterExcel"
					},
					{
						label: "年度部门预算",
						path: "/yearExcel",
						name: "yearExcel"
					},
					{
						label: "采购部门预算",
						path: "/projectExcel",
						name: "projectExcel",
					},
					{
						label: "预算回复",
						path: "/recallAdmin",
						name: "recallAdmin"
					},
					{
						label: "预算模板管理",
						path: "/budgetList",
						name: "budgetList"
					},
				],
			};
		},
		computed: {
			menuList: function() {
				let arr = [];
				this.routerList.map((item) => {
					this.showList.map((row) => {
						if (item.path == row.jspUrl && row.systemflag == '1') {
							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);
			});
		},
		watch: {
			$route(to, from) {
				this.activeName = this.$route.path;
			},
		},
	};
</script>
<style>
	.el-tabs__content {
		display: none;
	}
</style>