job-master/src/components/layout/header/aHeader.vue

<template>
	<a-row>
		<a-col :span="4" style="display: flex;align-items: center;">
			<menu-unfold-outlined v-if="collapsed" class="trigger" @click="onCollapsed" />
			<menu-fold-outlined v-else class="trigger" @click="onCollapsed" />
			<a-input-search v-model:value="routerValue" placeholder="请输入想进入的管理页面" @keyup.enter="onSearch"
				@search="onSearch" style="margin-left: 10px;" />
		</a-col>
		<a-col :span="20">
			<a-row type="flex" justify="end" :gutter="20">
				<a-col flex="200px">
					<div>{{time}}</div>
				</a-col>
				<a-col flex="50px">
					<a-avatar src="@/static/images/logo_1.jpg"></a-avatar>
				</a-col>
				<a-col flex="50px">
					<div>admin</div>
				</a-col>
				<a-col flex="16px">
					<LogoutOutlined @click="loginOut" />
				</a-col>
			</a-row>

		</a-col>
	</a-row>

</template>
<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue';
	import { store } from '@/store';
	import { router } from '@/router';
	import { MenuUnfoldOutlined, MenuFoldOutlined, LogoutOutlined } from '@ant-design/icons-vue';
	import { getTime } from '@/utils/timeHelper';
	import { useComputed } from '@/hooks/useComputed';
	import { useMenu } from '@/hooks/useMenu';
	let { menuList, onMenu, message } = useMenu();
	let routerValue : string = ref('');
	const time : string = ref('');
	const currentTime = () => {
		setInterval(() => {
			time.value = getTime().nowTime + " " + getTime().nowDate + " " + getTime().nowWeek;
		}, 500);
	};
	const collapsed = computed(() => {
		return store.state.collapsed
	})
	const onCollapsed = () => {
		store.commit('getCollapsed');
	}
	onMounted(() => {
		currentTime();
	});
	const loginOut = () => {
		sessionStorage.clear();
		window.location.reload();
		router.replace('/login');
	}
	const onSearch = (val) => {
		const result = menuList.value.some(item => deepCompareAndMarkChecked(item, val));
		if(result.result == 1) {
			onMenu(result.path)
		} else {
			message.warning('无此页面')
		}
	
	}



	const deepCompareAndMarkChecked = (item : Object, str : String) => {
		let data = {
			result: 0,
			path: ''
		};
		if (item.meta.title === str) {
			return data = {
				result: 1,
				path: item.path
			};
		}

		if (item.children && Array.isArray(item.children)) {
			for (const child of item.children) {
				const result = deepCompareAndMarkChecked(child, str);
				if (result === 1) {
					return data = {
						result: 1,
						path: obj.path
					};
				}
			}
		}

		return  data = {
			result: 0,
			path: ''
		};
	}
</script>

<style>
</style>