跳到主要内容
宜搭低代码开发师(高级)认证实操:待办列表功能实现 | 极客日志
JavaScript SaaS 大前端
宜搭低代码开发师(高级)认证实操:待办列表功能实现 宜搭低代码开发师高级认证实操涉及待办列表功能实现。通过创建普通表单定义待办字段,利用自定义页面构建工作台界面。核心在于使用 JS 面板调用宜搭 API 进行数据交互,包括获取表单实例列表、新增、编辑、删除及状态流转。实现分页搜索、字段校验、弹窗交互及提醒通知配置。本文提供详细步骤与关键代码片段,涵盖数据源绑定、组件标识处理及前后端逻辑对接,助力开发者掌握低代码平台的高级定制能力。
云间运维 发布于 2026/4/12 更新于 2026/5/24 13 浏览考前须知
进入组织是第一步。如果二维码失效,可以通过钉钉手机端操作:点击右下角【我的】→【客服与帮助】→下滑找到【快捷工具】→选择【加入团队】,根据名称搜索即可。
项目实操
1. 基础表单搭建
进行中待办
首先创建用于录入数据的普通表单。我们需要定义几个核心字段:
待办事项 :单行文本组件,必填。
分类 :单选组件,必填(个人、工作、其他)。
重要度 :评分组件,默认值设为 1,必填。
设置提醒日期 :日期组件,格式年月日。
待办详情 :多行文本组件。
注意 :设置重要度的默认值为 1 时,需要获取组件的唯一标识(例如 rateField_me2n0yf0),在左侧动作面板中使用如下代码初始化:
that.$('组件唯一标识' ).setValue ()
已完成待办
复制'进行中待办'表单,将页面名称修改为【已完成待办】,后续逻辑类似。
2. 自定义页面构建
TodoList 界面设计
新建自定义页面,选择【工作台模板 -01】作为基础。删除多余的布局容器,将标题改为'待办列表'。
接下来拖入分组和子表格组件。我们将分为'进行中待办'和'已完成待办'两个区域展示数据。
:选中表格组件,保留必要字段(待办事项、分类、重要度、提醒日期等)。记得从表单设计器中复制组件的唯一标识,粘贴到表格的数据字段配置中。
字段映射
样式调整 :修改'设置提醒日期'的时间格式,将'重要度'设置为枚举类型,并配置对应的颜色样式。代码如下:[ { "color" : "grey" , "text" : "1" , "value" : 1 , "__sid__" : "serial_me9yvo5m" } , { "color" : "blue" , "text" : "2" , "value" : 2 , "__sid__" : "serial_me9yvo5n" } , { "color" : "yellow" , "text" : "3" , "value" : 3 , "__sid__" : "serial_me9yvo5o" } , { "color" : "green" , "text" : "4" , "value" : 4 , "__sid__" : "serial_me9yvo5p" } , { "color" : "red" , "text" : "5" , "value" : 5 , "__sid__" : "serial_me9yvo5q" } ]
页面设置 :选中整个页面,将背景色设为白色,保持视觉清爽。
3. 功能实现细节 在开始写代码前,先明确两个关键参数:应用编码 (appType) 和 表单 ID (formUuid) 。它们可以在浏览器地址栏或表单设计器的 URL 中找到,后续 API 调用必须使用正确的值。
数据展示 以'进行中待办'为例,我们需要通过远程数据源获取数据。
添加数据源 :删除未使用的远程数据源,新增一个名为 getTodoData 的 GET 请求,接口路径为 /v1/form/searchFormDatas.json,必填参数为 formUuid。
数据处理 :在请求完成回调函数中,需要对返回的数据结构进行清洗,确保字段名与表格列对应。关键代码如下:
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
};
}
绑定变量 :将表格的数据源变量设置为 state.getTodoData,主键设为 instid。
分页与搜索
状态管理 :新增 page 和 searchKey 两个状态变量。
请求参数 :在 getTodoData 数据源中,将分页和搜索条件绑定到状态变量。注意 searchFieldJson 需要序列化。
{
searchFieldJson : JSON .stringify ({ radioField_me2n0yez : state.searchKey }),
formUuid : "FORM-50859B5DAD37446FA143EDCB4CF3A44375VP" ,
currentPage : state.page ,
pageSize : 5
}
触发逻辑 :在表格的分页/搜索事件 onFetchTodoData 中更新状态。如果是搜索操作,需重置当前页码为 1。
export function onFetchTodoData (params ) {
if (params.from === 'search' ) {
params.currentPage = 1 ;
}
this .setState ({ "searchKey" : params.searchKey , "page" : params.currentPage });
}
新增与编辑
打开弹窗 :在顶部操作栏添加'新增待办'按钮,绑定回调函数 onActionBarItemClick。打开弹窗后,记得重置所有表单字段,特别是重要度要重置为 1。
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 ();
});
}
保存逻辑 :在对话框的 onOk 事件中执行。首先需要校验必填项,然后组装数据调用保存接口。这里有一个技巧:区分'新增'和'编辑'模式。可以引入一个 flag 状态变量,新增时设为 insert,编辑时设为 edit。
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 );
});
}
*注:fieldsValidate 是一个辅助函数,用于遍历组件唯一标识集合进行异步校验,确保数据完整性。
删除与流转 删除操作同样需要二次确认。在操作列增加'删除'按钮,绑定 onDeleteClick,弹出确认框并将当前行的 instid 存入隐藏输入框。
当用户从'进行中待办'列表中勾选某条数据并执行删除时,实际上是将该数据移动到'已完成待办'列表。这需要同时调用删除接口和插入接口:
export function onSelect (selected, rowData, selectedRows ) {
const param1 = { formInstId : rowData.instid };
this .dataSourceMap ['deleteData' ].load (param1).then (() => {
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 );
});
}
通知配置 最后别忘了提醒功能。在'进行中待办'表单的设置中,找到'消息通知',配置基于'设置提醒日期'的定时推送,确保用户不会错过重要事项。
参考文档 相关免费在线工具 Keycode 信息 查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
Escape 与 Native 编解码 JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
JavaScript / HTML 格式化 使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
JavaScript 压缩与混淆 Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online