1. AI技术聚合首页
  2. IT

宜搭低代码开发师（高级）创建待办列表应用 流程截图及实例代码（避坑专用）

心中带点小风骚 • • IT • 阅读 24

目录

目标：

  • 试题截图及步骤代码说明，很快完成考试。

操作步骤：

这里基础的两个页面创建很简单，直接省略。

直接说自定义页面——Todolist

接口文档：

跨应用数据源API | 钉钉宜搭·帮助中心

一、主要涉及的接口

①、获取待办 ：/dingtalk/web/APP_XXXXXXXXXXXXX/v1/form/searchFormDatas.json

②、删除：/dingtalk/web/APP_XXXXXXXXXXXXX/v1/form/deleteFormData.json

③、获取已完成待办：

/dingtalk/web/APP_XXXXXXXXXXXXX/v1/form/searchFormDatas.json

④、 提交待办信息表单：

/dingtalk/web/APP_XXXXXXXXXXXXX/v1/form/saveFormData.json

⑤、更新修改待办信息表单：

/dingtalk/web/APP_XXXXXXXXXXXXX/v1/form/updateFormData.json

二、代码及说明步骤

①、列表

说明：顶部操作：新建代办；   操作列：编辑/删除;  行选择器：单选/多选

列表代码：

1-1. 待办列表：

//获取进行中待办数据
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)
    }
    console.log('v0', toDoData)
    //表格展示数据源。其中，currentPage和totalCount的取值会影响到表格分页器的展示
    this.setState({
      toDoListData: {
        data: toDoData,
        currentPage: res.currentPage,
        totalCount: res.totalCount
      }
    })
    //原表单真实数据集，用于后续的搜索功能
    state.ToDoData_1['data'] = toDoData
  })
 
}

1-2. 完成列表：

//获取已完成待办数据
export function getDoneListData() {
  this.dataSourceMap.getFinishTasks.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)
    }
    console.log('v2', toDoData)
    //表格展示数据源。其中，currentPage和totalCount的取值会影响到表格分页器的展示
    this.setState({
      doneListData: {
        data: toDoData,
        currentPage: res.currentPage,
        totalCount: res.totalCount
      }
    })
    //原表单真实数据集，用于后续的搜索功能
    state.doneListData_1['data'] = toDoData
  })
  console.log('v28888', state.doneListData_1)
}

搜索

1-3. 待办搜索：

/**
* 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_lhomxns9'] == params.searchKey) {
          tmpTodoArr.push(tmpToDoData[i])
        }
      } 
      this.setState({
        toDoListData: {
          data: tmpTodoArr,
          currentPage: params.currentPage,
          totalCount: tmpTodoArr.length
        }
      })
    } else{
      this.setState({
        toDoListData: {
          data: state.ToDoData_1['data'],
          currentPage: params.currentPage,
          totalCount: state.ToDoData_1['data'].length
        }
      })
    }

  }
}

1-4.  已完成搜索：

/**
 * 已完成的搜索
* 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 onDoneFetchData(params) {
  // 如果是搜索的话翻页重置到 1
  if (params.from === 'search') {
    params.currentPage = 1;

    //判断搜索框内是否有值，有则根据搜索框内的内容，对照toDoData_1中的数据集进行比对，这里，将【分类】的值作为搜索的类别。
    if (params.searchKey) {
      let tmpToDoData = state.doneListData_1['data']
      let tmpTodoArr = []
      //遍历tmpTodoData集合，比较指定键对应的值是否与search属性中的值相等，如果相等，则添加到tmpToDoArr数组中，最后，将数组重新赋值给表格展示数据源toDoListData。
      for (let i = 0; i < tmpToDoData.length; i++) {
        if (tmpToDoData[i]['radioField_lhomxns9'] == params.searchKey) {
          tmpTodoArr.push(tmpToDoData[i])
        }
      }
      this.setState({
        doneListData: {
          data: tmpTodoArr,
          currentPage: params.currentPage,
          totalCount: tmpTodoArr.length
        }
      })
    } else {
      this.setState({
        doneListData: {
          data: state.doneListData_1['data'],
          currentPage: params.currentPage,
          totalCount: state.doneListData_1['data'].length
        }
      })
    }

  }

说明：

在搜索的时候，需要建立动作绑定方法。

注：这个搜索是通过分类搜索的，所以代码里的判断是对分类唯一操作键的判断。 

1-5. 编辑代码：

//修改待办: 打开对话框
export function onUpdataBarItemClick(selectedRowKeys, records) {
 
  this.$('dialog_lhsjdzz3').show()

  
  const title = selectedRowKeys.textField_lhomxns7
  const type = selectedRowKeys.radioField_lhomxns9
  const degree = selectedRowKeys.rateField_lhomxnsb
  const time = selectedRowKeys.dateField_lhpocmef
  const note = selectedRowKeys.textareaField_lhpocmeh
  const formInstId = selectedRowKeys.formInstId

  this.setState({
    title: title
  })
  this.setState({
    type: type
  })
  this.setState({
    degree: degree
  })
  this.setState({
    time: time
  })
  this.setState({
    noInfo: note
  })
  this.setState({
    formInstId: formInstId
  })


}

这里特别注意：  

这个是编辑修改按钮，需要把这行数据渲染出来，因此，在这里，我新建了几个变量。

1-6. 删除代码：


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

}
//调用删除API,此处就是前述提到的接口复用，只要在js中调用接口，不在数据源面板设置参数值，就可以通过修改参数值，就可以删除已有的任意一条数据，包括已完成待办。
export function delToDoItem(data) {
  var formInstId = data;
  if (undefined == data){
    formInstId = state.toDoRowData.formInstId
  }
  
  
  let params = {
    formInstId: formInstId
  }
  this.dataSourceMap.deleteToDoList.load(params).then(res => {
    this.$('dialog_lhpv0960').hide()
    this.getTodoListData()
    this.getDoneListData()
  }).catch(err => {
    console.log(err)
  })
}

1-7. 删除取消：


/**
* 删除取消 
*/
export function onCancel() {
  this.$('dialog_lhpv0960').hide();
  return;
}

②、新增待办

 

 说明： 这里的唯一键要一直，不然列表显示不出来。

代码：

//新建进行中待办
export function updateTodoList() {
  //获取对应组件的输入值
  let title = this.$('textField_lhomxns7').getValue()  //待办事项
  let type = this.$('radioField_lhomxns9').getValue()  //分类
  let degree = this.$('rateField_lhomxnsb').getValue()  //重要度
  let time = this.$('dateField_lhpocmef').getValue()  //提醒时间
  let note = this.$('textareaField_lhpocmeh').getValue()  //待办详情
  //将要新建的内容转换为json对象
  let dataJson = {
    "textField_lhomxns7": title,
    "radioField_lhomxns9": type,
    "rateField_lhomxnsb": degree,
    "dateField_lhpocmef": time,
    "textareaField_lhpocmeh": note
  }
  dataJson = JSON.stringify(dataJson)
 
  //构建新建接口所需的json参数对象
  let params = {
    formUuid: "FORM-XXXXXXXXXXX",
    appType: "APP_XXXXXXXXXXX",
    formDataJson: dataJson
  }
  this.dataSourceMap.addInfoForm.load(params).then(res => {
    //console.log('2222%', res)
    this.$('dialog_lhpv095o').hide();
    this.getTodoListData()
    this.utils.toast("保存成功")
    //window.location.reload();
  }).catch(err => {
    console.log('#', err) //打印错误，可选
  })
}

③、修改

修改给设置默认值：

 

说明：这个默认值实在编辑的时候，打开编辑框，给变量赋值。然后设置。

新增和修改使用的两个接口，所以，需要在复制一个修改窗口：

 特别说明：修改接口的唯一键不能和新增的一样，不然保存会保存，唯一键重复。这里代码可以这样写：


//修改进行中待办表单
export function updateInfoForm(){
  let formInstId = state.formInstId
  //获取对应组件的输入值
  let title = this.$('textField_lhsjdzyy').getValue()  //待办事项
  let type = this.$('radioField_lhsjdzyz').getValue()  //分类
  let degree = this.$('rateField_lhsjdzz0').getValue()  //重要度
  let time = this.$('dateField_lhsjdzz1').getValue()  //提醒时间
  let note = this.$('textareaField_lhsjdzz2').getValue()  //待办详情
  //将要新建的内容转换为json对象
  let dataJson = {
    "textField_lhomxns7": title,
    "radioField_lhomxns9": type,
    "rateField_lhomxnsb": degree,
    "dateField_lhpocmef": time,
    "textareaField_lhpocmeh": note
  }
  dataJson = JSON.stringify(dataJson)
  console.log('dataJson%', dataJson)
  console.log('formInstId%', formInstId)
  //构建新建接口所需的json参数对象
  let params = {
    formInstId: formInstId,
    updateFormDataJson: dataJson
  }
  this.dataSourceMap.updateInfoForm.load(params).then(res => {
    console.log('updateInfoForm111', res)
    this.$('dialog_lhsjdzz3').hide();
    this.getTodoListData()
    this.utils.toast("修改成功")
  }).catch(err => {
    console.log('#', err) //打印错误，可选
  })
}

如图：

1指的是修改窗口的唯一键。2代表列表的唯一键，把1赋值给2，然后调用接口即可实现修改操作。

 

修改改变

//这里无需重新访问接口，只需调用先前的接口，传入勾选行的元组即可，这里是先创建全局变量【hvDoneData】，再将rowData赋值给它，在传入addInfoForm。
/**
* 选择（或取消选择）数据之后的回调
* @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.delToDoDataItem(records[0])
}

//更新已完成待办,即在已完成待办表单中新建进行中待办的删除项
export function updateDoneList(data) {
  delete data.formInstId
  let dataJson = JSON.stringify(data)
  let params = {
    formUuid: "FORM-UPXXXXXXXX",
    appType: "APP_XXXXXXXXXXXX",
    formDataJson: dataJson
  }
  this.dataSourceMap.addInfoForm.load(params).then(res => {
    console.log('%', res)
    this.getDoneListData()
  }).catch(err => {
    console.log(err)
  })
}

 说明：这里是点击进行中单选按钮后，直接修改状态到已完成列表中。

重要度枚举JS代码

[
  {
    "color": "grey",
    "text": "1",
    "value": 1,
    "__sid__": "serial_lhzpxn86"
  },
  {
    "color": "blue",
    "text": "2",
    "value": 2,
    "__sid__": "serial_lhzpxn87"
  },
  {
    "color": "yellow",
    "text": "3",
    "value": 3,
    "__sid__": "serial_lhzpxn88"
  },
  {
    "color": "green",
    "text": "4",
    "value": 4,
    "__sid__": "serial_lhzpxn89"
  },
  {
    "color": "red",
    "text": "5",
    "value": 5,
    "__sid__": "serial_lhzpxn8a"
  }
]

整体大致是这样，希望可以帮助到你。

如果有问题，欢迎留言。

版权声明：本文为博主作者：除不掉的灰色原创文章，版权归属原作者，如果侵权，请联系我们删除！

原文链接：https://blog.csdn.net/bug_love/article/details/130802180

共计人评分，平均分

到目前为止还没有投票！成为第一位评论此文章。

赞 (0)
心中带点小风骚的头像心中带点小风骚普通用户
0
上一篇 2024年5月6日
下一篇 2024年5月6日

相关推荐