feat:再次点击当前左侧菜单刷新 & panel下拉搜索

This commit is contained in:
wangwenrui
2020-09-25 17:08:12 +08:00
parent f08619a66c
commit ff7cb3011a
2 changed files with 35 additions and 8 deletions

View File

@@ -136,7 +136,7 @@
<div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line': isShrink, 'nz-icon nz-icon-push-pin-fill': !isShrink}" :style="{color : !isShrink ? '#EE9D3F' : ''}"></i></div> <div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line': isShrink, 'nz-icon nz-icon-push-pin-fill': !isShrink}" :style="{color : !isShrink ? '#EE9D3F' : ''}"></i></div>
</div> </div>
</div><div class="content-right right-slot" :class="{'right-slot-open': isShrink}"> </div><div class="content-right right-slot" :class="{'right-slot-open': isShrink}">
<router-view/> <router-view v-if="isRouterAlive"/>
</div> </div>
<transition name="right-box"> <transition name="right-box">
@@ -187,6 +187,7 @@
tagCheckMap:{}, tagCheckMap:{},
lastCheckSize:0, lastCheckSize:0,
assetPingSwitch:true, assetPingSwitch:true,
isRouterAlive: true
} }
}, },
computed: { computed: {
@@ -619,15 +620,19 @@
} }
}, },
jumpTo(route) { jumpTo(route) {
/*bus.$emit("menu-change", route); if(route == this.route){
localStorage.setItem('nz-parent-menu', this.parentMenu); this.reload();
localStorage.setItem('nz-menu-change', route);*/ }
this.$router.push({ this.$router.push({
path: route, path: route,
query: { query: {
t: +new Date() t: +new Date()
} }
}); });
},
reload () {
this.isRouterAlive = false
this.$nextTick(() => (this.isRouterAlive = true))
} }
}, },
} }

View File

@@ -6,13 +6,19 @@
</div> </div>
<template v-else> <template v-else>
<div class="top-tool-main-left"> <div class="top-tool-main-left">
<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown> <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown >
<el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="padding-right: 5px"> <el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="padding-right: 5px">
<el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col> <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
<el-col :span="3" style="padding-left:0px !important;"><i class="nz-icon nz-icon-arrow-down"></i></el-col> <el-col :span="3" style="padding-left:0px !important;"><i class="nz-icon nz-icon-arrow-down"></i></el-col>
</el-row> </el-row>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown"> <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item> <!--<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>-->
<el-dropdown-item >
<el-row class="panel-list-width" :gutter="10" >
<el-col :span="21"><el-input size="mini" v-model="filterPanel" @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable :placeholder="$t('overall.search')"></el-input></el-col>
<el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd"><i class="nz-icon nz-icon-plus"></i></span></el-col>
</el-row>
</el-dropdown-item>
<draggable v-model="panelData" @start="start" @end="end" :move="move" :key <draggable v-model="panelData" @start="start" @end="end" :move="move" :key
:scroll-sensitivity="150" :scroll-sensitivity="150"
:options="{ :options="{
@@ -27,7 +33,7 @@
animation:150, animation:150,
handle:'.panelContent', handle:'.panelContent',
}" > }" >
<el-dropdown-item v-for="item in panelData" :key="item.id+1" class="panel-title-li" <el-dropdown-item v-for="item in showPanelList" :key="item.id+1" class="panel-title-li"
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item"> :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
<!--{{item.name}}--> <!--{{item.name}}-->
<el-row :gutter="10" class="panel-list-width" > <el-row :gutter="10" class="panel-list-width" >
@@ -164,6 +170,8 @@
searchName: '' searchName: ''
}, },
panelId: 0, panelId: 0,
filterPanel:'',
showPanelList:[],
//---图表相关参数--end //---图表相关参数--end
} }
}, },
@@ -186,7 +194,6 @@
//面板相关操作 //面板相关操作
panelChange(val) { panelChange(val) {
if (!val) { if (!val) {
this.toAdd();
return false; return false;
} }
this.filter.searchName=''; this.filter.searchName='';
@@ -375,6 +382,7 @@
this.$get('panel').then(response => { this.$get('panel').then(response => {
if (response.code === 200) { if (response.code === 200) {
this.panelData = response.data.list; this.panelData = response.data.list;
this.showPanelList = this.panelData;
for (let i = 0; i < this.panelData.length; i++) { for (let i = 0; i < this.panelData.length; i++) {
if (this.panelData[i].id == this.showPanel.id) { if (this.panelData[i].id == this.showPanel.id) {
this.showPanel.name = this.panelData[i].name; this.showPanel.name = this.panelData[i].name;
@@ -388,6 +396,7 @@
this.$get('panel?type=dashboard').then(response => { this.$get('panel?type=dashboard').then(response => {
if (response.code === 200) { if (response.code === 200) {
this.panelData = response.data.list; this.panelData = response.data.list;
this.showPanelList = this.panelData;
this.dataTotalListBak=[...response.data.list] this.dataTotalListBak=[...response.data.list]
let isInitData = false; let isInitData = false;
if (response.data.list.length > 0) { if (response.data.list.length > 0) {
@@ -652,6 +661,18 @@
panelContent.style.background = '#d8dce1'; panelContent.style.background = '#d8dce1';
}, },
filterPanelFocus:function(e){
e.stopPropagation();
},
filterPanelFunc:function(){
let $self=this;
if($self.filterPanel&&$self.filterPanel.trim() != ''){
this.showPanelList=this.panelData.filter(item=>item.name.toLowerCase().indexOf($self.filterPanel.toLowerCase()) != -1)
}else{
this.showPanelList = this.panelData;
}
}
}, },
created() { created() {
this.getTableData(); this.getTableData();
@@ -686,6 +707,7 @@
.panel-list-width { .panel-list-width {
width:240px; width:240px;
overflow: hidden;
} }
.panel-dropdown-title { .panel-dropdown-title {