Investment-data-system/src/layout/m-aside.vue

<template>
	<!-- 
		* title：layout 侧边栏
  -->
	<div class="p-layout-aside g_flex_column_between" :class="state.collapsed ? 'g_w_80' : 'g_w_199'">
		<!-- 顶部logo -->
		<div class="m-logo g_flex_row_start_c g_cursor_point g_flex_none g_pl_24" @click="goHome">
			<div class="logo-box g_mr_2">
				<img src="../assets/image/logo.svg" alt class="img" />
			</div>
			<div class="g_flex_column_center g_fs_16 g_fw_600" v-if="!state.collapsed">投资数据系统</div>
		</div>
		<!-- 中间菜单 -->
		<div class="m-menu g_clear_scroll g_flex_1">
			<a-menu v-model:selectedKeys="state.selectedKeys" v-model:open-keys="state.openKeys" mode="inline" :items="items" @click="onOpenClick" :inline-collapsed="state.collapsed"></a-menu>
		</div>
		<!-- 底部折叠按钮 -->
		<div class="m-toggle g_flex_none g_border_top_e g_flex_column_center g_h_48" :class="!state.collapsed ? 'g_flex_row_start g_ml_0' : 'g_flex_row_center'" v-show="items.length > 0">
			<div class="btn g_cursor_point g_flex_c" @click="toggleCollapsed">
				<MenuUnfoldOutlined v-if="state.collapsed" />
				<MenuFoldOutlined v-else />
			</div>
		</div>
	</div>
</template>

<script setup>
import { createFromIconfontCN } from "@ant-design/icons-vue";
// import { menuApi } from "../api/menu";
import { h, reactive, onMounted, ref, watch } from "vue";
import { TagsOutlined, HomeOutlined, ShoppingOutlined,MessageOutlined,FileProtectOutlined, VideoCameraOutlined,UserOutlined,UsergroupAddOutlined, ApartmentOutlined, TeamOutlined, ContainerOutlined, AccountBookOutlined, BarChartOutlined, MailOutlined, SettingOutlined, AuditOutlined, SketchOutlined, MenuUnfoldOutlined, MenuFoldOutlined, SolutionOutlined } from "@ant-design/icons-vue";
import { useStore } from "../stores/counter.ts";
import { useRouter, useRoute } from "vue-router";
import { mockMenuList } from "../utils/mock.js";

const storeJS = useStore();
const router = useRouter();
const route = useRoute();

function getItem(label, url, key, icon, children, type) {
	return {
		key,
		url,
		icon,
		children,
		label,
		type,
	};
}
const menuList = ref([]);
const items = reactive([]);
onMounted(() => {
	state.rootSubmenuKeys = [];
	// menuApi().then((data) => {})
	// console.log('原始数据：',data.data.menus);
	console.log("菜单mock：", mockMenuList.menus);
	menuList.value = mockMenuList.menus;
	menuList.value.forEach((item, index) => {
		state.rootSubmenuKeys.push("sub_menu_" + item.id + "_$$_not_set_key");
		if (item.childrenList.length > 0) {
			let childrens = reactive([]);
			for (var i = 0; i != item.childrenList.length; ++i) {
				childrens.push(getItem(item.childrenList[i].title, item.id, item.childrenList[i].component));
			}
			switch (item.menuName) {
				case "JobManagement":
					items.push(getItem(item.title, item.id, item.component, () => h(ShoppingOutlined), childrens));
					break;
				case "NotesManagement":
					items.push(getItem(item.title, item.id, item.component, () => h(SolutionOutlined), childrens));
					break;
				case "upstreamAnddownstream":
					items.push(getItem(item.title, item.id, item.component, () => h(ApartmentOutlined), childrens));
					break;
				case "TownsmanManagement":
					items.push(getItem(item.title, item.id, item.component, () => h(UserOutlined), childrens));
					break;
				case "AgencyManagement":
					items.push(getItem(item.title, item.id, item.component, () => h(ApartmentOutlined), childrens));
					break;
				case "teammanagement":
					items.push(getItem(item.title, item.id, item.component, () => h(TeamOutlined), childrens));
					break;
				case "OrderManagement":
					items.push(getItem(item.title, item.id, item.component, () => h(ContainerOutlined), childrens));
					break;
				case "BillCenter":
					items.push(getItem(item.title, item.id, item.component, () => h(AccountBookOutlined), childrens));
					break;
				case "group":
					items.push(getItem(item.title, item.id, item.component, () => h(BarChartOutlined), childrens));
					break;
				case "container":
					items.push(getItem(item.title, item.id, item.component, () => h(MailOutlined), childrens));
					break;
				case "GlobalConfig":
					items.push(getItem(item.title, item.id, item.component, () => h(SettingOutlined), childrens));
					break;
				case "FirmConfig":
					items.push(getItem(item.title, item.id, item.component, () => h(AuditOutlined), childrens));
					break;
				// case 'TagManagement':
				//   items.push(getItem(item.title, item.id, item.component, () => h(TagsOutlined), childrens))
				//   break
				// case "ServiceMarket":
				// 	items.push(getItem(item.title,item.id, item.component, () => h(AuditOutlined), childrens));
				// 	break;
				default:
					break;
			}
		} else {
			switch (item.menuName) {
				case "HomePage":
					items.push(getItem(item.title, item.id, item.component, () => h(UsergroupAddOutlined)));
					break;
				case "projectData":
					items.push(getItem(item.title, item.id, item.component, () => h(FileProtectOutlined)));
					break;
				case "personData":
					items.push(getItem(item.title, item.id, item.component, () => h(UserOutlined)));
					break;
				case "message":
					items.push(getItem(item.title, item.id, item.component, () => h(MessageOutlined)));
					break;
        case "record":
					items.push(getItem(item.title, item.id, item.component, () => h(VideoCameraOutlined)));
					break;
				case "ServiceMarket":
					items.push(getItem(item.title, item.id, item.component, () => h(SketchOutlined)));
					break;
				default:
					break;
			}
		}
	});
	getInit(route);
});
watch(route, (val) => {
	getInit(val);
});
const getInit = ($data) => {
	let _index = -1,
		_path = $data.path;
	/* 特殊处理：二级页面。
	 * 二级页面来源：view/components/breadcrumb.vue
	 */
	console.log("侧边栏：", $data);
	switch (_path) {
		case "/merchantManagement/roleManagementDetail":
			_path = "/merchantManagement/roleManagement";
			break;
		case "/merchantManagement/billDetail":
			_path = "/merchantManagement/mineBill";
			break;
		case "/merchantManagement/shareJobDetail":
			if ($data.query.form == "joblist") {
				_path = "/merchantManagement/jobList";
			} else {
				_path = "/merchantManagement/shareJob";
			}
			break;
		case "/merchantManagement/jobDetail":
			_path = "/merchantManagement/jobList";
			break;
		case "/merchantManagement/recordJob":
			_path = "/merchantManagement/jobList";
			break;
		case "/merchantManagement/jobForm":
			_path = "/merchantManagement/jobList";
			break;
		case "/merchantManagement/upstreamDetail":
			_path = "/merchantManagement/upstream";
			break;
		case "/merchantManagement/downstreamDetail":
			_path = "/merchantManagement/downstream";
			break;
		case "/merchantManagement/recruit":
			_path = "/merchantManagement/miniProgramList";
			break;
		default:
			break;
	}
	/* 侧边栏存在页面处理 */
	items.forEach((item, index) => {
		if (item.children) {
			// 多级
			item.children.forEach((itm, inx) => {
				if (itm.key == _path + ".vue") {
					_index = index + "-" + inx;
				}
			});
		} else {
			// 一级
			if (item.key == _path + ".vue") {
				_index = index;
			}
		}
	});
	// 匹配
	if (_index > -1 || _index) {
		if (typeof _index == "number") {
			// 一级
			state.selectedKeys = [_path + ".vue"];
			state.openKeys = [_path + ".vue"];
		}
		if (typeof _index == "string") {
			// 多级
			let _father = 0,
				_son = 0;
			_father = Number(_index.split("-")[0]);
			_son = Number(_index.split("-")[1]);
			if (items[_father].children) {
				state.selectedKeys = [items[_father].children[_son].key];
				state.openKeys = ["sub_menu_" + _father + "_$$_not_set_key"];
			}
		}
	}
};

const state = reactive({
	collapsed: false,
	rootSubmenuKeys: [],
	openKeys: [],
	selectedKeys: [],
});
const onOpenClick = (openKeys) => {
	router.push({ path: openKeys.key.slice(0, -4) });
	state.openKeys = [openKeys.keyPath[0]];
	console.log([openKeys.keyPath[0]]);
};

const goHome = () => {
	router.push("/merchantManagement/homePage");
};

const toggleCollapsed = () => {
	state.collapsed = !state.collapsed;
	storeJS.$state.layoutData.isToggle = state.collapsed;
};
</script>

<style lang="less" scoped>
.anticon:before {
	display: block !important;
}
.p-layout-aside {
	height: 100vh;
	border-right: 1px solid #eee;
	.m-logo {
		border-bottom: 1px solid #eee;
		height: 56px;
		.logo-box {
			.img {
				width: 30px;
				height: auto;
			}
		}
	}
	.m-menu {
		max-height: calc(100vh - 104px);
		overflow-y: auto;
	}
	.m-toggle {
		padding: 2px;
		.btn {
			width: 58px;
			height: calc(100% - 0px);
			padding-left: 16px;
			padding-right: 16px;
			color: #333;
			border-radius: 8px;
			margin-left: 2px;
			i,
			svg {
				font-size: 18px;
			}
			&:hover {
				color: #1677ff;
				background-color: rgba(0, 0, 0, 0.06);
			}
		}
	}
}
/deep/ .ant-menu-light.ant-menu-root.ant-menu-inline {
	border-inline-end: 1px solid transparent;
}
</style>