push
This commit is contained in:
xuziqiang
244
lib/paas/view/system/layout/start-menu.vue
Normal file
244
lib/paas/view/system/layout/start-menu.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<!-- @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 }"></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>
|
||||
Reference in New Issue
Block a user