宜搭低代码高级认证：待办列表自定义页面实战指南

设置页面背景色为白色，保持界面整洁。

4. 数据交互与功能实现

4.1 获取应用编码与表单 ID

在调用接口前，需要获取当前应用的 appType 和表单的 formUuid。可在浏览器地址栏查看或通过控制台输出获取。这些参数将在后续 API 请求中作为必填项。

4.2 进行中待办 - 数据展示

1. 配置远程数据源：添加名为 getTodoData 的远程 API，请求地址为 /v1/form/searchFormDatas.json，类型为 GET。
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。

4.3 分页与搜索

新增 page 和 searchKey 状态变量。在远程数据源中绑定请求参数，支持按分类搜索。

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

在表格的分页/搜索触发事件中，更新状态变量，确保搜索时重置页码。

4.4 新增与编辑功能

新增操作：

1. 在顶部操作栏添加'新增待办'按钮。
2. 创建一个对话框组件，内部放置与表单一致的字段。
3. 编写回调函数 onActionBarItemClick，打开弹窗并重置表单字段值。
4. 在对话框的确定事件 onOk 中，收集数据并调用 insert 远程数据源（POST /v1/form/saveFormData.json）。
5. 增加表单校验逻辑，确保必填项完整后再提交。

编辑操作：

1. 在操作列添加'编辑'按钮，绑定 onEditClick。
2. 回填当前行数据到对话框组件。
3. 在 onOk 中增加判断逻辑：若标记为 edit，则调用 updateData 远程数据源（POST /v1/form/updateFormData.json）；若为 insert，则调用新增接口。

4.5 删除功能

1. 在操作列添加'删除'按钮，绑定 onDeleteClick。
2. 弹出确认对话框，传递当前行的 instid。
3. 确认后调用 deleteData 远程数据源（POST /v1/form/deleteFormData.json）。
4. 删除成功后刷新列表。

4.6 状态流转（进行中转已完成）

开启表格的行选择器。在 onSelect 回调中实现逻辑：

1. 删除选中的'进行中'数据。
2. 构造新数据对象，将字段映射到'已完成待办'表单的字段 ID。
3. 调用'已完成待办'表单的新增接口插入数据。
4. 同时刷新两个列表的数据源。

4.7 通知设置

在'进行中待办'表单的设置中，进入消息通知模块，配置提醒规则，实现到期自动通知功能。

5. 核心代码汇总

以下为自定义页面 JS 面板的核心逻辑片段，涵盖了生命周期、数据加载、增删改查及状态流转。

// 页面加载完成
export function didMount() {
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
}

// 分页/搜索触发
export function onFetchTodoData(params) {
  if (params.from === 'search') params.currentPage = 1;
  this.setState({ "searchKey": params.searchKey, "page": params.currentPage });
}

// 新增按钮点击
export function onActionBarItemClick() {
  this.setState({ flag: 'insert' });
  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();
    this.$('textField_mea9fcw1').reset();
  });
}

// 确定按钮逻辑
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);
  });
}

// 删除逻辑
export function onDeleteClick(rowData) {
  this.$('dialog_mea9fcvy').show(() => {
    this.$('textField_mea9fcw0').setValue(rowData.instid);
  });
}

export function onDeleteTodoData() {
  const param = { formInstId: this.$('textField_mea9fcw0').getValue() };
  this.dataSourceMap['deleteData'].load(param).then(res => {
    this.utils.toast({ title: "删除成功", type: "success" });
    this.$('dialog_mea9fcvy').hide();
    setTimeout(() => {
      this.dataSourceMap['getTodoData'].load();
      this.dataSourceMap['getDoneData'].load();
    }, 1000);
  });
}

// 状态流转：进行中 -> 已完成
export function onSelect(selected, rowData, selectedRows) {
  const param1 = { formInstId: rowData.instid };
  this.dataSourceMap['deleteData'].load(param1).then(res => {
    setTimeout(() => this.dataSourceMap['getTodoData'].load(), 1000);
  });

  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);
  });
}

6. 注意事项

• 组件标识：文中出现的组件唯一标识（如 textField_me2n0yey）均为示例，实际使用时请替换为你自己创建的组件 ID。
• API 权限：确保当前账号拥有调用相应表单 API 的权限。
• 数据一致性：在状态流转过程中，注意事务处理，避免数据丢失。

通过以上步骤，即可完成一个具备完整 CRUD 能力及状态管理的待办列表应用。