閱讀(2.7k) 書簽贊(0) 我要糾錯

組件基礎(chǔ)信息

2022-02-24 10:59 更新

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

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

編輯表單

表單編輯頁面

1. 屬性

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

添加組件

1.1 標(biāo)題

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

修改組件標(biāo)題

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

標(biāo)題為空

1.2 占位提示

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

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

1.3 描述信息

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

1.4 狀態(tài)

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

如圖：

組件狀態(tài)

普通：可見、可編輯，如圖：

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

只讀：可見，不可編輯，如圖：

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

1.5 默認(rèn)值

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

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

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

如圖：

組件默認(rèn)值

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

如圖：

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

如圖：

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

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

如圖：

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

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

如圖：

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

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

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

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

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

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

1.6 格式

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

如圖輸入身份證號碼：

組件格式

1.7 校驗

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

如圖：

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

1.7.1 必填

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

必填項

1.7.2 最小值

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

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

最小值

1.7.3 最大值

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

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

最大值

1.7.4 最小長度

數(shù)據(jù)最少填寫數(shù)量，例如：單行文本設(shè)置最小長度為 2，提交數(shù)據(jù)的時候填寫文字?jǐn)?shù)量必須大于等于2個。

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

最小長度

1.7.5 最大長度

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

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

最大長度

1.7.6 自定義函數(shù)（高級校驗）

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

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

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

配置自定義函數(shù)

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

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

示例 2：校驗輸入的文字中，是否以「杭州」開頭

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

其他例子：

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

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

//輸入是否為標(biāo)準(zhǔn)銀行卡號(大陸銀聯(lián)銀行卡號）
function validateRule(value) {
  value = (value + '').replace(/\D+/g, '')
  const regExp = /^([1-9])(\d{15}|\d{18})$/
  // 校驗非0開始及長度
  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;
 }

感謝用戶@n233333(n233333)提供的簡易銀行卡校驗方案

1.7.7 錯誤提示

當(dāng)字段校驗不通過的時候，會報錯阻止提交

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

報錯信息

2. 高級

2.1 唯一標(biāo)識

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

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

組件唯一標(biāo)識

2.2 多端顯示

部分組件有這個選項，用于控制其在桌面端和移動端的顯示。

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

多端顯示

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

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

僅在移動端顯示該組件，如圖：

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

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

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

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

2.4 動作設(shè)置

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

動作設(shè)置--新建動作

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

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

2.5 刪除和復(fù)制

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

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

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

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

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