弹窗信息提交模块

模块项目可下载学习或复用至新项目中
请参考“无代码开发视频手册”的“创建页面”一组中“弹窗”演示说明
用弹窗来进行信息输出提交是常用的一种信息提交方式
弹窗信息提交模块设计比较简单，主要包括以下三部分设计：显示内容设计、显示样式设计、提交信息逻辑设计

显示内容设计

从显示类元件中点选一个弹窗元件，点击需要添加的位置放入后即可命名，命名名称会在弹窗中显示为标题，此模块项目中我们命名为“添加用户”，我们这个案例中是将弹窗元件放入了一个按钮的点击事件行为处理元件中，用户点击按钮时即弹出弹窗
双击进入弹窗主体中，删除默认的字符显示元件，从元件选项板中添加表单元件；进一步在表单中添加输入元件：选中表单元件，右键单击在弹出的菜单中选Add Element—…即可选中放入想要的不同类型的输入框，此模块中我们放入了带标签的字符、日期、下拉选项输入框
在弹窗底部Footer元件中，将默认的按钮改名为“关闭”和“添加”，设计了将弹窗中表单录入的信息传值给数据库表记录元件，将库表记录连至数据库记录插入元件来存入数据库的逻辑，存入后关闭弹窗，同时将录入内容显示到页面信息显示表格中

显示样式设计

弹窗中默认样式是在我们项目文件夹下“web\styles\bootstrap文件夹中024-modals.less文件”中定义的，默认的定义中弹窗标题居左，下部按钮靠右，弹窗出现时的背景色为黑色，可以修改定义值处理进行调整为标题居中、按钮居中、背景色灰色

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindexModalBackdrop;
  background-color: @gray;  -------------------------------修改项：调整为gray
  ...
  .modal-header {
    padding: 9px 15px;
    text-align:center; --------------------------------------新加项：添加一行文字居中的标签定义
  ...
  .modal-footer {
    padding: 14px 15px 15px;
    margin-bottom: 0;
    text-align: center; // center align buttons -------------修改项：这一行中原文备注是靠右，改为居中

弹窗主体中是一个表单，表单中有添加的输入框元件，我们修改了输入框的样式文件，在项目文件夹的“web\styles”下“field.less”文件中，我们新加了一个样式类定义如下：

.form-2lie label.field
{
 float:left;
 width:50%;
    > *
    {
    display:inline-block;
    width:70%;
    }
       >span:first-child
       {
   	   width:30%;
 	   text-align:right;
       }
}

为弹窗中表单添加此样式类属性后，弹窗显示为

注意，我们案例项目中，对项目文件夹下“web\styles\bootstrap文件夹中016-buttons.less文件”中定义的按钮鼠标上浮时的效果中“background-position: 0 30px;”也进行了修改，默认值为“0 -15px”，如果需要修改弹窗标题的大小，比如默认的H3标签字体过大，则可以修改项目文件夹下“web\styles\bootstrap文件夹中007-type.less文件”中定义的H3标签的大小来统一定义全部弹窗标题大小

提交信息逻辑设计

弹窗底部Footer元件中，“添加”按钮的点击行为元件中我们开发提交信息进行保存的逻辑，我们在其中放入了从父级的弹窗元件中传入录入信息至数据库表的字段中，再传入服务器行为元件中与数据库记录插入元件连接来保存记录，保存完成后，关闭弹窗

快速复用指导

1、下载成熟模块项目，开发工具中导入项目
2、打开导入的项目，在按钮的弹窗中删除不想要的功能内容添加需要的内容
3、各位置修改添加时处理说明：
- 表单中的录入框可重命名、可以添加新的录入框、也可以删除只保留需要的输入框，添加新的输入框时，建议在表单元件中点击右键在弹出的菜单中选Add element—…选中需要的输入框
- 样式修改可以参考设计过程中说明的样式类定义方式进行设计，可以添加多个自定义的样式类
- 保存提交信息的逻辑中，我们的案例中是有刷新显示全部存入记录的逻辑的，用户可以导入此模块后进一步添加修改逻辑
4、保存后可以试运行一下，可以测试添加数据的操作，必要时，设计添加后的弹出信息来在用户端提示完成插入记录、类似于设计断点测试看中间有没有正常功能结果
5、开发区中点选按钮、或按钮中点击事件行为元件中的弹窗元件，右键单击选复制，在新的项目的某个页面中粘贴复用，选“导入粘贴”（paste import）的方式
6、调整导入的模块在新项目中的文件目录中文件位置，将模块的内容全部拖放到新项目对应的目录位置

注意

可用以上方式，多次添加来为新项目定义多个信息提交模块，实际上如果操作修改数据库表名称和每次导入后进行第６步的目录位置修改，则就会在新项目中生成完全独立的两个或多个提交信息的模块
也可以参考此模块，只复用样式内容，因为弹窗和表单点选放入，表单中的输入框右键添加比较简单，操作并不难

复用案例

请参考“逐条增删改查页面”的添加用户信息及更新用户信息复用的弹窗信息提交模块

开发框架模块手册

弹窗信息提交模块

显示内容设计

显示样式设计

提交信息逻辑设计

快速复用指导

注意

复用案例