欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

本文对应模块：Web 层的任务添加和编辑功能实现，包括表单设计、数据验证、保存逻辑，以及与原生层的任务同步机制。

📌 概述

添加和编辑任务是应用的核心功能。任务表单包括基本信息（标题、描述、图标）、分类和标签、时间和优先级、高级选项（重复、子任务、附件）和操作按钮。表单支持添加新任务和编辑现有任务两种模式。本文将介绍如何实现一个完整的任务表单，包括表单验证、数据保存和错误处理。

🔗 任务添加和编辑的完整流程

任务添加和编辑的流程包括：首先判断是添加模式还是编辑模式，如果是编辑模式则加载现有任务数据。然后渲染表单，包括基本信息、分类和标签、时间和优先级、高级选项等部分。用户填写表单并点击保存按钮时，进行表单验证，验证通过后保存任务到数据库。如果是编辑模式，还可以点击删除按钮删除任务。保存或删除成功后，返回任务列表页面。

🔧 表单实现

任务表单的核心实现包括页面渲染、数据加载、事件绑定和表单提交。页面渲染时根据是添加模式还是编辑模式创建不同的表单。编辑模式下需要加载现有任务数据填充到表单中。表单包括基本信息（标题、描述、图标）、分类和标签、时间和优先级等部分。

// 任务表单的关键方法
const AddEditTaskPage = {
    currentTaskId: null,
    isEditMode: false,

    async onLoad(params) {
        this.currentTaskId = params?.taskId || null;
        this.isEditMode = !!this.currentTaskId;
        
        await this.initCategoryOptions();
        this.bindEvents();
        if (this.isEditMode) await this.loadTaskData();
    },

    bindEvents() {
        // 图标选择、标签输入、表单提交事件绑定
        document.getElementById('icon-picker-btn')?.addEventListener('click', () => this.showIconPicker());
        document.getElementById('tag-input')?.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                this.addTag(e.target.value);
                e.target.value = '';
            }
        });
    },

    async handleSubmit() {
        // 获取表单数据并验证
        const title = document.getElementById('task-title').value.trim();
        if (!title) { UIComponents.showToast('请输入任务标题'); return; }
        
        const taskData = {
            title,
            description: document.getElementById('task-desc').value,
            category: document.getElementById('task-category').value,
            priority: document.querySelector('input[name="priority"]:checked').value,
            dueDate: document.getElementById('task-due-date').value,
            icon: document.getElementById('task-icon').value
        };
        
        try {
            if (this.isEditMode) {
                await taskManager.updateTask(this.currentTaskId, taskData);
            } else {
                await taskManager.createTask(taskData);
            }
            UIComponents.showToast(this.isEditMode ? '任务已更新' : '任务已保存');
            pageManager.goBack();
        } catch (error) {
            UIComponents.showToast('保存失败: ' + error.message);
        }
    }
};

代码解释：

onLoad() 方法在页面加载时调用，首先判断是添加模式还是编辑模式，然后初始化分类选项、绑定事件监听器。如果是编辑模式，加载现有任务数据填充到表单中。bindEvents() 方法为图标选择按钮、标签输入框绑定事件监听器。当用户点击图标选择按钮时，显示图标选择器。当用户在标签输入框中按下 Enter 键时，添加标签。handleSubmit() 方法处理表单提交，首先获取表单数据并进行验证，然后根据是添加模式还是编辑模式调用相应的任务管理方法保存任务。保存成功后显示提示信息并返回任务列表页面。

🔌 原生层的任务表单同步

HarmonyOS 原生层也需要与 Web 层的任务表单进行集成。原生层可以通过 Cordova 插件来接收来自 Web 层的任务保存事件。

// ArkTS 代码示例 - 任务表单插件
import { CordovaPlugin, CallbackContext } from '@magongshou/harmony-cordova/Index';
import { PluginResult, MessageStatus } from '@magongshou/harmony-cordova/Index';

export class TaskFormPlugin extends CordovaPlugin {
    // 监听 Web 层的任务保存事件
    async onTaskSaved(callbackContext: CallbackContext, args: string[]): Promise<void> {
        try {
            const taskData = JSON.parse(args[0]);
            console.log('[TaskFormPlugin] 任务已保存:', taskData.title);
            
            // 原生层可以根据任务保存更新自己的数据
            const result = PluginResult.createByString(MessageStatus.OK, '任务已同步到原生层');
            callbackContext.sendPluginResult(result);
        } catch (error) {
            const result = PluginResult.createByString(MessageStatus.ERROR, (error as Error).message);
            callbackContext.sendPluginResult(result);
        }
    }
}

原生代码解释：

TaskFormPlugin 是一个 Cordova 插件，提供了原生层与 Web 层任务表单的交互接口。onTaskSaved 方法监听 Web 层的任务保存事件，接收任务数据并进行处理。原生层可以根据任务保存更新自己的数据或执行相应的操作。

Web 层通知原生任务保存

Web 层可以调用原生插件来通知原生层任务已保存：

// JavaScript 代码 - 通知原生任务已保存
function notifyTaskSaved(taskData) {
    cordova.exec(
        function() { console.log('原生层已收到任务保存通知'); },
        function(error) { console.error('通知失败:', error); },
        'TaskFormPlugin',
        'onTaskSaved',
        [JSON.stringify(taskData)]
    );
}

Web 层代码解释：

notifyTaskSaved 函数使用 cordova.exec() 调用原生插件的 onTaskSaved 方法，传递任务数据。这样可以从 Web 层通知原生层任务已保存。

📝 总结

任务添加和编辑功能是应用的核心功能，通过完整的表单设计和验证，用户可以高效地创建和修改任务。通过与原生层的集成，可以实现任务数据的完整同步。