宜搭低代码开发高级认证例题1-待办列表

embedded/2024/9/22 21:49:03/

1、进行中待办和已完成待办界面相同

关键代码就是重要度默认为1星

2、新增自定义页面Todolist

2.1主要参数设置-新建远和API

getTodoList和getDoneList代码相同

绑定代码：`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/searchFormDatas.json`

绑定代码:`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/saveFormData.json`

绑定代码:`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/deleteFormData.json`

绑定代码：`/${window.pageConfig.appType || window.g_config.appKey}/v1/form/updateFormData.json`

2.2 新建变量

3、主要JS代码如下：

/**
* 尊敬的用户，你好：页面 JS 面板是高阶用法，一般不建议普通用户使用，如需使用，请确定你具备研发背景，能够自我排查问题。当然，你也可以咨询身边的技术顾问或者联系宜搭平台的技术支持获得服务（可能收费）。
* 我们可以用 JS 面板来开发一些定制度高功能，比如：调用阿里云接口用来做图像识别、上报用户使用数据（如加载完成打点）等等。
* 你可以点击面板上方的 「使用帮助」了解。
*/// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {console.log(`「页面 JS」：当前页面地址 ${location.href}`);this.$('dialog_one').hide();this.$('dialog_two').hide();this.getTodoList(); // 获取数据this.getDoneList(); // 获取数据
}/**
* 获取数据 - 高级版 进行中的待办
*/
export function getTodoList() {const { pageSize, currentPage, searchFieldData = {}, dynamicOrderData = {} } = this.state;this.dataSourceMap.getTodoList.load({formUuid: 'FORM-F2C0FE8F01D74EEA922E0329875252F4C0I5',pageSize,currentPage,searchFieldJson: JSON.stringify(searchFieldData),dynamicOrder: JSON.stringify(dynamicOrderData),}).then((res) => {const { totalCount = 0, data = [] } = res;const result = data.map((item) => {const { formInstId, formUuid, formData = {} } = item;return {formInstId,formUuid,...formData,};});this.setState({tableData: {currentPage,data: result,totalCount,},tableIsLoading: false,});}).catch(({ message }) => {this.utils.toast({title: message,type: 'error',});this.setState({tableIsLoading: false,});});
}/**
* tablePc onFetchData
* @param params.currentPage 当前页码
* @param params.pageSize 每页显示条数
* @param params.searchKey 搜索关键字
* @param params.orderColumn 排序列
* @param params.orderType 排序方式（desc,asc）
* @param params.from 触发来源（order,search,pagination）
*/
export function onFetchData(params) {const { pageSize } = this.state;if (params.from === 'search' || params.pageSize !== pageSize) {params.currentPage = 1;}const orderTypeText = {'desc': '-', // 降序'asc': '+', // 升序};let dynamicOrderData = {};dynamicOrderData[params.orderColumn] = orderTypeText[params.orderType];this.setState({currentPage: params.currentPage,pageSize: params.pageSize,searchFieldData: { radioField_lxin6d6o: params.searchKey }, // 搜索功能tableIsLoading: true,});this.getTodoList();
}/**
* 获取数据 - 高级版 已完成待办
*/
export function getDoneList() {const { pageSize, currentPage, searchFieldData = {}, dynamicOrderData = {} } = this.state;this.dataSourceMap.getDoneList.load({formUuid: 'FORM-ECED72855006441B8057B5279BCA548FE5YH',pageSize,currentPage,searchFieldJson: JSON.stringify(searchFieldData),dynamicOrder: JSON.stringify(dynamicOrderData),}).then((res) => {const { totalCount = 0, data = [] } = res;const result = data.map((item) => {const { formInstId, formUuid, formData = {} } = item;return {formInstId,formUuid,...formData,};});this.setState({tableDoneData: {currentPage,data: result,totalCount,},tableIsLoading: false,});}).catch(({ message }) => {this.utils.toast({title: message,type: 'error',});this.setState({tableIsLoading: false,});});
}/**
* tablePc onFetchData
* @param params.currentPage 当前页码
* @param params.pageSize 每页显示条数
* @param params.searchKey 搜索关键字
* @param params.orderColumn 排序列
* @param params.orderType 排序方式（desc,asc）
* @param params.from 触发来源（order,search,pagination）
*/
export function onFetchDoneData(params) {const { pageSize } = this.state;if (params.from === 'search' || params.pageSize !== pageSize) {params.currentPage = 1;}const orderTypeText = {'desc': '-', // 降序'asc': '+', // 升序};let dynamicOrderData = {};dynamicOrderData[params.orderColumn] = orderTypeText[params.orderType];this.setState({currentPage: params.currentPage,pageSize: params.pageSize,searchFieldData: { radioField_lxlayzcx: params.searchKey }, // 搜索功能tableIsLoading: true,});this.getDoneList();
}let isUpdate = false;
let updateformInstId = '';
let deleteformInstId = '';
/**
* dialog onCancel
*/
export function onCancel() {console.log('onCancel');this.$('dialog_one').hide();
}/**
* dialog onClose
*/
export function onClose() {console.log('onClose');this.$('dialog_one').hide();
}/**
* dialog onCancel
*/
export function onCancelDelete() {console.log('onCancel');this.$('dialog_two').hide();
}/**
* dialog onClose
*/
export function onCloseDelete() {console.log('onClose');this.$('dialog_two').hide();
}// 打开新增窗口
export function onOpenDialog() {isUpdate = false;this.$('dialog_one').set('title', '新增待办');this.$('dialog_one').show(() => {this.$('textField_lxjrxjj8').reset(); // 待办事项this.$('radioField_lxjrxjj9').reset(); // 分类this.$('rateField_lxjrxjja').setValue(1),// 重要度this.$('dateField_lxjrxjjb').reset(); // 提醒日期this.$('textareaField_lxjrxjjc').reset(); // 待办详情});
}// 打开修改窗口
export function onEditDialog(rowData) {isUpdate = true;this.$('dialog_one').set('title', '更新待办');this.$("dialog_one").show(() => {this.$('textField_lxjrxjj8').setValue(rowData.textField_lxin6d6m),// 待办事项this.$('radioField_lxjrxjj9').setValue(rowData.radioField_lxin6d6o),// 分类this.$('rateField_lxjrxjja').setValue(rowData.rateField_lxin6d6s_value),// 重要度this.$('dateField_lxjrxjjb').setValue(rowData.dateField_lxin6d6u),// 提醒日期this.$('textareaField_lxjrxjjc').setValue(rowData.textareaField_lxin6d6w),// 待办详情this.updateformInstId = rowData.formInstId});
}/**
* 保存新增/修改数据窗口
*/
export function onOpenDialogOk() {this.$('dialog_one').set('confirmState', 'LOADING'); // 开启对话框加载状态let todo = this.$('textField_lxjrxjj8').getValue(); // 待办事项let asort = this.$('radioField_lxjrxjj9').getValue(); // 分类let importance = this.$('rateField_lxjrxjja').getValue(); // 重要度let remindtime = this.$('dateField_lxjrxjjb').getValue(); // 提醒日期let detail = this.$('textareaField_lxjrxjjc').getValue(); // 待办详情let formData = {"textField_lxin6d6m": todo, // 待办事项"radioField_lxin6d6o": asort, // 分类"rateField_lxin6d6s": importance, // 重要度"dateField_lxin6d6u": remindtime, // 提醒日期"textareaField_lxin6d6w": detail, // 待办详情};let formDataJson = [];if (isUpdate) {//更新数据let params = {formInstId: this.updateformInstId,updateFormDataJson: JSON.stringify(formData)};this.dataSourceMap.updateData.load(params).then(() => {this.$('dialog_one').set('confirmState', 'NORMAL'); // 关闭对话框加载状态this.$('dialog_one').hide();this.utils.toast({title: '更新成功',type: 'success',});setTimeout(() => {this.setState({tableIsLoading: true,});this.getTodoList(); // 获取数据}, 1000);}).catch(({ message }) => {this.utils.toast({title: message,type: 'error',});this.$('dialog_one').set('confirmState', 'NORMAL'); // 关闭对话框加载状态});} else {//保存数据let params = {formUuid: "FORM-F2C0FE8F01D74EEA922E0329875252F4C0I5",appType: pageConfig.appType,formDataJson: JSON.stringify(formData)};this.dataSourceMap.saveData.load(params).then(() => {this.$('dialog_one').set('confirmState', 'NORMAL'); // 关闭对话框加载状态this.$('dialog_one').hide();this.utils.toast({title: '保存成功',type: 'success',});setTimeout(() => {this.setState({tableIsLoading: true,});this.getTodoList(); // 获取数据}, 1000);}).catch(({ message }) => {this.utils.toast({title: message,type: 'error',});this.$('dialog_one').set('confirmState', 'NORMAL'); // 关闭对话框加载状态});}
}// 进行中事项删除框
export function onDeleteDialog(rowData) {this.$('dialog_two').show(() => {this.deleteformInstId = rowData.formInstId;});
}/**
* dialog onOk
*/
export function onDeleteOk() {this.$('dialog_two').set('confirmState', 'LOADING'); // 开启对话框加载状态this.dataSourceMap.deleteData.load({ formInstId: this.deleteformInstId}).then(() => {this.$('dialog_two').set('confirmState', 'NORMAL'); // 关闭对话框加载状态this.$('dialog_two').hide();this.utils.toast({title: '删除成功',type: 'success',});setTimeout(() => {this.setState({tableIsLoading: true,});this.getTodoList(); // 获取数据this.getDoneList();}, 1000);}).catch(({ message }) => {this.utils.toast({title: message,type: 'error',});this.$('dialog_two').set('confirmState', 'NORMAL'); // 关闭对话框加载状态});
}/**
* 选择（或取消选择）数据之后的回调
* @param selected Boolean 是否选中
* @param rowData Object 当前操作行
* @param selectedRows Array 选中的行数据
*/    
export function onSelect(selected, rowData, selectedRows) {console.log(selected, rowData, selectedRows);//删除todolist里这条数据this.dataSourceMap.deleteData.load({ formInstId: rowData.formInstId }).then(() => {setTimeout(() => {this.setState({tableIsLoading: true,});this.getTodoList(); // 获取数据}, 1000);}).catch(({ message }) => {this.utils.toast({title: message,type: 'error',});}); //保存上面删除的数据到donelistlet params = {formUuid: "FORM-ECED72855006441B8057B5279BCA548FE5YH",appType: pageConfig.appType,formDataJson: JSON.stringify({"textField_lxlayzcu": rowData.textField_lxin6d6m, // 待办事项"radioField_lxlayzcx": rowData.radioField_lxin6d6o, // 分类"rateField_lxlayzcz": rowData.rateField_lxin6d6s, // 重要度"dateField_lxlayzd1": rowData.dateField_lxin6d6u, // 提醒日期"textareaField_lxlayzd3": rowData.textareaField_lxin6d6w // 待办详情})};this.dataSourceMap.saveData.load(params).then(() => {this.utils.toast({title: '操作成功！',type: 'success',});setTimeout(() => {this.setState({tableIsLoading: true,});this.getDoneList(); // 获取数据}, 1000);}).catch(({ message }) => {this.utils.toast({title: message,type: 'error',});}); 
}

4、字段与绑定

数据字段对应的是进行中待办所录入的信息字段，要一一对应绑定在这里

已完成待办中所绑定

与进行中的待办相同

与进行中的待办相同

5、新增/更新对话框

进行中和已完成待办共用的删除对话框

注意：

重要度是用枚举方式来绑定

[{"color": "grey","text": "1","value": 1,"__sid__": "serial_lxsixjuy"},{"color": "blue","text": "2","value": 2,"__sid__": "serial_lxsixjuz"},{"color": "yellow","text": "3","value": 3,"__sid__": "serial_lxsixjv0"},{"color": "green","text": "4","value": 4,"__sid__": "serial_lxsixjv1"},{"color": "red","text": "5","value": 5,"__sid__": "serial_lxsixjv2"}
]

最后就可以进行测试操作

测试完成后把应用名称与应用跳转地址提交答案即可


http://www.ppmy.cn/embedded/55783.html

相关文章

Lua: 轻量级多用途脚本语言

Lua: 轻量级多用途脚本语言

Lua 是一种高效而轻量级的脚本语言，具备强大的扩展性和灵活性，广泛应用于游戏开发、嵌入式系统、Web 应用等多个领域。本文将深入探讨 Lua 的特性、应用场景以及如何使用 Lua 进行开发。 1. Lua 的起源与发展 Lua 的发展始于上世纪90年代初，…
阅读更多...
Spark性能优化（第22天）

Spark性能优化（第22天）

一、Spark性能优化概述 二、Spark性能优化策略 三、理论分析 四、实践案例分析 五、监控与诊断 六、持续优化与改进 文章目录 引言一、Spark性能优化概述二、Spark性能优化策略1.1 开发调优2.1资源调优3.1 数据倾斜调优4.1 Shuffle调优 三、理论分析四、实践案例分析五、监控与…
阅读更多...
pdf如何转成图片（不带水印）

pdf如何转成图片（不带水印）

PDF 文件格式是一种广泛应用于电子文档分享和打印的格式，而图像文件格式（如 JPEG、PNG 等）则更常用于在网页上展示图片或进行进一步的图像处理。将 PDF 转换为图像的需求可能源于多种原因：可能是为了在无法直接查看 PDF 的设备上查…
阅读更多...
Linux 安装 Redis 教程

Linux 安装 Redis 教程

优质博文：IT-BLOG-CN 一、准备工作 配置gcc：安装Redis前需要配置gcc： yum install gcc如果配置gcc出现依赖包问题，在安装时提示需要的依赖包版本和本地版本不一致，本地版本过高，出现如下问题&#xff1a…
阅读更多...
什么是Redis?|介绍与使用及特点浅记

什么是Redis?|介绍与使用及特点浅记

Redis简介 Redis（Remote Dictionary Server）是一种基于内存、支持持久化的键值对存储系统，具有丰富的数据结构和高性能的特性。它不仅可以作为数据库，还可以作为缓存和消息中间件使用。Redis是单线程模型，但利用IO多路…
阅读更多...
＜电力行业＞ - 《第1课：电力行业的五大四小》

＜电力行业＞ - 《第1课：电力行业的五大四小》

1 什么是电力行业的五大四小？ 我们常说的电力行业的五大四小，指的是电力行业有实力的公司，分为：较强梯队的五大集团、较弱梯队的四小豪门。 五个实力雄厚的集团，分别是： 中国华能集团公司中国大唐集团公…
阅读更多...
Tomcat高效部署与性能优化

Tomcat高效部署与性能优化

Tomcat高效部署与性能优化 一、引言 Apache Tomcat是一个广泛使用的开源Java Web应用服务器，它轻量级、易扩展，并支持Servlet和JSP规范。然而，随着业务的发展和用户数量的增长，Tomcat的性能和稳定性变得至关重要。本文将介绍如何…
阅读更多...
【ONLYOFFICE震撼8.1】ONLYOFFICE8.1版本桌面编辑器测评

【ONLYOFFICE震撼8.1】ONLYOFFICE8.1版本桌面编辑器测评

随着远程工作的普及和数字化办公的发展，越来越多的人开始寻找一款具有强大功能和便捷使用的办公软件。在这个时候，ONLYOFFICE 8.1应运而生，成为了许多用户的新选择。ONLYOFFICE 8.1是一种办公套件软件，它提供了文档处理、电子表格…
阅读更多...
最新文章

Copyright @ 2022~2023