You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

244 lines
6.4 KiB

<!-- @format -->
<template>
<a class="start-menu-link" @click="showMenu()">
产品与服务
<DownOutlined class="nav-item-icon" />
</a>
<div class="start-menu">
<a-drawer
class="start-menu-box"
placement="top"
:closable="false"
:visible="IfshowMenu"
:zIndex="90"
@close="showMenu">
<div class="menu-search-block">
<div class="search-block">
<a-input-search
v-model:value="searchInput"
placeholder="通过名称/关键字查找产品(例如:中间件、告警管理等)"
@search="onSearchMenu"
class="search-input" />
</div>
<div class="search-Tip" v-if="showTip">
<p class="successTip" v-if="isSuccess == 1"
>以下是与"<span class="search-key">{{ searchInput }}</span
>"相关的产品与服务:</p
>
<p class="failTip" v-if="isSuccess == 0">
未找到与"<span class="search-key">{{ searchInput }}</span
>"相关的产品与服务。
</p>
</div>
<!--改高度,滚动条 -->
<div class="menu-box">
<template v-for="(catalog, index) in catalogs" :key="index">
<div class="menu-block" v-if="catalog.items.length > 0">
<h5 class="menu-block-title h5">{{ catalog.label }}</h5>
<ul class="menu-block-container">
<li
class="menu-block-item"
v-for="(item, ind) in catalog.items"
:key="ind"
@click="onDockCatalogItem(item)">
<i class="iconfont h3 item-icon" v-html="item.icon"></i>
<span>{{ item.label }}</span>
<i class="iconfont tip-icon" :class="{ active: item.dock }">&#xe61f;</i>
</li>
</ul>
</div>
</template>
</div>
</div>
</a-drawer>
</div>
</template>
<script lang="ts">
import { defineComponent, inject } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
import { CatalogConfigService, CatalogItem } from '/nerv-lib/paas/store/modules/catalog-config';
import { authorizationService } from '/nerv-lib/paas/store/modules/authorization-service';
import { cloneDeep } from 'lodash-es';
// import { useRouter } from 'vue-router';
// import { http } from '/nerv-lib/util/http';
// import { message } from 'ant-design-vue';
// import Cookies from 'js-cookie';
export default defineComponent({
name: 'NsStartMenu',
components: { DownOutlined },
props: {},
setup: () => {
//提供provide
const selecDocks = inject('selecDocks');
return {
selecDocks,
};
},
data(): {
IfshowMenu: boolean;
showTip: boolean;
searchInput: any;
isSuccess: number;
catalogsTemp: Array<any>;
catalogs: Array<any>;
} {
return {
IfshowMenu: false,
showTip: false,
searchInput: '',
isSuccess: 0,
catalogsTemp: [],
catalogs: [],
};
},
mounted() {
const catalogConfigService = CatalogConfigService();
const authService = authorizationService();
catalogConfigService.$subscribe((_mutation, state) => {
const { data } = state;
this.catalogs = cloneDeep(data);
if (!data) return;
this.catalogs.forEach((cate: any) => {
if (cate.items) {
cate.items = cate.items.filter((m1: any) => {
if (m1['splitMenuModule']) {
return authService.exists(m1['splitMenuModule'], m1['name']);
} else if (m1['splitModule']) {
return false;
} else {
return authService.exists(m1['name']);
}
});
}
});
this.catalogsTemp = this.catalogs;
});
},
methods: {
showMenu() {
this.IfshowMenu = !this.IfshowMenu;
},
onSearchMenu() {
let catalogs: any[] = [];
let searchStr = '';
searchStr = this.searchInput;
this.catalogs = JSON.parse(JSON.stringify(this.catalogsTemp));
if (searchStr == '') {
this.showTip = false;
return;
}
let reg = new RegExp(searchStr, 'i');
this.showTip = true;
this.catalogs.forEach((it: any) => {
if (reg.test(it.label)) {
catalogs.push(it);
}
if (!reg.test(it.label)) {
let items: any[] = [];
it.items.forEach((subIt: any) => {
if (reg.test(subIt.label)) {
items.push(subIt);
}
});
if (items.length != 0) {
let catalogItem: any = {};
catalogItem['name'] = it.name;
catalogItem['label'] = it.label;
catalogItem['items'] = items;
catalogs.push(catalogItem);
}
}
});
this.catalogs = catalogs;
if (catalogs.length == 0) {
this.isSuccess = 0;
} else {
this.isSuccess = 1;
}
},
onDockCatalogItem(item: CatalogItem): void {
item.dock = !item.dock;
(this.selecDocks as Function)(item);
// this.eventDockCatalogItem.emit(item);
},
},
});
</script>
<style lang="less">
.start-menu-link {
color: @layout-header-color;
&:hover {
color: @layout-header-color;
}
}
.start-menu {
.title {
margin-left: 16px;
margin-bottom: 0px;
cursor: pointer;
user-select: none;
span {
font-size: 12px;
}
.doorway {
margin: 0 8px;
color: #808d96 !important;
width: 12px !important;
height: 12px !important;
}
.active {
transform: rotateX(180deg);
}
}
.menu-tip {
position: absolute;
z-index: 99;
// background-color: #fff;
width: 100%;
//overflow-y: auto;
height: 722px;
left: 48px;
width: 100%;
.mask {
// position: absolute;
// left: 0px;
// right: 0px;
// top: 49px;
background: rgba(0, 0, 0, 0.5);
height: 2000px;
width: 40%;
z-index: 98;
}
}
}
ul,
li {
list-style: none;
padding: 0;
}
.nav-item-icon {
font-size: 10px;
}
.start-menu-box {
:deep(.ant-drawer-content-wrapper) {
width: 70%;
}
}
</style>