
# 模板设计器组件介绍
  ![An image](https://mmbiz.qpic.cn/mmbiz_gif/mbvbah2cbzGdEbMQ9PibFrQYI8iaZktchUzNUwswCu5x425cPnCwo6UCd3XIQRZPyDKnGEic03d3iahnFzpKOtCbTw/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1)

## 表单基础配置

### 页面名称

用于设置当前表单名

### 样式

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

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

### 是否有边框

可选择是否展示表单边框

### 单元格宽度

配置表单整体宽度

## 配置项说明

### 布局 

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

### 默认值配置

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

### 是否禁用

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

### sql配置

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

### 单元格样式

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

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

### 宽度

&#8195;设置组件宽度

### 标签占比

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

### 组件占比

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

### 显示标签

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

### 标题

&#8195;用以配置组件的标签名

### 渲染方式

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

### 默认值字段

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

## 占位文字

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

### sql配置



## 标签

**提供以下配置项**
> - &#8195;布局
> - &#8195;默认值配置
> - &#8195;sql配置
>
> 是否可编辑
>
> &#8195;**不可编辑**

标签组件用于展示文本

## 按钮

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - sql配置
>
> 是否可编辑或点击
>
>   **用户可点击**

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

## 描述组件

**提供以下配置项**

>- 布局
>- 标题
>- 渲染方式
>- 默认值字段
>- 标签占比
>- 组件占比
>- 单元格样式
>- 显示标签
>- sql配置
>
>是否可编辑或点击
>
>**用户不可编辑或点击**

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

## 列表组件

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 数据默认字段
> - 是否必填
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可编辑或点击**

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

## 文本框

**提供以下配置项**

>- 布局
>- 宽度
>- 是否禁用
>- 标题
>- 标签占比
>- 组件占比
>- 显示标签
>- 占位文字
>- 数据默认值字段
>- 默认值
>- 单元格样式
>- sql配置
>
>是否可编辑或点击
>
>**用户可编辑或点击**

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

## 隐藏值组件

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 数据默认值字段
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户不可编辑或点击且不会展示给用户**

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

## 数字输入框组件

**提供以下配置项**

>- 布局
>- 宽度
>- 是否禁用
>- 标题
>- 标签占比
>- 组件占比
>- 显示标签
>- 数据默认值字段
>- 默认值
>- 单元格样式
>- sql配置
>
>是否可编辑或点击
>
>**用户可编辑**

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

## 文本域组件

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 占位文字
> - 数据默认值字段
> - 是否必填
> - 默认值
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可编辑**

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

## 单选框组件

**提供以下配置项**

>- 布局
>- 宽度
>- 是否禁用
>- 标题
>- 标签占比
>- 组件占比
>- 显示标签
>- 数据默认值字段
>- 是否必填
>- 默认值
>- 单元格样式
>- sql配置
>
>是否可编辑或点击
>
>**用户可点击**

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

## 多选框组件

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 数据默认值字段
> - 是否必填
> - 默认值
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可点击**

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

## 下拉选择框组件

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 占位文字
> - 数字默认值字段
> - 是否必填
> - 默认值
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可点击**

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

## 图表组件

**提供以下配置项**

> - 布局
> - 组件
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 占位文字
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可点击**

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

## 二维码组件

**提供以下配置项**

>- 布局
>- 宽度
>- 是否禁用
>- 标题
>- 标签占比
>- 组件占比
>- 显示标签
>- 组件占比
>- 显示标签
>- 占位文字
>- 单元格样式
>- sql配置
>
>是否可编辑或点击
>
>**用户可扫描**

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

## 弹出列表选择框

**提供以下配置项**

>- 布局
>- 宽度
>- 是否禁用
>- 标题
>- 标签占比
>- 组件占比
>- 显示标签
>- 组件占比
>- 显示标签
>- 占位文字
>- 数组默认值字段
>- 是否必填
>- 单元格样式
>- sql配置
>
>是否可编辑或点击
>
>**用户可点击**

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

## 开关控件

**提供以下配置项**

>- 布局
>- 宽度
>- 是否禁用
>- 标题
>- 标签占比
>- 组件占比
>- 显示标签
>- 数据默认值字段
>- 是否必填
>- 默认值
>- sql配置
>
>是否可编辑或点击
>
>**用户可点击**

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

## 日期选择器

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 数据默认值字段
> - 是否必填
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可点击**

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

## 起止时间选择器

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 默认值时间字段配置
> - 是否必填
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可点击**

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

## 附件上传组件

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 数据默认值字段
> - 是否必填
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可点击**

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

## 位置组件

>- 布局
>- 宽度
>- 是否禁用
>- 标题
>- 标签占比
>- 组件占比
>- 是否显示标签
>- 数据字段默认值配置
>- 是否必填
>- 单元格样式
>
>是否可编辑或点击
>
>**用户可点击**

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

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

## 图片上传组件

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 数据默认值字段
> - 是否必填
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可点击**

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

## 签名组件

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 数组默认值字段
> - 是否必填
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可编辑**

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

## 组件片段

**提供以下配置项**

> - 布局
> - 宽度
> - 是否禁用
> - 标题
> - 标签占比
> - 组件占比
> - 显示标签
> - 单元格样式
> - sql配置
>
> 是否可编辑或点击
>
> **用户可编辑**

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

## 子表单组件

**提供以下配置项**

>- 布局
>- 宽度
>- 是否禁用
>- 标题
>- 标签占比
>- 组件占比
>- 显示标签
>- 单元格样式
>- sql配置
>
>是否可编辑或点击
>
>**用户可编辑**

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

<script>
export default {
  mounted () {
    var script = document.createElement("script");
    script.type = "text/javascript"
    script.charset="UTF-8"
    script.src = "http://tajs.qq.com/stats?sId=59154049"
    document.body.appendChild(script);
  }
}
</script>