gupiao-system-web/src/layout/components/topBar/search.vue

<template>
  <div class="layout-search-dialog">
    <el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false">
      <template #footer>
        <el-autocomplete
          v-model="state.menuQuery"
          :fetch-suggestions="menuSearch"
          placeholder="搜索"
          ref="layoutMenuAutocompleteRef"
          @select="onHandleSelect"
          :fit-input-width="true"
        >
          <template #prefix>
            <svg-icon class-name="search-icon" icon-class="search" />
          </template>
          <template #default="{ item }">
            <div>
              <svg-icon :icon-class="item.icon" class="mr5" />
              {{ item.title }}
            </div>
          </template>
        </el-autocomplete>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="layoutBreadcrumbSearch">
import { getNormalPath } from '@/utils/ruoyi';
import { isHttp } from '@/utils/validate';
import usePermissionStore from '@/store/modules/permission';
import { RouteOption } from 'vue-router';
type Router = Array<{
	path: string;
	icon: string;
	title: string[];
}>
type SearchState<T = any> = {
	isShowSearch: boolean;
	menuQuery: string;
	menuList: T[];
};
// 定义变量内容
const layoutMenuAutocompleteRef = ref();
const router = useRouter();
const routes = computed(() => usePermissionStore().routes);
const state = reactive<SearchState>({
	isShowSearch: false,
	menuQuery: '',
	menuList: [],
});

// 搜索弹窗打开
const openSearch = () => {
	state.menuQuery = '';
	state.isShowSearch = true;
	state.menuList = generateRoutes(routes.value);
	nextTick(() => {
		setTimeout(() => {
			layoutMenuAutocompleteRef.value.focus();
		});
	});
};
// 搜索弹窗关闭
const closeSearch = () => {
	state.isShowSearch = false;
};
// 菜单搜索数据过滤
const menuSearch = (queryString: string, cb: Function) => {
	let options = state.menuList.filter((item) => {
		return item.title.indexOf(queryString) > -1;
	});
	cb(options);
};

// Filter out the routes that can be displayed in the sidebar
// And generate the internationalized title
const generateRoutes = (routes: RouteOption[], basePath = '', prefixTitle: string[] = []) => {
	let res: Router = []
	routes.forEach(r => {
        // skip hidden router
		if (!r.hidden) {
			const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
				const data: any = {
					path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
					icon: r.meta?.icon,
					title: [...prefixTitle]
				}
				if (r.meta && r.meta.title) {
					data.title = [...data.title, r.meta.title];
					if (r.redirect !== 'noRedirect') {
						// only push the routes with title
						// special case: need to exclude parent router without redirect
            res.push(data);
					}
				}
				// recursive child routes
				if (r.children) {
						const tempRoutes = generateRoutes(r.children, data.path, data.title);
						if (tempRoutes.length >= 1) {
								res = [...res, ...tempRoutes];
						}
				}
		}
	})
	res.forEach((item: any) => {
		if (item.title instanceof Array) {
			item.title = item.title.join('/');
		}
	});
	return res;
}
// 当前菜单选中时
const onHandleSelect = (val: any) => {
	const paths = val.path;
	if (isHttp(paths)) {
		// http(s):// 路径新窗口打开
		const pindex = paths.indexOf("http");
		window.open(paths.substring(pindex, paths.length), "_blank");
	} else {
		router.push(paths);
	}
	state.menuQuery = ''
	closeSearch();

};

// 暴露变量
defineExpose({
	openSearch
});
</script>

<style scoped lang="scss">
.layout-search-dialog {
	position: relative;
	:deep(.el-dialog) {
		.el-dialog__header,
		.el-dialog__body {
			display: none;
		}
		.el-dialog__footer {
			width: 100%;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -53vh;
		}
	}
	:deep(.el-autocomplete) {
		width: 560px;
		position: absolute;
		top: 150px;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>