# 模板设计器组件介绍

# 表单基础配置
# 页面名称
用于设置当前表单名
# 样式
表单基础样式配置,接收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配置
是否可编辑或点击
用户可编辑
将多个表单嵌入进当前表单的组件