gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改serachInput 选择多个时 下拉框错位的问题

Browse Source
This commit is contained in:
zhangyu
2021-03-23 15:47:18 +08:00
parent b2d22ce9ab
commit 5fb0d4d844
1 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -39,7 +39,7 @@
</div> </div>
<div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input"> <div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input">
<input type="text" autocomplete="off" id="sreach_input" v-model="input_sreach" :readonly="val.readonly" @keyup="enter(val, $event)" @click="stop_click"> <input type="text" autocomplete="off" id="sreach_input" v-model="input_sreach" :readonly="val.readonly" @keyup="enter(val, $event)" @click="stop_click">
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'select'"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'select'">
<el-scrollbar v-if="selectInfoList[val.label].length > 8" class="el-scrollbar-small" style="height: 240px;"> <el-scrollbar v-if="selectInfoList[val.label].length > 8" class="el-scrollbar-small" style="height: 240px;">
<ul> <ul>
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li> <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
@@ -49,7 +49,7 @@
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li> <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
</ul> </ul>
</div> </div>
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'selectString'"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'selectString'">
<el-scrollbar v-if="selectInfoList[val.label].length > 8" class="el-scrollbar-small" style="height: 240px;"> <el-scrollbar v-if="selectInfoList[val.label].length > 8" class="el-scrollbar-small" style="height: 240px;">
<ul> <ul>
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li> <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
@@ -59,7 +59,7 @@
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li> <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
</ul> </ul>
</div> </div>
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'dc'"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'dc'">
<el-scrollbar v-if="dcSelect.length > 8" class="el-scrollbar-small" style="height: 240px;"> <el-scrollbar v-if="dcSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
<ul> <ul>
<li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li> <li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
@@ -69,7 +69,7 @@
<li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li> <li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
</ul> </ul>
</div> </div>
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'asset'"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left" v-if="val.type == 'asset'">
<el-scrollbar v-if="assetSelect.length > 8" class="el-scrollbar-small" style="height: 240px;"> <el-scrollbar v-if="assetSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
<ul> <ul>
<li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li> <li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li>
@@ -79,7 +79,7 @@
<li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li> <li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li>
</ul> </ul>
</div> </div>
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'project'"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'project'">
<el-scrollbar v-if="projectSelect.length > 8" class="el-scrollbar-small" style="height: 240px;"> <el-scrollbar v-if="projectSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
<ul> <ul>
<li v-for="(item,key) in projectSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li> <li v-for="(item,key) in projectSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
@@ -89,7 +89,7 @@
<li v-for="(item,key) in projectSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li> <li v-for="(item,key) in projectSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
</ul> </ul>
</div> </div>
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'module'"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'module'">
<el-scrollbar v-if="moduleSelect.length > 8" class="el-scrollbar-small" style="height: 240px;"> <el-scrollbar v-if="moduleSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
<ul> <ul>
<li v-for="(item,key) in moduleSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li> <li v-for="(item,key) in moduleSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
@@ -100,37 +100,37 @@
</ul> </ul>
</div> </div>
<!-- 新增日志模块action下拉选择 --> <!-- 新增日志模块action下拉选择 -->
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'selectAction'"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'selectAction'">
<ul> <ul>
<li v-for="(item,key) in actionSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.value,$event)">{{item.value}}</li> <li v-for="(item,key) in actionSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.value,$event)">{{item.value}}</li>
</ul> </ul>
</div> </div>
<!-- 新增protocol下拉选择 --> <!-- 新增protocol下拉选择 -->
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'selectType'"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'selectType'">
<ul> <ul>
<li v-for="(item,key) in schemaTypeSelect" :key="key" @click="tr_selectTypeInfo(item)">{{item.value}}</li> <li v-for="(item,key) in schemaTypeSelect" :key="key" @click="tr_selectTypeInfo(item)">{{item.value}}</li>
</ul> </ul>
</div> </div>
<!-- 新增protocol二层下拉 --> <!-- 新增protocol二层下拉 -->
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="TypeSelect.length!=0&&val.type == 'selectType'&&secondShow"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="TypeSelect.length!=0&&val.type == 'selectType'&&secondShow">
<ul> <ul>
<li v-for="(item,key) in TypeSelect" :key="key" @click="tr_selectProtocolInfo(item)">{{item.name}}</li> <li v-for="(item,key) in TypeSelect" :key="key" @click="tr_selectProtocolInfo(item)">{{item.name}}</li>
</ul> </ul>
</div> </div>
<!-- 时间计划--> <!-- 时间计划-->
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'select'&&val.id==5"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'select'&&val.id==5">
<ul> <ul>
<li v-for="(item, i) in schlist" :key="i" @click="selectSul(item.name)">{{item.name}}</li> <li v-for="(item, i) in schlist" :key="i" @click="selectSul(item.name)">{{item.name}}</li>
</ul> </ul>
</div> </div>
<!--endpoint 状态--> <!--endpoint 状态-->
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'state'&&val.id==33"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'state'&&val.id==33">
<ul> <ul>
<li v-for="(item,key) in selectInfoList['endpointState']" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li> <li v-for="(item,key) in selectInfoList['endpointState']" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
</ul> </ul>
</div> </div>
<!--alertMessage idc--> <!--alertMessage idc-->
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'idc'&&val.id==27"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'idc'&&val.id==27">
<el-scrollbar v-if="dcSelect.length > 8" class="el-scrollbar-small" style="height: 240px;"> <el-scrollbar v-if="dcSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
<ul> <ul>
<li v-for="(item,key) in dcSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li> <li v-for="(item,key) in dcSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
@@ -141,7 +141,7 @@
</ul> </ul>
</div> </div>
<!--exprTemp ganem--> <!--exprTemp ganem-->
<div class="select_info_list" :style="'top:' + selectDom.top" v-if="val.type == 'selectTemp'&&val.id==13"> <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'selectTemp'&&val.id==13">
<el-scrollbar v-if="gnameList.length > 8" class="el-scrollbar-small" style="height: 240px;"> <el-scrollbar v-if="gnameList.length > 8" class="el-scrollbar-small" style="height: 240px;">
<ul> <ul>
<li v-for="(item,key) in gnameList" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li> <li v-for="(item,key) in gnameList" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
@@ -174,7 +174,7 @@
<div v-show="clearSearchShow" class="clear-search" @click="clear_input"> <div v-show="clearSearchShow" class="clear-search" @click="clear_input">
<i class="nz-icon nz-icon-circle-close"></i> <i class="nz-icon nz-icon-circle-close"></i>
</div> </div>
<div :class="input_list?'input_list none':'input_list'" :style="'top:' + selectDom.top" @click="stop_click" id="input_list" v-if="!single || (single&&searchLabelList.length==searchMsg.searchLabelList.length)"> <div :class="input_list?'input_list none':'input_list'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " @click="stop_click" id="input_list" v-if="!single || (single&&searchLabelList.length==searchMsg.searchLabelList.length)">
<ul> <ul>
<li v-for="(val,ind) in searchLabelList" @click="select_name(val.name,ind,val.id,val.type,val.label,val.disabled,val.readonly,$event)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}"> <li v-for="(val,ind) in searchLabelList" @click="select_name(val.name,ind,val.id,val.type,val.label,val.disabled,val.readonly,$event)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}">
<span>{{val.name}}</span> <span>{{val.name}}</span>
@@ -198,7 +198,7 @@ export default {
name: 'index', name: 'index',
data () { data () {
return { return {
selectDom: { top: '', tempTop: '', show: true }, // 选择弹框的位置 selectDom: { top: '', left:'', tempTop: '', show: true }, // 选择弹框的位置
clearSearchShow: false, clearSearchShow: false,
select_conditionsName: '', select_conditionsName: '',
selectInfoList: searchSelectInfo, selectInfoList: searchSelectInfo,
@@ -1246,6 +1246,7 @@ export default {
} else { } else {
const position = inputListDom.getBoundingClientRect() const position = inputListDom.getBoundingClientRect()
this.selectDom.top = position.top + 36 + 'px' this.selectDom.top = position.top + 36 + 'px'
this.selectDom.left = position.left + 'px'
} }
}) })
} }