UI定制组件属性说明书

1. 组件类型

# 父类容器
Parent = 'Parent'.freeze
# 文本输入框
LabelTextField = 'LabelTextField'.freeze
# 密码输入框
LabelPasswordTextField = 'LabelPasswordTextField'.freeze
# 提交保存按钮
SubmitButton = 'SubmitButton'.freeze
# 返回取消按钮
BackButton = 'BackButton'.freeze
# 多选项
CheckBox = 'CheckBox'.freeze
# 下拉款
SelectComponent = 'SelectComponent'.freeze
# 地址选择下拉款(特殊)
AddressSelect = 'AddressSelect'.freeze
# 表格
Table = 'Table'.freeze
# 标签组
TagGroup = 'TagGroup'.freeze
# 标签
Tag = 'Tag'.freeze
# 输入框容器
NormalComponentGroup = 'NormalComponentGroup'.freeze
# 进度条
ProgressBar = 'ProgressBar'.freeze
# 步进器
Stepper = 'Stepper'.freeze

2. 组件详情说明
3. 父类容器：组件在模型里面使用自关联的方法实现， 一个容器也是组件。
4. 文本输入框： 最基本的文本输入框， 样式如图所以：
   
   文本输入款--上下排版
   
   

JSON:
{
  "id": "7093865172",
  "enable": "true",     # 是否启用
  "name": "公司名称",     # 组件名称
  "code": "enterprise.name",  # 组件code对于同一个容器code需要验证唯一
  "ui_component_type": "LabelTextField",  # 组件类型
  "default_value": "",  # 组件默认值
  "editable": true,     # 组件是否可编辑
  "placeholder": "请输入公司名称",  # 组件提示语
  "extra": "",    # 附加内容
  "style": { layout: "up_and_down" },  # 组件样式
  "description": "公司名称必填的哦",      # 组件描述语
  "visibility": true,                  # 是否可见
  "parent_id": "5876220971",           # 父容器id
  "created_at": "2016-12-08 17:33:14",
  "seq": "",                           # 组件排序
  "value": "",                         # 组件值
  "validation_rules": [     # 验证规则
    {
    id: 1,
    validation_type: "min_length",  # 验证规则类型
    seq: 1,                         # 验证规则排序， 默认按着从大到小的正序排列， seq越大，验证规则级别越高。
    validation_value: "2",          # 验证值
    message: "最小长度2",            # 验证提示语
    extra: nil,                     # 验证规则附件信息
    resource_type: "UiComponent",   # 多态关联类型
    resource_id: 2,                 # 多态关联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: "最大长度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": []  # 组件模板
}

3. 密码输入框：在文本输入框的前提上，隐藏输入文本（一般情况下以*号填充）样式图：

   
   
   密码文本输入款--上下排版

4. 提交保存按钮：用户通过点击按钮， 实现响应事件。

   
   
   保存按钮
   
   
   登录按钮

5. 返回取消按钮: 取消、返回、上一步等按钮

   
   
   上一步
   
   
   返回

6. 多选项: 在页面进行选择的时候可以多选， 用户进行页面渲染， 通过JSON解析，可以获取默认值。

多选项

7. 下拉款: 目前只支持最基本的下拉款，（下拉框不支持搜索， 不支持多项）

   
   
   下拉框

8. 地址选择下拉款(特殊): 对于特殊的地址下拉框这设置一个特殊的组件。 由后台和前台沟通确定，该组件的使用方法。

   
   
   地址选择框

9. 表格: 目前支持基本表格（行合并， 列合并的表格目前还没考虑）

   
   
   表格

10. 标签页

    
    
    标签页

11. 标签

    
    
    标签

12. 输入框容器

    
    
    输入框容器

13. 进度条

    
    
    进度条

14. 步进器

    
    
    进步器