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

3.1 数据展示与分页

在数据源中添加远程 API getTodoData，请求 /v1/form/searchFormDatas.json。 数据处理回调中，需要将返回的 formData 映射到表格字段，并保留 formInstId 作为主键。 分页和搜索功能通过绑定表格的触发事件实现，监听 onFetchTodoData，根据用户输入更新 searchKey 和 page 状态，并重新加载数据源。

3.2 新增与编辑

点击'新增待办'按钮弹出对话框。

• 打开弹窗: 重置表单字段默认值。
• 提交保存: 校验必填项后，调用 insert 接口。
• 编辑回显: 点击行内编辑时，将当前行数据回填至对话框，并将操作标志位 flag 设为 edit。
• 保存逻辑: 根据 flag 判断是调用新增接口还是更新接口 (updateFormData.json)。

3.3 删除与状态流转

• 删除: 弹出确认框，获取选中行的 instid，调用删除接口。
• 移至已完成: 开启表格行选择器，单选模式下，选中某条记录后自动执行删除'进行中'数据并插入'已完成'数据的逻辑。

4. 完整代码参考

以下是自定义页面 JS 面板的核心逻辑汇总，包含了生命周期、数据交互及业务处理函数。请根据实际组件 ID 进行适配。

// 页面加载完成后初始化
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', size: 'large' });
          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", size: "large" });
          this.$('dialog_me9xwn20').hide();
          setTimeout(() => { this.dataSourceMap['getTodoData'].load(); }, 1000);
        });
      }
    }, 0);
  });
}

// 辅助校验函数
export async function fieldsValidate(fieldList = []) {
  const result = [];
  for (let i = 0; i < fieldList.length; i++) {
    await this.$(fieldList[i]).validate((errors, values) => {
      if (!errors) return;
      result.push({
        fieldId: fieldList[i],
        errors: this.utils.isMobile() ? errors.errors[fieldList[i]].errors : errors[fieldList[i]].errors
      });
    });
  }
  return result;
}

// 删除逻辑
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", size: "large" });
    this.$('dialog_mea9fcvy').hide();
    setTimeout(() => {
      this.dataSourceMap['getTodoData'].load();
      this.dataSourceMap['getDoneData'].load();
    }, 1000);
  });
}

// 编辑逻辑
export function onEditClick(rowData) {
  this.setState({ flag:'edit' });
  this.$('dialog_me9xwn20').show(() => {
    this.$('textField_me9xwn22').setValue(rowData.textField_me2n0yey);
    this.$('radioField_me9xwn23').setValue(rowData.radioField_me2n0yez);
    this.$('rateField_me9xwn24').setValue(rowData.rateField_me2n0yf0);
    this.$('dateField_me9xwn25').setValue(rowData.dateField_me2n0yf1);
    this.$('textareaField_me9xwn26').setValue(rowData.textareaField_me2n0yf2);
    this.$('textField_mea9fcw1').setValue(rowData.instid);
  });
}

// 行选择移动状态
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(res => {});
  setTimeout(() => { this.dataSourceMap['getDoneData'].load(); }, 1000);
}

// 已完成列表搜索
export function onFetchDoneData(params) {
  if (params.from === 'search') { params.currentPage = 1; }
  this.setState({ "doneSearchKey": params.searchKey, "donePage": params.currentPage });
}

通过以上步骤，即可完成一个具备基本 CRUD 及状态流转功能的待办列表应用。实际开发中请注意替换具体的 AppType 和 FormUuid，并根据业务需求调整字段映射。