# # 模板设计器组件介绍

## # 表单基础配置

### # 页面名称

用于设置当前表单名

### # 样式

表单基础样式配置,接收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配置

> 是否可编辑或点击

> 用户可编辑

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