宜搭低代码实践：待办应用从表单到列表全流程

页面背景色设成白色，纯粹觉得好看。

数据获取

调用宜搭接口需要两个关键参数：应用编码（appType）和表单 UUID（formUuid）。formUuid 直接去表单设计页的链接里抓，比如 FORM-XXXX 那串。

数据源配置里我删掉多余的远程 API，新建一个 getTodoData：

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

请求完成回调里映射一下返回数据到表格字段，代码差不多这样：

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

表格数据源绑定成 state.getTodoData，主键用 instid，这样每条数据就有稳定标识了。

分页和搜索

增加两个变量 page 和 searchKey，然后在远程数据源的请求参数里传过去：

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

表格上绑个 onFetchTodoData 事件，处理搜索和翻页时更新 state：

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

分页每页 5 条，测试时数据少看不出来，后面多了就知道 5 条一页挺合适。

新增待办

在顶部操作栏加个'新增待办'按钮，弹出一个对话框（唯一标识 dialog_me9xwn20），里面复用同样的字段布局。按钮回调里重置表单，并把重要度设为 1：

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

确定按钮的 onOk 方法里，先校验，然后拼好数据通过远程 API 提交。这段代码里唯一标识要和自己表单对清楚，不然字段值乱窜：

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

别忘了新增一个 insert 远程数据源，POST 到 /v1/form/saveFormData.json。

删除待办

操作列里加个'删除'按钮，点击时弹出确认框，确认框里藏一个输入框存当前数据的 instid：

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

确认后调 deleteData 远程 API，地址是 /v1/form/deleteFormData.json。

编辑待办

操作列也加'编辑'，点击时把当前行数据回填到新增用的那个对话框，另外用一个 flag 变量区分新增和编辑模式。onOk 里根据 flag 决定调 insert 还是 updateData，后者请求 /v1/form/updateFormData.json。

已完成待办的展示与操作

已完成部分照搬上面的逻辑，只是换一套表单 UUID 和变量名。我又建了一个 getDoneData 远程 API，分页变量换成 donePage 和 doneSearchKey，事件 onFetchDoneData。复用性和维护性一般，但先跑通再说。

一键转为已完成

在'进行中待办'表格开启行选择器，单选模式。onSelect 回调里先删除原记录，再把数据插入已完成表单。这里注意字段标识要对应新表单，很容易漏改一两个。

消息通知

表单单拎出来设置消息通知，利用'设置提醒日期'字段，宜搭配置里勾一勾，到时间钉钉就能收到提醒。这点对实际用户还挺实用的。

页面 JS 全貌

自定义页面主要的 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();
  });
}

// 确定提交
export function onOk() {
  // 校验与提交逻辑
}

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

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

整个流程走下来，低代码平台确实能省很多界面搭建的力气，但逻辑稍微复杂一点，还是要靠写不少代码，而且不同页面、不同表单之间数据字段的映射得格外小心。做完之后对宜搭的数据源和组件交互理解会深很多。