输入搜索、分组展示选项、下拉选取，全局跳转页，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 错误，可以选择不做任何处理
    });
},