位置: IT常识 - 正文

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

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

推荐整理分享【宜搭】低代码开发师高级认证实操题1难点指导(宜搭下载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:宜搭 js,宜搭update,宜搭下载,宜搭平台怎么用,宜搭下载,宜搭低代码开发平台官网,宜搭低代码开发平台官网,宜搭低代码开发平台官网,内容如对您有帮助,希望把文章链接给更多的朋友!

难度: 较难 知识点: 远程数据源 表单创建 表格组件使用 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<res.data.length; 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)}

以下展示获取的数据结构以及表格构建的字段名:

图3.1 获取进行中待办时API返回的数据对象

图3.2 进行中待办表格字段名

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

注意: 表格字段名和toDoListData中的data属性值中每个元素中的自己key值要一一对应,这里我key值直接和返回的res对象里的key值一致,所以要和返回数据里的key值对应才能正确展示数据

绑定表格和数据源

图3.3 绑定数据源

图3.4 页面加载时调用函数进行展示数据初始化

2 重要度列样式修改

图4.1 重要度列样式修改

所涉及的代码[ { "color": "grey", "text": "1", "value": 1, "__sid__": "serial_ld3vrwkg" }, { "color": "blue", "text": "2", "value": 2, "__sid__": "serial_ld3vrwkh" }, { "color": "yellow", "text": "3", "value": 3, "__sid__": "serial_ld3vrwki" }, { "color": "green", "text": "4", "value": 4, "__sid__": "serial_ld3vrwkj" }, { "color": "red", "text": "5", "value": 5, "__sid__": "serial_ld3vrwkk" }]

注意: 这里只需要关注前三个属性,最后一个“sid”只是一个唯一标识罢了,只要能相互之间不一样的取值就行,我是直接复制前面然后改动其中一个字母罢了。

3 表单项目的新建

对话框dialog组件的使用如下:

图5.1 新建待办对话框

所涉及的函数

点击新建待办弹出对话框:

图5.2 绑定打开对话框函数

所涉及代码:

//新建待办: 打开对话框export function onAddBarItemClick() { this.$('dialog_lceg6n3e').show()}

提交表单:

图5.3 绑定提交函数

所涉及代码

//新建进行中待办export function updateTodoList(){//获取对应组件的输入值 let title = this.$('textField_la552dni').getValue() ($()内为你自己的组件标识) let type = this.$('radioField_la552dnj').getValue() let degree = this.$('rateField_la552dnk').getValue() let time = this.$('dateField_la552dnl').getValue() let note = this.$('textareaField_la552dnm').getValue()//将要新建的内容转换为json对象 let dataJson = { "textField_la552dni": title, "radioField_la552dnj": type, "rateField_la552dnk": degree, "dateField_la552dnl": time, "textareaField_la552dnm": note } dataJson = JSON.stringify(dataJson)//构建新建接口所需的json参数对象 let params = { formUuid: "FORM-JK866XA138U6NNHJB0QJQ52Q01C32V6TE7ACL7",(你自己的) appType: "APP_XXX",(你自己的) formDataJson: dataJson } this.dataSourceMap.updateList.load(params).then(res => { // console.log('%', res) this.getTodoListData() }).catch(err => { console.log('#', err) //打印错误,可选 })}4 表单搜索功能所涉及的函数:

表格创建搜索函数:

图6.1 绑定搜索函数

所涉及的代码:注意注释部分params各个属性的含义/*** tablePc onToDoFetchData* @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 onToDoFetchData(params) { // 如果是搜索的话翻页重置到 1 if (params.from === 'search') {params.currentPage = 1;//判断搜索框内是否有值,有则根据搜索框内的内容,对照toDoData_1中的数据集进行比对,这里,将【分类】的值作为搜索的类别。 if(params.searchKey){ let tmpToDoData = state.ToDoData_1['data'] let tmpTodoArr = []//遍历tmpTodoData集合,比较指定键对应的值是否与search属性中的值相等,如果相等,则添加到tmpToDoArr数组中,最后,将数组重新赋值给表格展示数据源toDoListData。 for(let i=0; i<tmpToDoData.length; i++){ if (tmpToDoData[i]['radioField_la552dnj'] == params.searchKey){ tmpTodoArr.push(tmpToDoData[i]) } } this.setState({ toDoListData: { data: tmpTodoArr, currentPage: params.currentPage, totalCount: tmpTodoArr.length } }) } }}5 表单项目的删除所需远程数据源:

图7.1 删除功能数据源

类似【新建待办】,在【操作列】新建【删除】列,并绑定相关函数。

图7.1 绑定删除函数

所涉及的函数代码:

打开删除对话框:

图7.2 打开删除对话框

//删除进行中的待办export function onDelToDoClick(rowData) { this.$('dialog_lchqfnxt').show() this.setState({ toDoRowData: rowData })}

删除提交:绑定点击事件,调用删除函数

图7.3 绑定删除函数

所涉及的代码://调用删除API,此处就是前述提到的接口复用,只要在js中调用接口,不在数据源面板设置参数值,就可以通过修改参数值,就可以删除已有的任意一条数据,包括已完成待办。export function delToDoItem(data){ let params = { formInstId: data.formInstId } this.dataSourceMap.deleteToDoList.load(params).then(res => { this.getTodoListData() }).catch(err => { console.log(err) })}6 进行中的待办完成勾选后的同步功能所涉及的函数

打开复选框功能: 注意: 复选框要生效一定需要有唯一标识,这里我选择使用已有的表单项实例id,不嫌麻烦的话,可以限制其他列字段元素为元组,使该列元素值唯一后,也能起到和前者一样的效果。

所涉及的代码

当勾选表格中的某一项后,在【进行中待办】删除该项,同时在【已完成待办】中添加该项

//这里无需重新访问接口,只需调用先前的接口,传入勾选行的元组即可,这里是先创建全局变量【hvDoneData】,再将rowData赋值给它,在传入updateList。/*** 选择(或取消选择)数据之后的回调* @param selectedRowKeys Array 选中行的 key* @param records Array 选中行的数据*/export function onSelectChange(selectedRowKeys, records) { // console.log('%%', selectedRowKeys, records[0]); this.setState({ hvDoneData: records[0] }) this.updateDoneList(state.hvDoneData) this.delToDoItem(records[0])}//更新已完成待办,即在已完成待办表单中新建进行中待办的删除项export function updateDoneList(data){ delete data.formInstId let dataJson = JSON.stringify(data) let params = { formUuid: "FORM-D2B665D1Q5Y655AC8OYN0DIBJMF72Z55L7ACL1", appType: "APP_XXX", formDataJson: dataJson } this.dataSourceMap.updateList.load(params).then(res => { // console.log('%', res) this.getFinishListData() }).catch(err => { console.log(err) })}问题思考

这里我忘记实现【编辑】功能,但是审核人员也让通过了我的答案。那么,就留个练习吧:

根据上述指导,实现待办中的【编辑】功能根据上述指导,自主实现已完成待办相关功能

以上就是我在进行高级认证时实操题1的实现过程。如果觉得有帮助的话,请点个“赞”吧,我将持续更新,尽情期待。

本文链接地址:https://www.jiuchutong.com/zhishi/290203.html 转载请保留说明!

上一篇:比利时的平菇 (© Philippe Clement/Minden Pictures)(比利时的平菇能吃吗)

下一篇:奥梅雷克的红额金刚鹦鹉,玻利维亚科恰班巴 (© Bernard Castelein/Minden Pictures)(奥尔梅克)

  • 新买的华为p40能更新系统吗(刚买的华为p40pro)

    新买的华为p40能更新系统吗(刚买的华为p40pro)

  • 苹果x一直在恢复模式(苹果x一直在恢复出厂)

    苹果x一直在恢复模式(苹果x一直在恢复出厂)

  • 微信表情呲牙是什么意思(微信中表情呲牙含义)

    微信表情呲牙是什么意思(微信中表情呲牙含义)

  • mate30自带膜要不要撕掉(mate30原装手机膜)

    mate30自带膜要不要撕掉(mate30原装手机膜)

  • 酷派手机开不了机怎么办(酷派手机开不了机闪烁灯亮)

    酷派手机开不了机怎么办(酷派手机开不了机闪烁灯亮)

  • 企业微信异常解决办法(企业微信解除异常)

    企业微信异常解决办法(企业微信解除异常)

  • qq怎么分屏聊天(qq怎么分屏聊天窗口vivo)

    qq怎么分屏聊天(qq怎么分屏聊天窗口vivo)

  • idc概念是什么意思(idc概念股是什么意思)

    idc概念是什么意思(idc概念股是什么意思)

  • 微信频繁打招呼封多久(微信频繁打招呼被限制怎么申诉)

    微信频繁打招呼封多久(微信频繁打招呼被限制怎么申诉)

  • 小米手机微信语音播放失败怎么回事 (小米手机微信语音来电不响怎么办)

    小米手机微信语音播放失败怎么回事 (小米手机微信语音来电不响怎么办)

  • 华为g7tl00是麦芒几(华为g7和麦芒4一样吗)

    华为g7tl00是麦芒几(华为g7和麦芒4一样吗)

  • a1432是ipad第几代(a1432是ipad第几代是多大屏)

    a1432是ipad第几代(a1432是ipad第几代是多大屏)

  • 微信解封一年可以解几次(微信解封一年可以几次)

    微信解封一年可以解几次(微信解封一年可以几次)

  • 拼多多面对面砍价二维码在哪里(拼多多面对面互砍在哪里)

    拼多多面对面砍价二维码在哪里(拼多多面对面互砍在哪里)

  • 开发票可以改日期吗

    开发票可以改日期吗

  • mt762是什么型号(mt76-2002)

    mt762是什么型号(mt76-2002)

  • 苹果怎么设置桌面歌词(苹果怎么设置桌面照片小组件)

    苹果怎么设置桌面歌词(苹果怎么设置桌面照片小组件)

  • 闲聊二维码收款码在哪(闲聊二维码收款怎么弄)

    闲聊二维码收款码在哪(闲聊二维码收款怎么弄)

  • 腾讯会员怎样踢人下线(腾讯会员怎样踢人)

    腾讯会员怎样踢人下线(腾讯会员怎样踢人)

  • airpods怎么升级(airpods怎么升级?)

    airpods怎么升级(airpods怎么升级?)

  • wlan任我用套餐怎么用(wlan任我用套餐怎么连接)

    wlan任我用套餐怎么用(wlan任我用套餐怎么连接)

  • s1支持面部识别吗(s1pro面容)

    s1支持面部识别吗(s1pro面容)

  • vivoiqoo是几G手机(vivo手机是几g的)

    vivoiqoo是几G手机(vivo手机是几g的)

  • ipad微信消息不同步(ipad微信不提示消息)

    ipad微信消息不同步(ipad微信不提示消息)

  • 苹果主屏幕键坏了(苹果主屏幕键坏掉了)

    苹果主屏幕键坏了(苹果主屏幕键坏掉了)

  • 刷宝视频怎么发视频(刷宝短视频怎么上传视频)

    刷宝视频怎么发视频(刷宝短视频怎么上传视频)

  • 朋友圈怎么对单人开放(朋友圈怎么单条屏蔽别人)

    朋友圈怎么对单人开放(朋友圈怎么单条屏蔽别人)

  • 一体机、笔记本、品牌机、组装机各自的优缺点(一体机笔记本电脑)

    一体机、笔记本、品牌机、组装机各自的优缺点(一体机笔记本电脑)

  • 利用织梦(dedecms)如何仿站(如何用织梦在本地搭建网站)

    利用织梦(dedecms)如何仿站(如何用织梦在本地搭建网站)

  • 工商名称变更后多久网上可以查到记录
  • 法律会计审计咨询合同需要缴纳印花税吗
  • 收入及增值税会计准则
  • 计提本月应交增值税怎么做账
  • 国家税务登记证是什么样子的
  • 纳税人识别号怎么看是不是一般纳税人
  • 以前年度出口退税申报
  • 收到就业补贴财务如何做账
  • 全年一次性奖金税率表
  • 公司出售固定资产
  • 购买车位需要交哪些税
  • 接受税务稽查补缴所得税账务处理怎么做?
  • 预付款如何扣除
  • 养老保险缴纳比例是固定的吗
  • 公司购车购置税怎么交款
  • 个体工商户如何给员工交社保
  • 双倍余额折旧法
  • i5 8500装win10
  • 多计提的房产税怎么做分录
  • 发现以前年度多交增值税怎么申报
  • mac本host文件
  • 商业自持店铺出租合法吗
  • win10电源图标灰色无法打开
  • php单独运行
  • antd-vue-pro
  • 精灵烟囱的形态判断
  • php深度分析
  • php获取年月日
  • react moment
  • thinkphp函数有哪些
  • php curl 封装
  • php数据表
  • reset=target
  • 管理费用税金怎么算
  • 帝国cms功能
  • 税票和发票的区别图片
  • 物流货物丢失赔偿按照运费10倍
  • 公允价值变动损益借贷方向增减
  • 航天金税服务费怎么交
  • 进项税额的作用
  • 资产管理业务是表外业务吗
  • 外购的商品
  • 汽车维修公司做账基本流程
  • 金税四期主要核查什么?
  • 小规模纳税人税额怎么算
  • 公司注销前欠客户钱
  • 一般纳税人只开普票不开专票免税
  • 以摊余成本计量的金融资产会计处理
  • 客户以个人名义打对公户现在要求开专票可以吗
  • 工厂宿舍水电费怎么扣
  • 企业如何开户流程
  • 企业会计准则中职工薪酬
  • 残保金计算人数1.02怎么计算
  • 明细账填制要求
  • 怎样用eclipse敲代码
  • 数据库的常用语句
  • ubuntu系统中文
  • sql语句数字转化为文字
  • win10 发布
  • 远程桌面登录显示其他用户
  • 联想lenovo thinkpad c13 yoga
  • xp系统乱了,怎么恢复
  • win7屏幕颜色不正常
  • win10企业版怎么连接无线网
  • win8.1如何更改密码
  • windows8能免费升10吗
  • 两种方法教你锁门
  • 利用命令查看虚拟机的信息
  • win8开机直接进入传统桌面
  • linux 744
  • 如何深度理解
  • node链接数据库
  • unity learn
  • jquery截取字符串的方法
  • easyui原理
  • unity如何动态刷新滚动列表
  • js 页面加载
  • javascript编程技术
  • 企业所得税到底是按间接法计算还是直接法计算
  • 成品油消费税税目税率表2023
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设