難度： 較難
知識(shí)點(diǎn)： 遠(yuǎn)程數(shù)據(jù)源 表單創(chuàng)建 表格組件使用 js增刪改查功能代碼編寫
在本文中，我將根據(jù)題目的每一點(diǎn)要求，對(duì)于我在實(shí)操過程中遇到的難點(diǎn)進(jìn)行比較詳細(xì)的介紹，供大家參考，希望能夠?qū)Υ蠹矣兴鶐椭?/p>
解題步驟：
創(chuàng)建頁面
根據(jù)要求創(chuàng)建兩個(gè)普通表單和一個(gè)自定義頁面，分別為進(jìn)行中待辦、已完成待辦和Todolist。具體相關(guān)組件的選用可以參考如下：
注意： 其中進(jìn)行中待辦和已完成待辦所構(gòu)成的組件基本相同，操作列功能也基本相同，可直接復(fù)制粘貼。整個(gè)Todolist頁面的頁頭部分可使用宜搭模板里的“待辦項(xiàng)目”。
功能實(shí)現(xiàn)
1 數(shù)據(jù)展示
所涉及到的數(shù)據(jù)源
注意： 參數(shù)formUuid的值為表單的Id，即APP_XXX
注意： 同理于進(jìn)行中待辦，實(shí)際上接口可復(fù)用，只需在js面板調(diào)用接口，將對(duì)應(yīng)的formUuid值賦值給參數(shù)即可，感興趣可自行修改。
所涉及的全局變量
以下變量在編輯搜索功能時(shí)會(huì)有用
訪問接口獲取表單數(shù)據(jù)的代碼
//獲取進(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)
}
//表格展示數(shù)據(jù)源。其中，currentPage和totalCount的取值會(huì)影響到表格分頁器的展示
this.setState({
toDoListData: {
data: toDoData,
currentPage: res.currentPage,
totalCount: res.totalCount
}
})
//原表單真實(shí)數(shù)據(jù)集，用于后續(xù)的搜索功能
state.ToDoData_1['data'] = toDoData
})
//console.log('v', state.ToDoData_1)
}
以下展示獲取的數(shù)據(jù)結(jié)構(gòu)以及表格構(gòu)建的字段名：
注意： 表格字段名和toDoListData中的data屬性值中每個(gè)元素中的自己key值要一一對(duì)應(yīng)，這里我key值直接和返回的res對(duì)象里的key值一致，所以要和返回?cái)?shù)據(jù)里的key值對(duì)應(yīng)才能正確展示數(shù)據(jù)
綁定表格和數(shù)據(jù)源
2 重要度列樣式修改
所涉及的代碼
[
{
"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"
}
]
注意： 這里只需要關(guān)注前三個(gè)屬性，最后一個(gè)“sid”只是一個(gè)唯一標(biāo)識(shí)罷了，只要能相互之間不一樣的取值就行，我是直接復(fù)制前面然后改動(dòng)其中一個(gè)字母罷了。
3 表單項(xiàng)目的新建
對(duì)話框dialog組件的使用如下：
所涉及的函數(shù)
點(diǎn)擊新建待辦彈出對(duì)話框：
所涉及代碼：
//新建待辦: 打開對(duì)話框
export function onAddBarItemClick() {
this.$('dialog_lceg6n3e').show()
}
提交表單：
所涉及代碼
//新建進(jìn)行中待辦
export function updateTodoList(){
//獲取對(duì)應(yīng)組件的輸入值
let title = this.$('textField_la552dni').getValue() （$()內(nèi)為你自己的組件標(biāo)識(shí)）
let type = this.$('radioField_la552dnj').getValue()
let degree = this.$('rateField_la552dnk').getValue()
let time = this.$('dateField_la552dnl').getValue()
let note = this.$('textareaField_la552dnm').getValue()
//將要新建的內(nèi)容轉(zhuǎn)換為json對(duì)象
let dataJson = {
"textField_la552dni": title,
"radioField_la552dnj": type,
"rateField_la552dnk": degree,
"dateField_la552dnl": time,
"textareaField_la552dnm": note
}
dataJson = JSON.stringify(dataJson)
//構(gòu)建新建接口所需的json參數(shù)對(duì)象
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) //打印錯(cuò)誤，可選
})
}
4 表單搜索功能
所涉及的函數(shù)：
表格創(chuàng)建搜索函數(shù)：
所涉及的代碼：注意注釋部分params各個(gè)屬性的含義
/**
* tablePc onToDoFetchData
* @param params.currentPage 當(dāng)前頁碼
* @param params.pageSize 每頁顯示條數(shù)
* @param params.searchKey 搜索關(guān)鍵字
* @param params.orderColumn 排序列
* @param params.orderType 排序方式（desc,asc）
* @param params.from 觸發(fā)來源（order,search,pagination）
*/
export function onToDoFetchData(params) {
// 如果是搜索的話翻頁重置到 1
if (params.from === 'search') {
params.currentPage = 1;
//判斷搜索框內(nèi)是否有值，有則根據(jù)搜索框內(nèi)的內(nèi)容，對(duì)照toDoData_1中的數(shù)據(jù)集進(jìn)行比對(duì)，這里，將【分類】的值作為搜索的類別。
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_la552dnj'] == params.searchKey){
tmpTodoArr.push(tmpToDoData[i])
}
}
this.setState({
toDoListData: {
data: tmpTodoArr,
currentPage: params.currentPage,
totalCount: tmpTodoArr.length
}
})
}
}
}
5 表單項(xiàng)目的刪除
所需遠(yuǎn)程數(shù)據(jù)源：
類似【新建待辦】，在【操作列】新建【刪除】列，并綁定相關(guān)函數(shù)。
所涉及的函數(shù)代碼：
打開刪除對(duì)話框：
//刪除進(jìn)行中的待辦
export function onDelToDoClick(rowData) {
this.$('dialog_lchqfnxt').show()
this.setState({
toDoRowData: rowData
})
}
刪除提交：綁定點(diǎn)擊事件，調(diào)用刪除函數(shù)
所涉及的代碼：
//調(diào)用刪除API,此處就是前述提到的接口復(fù)用，只要在js中調(diào)用接口，不在數(shù)據(jù)源面板設(shè)置參數(shù)值，就可以通過修改參數(shù)值，就可以刪除已有的任意一條數(shù)據(jù)，包括已完成待辦。
export function delToDoItem(data){
let params = {
formInstId: data.formInstId
}
this.dataSourceMap.deleteToDoList.load(params).then(res => {
this.getTodoListData()
}).catch(err => {
console.log(err)
})
}
6 進(jìn)行中的待辦完成勾選后的同步功能
所涉及的函數(shù)
打開復(fù)選框功能：
注意： 復(fù)選框要生效一定需要有唯一標(biāo)識(shí)，這里我選擇使用已有的表單項(xiàng)實(shí)例id，不嫌麻煩的話，可以限制其他列字段元素為元組，使該列元素值唯一后，也能起到和前者一樣的效果。
所涉及的代碼
當(dāng)勾選表格中的某一項(xiàng)后，在【進(jìn)行中待辦】刪除該項(xiàng)，同時(shí)在【已完成待辦】中添加該項(xiàng)
//這里無需重新訪問接口，只需調(diào)用先前的接口，傳入勾選行的元組即可，這里是先創(chuàng)建全局變量【hvDoneData】，再將rowData賦值給它，在傳入updateList。
/**
* 選擇（或取消選擇）數(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.delToDoItem(records[0])
}
//更新已完成待辦,即在已完成待辦表單中新建進(jìn)行中待辦的刪除項(xiàng)
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)
})
}
問題思考
這里我忘記實(shí)現(xiàn)【編輯】功能，但是審核人員也讓通過了我的答案。那么，就留個(gè)練習(xí)吧：文章來源：http://www.zghlxwxcb.cn/news/detail-824124.html
- 根據(jù)上述指導(dǎo)，實(shí)現(xiàn)待辦中的【編輯】功能
- 根據(jù)上述指導(dǎo)，自主實(shí)現(xiàn)已完成待辦相關(guān)功能
以上就是我在進(jìn)行高級(jí)認(rèn)證時(shí)實(shí)操題1的實(shí)現(xiàn)過程。如果覺得有幫助的話，請(qǐng)點(diǎn)個(gè)“贊”吧，我將持續(xù)更新，盡情期待。文章來源地址http://www.zghlxwxcb.cn/news/detail-824124.html
到了這里，關(guān)于【宜搭】低代碼開發(fā)師高級(jí)認(rèn)證實(shí)操題1難點(diǎn)指導(dǎo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
