192 lines
4.0 KiB
Vue
192 lines
4.0 KiB
Vue
<template>
|
|
<div class="search">
|
|
<el-popover
|
|
v-model="expand"
|
|
placement="bottom"
|
|
trigger="click"
|
|
:width="370"
|
|
:offset="5"
|
|
:show-arrow="false"
|
|
@show="onToggle(true)"
|
|
@hide="onToggle(false)"
|
|
>
|
|
<template #reference>
|
|
<div class="search-head">
|
|
<div v-show="!expand" class="search-all-site" @click="onAllSiteClick">
|
|
<span>{{ filterText }}</span>
|
|
</div>
|
|
<el-input
|
|
v-show="expand"
|
|
ref="searchInputRef"
|
|
v-model="filterText"
|
|
:placeholder="$t('dataEnquiry.qsrzdmc')"
|
|
@input="onSearchInput"
|
|
@click.stop="false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<el-tree
|
|
ref="treeRef"
|
|
class="search-tree"
|
|
:data="siteList"
|
|
:props="{
|
|
value: 'id',
|
|
label: 'label',
|
|
children: 'children',
|
|
class: getCustomProps,
|
|
}"
|
|
accordion
|
|
node-key="id"
|
|
highlight-current
|
|
:filter-node-method="filterNode"
|
|
@node-click="onNodeClick"
|
|
>
|
|
<template #default="{ node, data }">
|
|
<div
|
|
style="
|
|
height: 26px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
"
|
|
>
|
|
<span
|
|
v-if="data.iconType === 'folder'"
|
|
class="search-icon"
|
|
></span>
|
|
<span v-else class="search-dot"></span>
|
|
<div>{{ node.label }}</div>
|
|
</div>
|
|
</template>
|
|
</el-tree>
|
|
</template>
|
|
</el-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { throttle } from 'lodash';
|
|
|
|
export default {
|
|
name: 'SiteSearch',
|
|
props: {
|
|
siteList: {
|
|
type: Array,
|
|
require: true,
|
|
default: () => [],
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
filterText: 'all sites',
|
|
expand: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.onSearchInput = throttle(this.onSearchInput, 400);
|
|
},
|
|
methods: {
|
|
onAllSiteClick() {
|
|
this.onToggle(!this.expand);
|
|
this.$refs.searchInputRef.focus();
|
|
},
|
|
onToggle(show) {
|
|
this.expand = show;
|
|
if (!this.expand) {
|
|
!this.filterText && (this.filterText = 'all sites');
|
|
}
|
|
},
|
|
onNodeClick(x) {
|
|
if (x.type === 'device') {
|
|
this.filterText = x.label;
|
|
this.onToggle(false);
|
|
|
|
setTimeout(() => {
|
|
this.$emit('node-click', x);
|
|
});
|
|
}
|
|
},
|
|
onSearchInput(value) {
|
|
this.$refs.treeRef.filter(value);
|
|
},
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.label.includes(value);
|
|
},
|
|
getCustomProps(tree, node) {
|
|
if (tree.type) {
|
|
return 'search-item-' + tree.type;
|
|
}
|
|
return null;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search {
|
|
position: absolute;
|
|
left: 35px;
|
|
top: 35px;
|
|
cursor: default;
|
|
width: 370px;
|
|
max-height: 100px;
|
|
z-index: 999;
|
|
|
|
.search-tree {
|
|
width: 370px;
|
|
margin-top: 5px;
|
|
background: #fff;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.search-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
background-image: url('../../../../assets/folder.png');
|
|
background-size: contain;
|
|
margin: 2px;
|
|
}
|
|
.search-dot {
|
|
height: 18px;
|
|
margin: 2px;
|
|
width: 7px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&::after {
|
|
content: '';
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: #3281fd;
|
|
}
|
|
}
|
|
|
|
.search-all-site {
|
|
background: #fff;
|
|
height: 40px;
|
|
padding: 11px 15px;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.search-head {
|
|
box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
::v-deep .el-popper__arrow {
|
|
display: none !important;
|
|
}
|
|
</style>
|