add menu search
This commit is contained in:
sakuya
parent
054da924e7
commit
ba6f1e64c8
|
|
@ -0,0 +1,139 @@
|
||||||
|
<template>
|
||||||
|
<div class="sc-search">
|
||||||
|
<el-input ref="input" v-model="input" placeholder="搜索" size="large" clearable prefix-icon="el-icon-search" :trigger-on-focus="false" @input="inputChange"/>
|
||||||
|
<div class="sc-search-history" v-if="history.length>0">
|
||||||
|
<el-tag closable effect="dark" type="info" v-for="(item, index) in history" :key="item" @click="historyClick(item)" @close="historyClose(index)">{{item}}</el-tag>
|
||||||
|
</div>
|
||||||
|
<div class="sc-search-result">
|
||||||
|
<div class="sc-search-no-result" v-if="result.length<=0">暂无搜索结果</div>
|
||||||
|
<ul v-else>
|
||||||
|
<el-scrollbar max-height="366px">
|
||||||
|
<li v-for="item in result" :key="item.path" @click="to(item)">
|
||||||
|
<el-icon><component :is="item.icon || 'el-icon-menu'" /></el-icon>
|
||||||
|
<span class="title">{{ item.breadcrumb }}</span>
|
||||||
|
</li>
|
||||||
|
</el-scrollbar>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
input: "",
|
||||||
|
menu: [],
|
||||||
|
result: [],
|
||||||
|
history: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
var searchHistory = this.$TOOL.data.get("SEARCH_HISTORY") || []
|
||||||
|
this.history = searchHistory
|
||||||
|
var menuTree = this.$TOOL.data.get("MENU")
|
||||||
|
this.filterMenu(menuTree)
|
||||||
|
this.$refs.input.focus()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
inputChange(value){
|
||||||
|
if(value){
|
||||||
|
this.result = this.menuFilter(value)
|
||||||
|
}else{
|
||||||
|
this.result = []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filterMenu(map){
|
||||||
|
map.forEach(item => {
|
||||||
|
if(item.meta.hidden || item.meta.type=="button"){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if(item.meta.type=='iframe'){
|
||||||
|
item.path = `/i/${item.name}`
|
||||||
|
}
|
||||||
|
if(item.children&&item.children.length > 0){
|
||||||
|
this.filterMenu(item.children)
|
||||||
|
}else{
|
||||||
|
this.menu.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
menuFilter(queryString){
|
||||||
|
var res = []
|
||||||
|
//过滤菜单树
|
||||||
|
var filterMenu = this.menu.filter((item) => {
|
||||||
|
if(item.meta.title.indexOf(queryString.toLowerCase()) >= 0){
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
if(item.name.indexOf(queryString.toLowerCase()) >= 0){
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//匹配系统路由
|
||||||
|
var router = this.$router.getRoutes()
|
||||||
|
var filterRouter= filterMenu.map((m) => {
|
||||||
|
if(m.meta.type == "link"){
|
||||||
|
return router.find(r => r.path == '/'+m.path)
|
||||||
|
}else{
|
||||||
|
return router.find(r => r.path == m.path)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//重组对象
|
||||||
|
filterRouter.forEach(item => {
|
||||||
|
res.push({
|
||||||
|
name: item.name,
|
||||||
|
type: item.meta.type,
|
||||||
|
path: item.meta.type=="link"?item.path.slice(1):item.path,
|
||||||
|
icon: item.meta.icon,
|
||||||
|
title: item.meta.title,
|
||||||
|
breadcrumb: item.meta.breadcrumb.map(v => v.meta.title).join(' - ')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
return res
|
||||||
|
},
|
||||||
|
to(item){
|
||||||
|
if(!this.history.includes(this.input)){
|
||||||
|
this.history.push(this.input)
|
||||||
|
this.$TOOL.data.set("SEARCH_HISTORY", this.history)
|
||||||
|
}
|
||||||
|
if(item.type=="link"){
|
||||||
|
setTimeout(()=>{
|
||||||
|
let a = document.createElement("a")
|
||||||
|
a.style = "display: none"
|
||||||
|
a.target = "_blank"
|
||||||
|
a.href = item.path
|
||||||
|
document.body.appendChild(a)
|
||||||
|
a.click()
|
||||||
|
document.body.removeChild(a)
|
||||||
|
}, 10);
|
||||||
|
}else{
|
||||||
|
this.$router.push({path: item.path})
|
||||||
|
}
|
||||||
|
this.$emit('success', true)
|
||||||
|
},
|
||||||
|
historyClick(text){
|
||||||
|
this.input = text
|
||||||
|
this.inputChange(text)
|
||||||
|
},
|
||||||
|
historyClose(index){
|
||||||
|
this.history.splice(index, 1);
|
||||||
|
if(this.history.length <= 0){
|
||||||
|
this.$TOOL.data.remove("SEARCH_HISTORY")
|
||||||
|
}else{
|
||||||
|
this.$TOOL.data.set("SEARCH_HISTORY", this.history)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sc-search {}
|
||||||
|
.sc-search-no-result {text-align: center;margin: 40px 0;color: #999;}
|
||||||
|
.sc-search-history {margin-top: 10px;}
|
||||||
|
.sc-search-history .el-tag {cursor: pointer;}
|
||||||
|
.sc-search-result {margin-top: 15px;}
|
||||||
|
.sc-search-result li {height:56px;padding:0 15px;background: var(--el-bg-color-overlay);border: 1px solid var(--el-border-color-light);list-style:none;border-radius: 4px;margin-bottom: 5px;font-size: 14px;display: flex;align-items: center;cursor: pointer;}
|
||||||
|
.sc-search-result li i {font-size: 20px;margin-right: 15px;}
|
||||||
|
.sc-search-result li:hover {background: var(--el-color-primary);color: #fff;border-color: var(--el-color-primary);}
|
||||||
|
</style>
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="user-bar">
|
<div class="user-bar">
|
||||||
|
<div class="panel-item hidden-sm-and-down" @click="search">
|
||||||
|
<el-icon><el-icon-search /></el-icon>
|
||||||
|
</div>
|
||||||
<div class="screen panel-item hidden-sm-and-down" @click="screen">
|
<div class="screen panel-item hidden-sm-and-down" @click="screen">
|
||||||
<el-icon><el-icon-full-screen /></el-icon>
|
<el-icon><el-icon-full-screen /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -54,14 +57,25 @@
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<el-dialog v-model="searchVisible" :width="700" title="搜索" custom-class="drawerBG" center destroy-on-close>
|
||||||
|
<search @success="searchVisible=false"></search>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import search from './search.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
search
|
||||||
|
},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
userName: "",
|
userName: "",
|
||||||
userNameF: "",
|
userNameF: "",
|
||||||
|
searchVisible: false,
|
||||||
msg: false,
|
msg: false,
|
||||||
msgList: [
|
msgList: [
|
||||||
{
|
{
|
||||||
|
|
@ -147,6 +161,10 @@
|
||||||
//标记已读
|
//标记已读
|
||||||
markRead(){
|
markRead(){
|
||||||
this.msgList = []
|
this.msgList = []
|
||||||
|
},
|
||||||
|
//搜索
|
||||||
|
search(){
|
||||||
|
this.searchVisible = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue