宜搭低代码高级认证实操：待办列表功能实现

复制该分组用于'已完成待办'展示，并修改标题。设置页面背景色为白色。

2.2.2 数据获取说明

调用应用接口需获取应用编码（appType）和表单 UUID（formUuid）。例如：

• 请求地址：/dingtalk/web/APP_X1X2X3X4/v1/process/startInstance.json
• formUuid 可在表单设计页面 URL 中获取。

2.2.3 进行中待办 - 数据展示

1. 数据源配置：删除未使用的远程数据源，添加【getTodoData】远程 API。

   • 请求地址：/v1/form/searchFormDatas.json
   • 请求类型：GET
   • 参数：formUuid（必填）

2. 数据处理：修改请求完成回调函数，映射返回数据结构至表格字段。

function didFetch(content) {
  const value = [];
  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。

2.2.4 进行中待办 - 分页/搜索

1. 新增变量 page 和 searchKey。
2. 在远程数据源请求参数中绑定变量：

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

3. 表格触发事件 onFetchTodoData 编写代码更新状态：

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

4. 设置分页每页条数为 5。

2.2.5 进行中待办 - 新增

1. 顶部操作：添加'新增待办'按钮。
2. 对话框组件：创建弹窗，包含相同字段，设置唯一标识（如 dialog_me9xwn20）。
3. 按钮回调：onActionBarItemClick 打开弹窗并重置表单。

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

4. 确定逻辑：onOk 校验并提交数据。

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-...",
    appType: "APP_...",
    formDataJson: JSON.stringify(data1)
  };
  this.fieldsValidate(createFieldList).then((errorList) => {
    if (errorList.length > 0) return;
    this.dataSourceMap["insert"].load(param).then(res => {
      this.utils.toast({ title: '新增成功', type: 'success' });
      this.$('dialog_me9xwn20').hide();
      setTimeout(() => this.dataSourceMap['getTodoData'].load(), 1000);
    });
  });
}

5. 远程数据源：新增 insert 接口 /v1/form/saveFormData.json，POST 方式。

2.2.6 进行中待办 - 删除

1. 确认对话框：创建提示框，隐藏输入框存储当前数据 ID。
2. 操作列：绑定 onDeleteClick，传递 rowData.instid。
3. 删除逻辑：调用 deleteData 远程 API /v1/form/deleteFormData.json。

2.2.7 进行中待办 - 编辑

1. 操作列：绑定 onEditClick，回填数据至对话框。
2. 状态管理：增加 flag 变量区分新增/编辑模式。
3. 更新逻辑：onOk 中判断 flag，若为 edit 则调用 updateData 接口 /v1/form/updateFormData.json。

2.2.8 已完成待办 - 数据展示

1. 复制表格配置，调整字段映射对应新表单的 formUuid。
2. 新建远程 API getDoneData，配置数据处理逻辑。

2.2.9 已完成待办 - 分页/搜索

1. 配置分页参数 donePage 和 doneSearchKey。
2. 绑定 onFetchDoneData 事件处理搜索和翻页。

2.2.10 进行中待办 - 选择单行转已完成

开启行选择器，单选模式。在 onSelect 回调中：

1. 删除原数据（调用 deleteData）。
2. 插入新数据到已完成表单（调用 insert），字段名需对应新表单的唯一标识。

2.2.11 通知功能

在表单设置中配置消息通知，实现'设置提醒日期'的提醒功能。

3. 核心代码参考

以下为自定义页面 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(() => {
    // 重置字段...
  });
}

// 确定提交
export function onOk() {
  // 校验逻辑
  // 根据 flag 决定调用 insert 或 updateData
}

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

// 行选择转换
export function onSelect(selected, rowData, selectedRows) {
  // 删除原记录并插入新记录
}

注意：实际开发中请替换示例中的 AppType、FormUuid 及组件唯一标识。