輸入搜索、分組展示選項、下拉選取,全局跳轉頁,el-select 實現 —— 后端數據處理代碼,拋磚引玉展思路
詳細前端代碼寫于上一篇:輸入搜索、分組展示選項、下拉選取,el-select 實現:即輸入關鍵字檢索,返回分組選項,選取跳轉到相應內容頁 —— VUE項目-全局模糊檢索
【效果圖】:分組展示選項 =>【提供界面操作體驗】
【mybatis】:多數據表抓取數據
<select id="findNews" resultType="com.bootdo.search.vo.SearchDetail">
SELECT n.cid AS srcId,
pt.id AS typeId,
pt.type_key AS typeKey,
pt.page_type AS pageType,
pt.page_name AS srcTypeName,
n.title AS srcName,
n.summary AS alias,
pt.page_path AS srcPath
FROM a_news n
LEFT JOIN a_product_type pt ON n.type_id = pt.id
WHERE n.sys_id = #{sysId} AND n.is_enabled = 0 AND (n.title LIKE #{query} OR n.summary LIKE #{query} OR n.content LIKE #{query})
LIMIT 20
</select>
<select id="findProducts" resultType="com.bootdo.search.vo.SearchDetail">
SELECT pt.id AS srcId,
pt.page_type AS pageType,
pt.page_name AS srcTypeName,
pt.type_name AS srcName,
pt.type_key AS alias,
pt.page_path AS srcPath
FROM a_product_type pt
WHERE pt.sys_id = #{sysId} AND pt.is_deleted = 0 AND pt.type_name LIKE #{query}
LIMIT 20
</select>
<select id="findItemInfos" resultType="com.bootdo.search.vo.SearchDetail">
SELECT n.cid AS srcId,
pt.id AS typeId,
pt.type_key AS typeKey,
pt.page_type AS pageType,
pt.page_name AS srcTypeName,
pt.type_name AS srcName,
pt.type_name AS alias,
pt.page_path AS srcPath
FROM a_item_info n
LEFT JOIN a_product_type pt ON n.type_id = pt.id
WHERE n.sys_id = #{sysId} AND n.is_enabled = 0 AND n.content LIKE #{query}
LIMIT 20
</select>
【java】:各數據源進一步整理、合并、分組
public List<SearchVO> search(Map<String, Object> params){
Map<String, SearchDetail> map = new HashMap<>();
List<SearchDetail> products = searchDao.findProducts(params);
List<SearchDetail> itemInfos = searchDao.findItemInfos(params);
List<SearchDetail> news = searchDao.findNews(params);
for(SearchDetail sd : products){
String srcPath = sd.getSrcPath()+"?typeKey="+sd.getAlias();
sd.setSrcPath(srcPath);
map.put(srcPath, sd);
}
for(SearchDetail sd : itemInfos){
this.changePath(map, sd);
}
for(SearchDetail sd : news){
this.changePath(map, sd);
}
return groupSearchDetailsByTypeName(map.values());
}
private void changePath(Map<String, SearchDetail> map, SearchDetail sd){
String srcPath = sd.getSrcPath();
if(StringUtils.equals(srcPath, "/n")){
srcPath = srcPath+"/nId?showDetailNewId="+sd.getSrcId()+"&menuSearch=true";
sd.setSrcPath(srcPath);
}
if(StringUtils.equals(srcPath, "/p")){
srcPath = srcPath+"/pId?showDetailNewId="+sd.getSrcId()+"&menuSearch=true&typeId="+sd.getTypeId()+"&typeKey="+sd.getTypeKey();
sd.setSrcPath(srcPath);
}
map.put(srcPath, sd);
}
private List<SearchVO> groupSearchDetailsByTypeName(Collection<SearchDetail> sds) {
// 使用 Collectors.groupingBy 按 srcTypeName(即 label)分組
Map<Integer, List<SearchDetail>> groupedByTypeName = sds.stream()
.collect(Collectors.groupingBy(SearchDetail::getPageType));
// 將分組后的數據轉換為 List<SearchVO>
List<SearchVO> searchVOList = new ArrayList<>();
for (Map.Entry<Integer, List<SearchDetail>> entry : groupedByTypeName.entrySet()) {
SearchVO searchVO = new SearchVO();
List<SearchDetail> value = entry.getValue();
searchVO.setLabel(value.get(0).getSrcTypeName());
searchVO.setOptions(value);
searchVOList.add(searchVO);
}
return searchVOList;
}
vue、js
<el-row :gutter="20" style="display: flex; border-radius: 5px;" >
<el-col style="margin-bottom: 7px;">
<lilo-group-select @change="groupSelectChange" :multiple="false" :likeQuery="true" :searchApi="'/api/list/search'" clearable placeholder="請輸入快速搜索" ></lilo-group-select>
</el-col>
</el-row>
groupSelectChange(option) {
console.log("下拉選項選中:"+JSON.stringify(option));
if(option==''|| option.srcPath=='')return;
// this.$router.push(option.srcPath);
this.$router.push(option.srcPath).catch(err => {
if (err.name !== 'NavigationDuplicated') {
// 處理其他可能的錯誤
console.error(err);
}
// 對于 NavigationDuplicated 錯誤,可以選擇不做任何處理
});
},
【效果圖】:分組展示選項 =>【提供界面操作體驗】
詳細前端代碼寫于上一篇:輸入搜索、分組展示選項、下拉選取,el-select 實現:即輸入關鍵字檢索,返回分組選項,選取跳轉到相應內容頁 —— VUE項目-全局模糊檢索
————————————————
本文同步發表于:https://blog.csdn.net/wangqingbo0829/article/details/145774974
浙公網安備 33010602011771號