📌 概述

筛选器管理模块允许用户保存和管理常用的筛选条件。该模块集成了 Cordova 框架与 OpenHarmony 原生能力，提供了完整的筛选器管理功能。用户可以创建多个筛选器，为每个筛选器设置特定的条件，然后快速应用这些筛选器来查看特定的数据。模块支持筛选器的编辑、删除和排序。

🔗 完整流程

第一步：筛选器数据加载

当用户进入筛选器管理页面时，应用会从数据库中加载所有已保存的筛选器。应用会显示每个筛选器的名称、条件和使用次数。

第二步：筛选器展示与管理

数据加载完成后，应用会将筛选器显示为列表形式。用户可以点击筛选器快速应用，也可以编辑或删除筛选器。用户可以创建新的筛选器。

第三步：筛选器应用与同步

当用户点击筛选器时，应用会立即应用该筛选器的条件，显示符合条件的数据。应用会更新筛选器的使用统计。

🔧 Web 代码实现

HTML 筛选器列表

<div id="filters-page" class="page">
    <div class="page-header">
        <h1>筛选器</h1>
        <button class="btn btn-primary" onclick="openCreateFilterModal()">+ 新建筛选器</button>
    </div>
    
    <div id="filters-list" class="filters-list">
        <!-- 筛选器项动态生成 -->
    </div>
    
    <!-- 创建/编辑筛选器模态框 -->
    <div id="filter-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="filter-modal-title">新建筛选器</h2>
                <button class="btn-close" onclick="closeFilterModal()">×</button>
            </div>
            
            <form id="filter-form" class="form">
                <div class="form-group">
                    <label for="filter-name">筛选器名称 *</label>
                    <input type="text" id="filter-name" name="name" required>
                </div>
                
                <div class="form-group">
                    <label for="filter-tea-type">茶叶类型</label>
                    <select id="filter-tea-type" name="teaType">
                        <option value="">全部</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="filter-origin">产地</label>
                    <select id="filter-origin" name="origin">
                        <option value="">全部</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="filter-rating-min">最低评分</label>
                    <select id="filter-rating-min" name="ratingMin">
                        <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="modal-actions">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-secondary" onclick="closeFilterModal()">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

筛选器管理页面包含筛选器列表和创建筛选器的按钮。模态框用于创建或编辑筛选器。

筛选器管理逻辑

let allFilters = [];
let currentEditingFilterId = null;

async function renderFilters() {
    try {
        // 加载筛选器数据
        allFilters = await db.getFilters();
        
        const listContainer = document.getElementById('filters-list');
        listContainer.innerHTML = '';
        
        if (allFilters.length === 0) {
            listContainer.innerHTML = '<div class="no-data"><p>暂无筛选器</p></div>';
            return;
        }
        
        allFilters.forEach(filter => {
            const filterEl = document.createElement('div');
            filterEl.className = 'filter-item';
            filterEl.dataset.filterId = filter.id;
            
            const conditions = buildConditionString(filter);
            
            filterEl.innerHTML = `
                <div class="filter-info">
                    <div class="filter-name">${filter.name}</div>
                    <div class="filter-conditions">${conditions}</div>
                    <div class="filter-usage">使用次数: ${filter.usageCount || 0}</div>
                </div>
                <div class="filter-actions">
                    <button class="btn-icon" onclick="applyFilter(${filter.id})" title="应用">✓</button>
                    <button class="btn-icon" onclick="editFilter(${filter.id})" title="编辑">✏️</button>
                    <button class="btn-icon" onclick="deleteFilter(${filter.id})" title="删除">🗑️</button>
                </div>
            `;
            
            listContainer.appendChild(filterEl);
        });
        
        // 加载分类和产地
        const categories = await db.getTeaCategories();
        const origins = await db.getOrigins();
        
        populateSelectOptions('filter-tea-type', categories);
        populateSelectOptions('filter-origin', origins);
        
        document.getElementById('filter-form').addEventListener('submit', handleSaveFilter);
        
    } catch (error) {
        console.error('Failed to render filters:', error);
        showToast('加载筛选器失败', 'error');
    }
}

function buildConditionString(filter) {
    const conditions = [];
    if (filter.teaType) conditions.push(`茶叶: ${filter.teaType}`);
    if (filter.origin) conditions.push(`产地: ${filter.origin}`);
    if (filter.ratingMin) conditions.push(`评分: ${filter.ratingMin}★+`);
    return conditions.length > 0 ? conditions.join(' | ') : '无条件';
}

async function applyFilter(filterId) {
    try {
        const filter = await db.getFilter(filterId);
        if (!filter) {
            showToast('筛选器不存在', 'error');
            return;
        }
        
        // 更新使用次数
        await db.updateFilterUsageCount(filterId);
        
        // 应用筛选器条件
        const records = await db.getAllRecords();
        const filtered = records.filter(record => {
            if (filter.teaType && record.teaType !== filter.teaType) return false;
            if (filter.origin && record.origin !== filter.origin) return false;
            if (filter.ratingMin && record.rating < filter.ratingMin) return false;
            return true;
        });
        
        // 显示筛选结果
        showFilterResults(filtered);
        
        showToast(`应用筛选器: ${filter.name}`, 'success');
        
        if (window.cordova) {
            cordova.exec(
                null, null,
                'TeaLogger',
                'logEvent',
                ['filter_applied', { filterId: filterId, resultCount: filtered.length }]
            );
        }
    } catch (error) {
        console.error('Failed to apply filter:', error);
        showToast('应用筛选器失败', 'error');
    }
}

function openCreateFilterModal() {
    currentEditingFilterId = null;
    document.getElementById('filter-modal-title').textContent = '新建筛选器';
    document.getElementById('filter-form').reset();
    document.getElementById('filter-modal').style.display = 'flex';
}

async function editFilter(filterId) {
    try {
        const filter = await db.getFilter(filterId);
        if (!filter) {
            showToast('筛选器不存在', 'error');
            return;
        }
        
        currentEditingFilterId = filterId;
        document.getElementById('filter-modal-title').textContent = '编辑筛选器';
        
        // 填充表单
        document.getElementById('filter-name').value = filter.name;
        document.getElementById('filter-tea-type').value = filter.teaType || '';
        document.getElementById('filter-origin').value = filter.origin || '';
        document.getElementById('filter-rating-min').value = filter.ratingMin || '';
        
        document.getElementById('filter-modal').style.display = 'flex';
    } catch (error) {
        console.error('Failed to edit filter:', error);
        showToast('加载筛选器失败', 'error');
    }
}

async function handleSaveFilter(event) {
    event.preventDefault();
    
    const formData = new FormData(document.getElementById('filter-form'));
    const filterData = {
        name: formData.get('name'),
        teaType: formData.get('teaType') || null,
        origin: formData.get('origin') || null,
        ratingMin: parseInt(formData.get('ratingMin')) || null,
        createdAt: new Date().toISOString()
    };
    
    try {
        if (currentEditingFilterId) {
            await db.updateFilter(currentEditingFilterId, filterData);
            showToast('筛选器已更新', 'success');
        } else {
            await db.addFilter(filterData);
            showToast('筛选器已创建', 'success');
        }
        
        closeFilterModal();
        renderFilters();
    } catch (error) {
        console.error('Failed to save filter:', error);
        showToast('保存失败，请重试', 'error');
    }
}

async function deleteFilter(filterId) {
    if (!confirm('确定要删除这个筛选器吗？')) {
        return;
    }
    
    try {
        await db.deleteFilter(filterId);
        showToast('筛选器已删除', 'success');
        renderFilters();
    } catch (error) {
        console.error('Failed to delete filter:', error);
        showToast('删除失败，请重试', 'error');
    }
}

function closeFilterModal() {
    document.getElementById('filter-modal').style.display = 'none';
    currentEditingFilterId = null;
}

function showFilterResults(records) {
    // 导航到记录列表页面，显示筛选结果
    navigateTo('record-list');
    // 在记录列表页面显示筛选后的结果
}

这段代码实现了完整的筛选器管理功能。renderFilters() 加载并渲染筛选器列表。applyFilter() 应用筛选器条件。handleSaveFilter() 保存新增或修改的筛选器。deleteFilter() 删除筛选器。

🔌 OpenHarmony 原生代码

筛选器数据库操作

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

export class FilterManager {
    private store: relationalStore.RdbStore;
    
    async createFilterTable(): Promise<void> {
        const createTableSql = `
            CREATE TABLE IF NOT EXISTS filters (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                name TEXT NOT NULL UNIQUE,
                tea_type TEXT,
                origin TEXT,
                rating_min INTEGER,
                usage_count INTEGER DEFAULT 0,
                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
            )
        `;
        
        await this.store.executeSql(createTableSql);
    }
    
    async addFilter(filter: Filter): Promise<number> {
        const values: relationalStore.ValuesBucket = {
            name: filter.name,
            tea_type: filter.teaType,
            origin: filter.origin,
            rating_min: filter.ratingMin,
            usage_count: 0,
            created_at: new Date().toISOString()
        };
        
        return await this.store.insert('filters', values);
    }
    
    async updateFilterUsageCount(filterId: number): Promise<void> {
        const predicates = new relationalStore.RdbPredicates('filters');
        predicates.equalTo('id', filterId);
        
        const resultSet = await this.store.query(predicates);
        if (resultSet.goToFirstRow()) {
            const currentCount = resultSet.getColumnValue(resultSet.getColumnIndex('usage_count')) as number;
            
            const values: relationalStore.ValuesBucket = {
                usage_count: currentCount + 1
            };
            
            await this.store.update(values, predicates);
        }
        
        resultSet.close();
    }
}

interface Filter {
    id?: number;
    name: string;
    teaType?: string;
    origin?: string;
    ratingMin?: number;
    usageCount?: number;
}

这个类管理筛选器的数据库操作。createFilterTable() 创建筛选器表。addFilter() 添加新筛选器。updateFilterUsageCount() 更新筛选器的使用次数。

📝 总结

筛选器管理模块展示了如何在 Cordova 框架中实现筛选器管理功能。通过 Web 层的用户界面和交互，结合原生层的数据库操作，为用户提供了高效的数据筛选体验。

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