目錄
目標(biāo)：
操作步驟：
一、主要涉及的接口
二、代碼及說(shuō)明步驟
目標(biāo)：
- 試題截圖及步驟代碼說(shuō)明，很快完成考試。
操作步驟：
這里基礎(chǔ)的兩個(gè)頁(yè)面創(chuàng)建很簡(jiǎn)單，直接省略。
直接說(shuō)自定義頁(yè)面——Todolist
接口文檔：
跨應(yīng)用數(shù)據(jù)源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
二、代碼及說(shuō)明步驟
①、列表
說(shuō)明：頂部操作：新建代辦；? ?操作列：編輯/刪除;? 行選擇器：?jiǎn)芜x/多選
列表代碼：
1-1. 待辦列表：
//獲取進(jìn)行中待辦數(shù)據(jù)
export function getTodoListData() {
this.dataSourceMap.getTodoTasks.load().then(res => {
//console.log(res)
//以下根據(jù)返回內(nèi)容重構(gòu)數(shù)據(jù)對(duì)象，使數(shù)據(jù)格式符合宜搭組件格式要求
let toDoData = []
for (let i = 0; i < res.data.length; i++) {
let tmpData = res.data[i].formData
//此處另外添加formInstId屬性，用于之后的復(fù)選框功能
tmpData['formInstId'] = res.data[i].formInstId
//將每一個(gè)重構(gòu)的對(duì)象存入到全局變量ToDoData
toDoData.push(tmpData)
}
console.log('v0', toDoData)
//表格展示數(shù)據(jù)源。其中，currentPage和totalCount的取值會(huì)影響到表格分頁(yè)器的展示
this.setState({
toDoListData: {
data: toDoData,
currentPage: res.currentPage,
totalCount: res.totalCount
}
})
//原表單真實(shí)數(shù)據(jù)集，用于后續(xù)的搜索功能
state.ToDoData_1['data'] = toDoData
})
}1-2. 完成列表：
//獲取已完成待辦數(shù)據(jù)
export function getDoneListData() {
this.dataSourceMap.getFinishTasks.load().then(res => {
console.log(res)
//以下根據(jù)返回內(nèi)容重構(gòu)數(shù)據(jù)對(duì)象，使數(shù)據(jù)格式符合宜搭組件格式要求
let toDoData = []
for (let i = 0; i < res.data.length; i++) {
let tmpData = res.data[i].formData
//此處另外添加formInstId屬性，用于之后的復(fù)選框功能
tmpData['formInstId'] = res.data[i].formInstId
//將每一個(gè)重構(gòu)的對(duì)象存入到全局變量ToDoData
toDoData.push(tmpData)
}
console.log('v2', toDoData)
//表格展示數(shù)據(jù)源。其中，currentPage和totalCount的取值會(huì)影響到表格分頁(yè)器的展示
this.setState({
doneListData: {
data: toDoData,
currentPage: res.currentPage,
totalCount: res.totalCount
}
})
//原表單真實(shí)數(shù)據(jù)集，用于后續(xù)的搜索功能
state.doneListData_1['data'] = toDoData
})
console.log('v28888', state.doneListData_1)
}搜索
1-3. 待辦搜索：
/**
* tablePc onToDoFetchData
* @param params.currentPage 當(dāng)前頁(yè)碼
* @param params.pageSize 每頁(yè)顯示條數(shù)
* @param params.searchKey 搜索關(guān)鍵字
* @param params.orderColumn 排序列
* @param params.orderType 排序方式（desc,asc）
* @param params.from 觸發(fā)來(lái)源（order,search,pagination）
*/
export function onToDoFetchData(params) {
// 如果是搜索的話翻頁(yè)重置到 1
if (params.from === 'search') {
params.currentPage = 1;
//判斷搜索框內(nèi)是否有值，有則根據(jù)搜索框內(nèi)的內(nèi)容，對(duì)照toDoData_1中的數(shù)據(jù)集進(jìn)行比對(duì)，這里，將【分類(lèi)】的值作為搜索的類(lèi)別。
if (params.searchKey) {
let tmpToDoData = state.ToDoData_1['data']
let tmpTodoArr = []
//遍歷tmpTodoData集合，比較指定鍵對(duì)應(yīng)的值是否與search屬性中的值相等，如果相等，則添加到tmpToDoArr數(shù)組中，最后，將數(shù)組重新賦值給表格展示數(shù)據(jù)源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 當(dāng)前頁(yè)碼
* @param params.pageSize 每頁(yè)顯示條數(shù)
* @param params.searchKey 搜索關(guān)鍵字
* @param params.orderColumn 排序列
* @param params.orderType 排序方式（desc,asc）
* @param params.from 觸發(fā)來(lái)源（order,search,pagination）
*/
export function onDoneFetchData(params) {
// 如果是搜索的話翻頁(yè)重置到 1
if (params.from === 'search') {
params.currentPage = 1;
//判斷搜索框內(nèi)是否有值，有則根據(jù)搜索框內(nèi)的內(nèi)容，對(duì)照toDoData_1中的數(shù)據(jù)集進(jìn)行比對(duì)，這里，將【分類(lèi)】的值作為搜索的類(lèi)別。
if (params.searchKey) {
let tmpToDoData = state.doneListData_1['data']
let tmpTodoArr = []
//遍歷tmpTodoData集合，比較指定鍵對(duì)應(yīng)的值是否與search屬性中的值相等，如果相等，則添加到tmpToDoArr數(shù)組中，最后，將數(shù)組重新賦值給表格展示數(shù)據(jù)源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
}
})
}
}說(shuō)明：
在搜索的時(shí)候，需要建立動(dòng)作綁定方法。
注：這個(gè)搜索是通過(guò)分類(lèi)搜索的，所以代碼里的判斷是對(duì)分類(lèi)唯一操作鍵的判斷。?
1-5. 編輯代碼：
//修改待辦: 打開(kāi)對(duì)話框
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
})
}這里特別注意：??
這個(gè)是編輯修改按鈕，需要把這行數(shù)據(jù)渲染出來(lái)，因此，在這里，我新建了幾個(gè)變量。
1-6. 刪除代碼：
//刪除進(jìn)行中的待辦
export function onDelToDoClick(rowData) {
this.$('dialog_lhpv0960').show()
this.setState({
toDoRowData: rowData
})
}
//調(diào)用刪除API,此處就是前述提到的接口復(fù)用，只要在js中調(diào)用接口，不在數(shù)據(jù)源面板設(shè)置參數(shù)值，就可以通過(guò)修改參數(shù)值，就可以刪除已有的任意一條數(shù)據(jù)，包括已完成待辦。
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;
}②、新增待辦
?
?說(shuō)明： 這里的唯一鍵要一直，不然列表顯示不出來(lái)。
代碼：
//新建進(jìn)行中待辦
export function updateTodoList() {
//獲取對(duì)應(yīng)組件的輸入值
let title = this.$('textField_lhomxns7').getValue() //待辦事項(xiàng)
let type = this.$('radioField_lhomxns9').getValue() //分類(lèi)
let degree = this.$('rateField_lhomxnsb').getValue() //重要度
let time = this.$('dateField_lhpocmef').getValue() //提醒時(shí)間
let note = this.$('textareaField_lhpocmeh').getValue() //待辦詳情
//將要新建的內(nèi)容轉(zhuǎn)換為json對(duì)象
let dataJson = {
"textField_lhomxns7": title,
"radioField_lhomxns9": type,
"rateField_lhomxnsb": degree,
"dateField_lhpocmef": time,
"textareaField_lhpocmeh": note
}
dataJson = JSON.stringify(dataJson)
//構(gòu)建新建接口所需的json參數(shù)對(duì)象
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) //打印錯(cuò)誤，可選
})
}③、修改
修改給設(shè)置默認(rèn)值：
?
說(shuō)明：這個(gè)默認(rèn)值實(shí)在編輯的時(shí)候，打開(kāi)編輯框，給變量賦值。然后設(shè)置。
新增和修改使用的兩個(gè)接口，所以，需要在復(fù)制一個(gè)修改窗口：
?特別說(shuō)明：修改接口的唯一鍵不能和新增的一樣，不然保存會(huì)保存，唯一鍵重復(fù)。這里代碼可以這樣寫(xiě)：
//修改進(jìn)行中待辦表單
export function updateInfoForm(){
let formInstId = state.formInstId
//獲取對(duì)應(yīng)組件的輸入值
let title = this.$('textField_lhsjdzyy').getValue() //待辦事項(xiàng)
let type = this.$('radioField_lhsjdzyz').getValue() //分類(lèi)
let degree = this.$('rateField_lhsjdzz0').getValue() //重要度
let time = this.$('dateField_lhsjdzz1').getValue() //提醒時(shí)間
let note = this.$('textareaField_lhsjdzz2').getValue() //待辦詳情
//將要新建的內(nèi)容轉(zhuǎn)換為json對(duì)象
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)
//構(gòu)建新建接口所需的json參數(shù)對(duì)象
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) //打印錯(cuò)誤，可選
})
}如圖：
1指的是修改窗口的唯一鍵。2代表列表的唯一鍵，把1賦值給2，然后調(diào)用接口即可實(shí)現(xiàn)修改操作。
?
修改改變
//這里無(wú)需重新訪問(wèn)接口，只需調(diào)用先前的接口，傳入勾選行的元組即可，這里是先創(chuàng)建全局變量【hvDoneData】，再將rowData賦值給它，在傳入addInfoForm。
/**
* 選擇（或取消選擇）數(shù)據(jù)之后的回調(diào)
* @param selectedRowKeys Array 選中行的 key
* @param records Array 選中行的數(shù)據(jù)
*/
export function onSelectChange(selectedRowKeys, records) {
// console.log('%%', selectedRowKeys, records[0]);
this.setState({
hvDoneData: records[0]
})
this.updateDoneList(state.hvDoneData)
this.delToDoDataItem(records[0])
}
//更新已完成待辦,即在已完成待辦表單中新建進(jìn)行中待辦的刪除項(xiàng)
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)
})
}?說(shuō)明：這里是點(diǎn)擊進(jìn)行中單選按鈕后，直接修改狀態(tài)到已完成列表中。
重要度枚舉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"
}
]整體大致是這樣，希望可以幫助到你。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-605202.html
如果有問(wèn)題，歡迎留言。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-605202.html
到了這里，關(guān)于宜搭低代碼開(kāi)發(fā)師（高級(jí)）創(chuàng)建待辦列表應(yīng)用 流程截圖及實(shí)例代碼（避坑專(zhuān)用）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
