宜搭低代码开发师（高级）认证实操：待办列表功能实现

考前须知

进入组织是第一步。如果二维码失效，可以通过钉钉手机端操作：点击右下角【我的】→【客服与帮助】→下滑找到【快捷工具】→选择【加入团队】，根据名称搜索即可。

项目实操

1. 基础表单搭建

进行中待办

首先创建用于录入数据的普通表单。我们需要定义几个核心字段：

• 待办事项：单行文本组件，必填。
• 分类：单选组件，必填（个人、工作、其他）。
• 重要度：评分组件，默认值设为 1，必填。
• 设置提醒日期：日期组件，格式年月日。
• 待办详情：多行文本组件。

注意：设置重要度的默认值为 1 时，需要获取组件的唯一标识（例如 rateField_me2n0yf0），在左侧动作面板中使用如下代码初始化：

that.$('组件唯一标识').setValue()

已完成待办

复制'进行中待办'表单，将页面名称修改为【已完成待办】，后续逻辑类似。

2. 自定义页面构建

TodoList 界面设计

新建自定义页面，选择【工作台模板 -01】作为基础。删除多余的布局容器，将标题改为'待办列表'。

接下来拖入分组和子表格组件。我们将分为'进行中待办'和'已完成待办'两个区域展示数据。

1. 字段映射：选中表格组件，保留必要字段（待办事项、分类、重要度、提醒日期等）。记得从表单设计器中复制组件的唯一标识，粘贴到表格的数据字段配置中。
2. 样式调整：修改'设置提醒日期'的时间格式，将'重要度'设置为枚举类型，并配置对应的颜色样式。代码如下：

[ { "color": "grey", "text": "1", "value": 1, "__sid__": "serial_me9yvo5m" }, { "color": "blue", "text": "2", "value": 2, "__sid__": "serial_me9yvo5n" }, { "color": "yellow", "text": "3", "value": 3, "__sid__": "serial_me9yvo5o" }, { "color": "green", "text": "4", "value": 4, "__sid__": "serial_me9yvo5p" }, { "color": "red", "text": "5", "value": 5, "__sid__": "serial_me9yvo5q" } ]

3. 页面设置：选中整个页面，将背景色设为白色，保持视觉清爽。

3. 功能实现细节

在开始写代码前，先明确两个关键参数：应用编码 (appType) 和 表单 ID (formUuid)。它们可以在浏览器地址栏或表单设计器的 URL 中找到，后续 API 调用必须使用正确的值。

数据展示

以'进行中待办'为例，我们需要通过远程数据源获取数据。

1. 添加数据源：删除未使用的远程数据源，新增一个名为 getTodoData 的 GET 请求，接口路径为 /v1/form/searchFormDatas.json，必填参数为 formUuid。
2. 数据处理：在请求完成回调函数中，需要对返回的数据结构进行清洗，确保字段名与表格列对应。关键代码如下：

function didFetch(content) {
    const value = [];
    const data = content.data.map((item) => {
        let arr = {
            textField_me2n0yey: item.formData.textField_me2n0yey,
            radioField_me2n0yez: item.formData.radioField_me2n0yez,
            rateField_me2n0yf0: item.formData.rateField_me2n0yf0,
            dateField_me2n0yf1: item.formData.dateField_me2n0yf1,
            textareaField_me2n0yf2: item.formData.textareaField_me2n0yf2,
            instid: item.formInstId
        };
        value.push(arr);
    });
    return {
        "data": value,
        "currentPage": content.currentPage,
        "totalCount": content.totalCount
    };
}

3. 绑定变量：将表格的数据源变量设置为 state.getTodoData，主键设为 instid。

分页与搜索

为了提升体验，我们需要支持分页和按分类搜索。

1. 状态管理：新增 page 和 searchKey 两个状态变量。
2. 请求参数：在 getTodoData 数据源中，将分页和搜索条件绑定到状态变量。注意 searchFieldJson 需要序列化。

{
    searchFieldJson: JSON.stringify({ radioField_me2n0yez: state.searchKey }),
    formUuid: "FORM-50859B5DAD37446FA143EDCB4CF3A44375VP",
    currentPage: state.page,
    pageSize: 5
}

3. 触发逻辑：在表格的分页/搜索事件 onFetchTodoData 中更新状态。如果是搜索操作，需重置当前页码为 1。

export function onFetchTodoData(params) {
    if (params.from === 'search') {
        params.currentPage = 1;
    }
    this.setState({ "searchKey": params.searchKey, "page": params.currentPage });
}

新增与编辑

这里采用弹窗对话框的方式录入数据。

1. 打开弹窗：在顶部操作栏添加'新增待办'按钮，绑定回调函数 onActionBarItemClick。打开弹窗后，记得重置所有表单字段，特别是重要度要重置为 1。

export function onActionBarItemClick() {
    this.$('dialog_me9xwn20').show(() => {
        this.$('textField_me9xwn22').reset();
        this.$('radioField_me9xwn23').reset();
        this.$('rateField_me9xwn24').setValue(1);
        this.$('dateField_me9xwn25').reset();
        this.$('textareaField_me9xwn26').reset();
    });
}

2. 保存逻辑：在对话框的 onOk 事件中执行。首先需要校验必填项，然后组装数据调用保存接口。这里有一个技巧：区分'新增'和'编辑'模式。可以引入一个 flag 状态变量，新增时设为 insert，编辑时设为 edit。

export function onOk() {
    const createFieldList = [
        'textField_me9xwn22', 'radioField_me9xwn23', 'rateField_me9xwn24', 'dateField_me9xwn25'
    ];
    const data1 = {
        "textField_me2n0yey": this.$('textField_me9xwn22').getValue(),
        "radioField_me2n0yez": this.$('radioField_me9xwn23').getValue(),
        "rateField_me2n0yf0": this.$('rateField_me9xwn24').getValue(),
        "dateField_me2n0yf1": this.$('dateField_me9xwn25').getValue(),
        "textareaField_me2n0yf2": this.$('textareaField_me9xwn26').getValue()
    };
    const param = {
        formUuid: "FORM-50859B5DAD37446FA143EDCB4CF3A44375VP",
        appType: "APP_L0MRPK82DM5SNZ2UIHPM",
        formDataJson: JSON.stringify(data1)
    };

    this.fieldsValidate(createFieldList).then((errorList) => {
        setTimeout(() => {
            if (errorList.length > 0) return;
            
            if (this.state.flag === 'insert') {
                // 新增逻辑
                this.dataSourceMap["insert"].load(param).then(res => {
                    this.utils.toast({ title: '新增成功', type: 'success' });
                    this.$('dialog_me9xwn20').hide();
                    setTimeout(() => this.dataSourceMap['getTodoData'].load(), 1000);
                });
            } else {
                // 编辑逻辑
                const param2 = {
                    formInstId: this.$('textField_mea9fcw1').getValue(),
                    updateFormDataJson: JSON.stringify(data1)
                };
                this.dataSourceMap['updateData'].load(param2).then(res => {
                    this.utils.toast({ title: '修改成功', type: 'success' });
                    this.$('dialog_me9xwn20').hide();
                    setTimeout(() => this.dataSourceMap['getTodoData'].load(), 1000);
                });
            }
        }, 0);
    });
}

*注：fieldsValidate 是一个辅助函数，用于遍历组件唯一标识集合进行异步校验，确保数据完整性。

删除与流转

删除操作同样需要二次确认。在操作列增加'删除'按钮，绑定 onDeleteClick，弹出确认框并将当前行的 instid 存入隐藏输入框。

当用户从'进行中待办'列表中勾选某条数据并执行删除时，实际上是将该数据移动到'已完成待办'列表。这需要同时调用删除接口和插入接口：

export function onSelect(selected, rowData, selectedRows) {
    // 1. 从进行中删除
    const param1 = { formInstId: rowData.instid };
    this.dataSourceMap['deleteData'].load(param1).then(() => {
        setTimeout(() => this.dataSourceMap['getTodoData'].load(), 1000);
    });

    // 2. 插入到已完成待办
    const data1 = {
        "textField_me2ndu46": rowData.textField_me2n0yey,
        "radioField_me2ndu47": rowData.radioField_me2n0yez,
        "rateField_me2ndu48": rowData.rateField_me2n0yf0,
        "dateField_me2ndu49": rowData.dateField_me2n0yf1,
        "textareaField_me2ndu4a": rowData.textareaField_me2n0yf2
    };
    const param2 = {
        formUuid: "FORM-17BD995E61214B80BCEE9BB6EADF8DC8JNTV",
        appType: "APP_L0MRPK82DM5SNZ2UIHPM",
        formDataJson: JSON.stringify(data1)
    };
    this.dataSourceMap["insert"].load(param2).then(() => {
        setTimeout(() => this.dataSourceMap['getDoneData'].load(), 1000);
    });
}

通知配置

最后别忘了提醒功能。在'进行中待办'表单的设置中，找到'消息通知'，配置基于'设置提醒日期'的定时推送，确保用户不会错过重要事项。

参考文档

如需了解更多 API 细节，可查阅官方文档：自定义表格实现增删改查