【宜搭】低代码开发师高级认证实操题1难点指导

难度： 较难
知识点： 远程数据源 表单创建 表格组件使用 js增删改查功能代码编写

在本文中，我将根据题目的每一点要求，对于我在实操过程中遇到的难点进行比较详细的介绍，供大家参考，希望能够对大家有所帮助。

解题步骤：

创建页面

根据要求创建两个普通表单和一个自定义页面，分别为进行中待办、已完成待办和Todolist。具体相关组件的选用可以参考如下：

图1.1 Todolist页面
图1.2 进行中待办表单

注意： 其中进行中待办和已完成待办所构成的组件基本相同，操作列功能也基本相同，可直接复制粘贴。整个Todolist页面的页头部分可使用宜搭模板里的“待办项目”。

功能实现

1 数据展示

所涉及到的数据源

图2.1 获取进行中待办的数据源

注意： 参数formUuid的值为表单的Id，即APP_XXX

图2.2 获取已完成待办的数据源

注意： 同理于进行中待办，实际上接口可复用，只需在js面板调用接口，将对应的formUuid值赋值给参数即可，感兴趣可自行修改。

所涉及的全局变量

图2.3 进行中待办表格展示数据变量
图2.4 已完成待办表格展示数据变量

以下变量在编辑搜索功能时会有用

图2.5 进行中待办表格接口返回数据变量
图2.6 已完成待办表格接口返回数据变量

访问接口获取表单数据的代码

//获取进行中待办数据export function getTodoListData(){     this.dataSourceMap.getTodoTasks.load().then(res =>{     //console.log(res)  //以下根据返回内容重构数据对象，使数据格式符合宜搭组件格式要求    let toDoData = []    for(let i=0; i      let tmpData = res.data[i].formData      //此处另外添加formInstId属性，用于之后的复选框功能      tmpData['formInstId'] = res.data[i].formInstId      //将每一个重构的对象存入到全局变量ToDoData      toDoData.push(tmpData)    }    //表格展示数据源。其中，currentPage和totalCount的取值会影响到表格分页器的展示    this.setState({         toDoListData: {           data: toDoData,        currentPage: res.currentPage,        totalCount: res.totalCount      }    })    //原表单真实数据集，用于后续的搜索功能    state.ToDoData_1['data'] = toDoData  })  //console.log('v', state.ToDoData_1)}