- 組件類型
# 父類容器
Parent = 'Parent'.freeze
# 文本輸入框
LabelTextField = 'LabelTextField'.freeze
# 密碼輸入框
LabelPasswordTextField = 'LabelPasswordTextField'.freeze
# 提交保存按鈕
SubmitButton = 'SubmitButton'.freeze
# 返回取消按鈕
BackButton = 'BackButton'.freeze
# 多選項(xiàng)
CheckBox = 'CheckBox'.freeze
# 下拉款
SelectComponent = 'SelectComponent'.freeze
# 地址選擇下拉款(特殊)
AddressSelect = 'AddressSelect'.freeze
# 表格
Table = 'Table'.freeze
# 標(biāo)簽組
TagGroup = 'TagGroup'.freeze
# 標(biāo)簽
Tag = 'Tag'.freeze
# 輸入框容器
NormalComponentGroup = 'NormalComponentGroup'.freeze
# 進(jìn)度條
ProgressBar = 'ProgressBar'.freeze
# 步進(jìn)器
Stepper = 'Stepper'.freeze
- 組件詳情說明
- 父類容器:組件在模型里面使用自關(guān)聯(lián)的方法實(shí)現(xiàn)榆综, 一個(gè)容器也是組件鸟悴。
- 文本輸入框: 最基本的文本輸入框, 樣式如圖所以:
文本輸入款--上下排版

JSON:
{
"id": "7093865172",
"enable": "true", # 是否啟用
"name": "公司名稱", # 組件名稱
"code": "enterprise.name", # 組件code對(duì)于同一個(gè)容器code需要驗(yàn)證唯一
"ui_component_type": "LabelTextField", # 組件類型
"default_value": "", # 組件默認(rèn)值
"editable": true, # 組件是否可編輯
"placeholder": "請(qǐng)輸入公司名稱", # 組件提示語
"extra": "", # 附加內(nèi)容
"style": { layout: "up_and_down" }, # 組件樣式
"description": "公司名稱必填的哦", # 組件描述語
"visibility": true, # 是否可見
"parent_id": "5876220971", # 父容器id
"created_at": "2016-12-08 17:33:14",
"seq": "", # 組件排序
"value": "", # 組件值
"validation_rules": [ # 驗(yàn)證規(guī)則
{
id: 1,
validation_type: "min_length", # 驗(yàn)證規(guī)則類型
seq: 1, # 驗(yàn)證規(guī)則排序奖年, 默認(rèn)按著從大到小的正序排列细诸, seq越大,驗(yàn)證規(guī)則級(jí)別越高陋守。
validation_value: "2", # 驗(yàn)證值
message: "最小長(zhǎng)度2", # 驗(yàn)證提示語
extra: nil, # 驗(yàn)證規(guī)則附件信息
resource_type: "UiComponent", # 多態(tài)關(guān)聯(lián)類型
resource_id: 2, # 多態(tài)關(guān)聯(lián)ID
created_at: Mon, 05 Dec 2016 11:34:26 CST +08:00,
updated_at: Mon, 05 Dec 2016 11:34:29 CST +08:00,
},
{
id: 2,
validation_type: "max_length",
seq: 2,
validation_value: "25",
message: "最大長(zhǎng)度25",
extra: nil,
resource_type: "UiComponent",
resource_id: 2,
created_at: Mon, 05 Dec 2016 11:34:56 CST +08:00,
updated_at: Mon, 05 Dec 2016 11:34:57 CST +08:00,
}
],
"ui_themes": [], # 組件主題
"ui_layout_templates": [] # 組件模板
}
-
密碼輸入框:在文本輸入框的前提上震贵,隱藏輸入文本(一般情況下以*號(hào)填充)樣式圖:
密碼文本輸入款--上下排版 -
提交保存按鈕:用戶通過點(diǎn)擊按鈕, 實(shí)現(xiàn)響應(yīng)事件水评。
保存按鈕
登錄按鈕 -
返回取消按鈕: 取消猩系、返回、上一步等按鈕
上一步
返回 多選項(xiàng): 在頁面進(jìn)行選擇的時(shí)候可以多選中燥, 用戶進(jìn)行頁面渲染寇甸, 通過JSON解析,可以獲取默認(rèn)值疗涉。

多選項(xiàng)
-
下拉款: 目前只支持最基本的下拉款拿霉,(下拉框不支持搜索, 不支持多項(xiàng))
下拉框 -
地址選擇下拉款(特殊): 對(duì)于特殊的地址下拉框這設(shè)置一個(gè)特殊的組件咱扣。 由后臺(tái)和前臺(tái)溝通確定绽淘,該組件的使用方法。
地址選擇框 -
表格: 目前支持基本表格(行合并闹伪, 列合并的表格目前還沒考慮)
表格 -
標(biāo)簽頁
標(biāo)簽頁 -
標(biāo)簽
標(biāo)簽 -
輸入框容器
輸入框容器 -
進(jìn)度條
進(jìn)度條 -
步進(jìn)器
進(jìn)步器