# 模板设计器组件介绍

An image

# 表单基础配置

# 页面名称

用于设置当前表单名

# 样式

表单基础样式配置,接收json文本,以下示例

{
    "textAlign":"center",
    "fontSize":"20px"
}

# 是否有边框

可选择是否展示表单边框

# 单元格宽度

配置表单整体宽度

# 配置项说明

# 布局

单元格元素布局,提供居左,居中,居右三种配置项

# 默认值配置

 当前组件渲染时如果有配置该参数,会默认渲染该参数值

# 是否禁用

 该配置参数可规定当前组件是否不可被用户使用或点击

# sql配置

 对组件进行数据库查询,查询后进行配置当前数据默认项

# 单元格样式

 该配置接收JSON字符串文本,且key值因为驼峰命名法,以下为示例

{
    "textAlign":"center",
    "fontSize":"20px"
}

# 宽度

 设置组件宽度

# 标签占比

 部分组件分为标签和输入栏,我们把每一行宽度等分为24份,通过配置各自的占比,从而做到宽度相对应,标签占比为左边标签名所占用宽度

# 组件占比

  道理同上,我们把每一行宽度等分为24份,然后组件占比通常值接收用户输入的各个操作控件,例如输入框等,组件占比配置应大于标签占比

# 显示标签

 由于存在标签组件,部分组件需要放弃使用自带的标签配置,所以就需要配置当前配置项,用以关闭自带标签显示

# 标题

 用以配置组件的标签名

# 渲染方式

 该配置属于特殊配置项,可将指定字段按照用户配置的指定组件渲染

# 默认值字段

 该字段需要用户自己配置字段并添加入组件即可生效

# 占位文字

 该配置项用于输入框等组件,在用户第一次输入前,提示用户应该做什么输入

# sql配置

# 标签

提供以下配置项

  •  布局
  •  默认值配置
  •  sql配置

是否可编辑

不可编辑

标签组件用于展示文本

# 按钮

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • sql配置

是否可编辑或点击

用户可点击

按钮组件用于用户点击执行对应逻辑,并实现与表单互动

# 描述组件

提供以下配置项

  • 布局
  • 标题
  • 渲染方式
  • 默认值字段
  • 标签占比
  • 组件占比
  • 单元格样式
  • 显示标签
  • sql配置

是否可编辑或点击

用户不可编辑或点击

描述组件用于展示用户基本信息,或展示一些用户不可操作信息.

# 列表组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数据默认字段
  • 是否必填
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可编辑或点击

将数据以列表(表格)的方式展示给用户观看

# 文本框

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 占位文字
  • 数据默认值字段
  • 默认值
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可编辑或点击

接收用户输入的文本框,为常用组件,表单设计器的基础组成组件

# 隐藏值组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数据默认值字段
  • 单元格样式
  • sql配置

是否可编辑或点击

用户不可编辑或点击且不会展示给用户

对用户隐藏,该组件主要用于将部分参数放置于表单中以供使用.

# 数字输入框组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数据默认值字段
  • 默认值
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可编辑

接收用户数字相关的输入,该组件不可输入英文,符号,中文等,必需确保用户只需要输入数字.

# 文本域组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 占位文字
  • 数据默认值字段
  • 是否必填
  • 默认值
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可编辑

当需要用户输入较多且为多行文本时,使用该组件,用以提供用户足够的编写空间和展示空间

# 单选框组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数据默认值字段
  • 是否必填
  • 默认值
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可点击

该组件用于展示选择性给用户,用户只需鼠标点击即可,不需要用户二次编辑,且提供的选择项中用户只可以选择一个

# 多选框组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数据默认值字段
  • 是否必填
  • 默认值
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可点击

该组件同样用于提供多个选择项给用户,不同的是,该组件支持用户选择多个选择项并提交

# 下拉选择框组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 占位文字
  • 数字默认值字段
  • 是否必填
  • 默认值
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可点击

该组件同样用于展示选择性以供用户选择,与单选框组件不同的是,该组件的选择性不会占用展示位.

# 图表组件

提供以下配置项

  • 布局
  • 组件
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 占位文字
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可点击

结合echarts数据图表,动态生成各种各样的图表供用户观看,参数配置在sql配置中进行数据配置

# 二维码组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 组件占比
  • 显示标签
  • 占位文字
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可扫描

生成一个带链接的二维码供给用户扫描执行对应操作

# 弹出列表选择框

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 组件占比
  • 显示标签
  • 占位文字
  • 数组默认值字段
  • 是否必填
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可点击

弹出一个列表(表格)组件,展示需要用户选择的数据,选择后回到表单执行下步操作

# 开关控件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数据默认值字段
  • 是否必填
  • 默认值
  • sql配置

是否可编辑或点击

用户可点击

该组件只支持用户选择是否,根据用户选择执行后续处理

# 日期选择器

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数据默认值字段
  • 是否必填
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可点击

提供一个日期选择栏,用户可根据选择填写对应时间.

# 起止时间选择器

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 默认值时间字段配置
  • 是否必填
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可点击

提供一个时间选择栏,不同的是该组件需要用户选择开始时间至结束时间,可通过字段配置默认值

# 附件上传组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数据默认值字段
  • 是否必填
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可点击

该组件提供用户上传文件或图片,用户可根据需求,上传文件以供流程审核人员进行观看

# 位置组件

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 是否显示标签
  • 数据字段默认值配置
  • 是否必填
  • 单元格样式

是否可编辑或点击

用户可点击

该组件采用高德地图定位,组件可定位当前用户地址并提供给用户展示

注: 使用该组件需要采用https协议

# 图片上传组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数据默认值字段
  • 是否必填
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可点击

该组件用法等同于附件上传组件,不过只接收图片上传

# 签名组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 数组默认值字段
  • 是否必填
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可编辑

用户可点击后进行电子签名,确认后会转为图片进行保存

# 组件片段

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可编辑

将其他表单内部嵌入到当前表单并共享数据的组件

# 子表单组件

提供以下配置项

  • 布局
  • 宽度
  • 是否禁用
  • 标题
  • 标签占比
  • 组件占比
  • 显示标签
  • 单元格样式
  • sql配置

是否可编辑或点击

用户可编辑

将多个表单嵌入进当前表单的组件