fix: ETA2.3.5搜索优化

src/components/searchMenu.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="search-menu">
+        <div class="search-result flex-align">
+            <div>共<span class="total-text">{{ total }}</span>条搜索结果</div>
+            <div @click="$emit('clearMenu')" class="clear-result flex-align">
+                清除内容
+                <img src="~@/assets/img/clear.png" alt="">
+            </div>
+        </div>
+        <div :style="{ 'height': 'calc(100vh - ' + boxHeight + 'px)' }" infinite-scroll-delay="500"
+            infinite-scroll-distance="100" v-infinite-scroll="searchLoad" class="search-list-box">
+            <div @click="chooseItem(item)" v-for="item in searchList" :key="item[showKey]"
+                :class="{ 'choose-active': item[showKey] == momentChoose }" class="search-list-item flex-align">
+                <div class="name-text"
+                    v-html="isEs ? currentLang == 'en' ? item[enName] : item[cnName] : $search.setHightLightText(currentLang == 'en' ? item[enName] : item[cnName], queryKey)"
+                    :class="{ 'choose-active-text': item[showKey] == momentChoose }"></div>
+                <div class="tips-text">
+                    <edbDetailPopover :info="item">
+                        <i slot="reference" class="el-icon-warning-outline"></i>
+                    </edbDetailPopover>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        boxHeight: {
+            type: Number,
+            default: 400
+        },
+        chooseKey: {
+            type: String,
+            default: ''
+        }
+    },
+    watch: {
+        chooseKey: {
+            handler(newval) {
+                this.momentChoose = newval
+            }
+        },
+        deep: true
+    },
+    data() {
+        return {
+            searchList: [],
+            momentChoose: '',
+            showKey: '',
+            cnName: '',
+            enName: '',
+            total: 0,
+            queryKey: '',
+            isEs: false
+        }
+    },
+    computed: {
+        currentLang() {
+            return this.$store.state.lang
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        searchLoad() {
+            this.$emit('searchLoad')
+        },
+        // list：列表数据 cnName：中文名 enName：英文名 key：玄宗字段 queryKey:搜索关键字 page:当前页码 isEs:是否es
+        showMenu(list, total, cnName, enName, showKey, queryKey, isEs = false) {
+            console.log(list, total, cnName, enName, showKey)
+            this.searchList = list
+            this.total = total
+            this.cnName = cnName
+            this.enName = enName
+            this.showKey = showKey
+            this.queryKey = queryKey
+            this.isEs = isEs
+        },
+        // 选择
+        chooseItem(item) {
+            this.momentChoose = item[this.showKey]
+            this.$emit('chooseSelectMenu', item)
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.search-menu {
+
+    .search-result {
+        font-family: PingFang SC;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        color: #999999;
+        justify-content: space-between;
+        margin-bottom: 20px;
+
+        .clear-result {
+            cursor: pointer;
+
+            img {
+                width: 16px;
+                height: 16px;
+                margin-left: 5px;
+            }
+        }
+
+        .total-text {
+            color: #333333;
+        }
+    }
+
+    .search-list-box {
+        overflow-y: auto;
+
+        .search-list-item {
+            justify-content: space-between;
+            cursor: pointer;
+            font-family: PingFang SC;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            color: #666666;
+            padding: 4px 10px;
+        }
+    }
+
+    .flex-align {
+        display: flex;
+        align-items: center;
+    }
+
+    .choose-active {
+        background: #ECF2FE !important;
+    }
+
+    .choose-active-text {
+        color: #0052D9 !important;
+    }
+
+    .name-text {
+        width: 90%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .tips-text {
+        margin-left: 12px;
+    }
+}
+</style>

src/mixins/search.js

@@ -1,5 +1,5 @@
-// 设置高亮
-function setHightLight(arr, keyword,key) {
+// 设置高亮1
+function setHightLight(arr, keyword, key) {
     if (arr) {
         let newArr = JSON.parse(JSON.stringify(arr))
         if (newArr && newArr.length > 0 && keyword) {
@@ -7,7 +7,7 @@ function setHightLight(arr, keyword,key) {
                 let reg = new RegExp(keyword, "g");
                 let replaceString = `<span style='color: #409EFF;'>${keyword.trim()}</span>`;
                 if (item[key].match(reg)) {
-                    item['high'+key] = item[key].replace(reg, replaceString);
+                    item['high' + key] = item[key].replace(reg, replaceString);
                     return item;
                 }
             });
@@ -21,6 +21,15 @@ function setHightLight(arr, keyword,key) {
     }
 }
 
+// 设置高亮2
+function setHightLightText(text, keyword) {
+    let reg = new RegExp(keyword, "g");
+    let replaceString = `<span style='color: #0052D9;'>${keyword.trim()}</span>`;
+    text = text.replace(reg, replaceString);
+    return text;
+}
+
 export default {
-    setHightLight
+    setHightLight,
+    setHightLightText
 }

src/utils/registryComponents.js

@@ -54,3 +54,7 @@ Vue.component('chartTypeSelect',chartTypeSelect)
 // 级联选择器多语言展示
 import cascader from '@/components/edb/cascader.vue';
 Vue.component('cascader',cascader)
+
+// 搜索目录
+import searchMenu from '@/components/searchMenu.vue';
+Vue.component('searchMenu',searchMenu)

src/views/classify_manage/classifyEnlistV2.vue

@@ -26,7 +26,7 @@
                 >
                     {{$t('ReportManage.CategoryList.add_category')}}
                 </el-button>
-                <el-input :placeholder="$t('ReportManage.CategoryList.category_name')" v-model="searchVal" style="max-width: 262px;" @change="getList" clearable>
+                <el-input :placeholder="$t('ReportManage.CategoryList.category_name')" v-model="searchVal" style="max-width: 262px;" @input="getList" clearable>
                     <i slot="prefix" class="el-input__icon el-icon-search"></i>
                 </el-input>
             </div>

src/views/classify_manage/classifylistV2.vue

@@ -27,7 +27,7 @@
                 >
                     {{$t('ReportManage.CategoryList.add_category')}}
                 </el-button>
-                <el-input :placeholder="$t('ReportManage.CategoryList.category_name')" v-model="searchVal" style="max-width: 262px;" @change="getList" clearable>
+                <el-input :placeholder="$t('ReportManage.CategoryList.category_name')" v-model="searchVal" style="max-width: 262px;" @input="getList" clearable>
                     <i slot="prefix" class="el-input__icon el-icon-search"></i>
                 </el-input>
             </div>

src/views/dataEntry_manage/databaseList.vue

@@ -38,168 +38,173 @@
 			<!-- <target-tree /> -->
 			<div class="main-left left" id="left" v-show="isMainLeftShow">
 				<div class="tree-cont">
-					<el-select
-						v-model="search_txt"
-						v-loadMore="searchLoad"
+					<el-autocomplete
+						@blur="blurMenu"
 						ref="searchRef"
-						:filterable="!search_txt"
-						remote
-						clearable
+						@keyup.enter.native="handleEnterSelect"
+						prefix-icon="el-icon-search"
+						v-model="search_txt"
+						:fetch-suggestions="searchHandle"
+						@clear="clearSearchHandle"
+						:trigger-on-focus="false"
 						:placeholder="$t('Edb.InputHolderAll.input_name_orid')"
 						style="width: 100%;margin-bottom:20px"
-						:remote-method="searchHandle"
-						@click.native="inputFocusHandle"
-						@keyup.enter.native="handleEnterSelect"
-					>
-						<i slot="prefix" class="el-input__icon el-icon-search"></i>
-						<el-option disabled>
-							<div>共检索到{{searchTotal}}张图表</div>
-						</el-option>
-						<el-option
-							v-for="item in searchOptions"
-							:key="item.EdbInfoId"
-							:label="currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
-							:value="item.EdbInfoId"
+						@select="handleSelectLeftSearchval"
+						popper-class="el-autocomplete-suggestion-data-entry"
+						clearable
 						>
-							<div>
-								<img 
-									:src="$icons.lock_ico2" 
-									width="18" 
-									height="18" 
-									style="vertical-align:middle" 
-									v-if="!item.HaveOperaAuth"
-								/>
-								<span v-html="current_search?currentLang==='en'?(item.highEdbNameEn||item.highEdbName):item.highEdbName:currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"></span>
+						<template slot-scope="scope">
+							<div v-if="scope.item.nodata" style="text-align: center">
+							<!-- 暂无数据 -->{{$t('Table.prompt_slogan')}}
 							</div>
-						</el-option>
-					</el-select>
-					<div style="padding-bottom:20px;padding-right:20px;display:flex;justify-content:space-between">
-						<span><!-- 目录 -->{{$t('EtaBasePage.tab_menu')}}</span>
-						<el-checkbox 
-							v-model="IsOnlyMe"
-							@change="onlyMeHandler"
-						><!-- 只看我的 -->{{$t('Edb.only_see_mine')}}</el-checkbox>
-					</div>
-					<div class="target_tree">
-					<el-tree
-						ref="menuTree"
-						:data="treeData"
-						node-key="UniqueCode"
-						:props="defaultProp"
-						:allow-drag="canDragHandle"
-						:allow-drop="canDropHandle"
-						:current-node-key="select_node"
-						:default-expanded-keys="defaultShowNodes"
-						:draggable="isEdbBtnShow('moveCatalog')"
-						:expand-on-click-node="false"
-						check-strictly
-						empty-text="暂无目录"
-						lazy
-						:load="getLazyTreeData"
-						@node-expand="handleNodeExpand"
-						@node-collapse="handleNodeCollapse"
-						@current-change="nodeChange"
-						@node-drop="dropOverHandle"
-						@node-drag-end="dropMouseLeave"
-						@node-drag-leave="dropMouseLeave"
-						@node-drag-enter="dropMouseOver"
-					>
-						<span
-							class="custom-tree-node"
-							slot-scope="{ node, data }"
+							<div v-else>
+								<div v-if="scope.item.index===0" class="total-text">共检索到{{searchTotal}}个指标</div>
+								<edbDetailPopover :info="scope.item">
+									<div slot="reference">
+										<img 
+											:src="$icons.lock_ico2" 
+											width="18" 
+											height="18" 
+											style="vertical-align:middle" 
+											v-if="!scope.item.HaveOperaAuth"
+										/>
+										<span v-html="$search.setHightLightText(currentLang==='en'?(scope.item.EdbNameEn||scope.item.EdbName):scope.item.EdbName,search_txt)"></span>
+									</div>
+								</edbDetailPopover>
+							</div>
+						</template>
+					</el-autocomplete>
+					<!-- :chooseKey="select_node" -->
+					<searchMenu  @searchLoad="searchMenuLoad" @chooseSelectMenu="chooseSelectMenu" @clearMenu="clearMenu" ref="searchMenuRef" v-if="showSearchMenu" />
+					<template v-else>
+						<div style="padding-bottom:20px;padding-right:20px;display:flex;justify-content:space-between">
+							<span><!-- 目录 -->{{$t('EtaBasePage.tab_menu')}}</span>
+							<el-checkbox 
+								v-model="IsOnlyMe"
+								@change="onlyMeHandler"
+							><!-- 只看我的 -->{{$t('Edb.only_see_mine')}}</el-checkbox>
+						</div>
+						<div class="target_tree">
+						<el-tree
+							ref="menuTree"
+							:data="treeData"
+							node-key="UniqueCode"
+							:props="defaultProp"
+							:allow-drag="canDragHandle"
+							:allow-drop="canDropHandle"
+							:current-node-key="select_node"
+							:default-expanded-keys="defaultShowNodes"
+							:draggable="isEdbBtnShow('moveCatalog')"
+							:expand-on-click-node="false"
+							check-strictly
+							empty-text="暂无目录"
+							lazy
+							:load="getLazyTreeData"
+							@node-expand="handleNodeExpand"
+							@node-collapse="handleNodeCollapse"
+							@current-change="nodeChange"
+							@node-drop="dropOverHandle"
+							@node-drag-end="dropMouseLeave"
+							@node-drag-leave="dropMouseLeave"
+							@node-drag-enter="dropMouseOver"
 						>
-							<el-input
-								ref="editVal"
-								style="width: 90px"
-								placeholder="请输入值"
-								class="label-input"
-								v-model="new_label"
-								v-if="data.isEdit&&isEdbBtnShow('editCatalog')"
-								@blur="changeValue(node, data)"
-							/>
-							<span 
-								@dblclick.stop="editNodeLabel(node, data)" 
-								v-else 
-								class="text_oneLine node_label" 
-								:style="`width:${select_node === data.UniqueCode?'60%':'auto'}`"
-								:id="`node${data.UniqueCode}`"
-							>
-								<img 
-									:src="$icons.lock_ico2" 
-									width="18" 
-									height="18" 
-									style="vertical-align:middle" 
-									v-if="!data.HaveOperaAuth&&data.EdbInfoId"
-								/>
-								<span>{{ currentLang==='en' ? (data.ClassifyNameEn||data.ClassifyName) : data.ClassifyName }}</span>
-							</span>
 							<span
-								style="display: flex; align-items: center"
-								v-if="select_node===data.UniqueCode&&data.HaveOperaAuth"
+								class="custom-tree-node"
+								slot-scope="{ node, data }"
 							>
-								<!-- <img
-									src="~@/assets/img/data_m/move_ico.png"
-									alt=""
-									style="width: 14px; height: 14px; margin-right: 8px"
-									v-if="data.Button.MoveButton&&isEdbBtnShow('moveCatalog')"
-								/> -->
-								<!-- 添加子项 -->
-								<img
-									src="~@/assets/img/set_m/add.png"
-									alt=""
-									style="width: 14px; height: 14px; margin-right: 8px"
-									@click.stop="addNode(node,data)"
-									v-if="data.Button.AddButton&&isEdbBtnShow('editCatalog')&&node.level<6"
-								/>
-								<!-- 编辑节点 如果是分类，判断data.Button.OpButton不变；如果是指标，不显示(ETA1.0.3) -->
-								<img
-									src="~@/assets/img/set_m/edit.png"
-									alt=""
-									style="width: 15px; height: 14px; margin-right: 8px"
-									@click.stop="editNode(node,data)"
-									v-if="!data.EdbCode&&(data.Button.OpButton)&&isEdbBtnShow('editCatalog')"
-								/>
-								<!-- 删除节点 如果是分类，判断data.Button.DeleteButton不变；如果是指标，不显示(ETA1.0.3) -->
-								<img
-									slot="reference"
-									src="~@/assets/img/set_m/del.png"
-									alt=""
-									style="width: 14px; height: 14px;"
-									@click.stop="removeNode(node,data)"
-									v-if="!data.EdbCode&&(data.Button.DeleteButton)&&isEdbBtnShow('deleteCatalog')"
+								<el-input
+									ref="editVal"
+									style="width: 90px"
+									placeholder="请输入值"
+									class="label-input"
+									v-model="new_label"
+									v-if="data.isEdit&&isEdbBtnShow('editCatalog')"
+									@blur="changeValue(node, data)"
 								/>
-								<!-- 查看计算指标 -->
-								<!-- <i class="el-icon-view" 
-									v-if="data.EdbType===2&&![58,59,67,68,74].includes(data.Source)&&isEdbBtnShow('checkCalcChart')" 
-									@click.stop="viewNode(node,data)"></i> -->
-								<!-- 查看关联图表 -->
-								<!-- <img 
-									v-if="data.Button.ShowChartRelation&&isEdbBtnShow('checkRelatedChart')" 
-									@click.stop="showAssociateChart=true,showAssociateComputeData=false"
-									src="~@/assets/img/icons/associate_chart.png" 
-									style="width: 14px; height: 14px;margin-left: 8px"
-									alt=""
-								/> -->
-								<!-- 查看关联指标 -->
-								<!-- <img 
-									v-if="data.Button.ShowEdbRelation&&isEdbBtnShow('checkRelatedEdb')" 
-									@click.stop="showAssociateComputeData=true,showAssociateChart=false"
-									src="~@/assets/img/icons/associate_data.png" 
-									style="width: 14px; height: 14px;margin-left: 8px"
-									alt=""
-								/> -->
+								<span 
+									@dblclick.stop="editNodeLabel(node, data)" 
+									v-else 
+									class="text_oneLine node_label" 
+									:style="`width:${select_node === data.UniqueCode?'60%':'auto'}`"
+									:id="`node${data.UniqueCode}`"
+								>
+									<img 
+										:src="$icons.lock_ico2" 
+										width="18" 
+										height="18" 
+										style="vertical-align:middle" 
+										v-if="!data.HaveOperaAuth&&data.EdbInfoId"
+									/>
+									<span>{{ currentLang==='en' ? (data.ClassifyNameEn||data.ClassifyName) : data.ClassifyName }}</span>
+								</span>
+								<span
+									style="display: flex; align-items: center"
+									v-if="select_node===data.UniqueCode&&data.HaveOperaAuth"
+								>
+									<!-- <img
+										src="~@/assets/img/data_m/move_ico.png"
+										alt=""
+										style="width: 14px; height: 14px; margin-right: 8px"
+										v-if="data.Button.MoveButton&&isEdbBtnShow('moveCatalog')"
+									/> -->
+									<!-- 添加子项 -->
+									<img
+										src="~@/assets/img/set_m/add.png"
+										alt=""
+										style="width: 14px; height: 14px; margin-right: 8px"
+										@click.stop="addNode(node,data)"
+										v-if="data.Button.AddButton&&isEdbBtnShow('editCatalog')&&node.level<6"
+									/>
+									<!-- 编辑节点 如果是分类，判断data.Button.OpButton不变；如果是指标，不显示(ETA1.0.3) -->
+									<img
+										src="~@/assets/img/set_m/edit.png"
+										alt=""
+										style="width: 15px; height: 14px; margin-right: 8px"
+										@click.stop="editNode(node,data)"
+										v-if="!data.EdbCode&&(data.Button.OpButton)&&isEdbBtnShow('editCatalog')"
+									/>
+									<!-- 删除节点 如果是分类，判断data.Button.DeleteButton不变；如果是指标，不显示(ETA1.0.3) -->
+									<img
+										slot="reference"
+										src="~@/assets/img/set_m/del.png"
+										alt=""
+										style="width: 14px; height: 14px;"
+										@click.stop="removeNode(node,data)"
+										v-if="!data.EdbCode&&(data.Button.DeleteButton)&&isEdbBtnShow('deleteCatalog')"
+									/>
+									<!-- 查看计算指标 -->
+									<!-- <i class="el-icon-view" 
+										v-if="data.EdbType===2&&![58,59,67,68,74].includes(data.Source)&&isEdbBtnShow('checkCalcChart')" 
+										@click.stop="viewNode(node,data)"></i> -->
+									<!-- 查看关联图表 -->
+									<!-- <img 
+										v-if="data.Button.ShowChartRelation&&isEdbBtnShow('checkRelatedChart')" 
+										@click.stop="showAssociateChart=true,showAssociateComputeData=false"
+										src="~@/assets/img/icons/associate_chart.png" 
+										style="width: 14px; height: 14px;margin-left: 8px"
+										alt=""
+									/> -->
+									<!-- 查看关联指标 -->
+									<!-- <img 
+										v-if="data.Button.ShowEdbRelation&&isEdbBtnShow('checkRelatedEdb')" 
+										@click.stop="showAssociateComputeData=true,showAssociateChart=false"
+										src="~@/assets/img/icons/associate_data.png" 
+										style="width: 14px; height: 14px;margin-left: 8px"
+										alt=""
+									/> -->
+								</span>
 							</span>
-						</span>
-					</el-tree>
-					</div>
-					<div class="noDepart" @click="addLevelOneHandle" v-if="CanOpClassify&&isEdbBtnShow('editCatalog')">
-						<img
-							src="~@/assets/img/set_m/add_ico.png"
-							alt=""
-							style="width: 16px; height: 16px; margin-right: 10px"
-						/>
-						<span>{{$t('EtaBasePage.add_first_menu_btn')}}</span>
-					</div>
+						</el-tree>
+						</div>
+						<div class="noDepart" @click="addLevelOneHandle" v-if="CanOpClassify&&isEdbBtnShow('editCatalog')">
+							<img
+								src="~@/assets/img/set_m/add_ico.png"
+								alt=""
+								style="width: 16px; height: 16px; margin-right: 10px"
+							/>
+							<span>{{$t('EtaBasePage.add_first_menu_btn')}}</span>
+						</div>
+					</template>
 				</div>
 				<span class="move-btn resize" v-drag id="resize">
 				</span>
@@ -684,7 +689,16 @@ export default {
 	},
 	data() {
 		return {
+			// 搜索优化 start
+			searchMenuTotal:0,
+			search_menu_have_more:false,
+			search_menu_page:1,
+			searchMenuOptions:[],
+			showSearchMenu:false,//显示搜索目录
 			searchTotal:0,
+			searchQuery:'',
+			// 搜索优化 end
+
 			IsOnlyMe:false,//只看我的
 			showData: false,
 			search_txt: '', //搜索词
@@ -802,19 +816,22 @@ export default {
 			}
 		},
 		/* 选中搜索指标 展开目录 选中指标 展示数据 */
-		search_txt(newval) {
-			if (newval) {
-				let [search_obj] = this.searchOptions.filter(
-					(item) => item.EdbInfoId === newval
-				);
-				this.page_no = 1;
-				if(this.$refs.edb_detail_data){
-					this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
-				}
-				this.select_node = search_obj.UniqueCode;
-				this.selected_edbid = newval;
-			}
-		},
+		// search_txt(newval) {
+		// 	if (newval) {
+		// 		let [search_obj] = this.searchOptions.filter(
+		// 			(item) => item.EdbInfoId === newval
+		// 		);
+		// 		if(!search_obj){
+		// 			return
+		// 		}
+		// 		this.page_no = 1;
+		// 		if(this.$refs.edb_detail_data){
+		// 			this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
+		// 		}
+		// 		this.select_node = search_obj.UniqueCode;
+		// 		this.selected_edbid = newval;
+		// 	}
+		// },
 		select_classifyId(newval){
 			if(this.$refs.listRef) this.$refs.listRef.scrollTop = 0;
 			if(newval){
@@ -939,12 +956,88 @@ export default {
 		}
 	},
 	methods: {
+		// 加载更多
+		searchMenuLoad(){
+			if(!this.search_menu_have_more) return;
+			this.searchMenuApi(this.searchQuery,++this.search_menu_page)
+		},
+		// 选择列表项
+		chooseSelectMenu(item){
+			this.nodeChange(item,{},'choose')
+		},
+		// 失焦并且没有输入内容返回目录
+		blurMenu(e){
+			if(!e.target.value){
+				this.clearMenu()
+			}
+		},
+		// 清楚返回目录模式
+		clearMenu(){
+			if(this.$refs.searchMenuRef){
+				this.showSearchMenu=false
+				this.$refs.searchMenuRef.momentChoose=''
+			}
+		},
+		// 目录搜索
+		searchMenuApi(query,page=1) {
+			dataBaseInterface.targetSearchByPage({
+				KeyWord:query,
+				CurrentIndex: page,
+				PageSize:15
+			}).then(res => {
+				if(res.Ret !== 200) return
+				const { List,Paging } = res.Data;
+				this.searchMenuTotal=Paging.Totals
+				this.searchQuery=query
+				this.search_menu_have_more = page < Paging.Pages;
+				this.searchMenuOptions = page === 1 ? List : this.searchMenuOptions.concat(List);
+				this.$refs.searchMenuRef.showMenu(this.searchMenuOptions,this.searchMenuTotal,'EdbName','EdbNameEn','UniqueCode',this.searchQuery)
+			})
+		},
 		// enter事件
-        handleEnterSelect(e){
+		handleEnterSelect(e){
 			console.log(e.target.value)
-			console.log(this.$refs.searchRef.$refs.popper)
-			// this.$refs.searchRef.$refs.popper && this.$refs.searchRef.$refs.popper.doClose();
-        },
+			this.showSearchMenu=false
+			this.$refs.searchRef&&this.$refs.searchRef.close();
+			document.activeElement.blur()
+			setTimeout(()=>{
+				this.showSearchMenu=true
+				e.preventDefault()
+				this.search_menu_page=1
+				this.searchMenuOptions=[]
+				this.searchMenuApi(e.target.value)
+				// 回车后默认情况上一次选中状态
+				// this.$nextTick(()=>{
+				// 	this.$refs.searchMenuRef.momentChoose=''
+				// 	this.$refs.searchMenuRef.chooseKey=''
+				// })
+			},200)
+		},
+		// 选中左侧搜索值
+		handleSelectLeftSearchval(e) {
+			console.log(e)
+			if (!e.EdbInfoId) return;
+			this.search_txt = this.currentLang==='en'?(e.EdbNameEn||e.EdbName):e.EdbName
+			this.page_no = 1;
+			if(this.$refs.edb_detail_data){
+				this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
+			}
+			this.select_node = e.UniqueCode;
+			this.selected_edbid = e.EdbInfoId;
+			this.clearMenu()
+		},
+		// 清除输入内容
+		clearSearchHandle(){
+			this.search_txt=''
+			this.clearMenu()
+			document.activeElement.blur()
+		},
+		// 禁止选中
+		disabledChoose(e){
+			e.preventDefault()
+		},
+		// end 搜索优化
+
 		//控制页面按钮权限
 		isEdbBtnShow(type){
 			const {edbDataPermission,checkPermissionBtn}=this.permissionBtn
@@ -1038,7 +1131,7 @@ export default {
 						//设置tree高亮
 						this.$nextTick(()=>{
 							setTimeout(() => {
-								this.$refs.menuTree.setCurrentKey(UniqueCode);
+								this.$refs.menuTree&&this.$refs.menuTree.setCurrentKey(UniqueCode);
 							}, 1000);
 						})
 						
@@ -1061,7 +1154,7 @@ export default {
 							this.$refs.edb_detail_data.$refs.valueUl.scrollTop=0
 						}
 					}
-					this.$nextTick(()=>{
+					this.$refs.menuTree&&this.$nextTick(()=>{
 					
 						//滚动到高亮位置
 						setTimeout(() => {
@@ -1135,24 +1228,30 @@ export default {
 			}
 			},300),
 		/* 搜索 */
-		searchHandle(query) {
+		searchHandle(query, cb) {
 			this.search_page = 1;
 			this.current_search = query;
-			this.searchApi(this.current_search)
+			this.searchApi(this.current_search, cb)
 		},
 
-		searchApi(query,page=1) {
+		searchApi(query,cb,page=1) {
 			dataBaseInterface.targetSearchByPage({
 				KeyWord:query,
-				CurrentIndex: page
+				CurrentIndex: page,
+				PageSize:15
 			}).then(res => {
 				if(res.Ret !== 200) return
 
 				const { List,Paging } = res.Data;
 				this.searchTotal=Paging.Totals
-				this.search_have_more = page < Paging.Pages;
-				this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
-				this.searchOptions=this.$search.setHightLight(this.searchOptions,query,this.currentLang==='en'?'EdbNameEn':'EdbName')
+				let arr = List || [];
+				if (!arr.length) {
+					cb([{ nodata: true }]);
+				} else {
+					cb(arr.map((el,index)=>{return {...el,index}}));
+				}
+				// this.search_have_more = page < Paging.Pages;
+				// this.searchOptions = page === 1 ? List : this.searchOptions.concat(List);
 			})
 		},
 
@@ -1246,8 +1345,10 @@ export default {
 			this.add_params = {}
 		},
 		/* 节点变化时 */
-		nodeChange(data,node) {
-			this.search_txt = '';
+		nodeChange(data,node,type='') {
+			if(type!='choose'){
+				this.search_txt = '';
+			}
 			this.select_classifyId = !data.EdbInfoId?data.ClassifyId:0;
 			this.select_node = data.UniqueCode;
 			this.selected_edbid = data.EdbInfoId;
@@ -2259,7 +2360,7 @@ export default {
 			}
 			.target_tree {
 				color: #333;
-				height: calc(100vh - 400px); 
+				height: calc(100vh - 460px); 
 				overflow: auto;
 				.label-input .el-input__inner {
 					height: 25px;
@@ -2624,4 +2725,22 @@ export default {
 		}
 	}
 }
+
+
+.el-autocomplete-suggestion-data-entry{
+	.el-autocomplete-suggestion__list{
+		.total-text{
+			color: #999999;
+			margin: 0 -20px 0;
+			padding: 0 20px;
+		}
+		&>li:first-child{
+			&:hover{
+				.total-text{
+					background: #FFFFFF !important;
+				}
+			}
+		}
+	}
+}
 </style>

src/views/dataEntry_manage/thirdBase/YyzxData.vue

@@ -34,10 +34,13 @@
           >
         </div>
         <el-autocomplete
+          ref="searchRef"
+          @keyup.enter.native="handleEnterSelect"
           style="margin: 20px 0; width: 100%"
           prefix-icon="el-icon-search"
           v-model="leftSearchVal"
           :fetch-suggestions="handleLeftSearch"
+          @clear="clearSearchHandle"
           :trigger-on-focus="false"
           :placeholder="$t('Edb.InputHolderAll.input_name_orid')"
           @select="handleSelectLeftSearchval"
@@ -49,12 +52,13 @@
               <!-- 暂无数据 -->{{$t('Table.prompt_slogan')}}
             </div>
             <div v-else>
-              {{ scope.item.IndexName }}
+              <span v-html="$search.setHightLightText(scope.item.IndexName,leftSearchVal)"></span>
             </div>
           </template>
         </el-autocomplete>
       </div>
-      <div class="scroll-wrap">
+      <searchMenu @searchLoad="searchMenuLoad" @chooseSelectMenu="chooseSelectMenu" @clearMenu="clearMenu" ref="searchMenuRef" v-if="showSearchMenu" />
+      <div v-else class="scroll-wrap">
         <el-tree
           ref="treeRef"
           class="target_tree word-wrap"
@@ -171,6 +175,17 @@ export default {
   }, 
   data() {
     return {
+      // 搜索优化 start
+			searchMenuTotal:0,
+			search_menu_have_more:false,
+			search_menu_page:1,
+			searchMenuOptions:[],
+			showSearchMenu:false,//显示搜索目录
+			searchTotal:0,
+			searchQuery:'',
+			// 搜索优化 end
+
+
       isBatchAddIndicsDiaShow:false, //批量添加至指标库弹窗
       isLeftWrapShow:true,
       exportBase:process.env.VUE_APP_API_ROOT + "/datamanage/yongyi/export", //ssm数据导出接口
@@ -196,6 +211,69 @@ export default {
     };
   },
   methods: {
+    // 加载更多
+		searchMenuLoad(){
+			console.log(this.search_menu_have_more)
+			if(!this.search_menu_have_more) return;
+			this.searchMenuApi(this.searchQuery,++this.search_menu_page)
+		},
+		// 选择列表项
+		chooseSelectMenu(item){
+			this.nodeChange(item,{},'choose')
+		},
+		blurMenu(e){
+			if(!e.target.value){
+				this.showSearchMenu=false
+			}
+		},
+		// 清楚返回目录模式
+		clearMenu(){
+			if(this.$refs.searchMenuRef){
+				this.showSearchMenu=false
+				this.search_txt=''
+				this.$refs.searchMenuRef.momentChoose=''
+			}
+		},
+		// 目录搜索
+		searchMenuApi(query,page=1) {
+			yongyiInterface.getTargetListByName({
+        Keyword: query,
+      }).then(res => {
+				if(res.Ret !== 200) return
+				// const { List,Paging } = res.Data;
+				// this.searchMenuTotal=Paging.Totals
+				// this.searchQuery=query
+				// this.search_menu_have_more = page < Paging.Pages;
+				// this.searchMenuOptions = page === 1 ? List : this.searchMenuOptions.concat(List);
+        this.searchMenuOptions=res.Data
+        this.searchMenuTotal=this.searchMenuOptions.length
+        this.$nextTick(()=>{
+          console.log(this.$refs.searchMenuRef)
+          this.$refs.searchMenuRef.showMenu(this.searchMenuOptions,this.searchMenuTotal,'IndexName','IndexName','IndexCode')
+        })
+			})
+		},
+    // enter事件
+    handleEnterSelect(e){
+			console.log(e.target.value)
+			this.showSearchMenu=false
+			this.$refs.searchRef&&this.$refs.searchRef.close();
+      document.activeElement.blur()
+			setTimeout(()=>{
+				this.showSearchMenu=true
+        e.preventDefault()
+        this.search_menu_page=1
+        this.searchMenuOptions=[]
+        this.searchMenuApi(e.target.value)
+			},200)
+    },
+    // 清除输入内容
+    clearSearchHandle(){
+      this.leftSearchVal=''
+      document.activeElement.blur()
+    },
+    // 搜索优化end
+
     handleAddToLib(data){
         //添加前校验 ID是否已存在指标库中
         //打开弹窗
@@ -517,8 +595,9 @@ export default {
     },
     //左侧搜索
     async handleLeftSearch(query, cb) {
-      cb([]);
+      // cb([]);
       if (!query) return;
+      console.log(query)
       const res = await yongyiInterface.getTargetListByName({
         Keyword: query,
       });