# 表单管理

**Repository Path**: burncode/form_management

## Basic Information

- **Project Name**: 表单管理
- **Description**: zgy表单管理，拖拽生成组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-01-05
- **Last Updated**: 2021-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 表单管理
![image](https://gitee.com/webxingjie/form_management/raw/master/src/views/formManager/pageComponents/assets/%E8%A1%A8%E5%8D%95%E7%AE%A1%E7%90%86.png)
#### 文档


```
表单配置文档

表单配置分为4大功能区域，分别是表单整体功能，表单组件，表单展示，表单属性

一、表单整体功能
1、 终端——切换pc端配置界面和app端配置界面
pc端配置和app端的配置是独立的2个界面，没有关联
2、 预览——可以查看表单预览效果（部分组件配置界面和预览界面展示效果不同）
3、 保存——提交表单
4、返回——返回表单列表页面，不做保存

二、表单组件
1、布局组件——提供布局功能，不支持数据的输入和输出（没有绑定值）
1） 自配表格——提供类似表格布局配置
不是实际的表格，可以将一行分割成多列，有边框，展示效果和表格一样
2） 折叠区域——提供一个折叠区域
3） 折叠列表——提供多个折叠区域，每个折叠区域组成的组件一致（例3）
配置的时候是针对一个折叠区域进行配置，展示的折叠区域个数由初始化数据	决定；初始化数据接收一个数组，数组长度决定折叠区域个数；每个折叠区域	内部组件一致，展示内容由改行数据决定
4） 横向多列——提供分列布局配置
可以将一行分为多列进行页面的布局，实际展示不带边框，只提供布局
5） Tab页——提供一个tabs组件，可以对每个tab页单独配置
2、表单组件——主要的数据输入输出组件
1） 输入框——普通输入框和文本域
可以展示数据，修改数据，输出数据
2） 下拉框——单选下拉框和多选下拉框
a.单选和多选，返回结果数据类型不同
b.App端下拉框有传统下拉框（与pc端一致）和手机选择器（底部弹出选		择器），手机选择器只能接收数据字典列表
3） 单选框——单选框组合单选按钮组
4） 多选框——多选框组
5） 日期——日期时间不同类型的选择器
a.日期——yyyy-MM-dd
b.年月——yyyy-MM
c.时间——HH:mm:ss
d.日期时间——yyyy-MM-dd HH:mm:ss
e.日期范围——yyyy-MM-dd 至 yyyy-MM-dd
f.日期时间范围——yyyy-MM-dd HH:mm:ss 至 yyyy-MM-dd HH:mm:ss
6） 自配列表——提供一个对数组数据的输出、修改和输入的功能

可以增加行，删除行，内部表单组件可编辑
7） 音频上传——mp3格式音频上传按钮，只保存上传成功音频地址
8） 视频上传——mp4格式视频上传按钮，只保存上传成功视频频地址
9） 视频上传展示——mp4格式视频上传并展示的组件
可以上传多个视频，每个视频上传完会展示出来；
上传完的视频可以放大播放，可以删除；
保存展示的视频列表的数组数据
10）图片上传——jpg、jpeg、png格式图片上传按钮，只保存上传成功图片地址
11）图片上传展示jpg、jpeg、png格式图片上传并展示
可以上传多张图片，没张上传成功的都会展示；
上传完的图片可以放大播放，可以删除；
保存展示的图片列表的数组数据
12）拍照——拍照并上传
App端独有功能，保存照片地址
13）扫一扫
App端独有功能，扫一扫，保存识别成功的内容
14）录像——录像并上传
App端独有功能，录像并上传
3、交互组件——用户触发交互的组件
1）按钮
a.自定义触发方法
b.触发时调用接口
c.触发打开弹窗
d.触发调用浏览器打印api
4、展示组件——主要用于展示内容的组件
1）音频——播放音频
可播放固定音频或动态音频
2）条形码——将内容转换为条形码展示
可展示固定内容或动态内容
3）图片——展示图片
可展示固定图片或动态图片
4）二维码——将内容转换为二维码展示
可展示固定内容或动态内容
5）文本——展示文本
可展示固定内容或动态内容
6）视频——播放音频
可播放固定视频或动态视频

三、表单展示——配置表单时存放表单的容器
1、页签
可添加、切换和删除子页面（首页不可操作）；
双击子页签名称可编辑名称
2、容器
拖拽组件到该区域添加组件；
容器内部可以实现组件拖拽，删除，编辑等操作；
首页和各个子页面之间数据不能直接使用；
容器内部对表单内容修改并不会影响实际表单渲染；
容器内部样式不等于实际渲染样式；
3、面包屑
展示当前正在编辑的组件；
也可以点击面包屑切换正在编辑的组件

四、表单属性——配置表单各项属性
全局配置
1、页面属性
(1)类型——给表单分类，供以后过滤查询使用（必填，可新建）
(2)名称——表单名称（必填）
(3)描述——表单描述（选填）
(4)缩略图——表单展示时的图片（选填，不填有默认图片）
2、全局样式
(1)页面宽度——表单整体的宽度（只能输入数字，不填为100%，默认单位px）
(2)主题自配——是否，勾选后可以配置页面部分主题颜色
(3)背景色——页面整体背景色，组件背景色覆盖页面背景色
(4)线框颜色——表单整体有边框时的边框颜色
(5)字体颜色——表单页面字体颜色，组件颜色覆盖页面颜色
(6)Label宽度——表单整体标签宽度设置，单个宽度设置覆盖整体设置（数字，默认单位px）
(7)自定义样式——手动输入css样式，例：

不带class为默认配置，设置表单最大容器样式
带class为单独对某个元素设置样式
组件标识就是组件的class
放大按钮可以弹出输入框，更好的显示和编辑
有些组件有默认样式，不能直接用class覆盖，需要更深层次的覆盖（建议了解	html&css的人员配置）
3、页面事件
(1)页面载入前——页面渲染之前执行的代码（js方法），例：

在页面渲染之前，会先执行该方法；
如果方法里面的异步代码需要做到同步执行，需要将异步代码块return；
上面的方法调用了一个接口，传入参数page: 1，接口成功将返回值的name存入表	单内部的name字段，接口返回之后才会渲染页面
(2)页面创建后——页面渲染完成后执行的代码，一般处理一些不是页面已进入就需要的数据，写法同页面载入前（js方法）
(3)页面关闭时——页面关闭之前会执行的代码，执行完成离开页面（只有表单销毁才会执行，只是隐藏的话不执行），写法同页面载入前（js方法）

组件配置
1、标识——组件唯一id，也是组件的class，用于自定义样式使用

2、名称——组件的名称，用于js选择组件的时候使用（暂时没有接入表单配置使用）
3、选项——自配表格和横向多列专属属性，例：

添加： 添加一列
删除图标： 删除该列（最少需要保留一列）
上移下移图标：调整列顺序
宽度：设置每一列的宽度（宽度可以支持%和px，不设置的话默认平均分配）

4、垂直定位——自配表格专属属性（下拉选择，默认垂直居中）
设置自配表格内容在自配表格中的垂直显示位置（部分组件无效）
选项： 顶部，居中，底部
5、边框可见——自配表格专属属性（高级是否，是否显示自配表格边框）
6、边框颜色——自配表格专属属性（调色盘，自配表格边框颜色）

打开后可以点击某一块颜色，也可以输入16进制色值，也可输入rgb色值
7、单元格高度——自配表格专属属性（数字，表格行的最小高度）
默认50px，当内部内容高度大于50px，会自动撑开（注意该设置可能会影响复杂	表格的显示）
8、标签——表单标签，为空时不显示（部分组件中，为空不占位）
9、标签字段——折叠列表专属字段（折叠区域标签对应的list数据中的字段）
10、初始化数据连接类型——选择初始化数据来源（下拉选择）
①自定义
②数据接口
11、初始化数据函数——自定义选项下返回数据的函数（js方法）
①直接返回一组数据（不推荐，该方法只能输入数据，无法输出）

②返回表单中的一组数据（推荐，该方法可以输出修改后的数据）

12、对齐方式——css对齐属性（下拉选择，默认左对齐）
13、Tab页-样式——tab标签的展示方式（下拉选择，默认横向展示）
14、绑定方法——表单绑定值的来源（单选，默认来源数据字典）
①数据字典：绑定值只能来源于数据字典，标签不可编辑
②输入：绑定值手动输入，标签需要输入
15、关联字典——选择绑定值的数据字典（下拉选择，选择存绑定值的数据字典）
16、绑定值——组件对应的表单字段
可用$data.绑定值 输入，修改，输入表单数据
17、提示语——表单组件内容为空时提示语
18、输入框-类型——（下拉选择，默认输入框）
①输入框
②文本框
19、输入方式——输入框专属属性（下拉选择）
①用户输入（常用），内容由用户输入
②同步关联，内容来源于一个表达式
20、关联表达式——输入框专属属性（表达式）

输入框展示内容为固定的：“名字：” + 内部字段name的值
21、校验规则——组件校验规则选择（下拉选择，来源于规则列表）
22、最大长度——输入框专属属性，输入内容长度限制（数字，默认500）
23、后缀——输入框专属属性，输入框后显示的后缀（输入，默认无）
输入：
展示：
24、失去焦点回调——组件失去焦点时触发的函数（js方法）

当前输入框绑定值为“number”，则失去焦点时计算“total”
25、单/多选——下拉框专属（下拉选择，是否可多选）
①单选：返回选中项对应的绑定值字段的值
②多选：返回选中项对应的绑定值字段的值组成的数组
26、选项获取方式——选项数据来源（下拉选择）
①数据字典：选项来源于数据字典
②数据接口：选项来源于接口列表
27、数据字典——选择数据字典（下拉选择）
28、数据加载方式——下拉框专属（下拉选择）
①直接加载：页面载入后请求数据接口获取下拉选项
②搜索后加载（不推荐，由于搜索前没有选项值，所以无法回填）：之后搜索后才会请求下拉选项接口
29、数据接口——选择数据接口（下拉选择）
30、显示值字段——根据返回的数据列表，需要展示在页面上的字段名（输入）
31、绑定值字段——根据返回的数据列表，实际需要提取的字段名（输入）
32、搜索参数名——搜索内容所属字段（输入，搜索后加载，输入的内容对应的字段）
33、接口参数配置——某些接口需要一些简单的参数才可请求（表达式，已开始修改其		他配置方式）
34、接口查询——测试接口查询结果（点击）
35、Change事件——下拉框专属，选项发生改变是出发（js方法）

36、阿斯蒂芬
37、单选框-样式——单选框不同的展示方式（下拉选择）
①单选框组   
②单选button   
38、展示列配置——自配列表专属，配置列属性（配置，例2）

可添加、删除、移动、编辑列；
列内容有5种不容类型可供选择：输入框，文本框，下拉框，单选框，时间选择器；
列表头和对应字段在类型详情图标中操作：
	
表单组件：绑定值对应该列的字段名，标签对应表头，其他配置与对应的组件一致
展示组件：文本内容对应该列内容（在这里$row代表表格行数据），标签对应表	头，其他配置与对应的组件一致
39、日期-类型——日期组件不同功能选择（下拉选择）
a)日期——yyyy-MM-dd
b)年月——yyyy-MM
c)时间——HH:mm:ss
d)日期时间——yyyy-MM-dd HH:mm:ss
e)日期范围——yyyy-MM-dd 至 yyyy-MM-dd
f)日期时间范围——yyyy-MM-dd HH:mm:ss 至 yyyy-MM-dd HH:mm:ss

40、显示添加——自配列表专属，是否显示“增加”行按钮（高级是否）
41、长度限制——视频上传展示和图片上传展示专属（数字，限制最大上传个数）
42、按钮-类型——按钮触发类型（下拉选择）
①自定义：调用自定义方法
②触发数据接口：调用数据接口
③弹窗：打开弹窗
④打印：打印页面
43、触发函数——按钮专属，点击按钮是出发的回调函数（js方法）

44、二次确认——按钮专属，按钮操作是否需要提示（是否）
在触发按钮功能之前，给与用户一个提示框，之后确认了才会触发按钮功能
45、前置钩子函数——按钮专属，按钮触发前执行的函数（js方法）
46、后置钩子函数——按钮专属，按钮功能完成后执行的函数（js方法）
47、Loading——按钮专属，点击按钮时给表单添加一个loading样式（高级是否）
Loading样式默认在后置钩子函数执行完成之后隐藏，如果需要提前隐藏可以调表单属性中的“closeLoading”方法：

48、确认标题表达式——按钮专属，二次确认弹框标题（表达式）
49、确认内容表达式——按钮专属，二次确认弹框提示内容（表达式）
50、选择弹窗——按钮专属，选择弹窗内容（例1）
51、弹窗宽度——按钮专属，弹出框宽度（数字，单位px）
52、弹窗高度——按钮专属，弹出框高度（数字，单位px）
53、弹窗初始化数据函数——按钮专属，弹出框弹出时执行的方法（js方法，例1）
54、标题——按钮专属，弹出框标题（输入）
55、确认——按钮专属，弹出框点击确认时触发的功能（下拉选择）
56、自定义回调函数——按钮专属，弹出框点击确认时的自定义回调（js方法，例1）
57、成功关闭回调——按钮专属，弹出框点击确认关闭后的回调（js方法，例1）
58、内容标签——展示组件的标签（输入）
59、**内容——展示组件展示的内容（表达式，音频视频之类的为地址）
60、宽度，高度——展示组件的大小（输入，单位可以是px或%）
61、打印时显示——按钮专属，打印页面时是否显示打印按钮（高级是否）
62、是否只读——组件内容是否不可编辑（高级是否，预计修改不显示边框）
63、是否必填——表单绑定值是否不能为空（高级是否）
64、是否可见——组件的显示和隐藏（高级是否，隐藏时组件还存在表单中）
65、是否存在——组件的渲染和隐藏（高级是否，隐藏时组件不存在表单中）

五、表单内部字段、方法以及api说明
1、高级是否
直接勾选为“是”， 不勾选为“否”
高级配置：

当$data.hasBorder为true的时返回“是”，否则返回“否”

2、表达式——js字符串拼接语法
展示某个字段内容：
展示固定字符串：
展示拼接内容：
3、$data——表单属性值集合
①包含所有表单内的一级绑定值
②$data.closeLoading()   关闭表单loading层的方法
③$data.validate()       校验表单，返回ture或false
④包含所有传入表单的properties属性
4、Js方法
JS的一个方法，内部为js合法代码，固定写法：

调用接口例：

返回数据例：

数据处理例：

5、$api
①调用接口


六、附例
1、例1——按钮弹窗
配置：

效果：

2、例2——自配列表
配置：


文本配置：

输入框配置：

下拉框配置：

单选框配置：

时间日期配置：

效果展示：

3、例3——折叠列表
全局配置：

组件配置


效果：

```