当前位置:   article > 正文

宜搭低代码高级认证实操题1 todolist_宜搭高级认证实操题1

宜搭高级认证实操题1

进行中待办

已完成待办

待办事项

待办事项远程api和变量配置

回调函数

  1. function didFetch(content) {
  2. //console.log(content.data);
  3. // content.b = 1; 修改返回数据结构中的 b 字段为1
  4. let res = content.data;
  5. let todoList = [];
  6. for(let i in res){
  7. todoList.push(res[i]);
  8. }
  9. console.log("todolist",todoList);
  10. let result = {
  11. "data": todoList,
  12. "CurrentPage": content.CurrentPage,
  13. "totalCount": content.totalCount
  14. }
  15. return result; // 重要,需返回 content
  16. }

回调函数

  1. function didFetch(content) {
  2. // content.b = 1; 修改返回数据结构中的 b 字段为1
  3. let res = content.data;
  4. let doneList = [];
  5. for(let i in res){
  6. doneList.push(res[i]);
  7. }
  8. console.log(doneList);
  9. let result = {
  10. "data": doneList,
  11. "CurrentPage": content.CurrentPage,
  12. "totalCount": content.totalCount
  13. }
  14. return result; // 重要,需返回 content
  15. }

页面js

  1. /**
  2. * 尊敬的用户,你好:页面 JS 面板是高阶用法,一般不建议普通用户使用,如需使用,请确定你具备研发背景,能够自我排查问题。当然,你也可以咨询身边的技术顾问或者联系宜搭平台的技术支持获得服务(可能收费)。
  3. * 我们可以用 JS 面板来开发一些定制度高功能,比如:调用阿里云接口用来做图像识别、上报用户使用数据(如加载完成打点)等等。
  4. * 你可以点击面板上方的 「使用帮助」了解。
  5. */
  6. // 当页面渲染完毕后马上调用下面的函数,这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
  7. export function didMount() {
  8. console.log(`「页面 JS」:当前页面地址 ${location.href}`);
  9. // console.log(`「页面 JS」:当前页面 id 参数为 ${this.state.urlParams.id}`);
  10. // 更多 this 相关 API 请参考:https://aliwork.com/developer/API
  11. // document.title = window.loginUser.userName + ' | 宜搭';
  12. this.$('dialog_lty04ne9').hide();
  13. this.$('dialog_ltzi2k7t').hide();
  14. }
  15. let isUpdate = false;
  16. let updateformInstId = '';
  17. let deleteformInstId = '';
  18. /**
  19. * dialog onCancel
  20. */
  21. export function onCancel() {
  22. console.log('onCancel');
  23. this.$('dialog_lty04ne9').hide();
  24. }
  25. /**
  26. * dialog onClose
  27. */
  28. export function onClose() {
  29. console.log('onClose');
  30. this.$('dialog_lty04ne9').hide();
  31. }
  32. export function onActionBarItemClick() {
  33. this.$('textField_lty04nea').set('value', '');
  34. this.$('radioField_lty04neb').set('value', '');
  35. this.$('rateField_lty04nec').set('value', '');
  36. this.$('dateField_lty04nee').set('value', '');
  37. this.$('textareaField_lty04ned').set('value', '');
  38. this.$('dialog_lty04ne9').show();
  39. }
  40. /**
  41. * dialog onOk
  42. */
  43. export function onOk() {
  44. console.log('onOk');
  45. let todo = this.$('textField_lty04nea').getValue();
  46. let asort = this.$('radioField_lty04neb').getValue();
  47. let importance = this.$('rateField_lty04nec').getValue();
  48. let remindtime = this.$('dateField_lty04nee').getValue();
  49. let detail = this.$('textareaField_lty04ned').getValue();
  50. let formData = {
  51. "textField_ltxp13oi":todo,
  52. "radioField_ltxp13oj": asort,
  53. "rateField_ltxp13ok": importance,
  54. "dateField_ltxp13ol": remindtime,
  55. "textareaField_ltxp13om": detail,
  56. };
  57. console.log(formData);
  58. let formDataJson = [];
  59. if(isUpdate){
  60. //更新数据
  61. let params2 = {
  62. formInstId: this.updateformInstId,
  63. updateFormDataJson: JSON.stringify(formData)
  64. };
  65. this.dataSourceMap.updateData.load(params2).then(res => {
  66. this.$('dialog_lty04ne9').hide();
  67. this.utils.toast("更新成功");
  68. this.getTodoList();
  69. });
  70. }else{
  71. //保存数据
  72. let params1 = {
  73. formUuid: "FORM-7A3395D5626C45FBA6BF08B40555B86266PI",
  74. appType: "APP_M3YO82RIZE2UJV4R87TW",
  75. formDataJson: JSON.stringify(formData)
  76. };
  77. this.dataSourceMap.saveData.load(params1).then(res =>{
  78. this.$('dialog_lty04ne9').hide();
  79. this.utils.toast("保存成功");
  80. this.getTodoList();
  81. })
  82. }
  83. }
  84. //点击todolist的删除
  85. export function onActionClick(rowData) {
  86. this.deleteformInstId = rowData.formInstId;
  87. this.$('dialog_ltzi2k7t').show();
  88. }
  89. export function getTodoList(){
  90. this.dataSourceMap.getTodoList.load().then(res =>{
  91. //console.log("todo",res.data);
  92. });
  93. }
  94. export function getDoneList() {
  95. this.dataSourceMap.getDoneList.load().then(res => {
  96. //console.log("done", res.data);
  97. });
  98. }
  99. //删除done
  100. export function onDeleteDoneActionClick(rowData) {
  101. console.log(rowData);
  102. let params2 = {
  103. formInstId: rowData.formInstId
  104. }
  105. this.dataSourceMap.deleteData.load(params2).then(res => {
  106. this.utils.toast("删除成功");
  107. this.getDoneList();
  108. })
  109. }
  110. //数据填充到对话框
  111. export function onEditTodoActionClick(rowData) {
  112. isUpdate = true;
  113. this.$('dialog_lty04ne9').set('title','更新待办');
  114. let formData = rowData.formData;
  115. let arr = [];
  116. for (let i in formData) {
  117. arr.push(formData[i]);
  118. }
  119. console.log(arr);
  120. let todo = arr[0];
  121. let asort = arr[2];
  122. let importance = arr[4];
  123. let remindtime = arr[1];
  124. let detail = arr[6];
  125. this.$('textField_lty04nea').set('value',todo);
  126. this.$('radioField_lty04neb').set('value', asort);
  127. this.$('rateField_lty04nec').set('value',importance);
  128. this.$('dateField_lty04nee').set('value',remindtime);
  129. this.$('textareaField_lty04ned').set('value', detail);
  130. this.$('dialog_lty04ne9').show();
  131. this.updateformInstId = rowData.formInstId;
  132. }
  133. /**
  134. * 选择(或取消选择)数据之后的回调
  135. * @param selected Boolean 是否选中
  136. * @param rowData Object 当前操作行
  137. * @param selectedRows Array 选中的行数据
  138. */
  139. export function onSelect(selected, rowData, selectedRows) {
  140. console.log('selectedRows',selectedRows);
  141. //删除todolist里这条数据
  142. let params2 = {
  143. formInstId: rowData.formInstId
  144. }
  145. this.dataSourceMap.deleteData.load(params2).then(res => {
  146. console.log('删除成功');
  147. })
  148. //保存上面删除的数据到donelist
  149. let formData = rowData.formData;
  150. let arr = [];
  151. for (let i in formData) {
  152. arr.push(formData[i]);
  153. }
  154. console.log('arr',arr);
  155. let todo = arr[0];
  156. let asort = arr[2];
  157. let importance = arr[4];
  158. let remindtime = arr[1];
  159. let detail = arr[6];
  160. let formData1 = {
  161. "textField_ltxpa412": todo,
  162. "radioField_ltxpa413": asort,
  163. "rateField_ltxpa414": importance,
  164. "dateField_ltxpa415": remindtime,
  165. "textareaField_ltxpa416": detail
  166. };
  167. let params1 = {
  168. formUuid: "FORM-BC3BEDD73A9046B79868D53414D1D89CZXG7",
  169. appType: "APP_M3YO82RIZE2UJV4R87TW",
  170. formDataJson: JSON.stringify(formData1)
  171. };
  172. this.dataSourceMap.saveData.load(params1).then(res => {
  173. console.log('保存成功');
  174. })
  175. this.getDoneList();
  176. this.getTodoList();
  177. }
  178. /**
  179. * dialog onCancel
  180. */
  181. export function onCancelDelete() {
  182. console.log('onCancel');
  183. this.$('dialog_ltzi2k7t').hide();
  184. }
  185. /**
  186. * dialog onClose
  187. */
  188. export function onCloseDelete() {
  189. console.log('onClose');
  190. this.$('dialog_ltzi2k7t').hide();
  191. }
  192. /**
  193. * dialog onOk
  194. */
  195. export function onOkDelete() {
  196. let params2 = {
  197. formInstId: this.deleteformInstId
  198. }
  199. this.dataSourceMap.deleteData.load(params2).then(res => {
  200. this.$('dialog_ltzi2k7t').hide();
  201. this.utils.toast("删除成功");
  202. this.getTodoList();
  203. })
  204. }
  205. /**
  206. * tablePc onFetchData
  207. * @param params.currentPage 当前页码
  208. * @param params.pageSize 每页显示条数
  209. * @param params.searchKey 搜索关键字
  210. * @param params.orderColumn 排序列
  211. * @param params.orderType 排序方式(desc,asc)
  212. * @param params.from 触发来源(order,search,pagination)
  213. */
  214. export function onFetchData(params) {
  215. // 如果是搜索的话翻页重置到 1
  216. if (params.from === 'search') {
  217. params.currentPage = 1;
  218. }
  219. this.dataSourceMap['getTodoList'].load(params);
  220. // 如果你需要把表格查询条件保存起来,可以取消下一行注释,并添加一个 params 的变量类型数据源
  221. // this.setState({ tableParams: params });
  222. // 如果使用远程接口作为表格数据源,理论上你只需要将下方的“dataSourceName”改为实际的数据源名称即可
  223. // this.dataSourceMap['dataSourceName'].load(params);
  224. }
  225. /**
  226. * tablePc onFetchData
  227. * @param params.currentPage 当前页码
  228. * @param params.pageSize 每页显示条数
  229. * @param params.searchKey 搜索关键字
  230. * @param params.orderColumn 排序列
  231. * @param params.orderType 排序方式(desc,asc)
  232. * @param params.from 触发来源(order,search,pagination)
  233. */
  234. export function onFetchData2(params) {
  235. // 如果是搜索的话翻页重置到 1
  236. if (params.from === 'search') {
  237. params.currentPage = 1;
  238. }
  239. // 如果你需要把表格查询条件保存起来,可以取消下一行注释,并添加一个 params 的变量类型数据源
  240. // this.setState({ tableParams: params });
  241. // 如果使用远程接口作为表格数据源,理论上你只需要将下方的“dataSourceName”改为实际的数据源名称即可
  242. this.dataSourceMap['getDoneList'].load(params);
  243. }
  244. /**
  245. * tablePc onFetchData
  246. * @param params.currentPage 当前页码
  247. * @param params.pageSize 每页显示条数
  248. * @param params.searchKey 搜索关键字
  249. * @param params.orderColumn 排序列
  250. * @param params.orderType 排序方式(desc,asc)
  251. * @param params.from 触发来源(order,search,pagination)
  252. */
  253. export function onFetchData3(params) {
  254. // 如果是搜索的话翻页重置到 1
  255. if (params.from === 'search') {
  256. params.currentPage = 1;
  257. }
  258. // 如果你需要把表格查询条件保存起来,可以取消下一行注释,并添加一个 params 的变量类型数据源
  259. // this.setState({ tableParams: params });
  260. // 如果使用远程接口作为表格数据源,理论上你只需要将下方的“dataSourceName”改为实际的数据源名称即可
  261. this.setState({
  262. searchKey: params.searchKey,
  263. page: params.currentPage
  264. });
  265. }

数据绑定表

todoList

doneList

动作设置

操作列

顶部操作:新增待办

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/792875
推荐阅读
相关标签
  

闽ICP备14008679号