📌 概述

高级搜索模块提供了多条件搜索喝茶记录的功能。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，允许用户按日期范围、茶叶类型、产地、价格范围和评分等多个条件进行搜索。模块支持条件组合搜索，提供了强大的数据查询能力。用户可以保存常用的搜索条件，快速执行重复搜索。

🔗 完整流程

第一步：搜索条件设置

用户在高级搜索页面设置多个搜索条件。应用会实时验证用户输入的条件，确保条件的有效性。用户可以选择是否保存当前的搜索条件以供后续使用。

第二步：条件组合搜索

当用户点击搜索按钮时，应用会将所有条件组合成一个复杂的查询。应用会在原生层执行这个复杂查询，利用数据库索引快速返回结果。

第三步：搜索结果展示与管理

搜索完成后，应用会将匹配的记录显示为列表形式。用户可以对搜索结果进行排序、导出或进一步筛选。

🔧 Web 代码实现

HTML 高级搜索表单

<div id="advanced-search-page" class="page">
    <div class="page-header">
        <h1>高级搜索</h1>
    </div>
    
    <form id="advanced-search-form" class="search-form">
        <div class="form-group">
            <label for="search-date-start">开始日期</label>
            <input type="date" id="search-date-start" name="dateStart">
        </div>
        
        <div class="form-group">
            <label for="search-date-end">结束日期</label>
            <input type="date" id="search-date-end" name="dateEnd">
        </div>
        
        <div class="form-group">
            <label for="search-tea-type">茶叶类型</label>
            <select id="search-tea-type" name="teaType">
                <option value="">全部</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="search-origin">产地</label>
            <select id="search-origin" name="origin">
                <option value="">全部</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="search-price-min">最低价格 (元)</label>
            <input type="number" id="search-price-min" name="priceMin" min="0" step="0.01">
        </div>
        
        <div class="form-group">
            <label for="search-price-max">最高价格 (元)</label>
            <input type="number" id="search-price-max" name="priceMax" min="0" step="0.01">
        </div>
        
        <div class="form-group">
            <label for="search-rating">最低评分</label>
            <select id="search-rating" name="rating">
                <option value="">全部</option>
                <option value="1">1 星及以上</option>
                <option value="2">2 星及以上</option>
                <option value="3">3 星及以上</option>
                <option value="4">4 星及以上</option>
                <option value="5">5 星</option>
            </select>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">搜索</button>
            <button type="button" class="btn btn-secondary" onclick="resetSearchForm()">重置</button>
            <button type="button" class="btn btn-info" onclick="saveSearchCondition()">保存条件</button>
        </div>
    </form>
    
    <div id="advanced-search-results" class="search-results">
        <!-- 搜索结果动态生成 -->
    </div>
</div>

高级搜索表单包含多个搜索条件字段。用户可以设置日期范围、茶叶类型、产地、价格范围和评分等条件。

高级搜索逻辑

async function handleAdvancedSearch(event) {
    event.preventDefault();
    
    const formData = new FormData(document.getElementById('advanced-search-form'));
    const conditions = {
        dateStart: formData.get('dateStart'),
        dateEnd: formData.get('dateEnd'),
        teaType: formData.get('teaType'),
        origin: formData.get('origin'),
        priceMin: parseFloat(formData.get('priceMin')) || null,
        priceMax: parseFloat(formData.get('priceMax')) || null,
        rating: parseInt(formData.get('rating')) || null
    };
    
    try {
        // 执行高级搜索
        const results = await performAdvancedSearch(conditions);
        
        const resultsContainer = document.getElementById('advanced-search-results');
        resultsContainer.innerHTML = '';
        
        if (results.length === 0) {
            resultsContainer.innerHTML = '<div class="no-data"><p>未找到匹配的记录</p></div>';
            return;
        }
        
        results.forEach(record => {
            const resultEl = createSearchResultElement(record);
            resultsContainer.appendChild(resultEl);
        });
        
        showToast(`找到 ${results.length} 条记录`, 'success');
        
        // 记录搜索事件
        if (window.cordova) {
            cordova.exec(
                null, null,
                'TeaLogger',
                'logEvent',
                ['advanced_search_executed', { resultCount: results.length }]
            );
        }
    } catch (error) {
        console.error('Advanced search failed:', error);
        showToast('搜索失败，请重试', 'error');
    }
}

async function performAdvancedSearch(conditions) {
    const records = await db.getAllRecords();
    
    return records.filter(record => {
        // 日期范围过滤
        if (conditions.dateStart) {
            const recordDate = new Date(record.createdAt);
            const startDate = new Date(conditions.dateStart);
            if (recordDate < startDate) return false;
        }
        
        if (conditions.dateEnd) {
            const recordDate = new Date(record.createdAt);
            const endDate = new Date(conditions.dateEnd);
            if (recordDate > endDate) return false;
        }
        
        // 茶叶类型过滤
        if (conditions.teaType && record.teaType !== conditions.teaType) {
            return false;
        }
        
        // 产地过滤
        if (conditions.origin && record.origin !== conditions.origin) {
            return false;
        }
        
        // 价格范围过滤
        if (conditions.priceMin !== null && record.price < conditions.priceMin) {
            return false;
        }
        
        if (conditions.priceMax !== null && record.price > conditions.priceMax) {
            return false;
        }
        
        // 评分过滤
        if (conditions.rating !== null && record.rating < conditions.rating) {
            return false;
        }
        
        return true;
    });
}

function resetSearchForm() {
    document.getElementById('advanced-search-form').reset();
    document.getElementById('advanced-search-results').innerHTML = '';
}

async function saveSearchCondition() {
    const formData = new FormData(document.getElementById('advanced-search-form'));
    const condition = {
        name: prompt('请输入搜索条件名称:'),
        dateStart: formData.get('dateStart'),
        dateEnd: formData.get('dateEnd'),
        teaType: formData.get('teaType'),
        origin: formData.get('origin'),
        priceMin: formData.get('priceMin'),
        priceMax: formData.get('priceMax'),
        rating: formData.get('rating'),
        createdAt: new Date().toISOString()
    };
    
    if (condition.name) {
        try {
            await db.addSearchCondition(condition);
            showToast('搜索条件已保存', 'success');
        } catch (error) {
            showToast('保存失败', 'error');
        }
    }
}

这段代码实现了高级搜索功能。handleAdvancedSearch() 处理表单提交。performAdvancedSearch() 执行多条件搜索。saveSearchCondition() 保存搜索条件供后续使用。

🔌 OpenHarmony 原生代码

复杂查询执行

// entry/src/main/ets/plugins/AdvancedQuery.ets
import { relationalStore } from '@kit.ArkData';

export class AdvancedQuery {
    private store: relationalStore.RdbStore;
    
    async executeComplexQuery(conditions: SearchConditions): Promise<TeaRecord[]> {
        const predicates = new relationalStore.RdbPredicates('tea_records');
        
        // 日期范围条件
        if (conditions.dateStart) {
            predicates.greaterThanOrEqualTo('created_at', conditions.dateStart);
        }
        if (conditions.dateEnd) {
            predicates.lessThanOrEqualTo('created_at', conditions.dateEnd);
        }
        
        // 茶叶类型条件
        if (conditions.teaType) {
            predicates.equalTo('tea_type', conditions.teaType);
        }
        
        // 产地条件
        if (conditions.origin) {
            predicates.equalTo('origin', conditions.origin);
        }
        
        // 价格范围条件
        if (conditions.priceMin !== null) {
            predicates.greaterThanOrEqualTo('price', conditions.priceMin);
        }
        if (conditions.priceMax !== null) {
            predicates.lessThanOrEqualTo('price', conditions.priceMax);
        }
        
        // 评分条件
        if (conditions.rating !== null) {
            predicates.greaterThanOrEqualTo('rating', conditions.rating);
        }
        
        // 执行查询
        const resultSet = await this.store.query(predicates);
        const records: TeaRecord[] = [];
        
        while (resultSet.goToNextRow()) {
            records.push(this.parseRecord(resultSet));
        }
        
        resultSet.close();
        return records;
    }
    
    private parseRecord(resultSet: relationalStore.ResultSet): TeaRecord {
        return {
            id: resultSet.getColumnValue(resultSet.getColumnIndex('id')) as number,
            teaType: resultSet.getColumnValue(resultSet.getColumnIndex('tea_type')) as string,
            origin: resultSet.getColumnValue(resultSet.getColumnIndex('origin')) as string,
            price: resultSet.getColumnValue(resultSet.getColumnIndex('price')) as number,
            rating: resultSet.getColumnValue(resultSet.getColumnIndex('rating')) as number
        };
    }
}

interface SearchConditions {
    dateStart?: string;
    dateEnd?: string;
    teaType?: string;
    origin?: string;
    priceMin?: number;
    priceMax?: number;
    rating?: number;
}

interface TeaRecord {
    id: number;
    teaType: string;
    origin: string;
    price: number;
    rating: number;
}

这个类执行复杂的数据库查询。executeComplexQuery() 根据多个条件执行查询，利用数据库的谓词系统构建复杂的查询条件。

📝 总结

高级搜索模块展示了如何在 Cordova 框架中实现复杂的多条件搜索功能。通过 Web 层的表单和交互，结合原生层的复杂查询执行，为用户提供了强大的数据查询能力。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net