閱讀(3.5k) 書(shū)簽贊(0) 我要糾錯(cuò)

組件基礎(chǔ)信息

2022-02-24 10:59 更新

從表單的左側(cè)選擇組件拖動(dòng)至中間表單設(shè)計(jì)界面，即可在右側(cè)配置組件的基礎(chǔ)設(shè)置，可以用于表單組件的個(gè)性化設(shè)置，例如修改表單的顯示字段、布局表單格式、表單呈現(xiàn)的樣式等。

路徑：工作臺(tái) >> 宜搭 >> 我的應(yīng)用 >> 表單 >> 右上角編輯表單即可進(jìn)入，效果如圖：

編輯表單

表單編輯頁(yè)面

1. 屬性

路徑：選擇組件 >> 右邊展示組件的屬性及高級(jí)設(shè)置

添加組件

1.1 標(biāo)題

指該組件的名稱(chēng)，標(biāo)題的默認(rèn)名稱(chēng)為該組件的組件類(lèi)型名稱(chēng)，標(biāo)題用于幫助成員更好得識(shí)別需要填報(bào)的內(nèi)容。

修改組件標(biāo)題

如果標(biāo)題為空，那么標(biāo)題會(huì)隱藏，如圖只有一個(gè)輸入框：

標(biāo)題為空

1.2 占位提示

占位提示是描述該組件需要輸入的內(nèi)容的提示信息，該信息僅用于提示，不會(huì)影響字段的值。

如圖「請(qǐng)輸入學(xué)生姓名」：

1.3 描述信息

描述信息是用于描述該組件的附加信息，常用于提示當(dāng)前組件的功能、范圍、填寫(xiě)注意事項(xiàng)等等，可使用文本、可插入鏈接。

1.4 狀態(tài)

設(shè)置字段組件的默認(rèn)狀態(tài)，狀態(tài)可通過(guò)權(quán)限控制。

如圖：

組件狀態(tài)

普通：可見(jiàn)、可編輯，如圖：

禁用：可見(jiàn)、不可編輯，和只讀的區(qū)別是會(huì)展示出字段屬性，如圖：

只讀：可見(jiàn)，不可編輯，如圖：

隱藏：當(dāng)前字段不可見(jiàn)、不可編輯

1.5 默認(rèn)值

是指當(dāng)用戶(hù)訪問(wèn)表單時(shí)，該字段的默認(rèn)值

對(duì)于部分組件可設(shè)置自定義、公式編輯、數(shù)據(jù)聯(lián)動(dòng)、關(guān)聯(lián)其他表單數(shù)據(jù)、網(wǎng)關(guān)數(shù)據(jù)、搜索數(shù)據(jù)源等。

（1）自定義：設(shè)定一個(gè)固定值，在訪問(wèn)的時(shí)候也是可以將固定值刪除之后重新錄入數(shù)據(jù)。

如圖：

組件默認(rèn)值

（2）高階用法：將數(shù)據(jù)源的值，作為默認(rèn)值寫(xiě)入

如圖：

（3）公式編輯（點(diǎn)此查看）

如圖：

配置默認(rèn)值公式編輯

（4）數(shù)據(jù)聯(lián)動(dòng)（點(diǎn)此查看）

如圖：

數(shù)據(jù)聯(lián)動(dòng)

（5）關(guān)聯(lián)其他表單數(shù)據(jù)（點(diǎn)此查看）

如圖：

關(guān)聯(lián)其他表單數(shù)據(jù)

（6）網(wǎng)關(guān)數(shù)據(jù)

這個(gè)接口必須是外網(wǎng)支持調(diào)用，同時(shí)返回的接口格式為 [{"text":"111","value":"111"}]

（7）搜索數(shù)據(jù)源

這個(gè)是在組件內(nèi)輸入值搜索的時(shí)候，才會(huì)觸發(fā)這個(gè)接口的調(diào)用。

搜索數(shù)據(jù)源

1.6 格式

在單行文本字段中，系統(tǒng)預(yù)設(shè)的數(shù)據(jù)格式，起到字段校驗(yàn)的作用。

如圖輸入身份證號(hào)碼：

組件格式

1.7 校驗(yàn)

所有字段類(lèi)型組件均可設(shè)置必填和自定義函數(shù)校驗(yàn)

如圖：

校驗(yàn)（必填、自定義函數(shù)）

1.7.1 必填

必填是指在提交數(shù)據(jù)的時(shí)候必須填寫(xiě)該字段，若未填寫(xiě)無(wú)法成功提交數(shù)據(jù)，并且會(huì)提示：XX是必填字段。

必填項(xiàng)

1.7.2 最小值

數(shù)據(jù)最小填寫(xiě)值，例如：數(shù)值組件最小值設(shè)置為 4，填寫(xiě)數(shù)據(jù)時(shí)輸入的數(shù)值不能小于 4。

支持組件類(lèi)型：數(shù)值

最小值

1.7.3 最大值

數(shù)據(jù)最大填寫(xiě)值，例如：數(shù)值組件設(shè)置最大值為50，填寫(xiě)數(shù)據(jù)的時(shí)候數(shù)值不能大于50。

支持組件類(lèi)型：數(shù)值

最大值

1.7.4 最小長(zhǎng)度

數(shù)據(jù)最少填寫(xiě)數(shù)量，例如：?jiǎn)涡形谋驹O(shè)置最小長(zhǎng)度為 2，提交數(shù)據(jù)的時(shí)候填寫(xiě)文字?jǐn)?shù)量必須大于等于2個(gè)。

支持組件類(lèi)型：數(shù)值、單行文本、多行文本。

最小長(zhǎng)度

1.7.5 最大長(zhǎng)度

數(shù)據(jù)最多填寫(xiě)數(shù)量，例如：下拉復(fù)選組件設(shè)置最大長(zhǎng)度為 2，提交數(shù)據(jù)的時(shí)候該字段選擇不能超過(guò) 2 個(gè)選項(xiàng)。

支持組件類(lèi)型：數(shù)值、單行文本、多行文本、復(fù)選、下拉復(fù)選、部門(mén)、關(guān)聯(lián)表單。

最大長(zhǎng)度

1.7.6 自定義函數(shù)（高級(jí)校驗(yàn)）

需要基礎(chǔ)代碼能力，不會(huì)代碼也可以參考下述代碼使用

示例1：校驗(yàn)輸入的文字中，是否包含「雨」

注：自定義函數(shù)校驗(yàn)的錯(cuò)誤提示為必填，不然可能無(wú)法使用

配置自定義函數(shù)

可粘貼參考使用的 JS 代碼信息：

// 是否包含“雨”
function validateRule(value) {
  if (value.indexOf('雨') > -1) {
    return true;
  }
  return false;
}

示例 2：校驗(yàn)輸入的文字中，是否以「杭州」開(kāi)頭

// 是否以”杭州”開(kāi)頭
function validateRule(value) {
  if (/^杭州/.test(value)) {
    return true;
  }
  return false;
}

其他例子：

// 輸入是否包含空格
function validateRule(value) {
  if(/\s/.test(value)){
    return false;
  }
  return true;
}

//輸入是否為銀行卡號(hào)（簡(jiǎn)單通過(guò)位數(shù)驗(yàn)證)
function validateRule(value) {
  var regExp = /^([1-9]{1})(\d{15}|\d{18})$/;
  return regExp.test(value)
}

//輸入是否為標(biāo)準(zhǔn)銀行卡號(hào)(大陸銀聯(lián)銀行卡號(hào)）
function validateRule(value) {
  value = (value + '').replace(/\D+/g, '')
  const regExp = /^([1-9])(\d{15}|\d{18})$/
  // 校驗(yàn)非0開(kāi)始及長(zhǎng)度
  if (!regExp.test(value)) {
    return false
  }
  value = value.split('').reverse();
  let total = 0
  for (let i = 0; i < value.length; i++) {
    value[i] = parseInt(value[i]);
    total += i % 2 ? 2 * value[i] - (value[i] > 4 ? 9 : 0) : value[i];
  }
  if (total === 0) {
    return false;
  }
  return (total % 10) === 0;
 }

感謝用戶(hù)@n233333(n233333)提供的簡(jiǎn)易銀行卡校驗(yàn)方案

1.7.7 錯(cuò)誤提示

當(dāng)字段校驗(yàn)不通過(guò)的時(shí)候，會(huì)報(bào)錯(cuò)阻止提交

注：可不填，當(dāng)不填時(shí)，會(huì)提醒「該字段是必填字段」如圖：

報(bào)錯(cuò)信息

2. 高級(jí)

2.1 唯一標(biāo)識(shí)

當(dāng)前字段的唯一識(shí)別碼，用于在宜搭后臺(tái)存儲(chǔ)數(shù)據(jù)、通過(guò)代碼控制時(shí)使用，類(lèi)似每個(gè)組件的身份證，每個(gè)組件的唯一標(biāo)識(shí)是不一樣的，一般不需要更改，唯一標(biāo)識(shí)的默認(rèn)值為系統(tǒng)自動(dòng)。

字段唯一標(biāo)識(shí)（fiedId）是宜搭用來(lái)唯一指向該字段的標(biāo)識(shí)，更改該標(biāo)識(shí)會(huì)影響到該字段被使用的公式、數(shù)據(jù)存儲(chǔ)（數(shù)據(jù)也可能會(huì)丟失）、JS 函數(shù)側(cè)的指向等等，我們強(qiáng)烈「不建議」你去修改此標(biāo)識(shí)！短期內(nèi)還不支持新的方式來(lái)修改，可以在宜搭討論區(qū) 反饋相關(guān)建議和需求。如果你堅(jiān)持要修改該標(biāo)識(shí)（目前只能通過(guò) schema 導(dǎo)入的方式，如果你選擇使用此方法來(lái)修改組件唯一標(biāo)識(shí)，那么表示你已經(jīng)明確這么做的后果以及表明自己會(huì)獨(dú)自承擔(dān)這個(gè)后果，宜搭有權(quán)不對(duì)該后果負(fù)任何責(zé)任，感謝你的理解和支持。

組件唯一標(biāo)識(shí)

2.2 多端顯示

部分組件有這個(gè)選項(xiàng)，用于控制其在桌面端和移動(dòng)端的顯示。

注：如果配置了此選項(xiàng)，當(dāng)使用代碼獲取當(dāng)前控件的實(shí)例時(shí)會(huì)返回 null 。

多端顯示

默認(rèn)值：在桌面端和移動(dòng)端同時(shí)顯示該組件，如圖：

僅在桌面端顯示該組件，如圖：

僅在移動(dòng)端顯示該組件，如圖：

2.3 數(shù)據(jù)提交

部分組件有該屬性，用于數(shù)據(jù)提交時(shí)，當(dāng)前組件的值是否提交來(lái)做控制。

僅顯示時(shí)提交數(shù)據(jù)：當(dāng)組件隱藏時(shí)，默認(rèn)是不會(huì)將數(shù)據(jù)提交到后臺(tái)的。
始終提交：無(wú)論組件顯示與否，都提交當(dāng)前字段數(shù)據(jù)。

數(shù)據(jù)提交

2.4 動(dòng)作設(shè)置

通過(guò)新建動(dòng)作，我們可以在用戶(hù)操作了當(dāng)前字段組件時(shí)，做一些動(dòng)作，比如當(dāng)用戶(hù)編輯完當(dāng)前字段去編輯下一個(gè)字段之前，觸發(fā)一次數(shù)據(jù)打點(diǎn)功能。如圖：

動(dòng)作設(shè)置--新建動(dòng)作

注：新增動(dòng)作并不會(huì)影響當(dāng)前字段組件的原始動(dòng)作，比如，當(dāng)我們?cè)O(shè)置了組件必填，那么當(dāng)前組件失去焦點(diǎn)時(shí)，我們一樣會(huì)去做校驗(yàn)，也一樣會(huì)觸發(fā)當(dāng)前動(dòng)作設(shè)置中的函數(shù)。

具體可參考：https://www.yuque.com/yida/support/ocmxyv

2.5 刪除和復(fù)制

溫馨提示：刪除組件要特別小心，因?yàn)閯h除表單字段后可能會(huì)導(dǎo)致您的公式、業(yè)務(wù)關(guān)聯(lián)規(guī)則等配置失效，需謹(jǐn)慎操作。

若您的應(yīng)用正處于搭建中，還未正式上線，未產(chǎn)生任何數(shù)據(jù)，刪除字段對(duì)您來(lái)說(shuō)影響不大。

若您的應(yīng)用已上線，并有數(shù)據(jù)產(chǎn)生，我們不建議您刪除字段，刪除字段可能會(huì)導(dǎo)致您配置的公式、業(yè)務(wù)關(guān)聯(lián)規(guī)則失效，以及相關(guān)字段數(shù)據(jù)丟失。我們不建議你刪除已經(jīng)上線應(yīng)用的字段，您可以將想要?jiǎng)h除的字段設(shè)置為隱藏字段。設(shè)置隱藏字段的方法如下：

在表單編輯頁(yè)面 >> 選擇對(duì)應(yīng)字段 >> 屬性 >> 狀態(tài)

刪除/復(fù)制路徑：點(diǎn)擊組件 >> 刪除、復(fù)制即可，如圖：