Răsfoiți Sursa

fix: ETA2.3.5搜索优化

ldong 1 săptămână în urmă
părinte
comite
a17686d2a7

+ 12 - 0
src/lang/commonLang.js

@@ -119,6 +119,18 @@ export default {
       en: "No data available",
       zh: "暂无数据",
     },
+    co_retrieved: {
+      en: "Co retrieved",
+      zh: "共检索到",
+    },
+    indicators: {
+      en: "indicators",
+      zh: "个指标",
+    },
+    charts: {
+      en: "charts",
+      zh: "个指标",
+    },
     edb_id: {
       en: "Indicator ID",
       zh: "指标Id",

+ 12 - 4
src/views/dataEntry_manage/databaseList.vue

@@ -58,9 +58,9 @@
 							<!-- 暂无数据 -->{{$t('Table.prompt_slogan')}}
 							</div>
 							<div v-else>
-								<div v-if="scope.item.index===0" class="total-text">共检索到{{searchTotal}}个指标</div>
-								<edbDetailPopover :info="scope.item">
-									<div slot="reference">
+								<div v-if="scope.item.index===0" class="total-text">{{$t('Table.co_retrieved')}}{{searchTotal}}{{$t('Table.indicators')}}</div>
+								<div class="select-item-box" slot="reference">
+									<div>
 										<img 
 											:src="$icons.lock_ico2" 
 											width="18" 
@@ -70,7 +70,10 @@
 										/>
 										<span v-html="$search.setHightLightText(currentLang==='en'?(scope.item.EdbNameEn||scope.item.EdbName):scope.item.EdbName,search_txt)"></span>
 									</div>
-								</edbDetailPopover>
+									<edbDetailPopover :info="scope.item">
+										<i style="margin-left:12px" slot="reference" class="el-icon-warning-outline"></i>
+									</edbDetailPopover>
+								</div>
 							</div>
 						</template>
 					</el-autocomplete>
@@ -2728,6 +2731,11 @@ export default {
 
 
 .el-autocomplete-suggestion-data-entry{
+	.select-item-box{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
 	.el-autocomplete-suggestion__list{
 		.total-text{
 			color: #999999;

+ 322 - 187
src/views/predictEdb_manage/predictEdb.vue

@@ -22,163 +22,176 @@
 						/> -->
 				</div>
 				<div class="search-cont" v-loading="searchLoading">
-					<el-select
-						v-model="search_txt"
-						ref="searchRef"
-						:filterable="!search_txt"
-						remote
-						clearable
-						:placeholder="$t('Edb.InputHolderAll.input_name')"
-						style="width: 100%"
-						:remote-method="searchHandle"
-						@focus="searchHandle('')"
-					>
-						<i slot="prefix" class="el-input__icon el-icon-search"></i>
-						<el-option
-							v-for="item in searchOptions"
-							:key="item.EdbInfoId"
-							:label="currentLang==='en'?(item.EdbNameEn||item.EdbName):item.EdbName"
-							:value="item.EdbInfoId"
-						>
-							<div>
-								<img 
-									:src="$icons.lock_ico2" 
-									width="18" 
-									height="18" 
-									style="vertical-align:middle" 
-									v-if="!item.HaveOperaAuth"
-								/>
-								<span>{{ currentLang==='en' ? (item.EdbNameEn||item.EdbName) : item.EdbName }}</span>
-							</div>
-						</el-option>
-					</el-select>
-				</div>
-        <div style="margin:20px 0;padding:0 20px;display:flex;justify-content:space-between">
-					<span><!-- 目录 -->{{$t('Common.category')}}</span>
-					<el-checkbox v-model="isOnlyMe" v-permission="permissionBtn.predictEdbPermission.edbPreData_isOnlyMine"
-						@change="onlyMeHandler"><!-- 只看我的 -->{{$t('PredictEdbPage.only_see_mine')}}</el-checkbox>
-				</div>
-				<div class="tree-cont">
-					<div class="target_tree">
-					<el-tree
-						ref="treeRef"
-						:data="treeData"
-						node-key="UniqueCode"
-						:props="defaultProp"
-						:allow-drag="canDragHandle"
-						:allow-drop="canDropHandle"
-						:current-node-key="select_node"
-						:default-expanded-keys="defaultShowNodes"
-						:draggable="isEdbBtnShow('edbPreData_classifyOpt_move')"
-						:expand-on-click-node="false"
-						check-strictly
-						:empty-text="$t('Common.no_classify_msg')"
-						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 }">
-							<el-input
-								ref="editVal"
-								style="width: 90px"
-								placeholder="请输入值"
-								class="label-input"
-								v-model="new_label"
-								v-if="data.isEdit"
-								@blur="changeValue(data)"
-							/>
-							<span
-								@dblclick.stop="editNodeLabel(data)"
-								v-else
-								class="text_oneLine node_label"
-								:style="`width:${select_node === data.UniqueCode?'60%':'auto'}`"
-								:id="`node${data.UniqueCode}`"
+					<el-autocomplete
+							@blur="blurMenu"
+							ref="searchRef"
+							@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')"
+							style="width: 100%;margin-bottom:20px"
+							@select="handleSelectLeftSearchval"
+							popper-class="el-autocomplete-suggestion-data-entry"
+							clearable
 							>
-								<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"
-								/> -->
-								<!-- 添加子项 -->
-								<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&&!data.EdbInfoId&&isEdbBtnShow('edbPreData_classifyOpt_add')&&node.level<6"
-								/>
-								<!-- 编辑目录 -->
-								<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.Button.OpButton&&!data.EdbInfoId&&isEdbBtnShow('edbPreData_classifyOpt_add')"
-								/>
-								<!-- 删除目录 -->
-								<img
-									slot="reference"
-									src="~@/assets/img/set_m/del.png"
-									alt=""
-									style="width: 14px; height: 14px"
-									@click.stop="removeNode(node, data)"
-									v-if="data.Button.DeleteButton&&!data.EdbInfoId&&isEdbBtnShow('edbPreData_classifyOpt_delete')"
+							<template slot-scope="scope">
+								<div v-if="scope.item.nodata" style="text-align: center">
+								<!-- 暂无数据 -->{{$t('Table.prompt_slogan')}}
+								</div>
+								<div v-else>
+									<div v-if="scope.item.index===0" class="total-text">{{$t('Table.co_retrieved')}}{{searchTotal}}{{$t('Table.indicators')}}</div>
+									<div class="select-item-box" slot="reference">
+										<div>
+											<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 :info="scope.item">
+											<i style="margin-left:12px" slot="reference" class="el-icon-warning-outline"></i>
+										</edbDetailPopover>
+									</div>
+								</div>
+							</template>
+					</el-autocomplete>
+				</div>
+				<!-- :chooseKey="select_node" -->
+				<searchMenu style="margin:0 20px" :boxHeight="380" @searchLoad="searchMenuLoad" @chooseSelectMenu="chooseSelectMenu" @clearMenu="clearMenu" ref="searchMenuRef" v-if="showSearchMenu" />
+            	<template v-else>
+					<div style="margin:20px 0;padding:0 20px;display:flex;justify-content:space-between">
+						<span><!-- 目录 -->{{$t('Common.category')}}</span>
+						<el-checkbox v-model="isOnlyMe" v-permission="permissionBtn.predictEdbPermission.edbPreData_isOnlyMine"
+							@change="onlyMeHandler"><!-- 只看我的 -->{{$t('PredictEdbPage.only_see_mine')}}</el-checkbox>
+					</div>
+					<div class="tree-cont">
+						<div class="target_tree">
+						<el-tree
+							ref="treeRef"
+							:data="treeData"
+							node-key="UniqueCode"
+							:props="defaultProp"
+							:allow-drag="canDragHandle"
+							:allow-drop="canDropHandle"
+							:current-node-key="select_node"
+							:default-expanded-keys="defaultShowNodes"
+							:draggable="isEdbBtnShow('edbPreData_classifyOpt_move')"
+							:expand-on-click-node="false"
+							check-strictly
+							:empty-text="$t('Common.no_classify_msg')"
+							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 }">
+								<el-input
+									ref="editVal"
+									style="width: 90px"
+									placeholder="请输入值"
+									class="label-input"
+									v-model="new_label"
+									v-if="data.isEdit"
+									@blur="changeValue(data)"
 								/>
-								<!-- 查看预测规则 -->
-								<!-- <i class="el-icon-view" v-if="data.EdbInfoId&&isEdbBtnShow('edbPreData_checkPreRule')" @click.stop="viewNode(node,data)"></i> -->
-								<!-- 查看关联图表 -->
-								<!-- <img 
-									v-if="data.Button.ShowChartRelation&&isEdbBtnShow('edbPreData_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('edbPreData_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(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"
+									/> -->
+									<!-- 添加子项 -->
+									<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&&!data.EdbInfoId&&isEdbBtnShow('edbPreData_classifyOpt_add')&&node.level<6"
+									/>
+									<!-- 编辑目录 -->
+									<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.Button.OpButton&&!data.EdbInfoId&&isEdbBtnShow('edbPreData_classifyOpt_add')"
+									/>
+									<!-- 删除目录 -->
+									<img
+										slot="reference"
+										src="~@/assets/img/set_m/del.png"
+										alt=""
+										style="width: 14px; height: 14px"
+										@click.stop="removeNode(node, data)"
+										v-if="data.Button.DeleteButton&&!data.EdbInfoId&&isEdbBtnShow('edbPreData_classifyOpt_delete')"
+									/>
+									<!-- 查看预测规则 -->
+									<!-- <i class="el-icon-view" v-if="data.EdbInfoId&&isEdbBtnShow('edbPreData_checkPreRule')" @click.stop="viewNode(node,data)"></i> -->
+									<!-- 查看关联图表 -->
+									<!-- <img 
+										v-if="data.Button.ShowChartRelation&&isEdbBtnShow('edbPreData_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('edbPreData_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="opLevelOneClassify&&isEdbBtnShow('edbPreData_classifyOpt_add')"
-					>
-						<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>
+						</el-tree>
+						</div>
+						<div
+							class="noDepart"
+							@click="addLevelOneHandle"
+							v-if="opLevelOneClassify&&isEdbBtnShow('edbPreData_classifyOpt_add')"
+						>
+							<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>
 					</div>
-				</div>
+				</template>
 				<span
 					class="move-btn resize"
 					v-drag
@@ -583,6 +596,17 @@ export default {
 	},
 	data () {
 		return {
+			// 搜索优化 start
+			searchMenuTotal:0,
+			search_menu_have_more:false,
+			search_menu_page:1,
+			searchMenuOptions:[],
+			showSearchMenu:false,//显示搜索目录
+			searchTotal:0,
+			searchQuery:'',
+			// 搜索优化 end
+
+
 			showData: false,
 			search_txt: '',
 			searchOptions:[],
@@ -779,22 +803,104 @@ export default {
 			}
 		},
 
-		/* 搜索关键词 */
-		search_txt(newval) {
-			if(newval) {
-				let search_obj = this.searchOptions.find(_ => _.EdbInfoId === newval);
-				// let deep_arr = _.cloneDeep(this.treeData);
-				// 查找图表的分类父级id
-				// let arr = this.findParentNodeHandle(deep_arr, search_obj.ClassifyId).reverse(); // 父的父的父-父的父-父
-				// this.defaultShowNodes = arr;
-				this.select_node = search_obj.UniqueCode;
-				this.$refs.treeRef.setCurrentKey(this.select_node);
-				// 重置筛选状态
-				this.select_id = newval;
-			}
-		}
+		// /* 搜索关键词 */
+		// search_txt(newval) {
+		// 	if(newval) {
+		// 		let search_obj = this.searchOptions.find(_ => _.EdbInfoId === newval);
+		// 		// let deep_arr = _.cloneDeep(this.treeData);
+		// 		// 查找图表的分类父级id
+		// 		// let arr = this.findParentNodeHandle(deep_arr, search_obj.ClassifyId).reverse(); // 父的父的父-父的父-父
+		// 		// this.defaultShowNodes = arr;
+		// 		this.select_node = search_obj.UniqueCode;
+		// 		this.$refs.treeRef.setCurrentKey(this.select_node);
+		// 		// 重置筛选状态
+		// 		this.select_id = newval;
+		// 	}
+		// }
 	},
 	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) {
+			preDictEdbInterface.edbSearch({
+				Keyword: query,
+				CurrentIndex: page,
+				PageSize: 15,
+				IsOnlyMe:this.isOnlyMe||false
+			}).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){
+			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)
+				// 回车后默认情况上一次选中状态
+				// this.$nextTick(()=>{
+				// 	this.$refs.searchMenuRef.momentChoose=''
+				// 	this.$refs.searchMenuRef.chooseKey=''
+				// })
+			},200)
+		},
+		// 选中左侧搜索值
+		handleSelectLeftSearchval(e) {
+			console.log(e)
+			if (!e.EdbInfoId) return;
+			this.clearMenu()
+			this.search_txt = this.currentLang==='en'?(e.EdbNameEn||e.EdbName):e.EdbName
+			// let deep_arr = _.cloneDeep(this.treeData);
+			// // 查找图表的分类父级id
+			// let arr = this.findParentNodeHandle(deep_arr, e.ClassifyId).reverse();// 父的父的父-父的父-父
+			// this.defaultShowNodes = arr;
+			this.select_node = e.UniqueCode;
+			this.select_id = e.EdbInfoId;
+			this.$nextTick(()=>{
+				this.$refs.treeRef.setCurrentKey(this.select_node);
+			})
+		},
+		// 清除输入内容
+		clearSearchHandle(){
+			this.search_txt=''
+			this.clearMenu()
+			document.activeElement.blur()
+		},
+		// end 搜索优化
+
 		// 显示存为静态指标弹窗
 		handelShowSaveStaticEdb(){
 			this.showSaveStaticEdb=true
@@ -819,7 +925,7 @@ export default {
 
 			//滚动到高亮节点位置
 			// this.$nextTick(()=>{
-				setTimeout(() => {
+				this.$refs.treeRef&&setTimeout(() => {
 					const dom = document.getElementById(`node${this.select_node}`)||{}
 					const parentDom = document.getElementsByClassName('target_tree')[0];
 					/* if (dom.offsetTop > parentDom.offsetHeight) {
@@ -842,7 +948,7 @@ export default {
 					this.searchLoading = false;
 				}, 1500);
 				setTimeout(() => {
-					this.$refs.treeRef.setCurrentKey(this.select_node);//设置高亮
+					this.$refs.treeRef&&this.$refs.treeRef.setCurrentKey(this.select_node);//设置高亮
 				}, 1500);
 			// })
 		},
@@ -880,28 +986,36 @@ export default {
 		},
 
 		/* 搜索 */
-		searchHandle(query) {
+		searchHandle(query,cb) {
 			if (query) {
-        /* 查找列表 */
-        preDictEdbInterface
-          .edbSearch({
-            Keyword: query,
-            CurrentIndex: 1,
-						PageSize: 10000,
-            IsOnlyMe:this.isOnlyMe||false
-          })
-          .then((res) => {
-            if (res.Ret !== 200) return
-            this.searchOptions = res.Data.List || [];
-          });
-      } else {
-        this.searchOptions = [];
-      }
+        		/* 查找列表 */
+				preDictEdbInterface.edbSearch({
+					Keyword: query,
+					CurrentIndex: 1,
+					PageSize: 15,
+					IsOnlyMe:this.isOnlyMe||false
+				}).then((res) => {
+					if(res.Ret !== 200) return
+
+					const { List,Paging } = res.Data;
+					this.searchTotal=Paging.Totals
+					let arr = List || [];
+					if (!arr.length) {
+						cb([{ nodata: true }]);
+					} else {
+						cb(arr.map((el,index)=>{return {...el,index}}));
+					}
+				});
+			} else {
+				this.searchOptions = [];
+			}
 		},
 
 		/* 选中分类变化时 */
-		nodeChange({ UniqueCode,EdbInfoId,ClassifyId },node) {
-			this.search_txt = '';
+		nodeChange({ UniqueCode,EdbInfoId,ClassifyId },node,type='') {
+			if(type!='choose'){
+				this.search_txt = '';
+			}
 			this.select_node = UniqueCode;
 			this.select_id = EdbInfoId || 0;
 			this.select_classify = !EdbInfoId ? ClassifyId : 0;
@@ -1955,4 +2069,25 @@ $mini-font: 12px; $normal-font: 14px;
 		}
 	}
 }
+.el-autocomplete-suggestion-data-entry{
+	.select-item-box{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.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>