使用背景說明

廣東數(shù)據(jù)項(xiàng)目組中，需要進(jìn)行四員協(xié)同的開發(fā)工作，四員協(xié)同這個(gè)模塊簡(jiǎn)單點(diǎn)說就是通過表單和流程相結(jié)合，進(jìn)行數(shù)據(jù)收集和流程流轉(zhuǎn)。在宜搭低代碼中，可以直接用成員組件完成釘釘內(nèi)的流程表單提交，和釘釘app相結(jié)合。基于廣州項(xiàng)目組地市客戶之前已經(jīng)用過宜搭，故省局也選擇宜搭進(jìn)行搭建表單+流程的模塊開發(fā)。本篇文檔直接上案例，講述廣東數(shù)據(jù)組的需求，以及用宜搭解決的方式，方便各位快速上手，同時(shí)對(duì)模糊項(xiàng)進(jìn)行說明。

開發(fā)需求

目前在智慧決策平臺(tái)己實(shí)現(xiàn)四員協(xié)同功能，主要是供給20個(gè)地市一線人員在零售戶走訪時(shí)發(fā)現(xiàn)的異常情況，進(jìn)行協(xié)同事項(xiàng)的發(fā)起和流轉(zhuǎn)。
比如說一線執(zhí)行人員（不管是誰）在零售戶走訪的時(shí)候發(fā)現(xiàn)這個(gè)零售戶【未明碼標(biāo)價(jià)】，那么這個(gè)時(shí)候就會(huì)在宜搭發(fā)起一個(gè)流程表單，到時(shí)候就會(huì)讓負(fù)責(zé)這個(gè)零售戶的客戶專員去處理這件事情。這些協(xié)同事項(xiàng)=異常事項(xiàng)，是煙草規(guī)定零售戶要做or不許做的事項(xiàng)但是零售戶沒有按照他們的規(guī)矩來。
四員協(xié)同分移動(dòng)端和PC端兩端應(yīng)用:移動(dòng)端主要供給一線人員進(jìn)行發(fā)起和事項(xiàng)處理;PC端主要面向20個(gè)地市的信息中心人員，進(jìn)行四員協(xié)同相關(guān)的事項(xiàng)配置。

配置表單

1.表單區(qū)域介紹

左側(cè)就是物料區(qū)，右側(cè)是對(duì)控件的具體配置項(xiàng)，表單中的每個(gè)控件都有自己的方法，比如change事件，click事件等等，可以在在js模塊中通過代碼的方式去進(jìn)行個(gè)性化需求的開發(fā)。
重點(diǎn)說一下成員控件。在成員控件中宜搭自己集成了當(dāng)前釘釘?shù)顷懭送ㄓ嶄浀臄?shù)據(jù)，可以直接選擇通訊錄的人，某些情況下會(huì)出現(xiàn)只能選擇自己，這是因?yàn)楫?dāng)前的組織架構(gòu)管理員設(shè)置的問題，聯(lián)系他就可以解決。成員組件中選擇的人可以與流程設(shè)計(jì)相結(jié)合，在流程設(shè)計(jì)中可以選擇成員組件選中的人去進(jìn)行流程的流轉(zhuǎn)。也可以通過api的方式去做個(gè)性化的流程，比如在某些節(jié)點(diǎn)或者某種條件下是由誰審批。

2.連接器和數(shù)據(jù)源

如果在復(fù)雜需求中，表單中的數(shù)據(jù)不是通過寫死在宜搭的，比如某個(gè)下拉框的數(shù)據(jù)不一定是固定值，而是根據(jù)之前選擇的條件會(huì)變化。如先選擇單位，自動(dòng)加載選中單位下的區(qū)縣，以及選中某個(gè)區(qū)縣，加載選中區(qū)縣下的所有煙草零售戶，則通過枚舉數(shù)據(jù)寫死在宜搭中就不可行，需要用到連接器和數(shù)據(jù)源。

連接器是一種可以調(diào)用外部api拿到數(shù)據(jù)的方式，數(shù)據(jù)源也是，這里推薦連接器，因?yàn)檫B接器更加靈活，數(shù)據(jù)源只能支持get請(qǐng)求，而且返回的格式不能在js中進(jìn)行二次加工處理，連接器就顯得靈活很多。

在釘釘?shù)倪B接器工廠中，可以新建一個(gè)連接器，輸入請(qǐng)求地址，可以配置接口方法，在宜搭表單中使用。在js中調(diào)用的話可以參考以下代碼，廣東數(shù)據(jù)項(xiàng)目這里是通過h5跳轉(zhuǎn)宜搭，在url上帶上token，在把token放在連接器中使用。

export function queryOrgByToken(){
  this.dataSourceMap.queryOrgByToken.load({
    inputs: JSON.stringify({
      header: {
        "Content-Type": "Content-Type",
        "token": this.state.urlParams.token
      },
    })
  }).then((res)=>{
    console.log('queryOrgByToken---',res)
    // 獲取協(xié)同事項(xiàng)信息的接口
    this.querySynergyByOrgUuid(res[0].value)
     // 獲取所屬區(qū)縣的下拉接口
    this.queryCountyByCityUuid(res[0].value)
    if (this.state.urlParams.syscompanyuuid){
      this.$('selectField_lptkbpku').setValue(this.state.urlParams.syscompanyuuid)
    }else{
      this.$('selectField_lptkbpku').setValue(res[0].value)
    }
    this.$('textField_lr66euz1').setValue(res[0].text)
    this.$('selectField_lptkbpku').set('dataSource', res)
  })
}

3.怎么通過js代碼給宜搭的控件進(jìn)行賦值

在宜搭中，每個(gè)控件都有一個(gè)唯一的id，通過這個(gè)id可以賦值給該控件。

this.$('employeeField_lpw0v8fe').setValue([{ name: '項(xiàng)宇', value: "13015907441233454"}]

const countyData = [{ text: this.$('textField_lr66euz2').getValue(), value: this.$('selectField_lqx4ex9y').getValue()}]
this.$('selectField_lqx4ex9y').set('dataSource', countyData)

在下拉框中賦值為[name:“”,value:“”]，也可以是[label:“”,value:“”]，推薦label value字段。因?yàn)橐舜畹脑创a中，h5和pc是兩套代碼，在h5的下拉框控件中只能識(shí)別label。
在成員組件中，需要賦值通訊錄中的名稱和釘釘?shù)木幋a，可以通過手機(jī)號(hào)去拿釘釘?shù)木幋a。

4.urlParams和變量

宜搭中，可以從url上取值和在表單中設(shè)置變量，如果在制作tabs加table頁的時(shí)候，需要記錄page和pagesize，就在變量中添加。并且在連接器的接口中加入變量的傳參。

5.流程設(shè)計(jì)

流程設(shè)計(jì)這里，就根據(jù)業(yè)務(wù)需求設(shè)計(jì)就ok，如果是api的方式，需要傳入數(shù)組對(duì)象，屬性是label和value，value就是釘釘通訊錄這個(gè)人的編碼。

6.連接器配置內(nèi)網(wǎng)域名，請(qǐng)求先進(jìn)蜂巢，再由蜂巢轉(zhuǎn)內(nèi)網(wǎng)

登陸方式選擇無身份驗(yàn)證

配置接口并保存

使用宜搭過程碰到的幾個(gè)問題

1.在表單發(fā)起審批后，審批頁的下拉數(shù)據(jù)只顯示了value沒有顯示label

此問題僅出現(xiàn)在下拉框控件，最后經(jīng)過排查發(fā)現(xiàn)，宜搭的提交頁和審批頁用的是2套代碼，提交頁就是你設(shè)計(jì)的頁面，審批頁是自己生成，自己生成的審批頁中如果下拉框控件是通過連接器的方式塞值。即setValue一個(gè)下拉的數(shù)組對(duì)象到下拉框控件中，如果是這種方式，在審批頁面中會(huì)丟失label，原因是表單在數(shù)據(jù)采集到時(shí)候只采集了value，所以在審批頁面并沒有請(qǐng)求下拉框數(shù)據(jù)去進(jìn)行匹配，最終就只顯示了value。怎么解決？在宜搭頁面中新建一個(gè)輸入框控件，由它去存label數(shù)據(jù)。最后在didmount回調(diào)中去進(jìn)行數(shù)據(jù)重組。

2.dd-ztna-token問題

廣州數(shù)據(jù)項(xiàng)目組碰到了ios端缺少了dd-ztna-token，這個(gè)東西是釘釘網(wǎng)關(guān)驗(yàn)證，cookie中存在，則可以訪問，如果是公開部署的話，不會(huì)存在這個(gè)問題。后經(jīng)廣州數(shù)據(jù)釘釘人員的協(xié)助，發(fā)現(xiàn)了其實(shí)ios和安卓都不應(yīng)該出現(xiàn)dd-ztna-token，安卓端之所以有是因?yàn)榻?jīng)過另一層轉(zhuǎn)發(fā)把這個(gè)dd-ztna-token帶上了。
最后的解決方案為，由蜂巢映射解決。在連接器的http路徑中寫映射好的域名，外部請(qǐng)求會(huì)先到蜂巢，再由蜂巢去進(jìn)行訪問，不需要dd-ztna-token。

公司低代碼和宜搭低代碼的選擇

從業(yè)務(wù)上來說，主攻的方向不一樣，公司的低代碼在后管系統(tǒng)中，可以大量廣泛的應(yīng)用表單+列表頁，而且相對(duì)于宜搭低代碼，多了列表頁的功能。并且公司低代碼是跟隨項(xiàng)目的，有開發(fā)人員的支持，后續(xù)個(gè)性化可以有人跟進(jìn)，公司低代碼是用ant-design設(shè)計(jì)的，更加可以無痛的嵌入到后管系統(tǒng)中。
而宜搭低代碼的優(yōu)勢(shì)在于是和釘釘打通的，專注于表單頁的設(shè)計(jì)，在流程流轉(zhuǎn)的時(shí)候可以直接通過釘釘發(fā)送給用戶，對(duì)于列表頁的低代碼涉及不多。
所以在選擇用公司低代碼還是宜搭低代碼的時(shí)候，還是要根據(jù)客戶想法和實(shí)際業(yè)務(wù)去選擇。兩個(gè)的場(chǎng)景不一樣。

結(jié)尾

此博客從我所在的公司語雀中同步過來，內(nèi)容可能有斷續(xù)性，因?yàn)楹凸緲I(yè)務(wù)相互結(jié)合，希望對(duì)大家有幫助。好久不更新了，因?yàn)?3年下半年都在做數(shù)據(jù)大屏項(xiàng)目，加班干項(xiàng)目，沒時(shí)間更新，宜搭低代碼踩了點(diǎn)坑，希望各位看完可以減少踩坑，快速上手。
之后會(huì)更新一些做數(shù)據(jù)項(xiàng)目上碰到的問題文章來源地址http://www.zghlxwxcb.cn/news/detail-835093.html

到了這里，關(guān)于宜搭低代碼快速上手使用手冊(cè)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！