|
|
@@ -0,0 +1,158 @@
|
|
|
+<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>
|
LiuHao