01.表单设计器介绍
# 表单设计器介绍
# 表单列表介绍
表单列表界面如下：
功能点：
- 【查询】：点击对列表进行刷新
- 【重置】：点击对查询条件进行重置。
- 【新增】：点击新增应用表单。界面如下：
- 新建普通表单：表单拖拽设计表单时，会同步创建数据库物理表结构，Api接口，表单源码，并且会自动有一个通用的列表界面功能。
- 新建视图表单：它不会创建物理表，只能根据已有的列表Api接口，反向生成一个独有的表单界面，处理特殊的业务。
- 新建本地表表单：通过选择数据库中已经创建好的表结构，反向生成表单入口。
- 脚本/AI创建表单：通过创建表的sql语句脚本或智能AI提问方式得到系统创建物理表的sql脚本，智能分析创建对应的可视化表单，设计时会同步更改建物理表结构，接口。
- 批量导出：选择导出的表单，将其导出，可导入其它系统，租户，不同环境下，从而可以实现不同环境下的发布。
- 批量导入：选择导出的表单包，可将其导入，导入后系统有拥有该功能了。
- 刷新表单缓存：每个表单在预览时第一次会从数据库中读取，读取完成后就会缓存到redis中，如果表单不存在编辑的情况下都时从redis缓存中读取的，这里的刷新表单缓存就是清空它的缓存。
- 修改：点击对表单进行修改
- 删除：对表单进行删除，注意：对应的物理表结构和Api接口是不会删除的。
- 更多>预览设计：对表单设计进行预览。
- 更多>预览列表：视图表单是没有该功能的，他是有表单设计，系统生成出来的表单列表功能，点击可跳转到对应表单数据列表界面
- 更多>设计打印：视图表单是没有该功能的，它是对表单设计，额外设计一个打印功能。具体打印设计后续有单独一章进行讲解。
- 更多>转流程表单：将普通表单转换成流程表单，可用与流程平台。
# 页面介绍
# 认识表单设计器
我们将设计器分为如下10个区域：
# 【1】操作区1
- 控制左右面板（【2】【5】号）显示/隐藏
- 终端适配设计切换（Pc、 Pad、 Mobile）
- 全屏/退出
# 【2】左侧面板
- 控件面板
展示表单设计器可以通过 拖拽/单击 来操作的控件，并根据控件功能的不同分别整合为 布局控件、基础控件、平台控件。
- 共享组件
字段控件是拥有非常多属性，通过设置后才能达到一个通用字段控件的效果，这个时候我们可以保存，下次可直接拖拽设计区域，设置的属性会自动带入，也可多个组件组合一起保存为自定义布局控件。
- 逻辑配置
逻辑配置是监控属性发生变化时，触发事件，可以通过配置触发我们想要的效果，如各种联动，隐藏，计算等等。
主题选择
目前主题是为适应问卷调查功能产生的。可以通过选择不同的主题，更改表单的背景与头部图片。
模板套用
模板套用是我们创建的历史所有的表单，如果A功能与B功能相似，可通过加载，避免重复设计工作。
帮助
后续是一个常见问题汇众总区域，点击链接可告知你如何操作。
# 【3】操作区2
- 预览
预览是将当前设计的表单内容进行预览显示，因为是源码预览，如果生成的vue源码报错，也将会导致预览失败。预览前会对表单控件属性进行检查，如果控件属性设置不正确会出现如下图
- 源码
源码是查看当前设计表单切换成【8】、【9】【10】区域模式，可以查看生成的vue源码，也可以在线编辑js逻辑代码和css逻辑代码。切换前会对表单控件属性进行检查，具体的请参考【预览】操作。
- 设计
设计是将当前源码模式，切换成设计模式，切换前会对js逻辑代码语法进行检查，如果js逻辑代码语法存在错误，就切换不了。
升级表单
升级表单一般情况下是不显示的，只有当前设计的表单JSON内容与当前设计器版本不一致时才会显示，点击升级表单可将旧的表单升级为最新版本。
保存
保存也是发布，保存后会生成动态接口，与物理表。
具体的接口查看请参考【五、简搭云动态接口】
- 查看json
查看Json就是查看表单设计时生成JSON格式。用于查找问题，定位问题。
导入
可将导出的表单设计，重新导入到表单设计中。
导出
导出是将当前表单设计以json格式进行导出。
导出vue
导出vue是将生成的vue源码进行导出。
清空
清空表单设计，重新进行开发。
# 【4】表单布画
可对表单字段进行拖拽调整位置、绑定事件、保存为共享，复制、删除等操作
事件
点击事件，表单设计会切换源码模式，并会给控件绑定默认的事件，找到对应事件名称，可以在里面编写js代码。
保存
点击保存，将已设置好属性的组件保存到共享，下次可直接从共享中拖拽至表单设计器中。
复制
复制就是将当前选中的组件进行复制。
删除
删除当前选中的组件。
# 【5】控件属性
对当前选中表单控件的属性、样式，绑定数据，验证等配置。
# 【6】控件事件
对当前选中的控件，创建绑定的事件。创建事件之后，需要切换源码，找到对应事件方法中编辑逻辑代码。
# 【7】表单属性
对表单基本属性进行配置。
# 【8】vue script部分
显示生成vue源码逻辑部分，并可以在源码中创建自定义方法，创建的自定义方法可与表单设计的js逻辑代码进行合并。
# 【9】vue template部分
显示生成vue template部分，但是不可更改。
# 【10】vue css部分
可以在线编写vue页面的css，自定义classname，在控件属性中配置后，就可以生效对应样式。
# 表字段与字段绑定
创建物理表的字段名，以及绑定字段名需要设置字段属性【绑定字段】，文本框，限制长度就是物理表字段的长度。日期控件对应数据库中也是日期类型，数字控件对应数据库字段为数字。
他会利用绑定字段生成一个提交formdata
控件拥有读取Api接口绑定数据的控件有如下：
- 下拉列表
下拉列表又有：字典数据，api绑定，静态数据绑定。
字典数据：通过读取系统字典类型，选中字典类型即可绑定。
api绑定：选择关联表单的列表接口。设置联动的条件，以及显示字段名。三者缺一不可，否则影响代码的生成。
- 多选控件
同下拉列表配置。
- 单选控件
同下拉列表配置
- 列表查询
列表查询：可以实施一个通过表单其它控件做为条件，进行过滤的列表展示功能。
必须按照步骤实施。
- 关联数据控件
关联数据控件：绑定数据属性如下：
数据源Api:弹出选择关联表单Api进行绑定。
显示字段：选择数据后，回显的字段。
过滤条件设置：可设置表单控件的值为条件，进行过滤数据，限制范围选择。
填充规则设置：选择数据后，可以将列表的数据带回，回填到那些控件中。
- 关联查询
关联查询控件跟关联数据控件属性设置一样，都包含
数据源Api:弹出选择关联表单Api进行绑定。
过滤条件设置：可设置表单控件的值为条件，进行过滤数据，限制范围选择。
填充规则设置：选择数据后，可以将列表的数据带回，回填到那些控件中。
它是一个隐藏Api动态读取数据，读取的数据只取第一条，进行填充规则显示。
# 表单验证
表单设计器内置了几种常见的验证方式，并且可以自定义错误提示内容，如必填、手机号码，Email验证等等。
- 必填
- 正则表达式
# Pc、Ipad,手机模式设计
表单设计器中在不同模式下，屏幕的栅格都是24份，由三个属性控制，在不同的分辨率下使用不同的属性，从而达到三种模式下设计。
所以你想在不同设计模式下，展现不同的布局，需要切换对应设计模式，设置栅格份额。
# 自定义控件
可视化表单设计器可拖拽的控件是有限的，是把常规的控件加入到了控件栏，那如果我们需要加入element ui 其它控件，但是这个控件并未集成到系统怎么办，这时就可以用上自定义控件了。
点击vueCode后，弹出一个代码编辑：
<el\-link href="https://element\.eleme\.io" target="\_blank">\{\{formdata\.component\_98ch\}\}</el\-link>
最终预览的效果就是一个超链接，你可以增加其它内容
# 自定义属性与父级自定义属性
自定义属性是【其它设置】分类里面，因为element ui拥有很多属性，很有可能控件中属性没有完全覆盖上，那我们就需要通过自定义属性添加上去，点击按钮弹出如下界面：
同理我们的组件是默认被一个div套住的，如果想在这个div上面添加属性就可以使用父级自定义属性了。
# 其它属性请参考element ui官网文档说明。
# 表单列表
- 查询：根据条件筛选表单设计模板
- 重置：重置筛选条件
- 新增：弹出可视化表单设计，新增表单设计模板
- 批量导入：可将批量导出的表单设计批量导入。
- 批量导出：批量将选中的表单进行导出。
- 刷新缓存：每个表单预览时，会将数据缓存在内存中。
- 修改：对现有表单模板进行修改。
- 删除：对表单模板进行删除。
- 设计预览：对设计的表单进行预览查看。
- 表单数据：根据表单设计生成的列表页面。
- 转流程表单：将普通表单转成流程表单。
右侧控制查询条件是否显示，刷新列表数据。