目录
前言
若依是一款用得非常多的开源框架，可以拿来做一些生产级的应用开发。若依包含三种架构模式，第一种是单体架构，第二种是前后端分离模式，第三种是微服务模式。其中第二种和第三种除了后台的技术架构不一致，它的前端开发模式都是用的Vue框架。这里不讨论单体架构和前后端分离的架构模式的优缺点，排开实际需求来谈技术架构都是耍流氓。国内很多的应用场景都是流量比较小，业务逻辑比较简单，开发人员只要将精力专注到具体的业务逻辑当中即可。因而本文介绍得使用架构使用的若依的单体架构，麻雀虽小五脏俱全，通过学习单体架构也能掌握许多后端的设计原理。对与理解前后端分离也有一定的掌握。
在许多的管理应用中，弹窗操作是一种非常常见的业务操作，比如在进行企业的员工信息管理时，通常需要设置员工的所属部门。在进行信息维护时，系统会自动打开一个部门选择界面，在部门信息选择列表中进行目标部门的选择。在上述这个场景中，我们的开发人员通常就会面临两个问题，首先第一个问题是在打开窗口时，我们需要自由的控制打开窗口的大小即高度和宽度。如何动态的控制高宽在进行多分辨率的适配中可以发挥更大的价值。第二个场景是在父子窗体的交互当中，父窗体如何去获取子窗体的值，比如form表单的信息或者获取一个表格的选择项目。然后在点击提交或者确定按钮时将信息可以在上层窗口中进行获取。
本文即在此场景下诞生，在本次的弹窗操作内容中，首先讲解如何打开窗体及动态设置窗体的大小，然后讲解如何进行父子窗体的交互，通过来讲解如何在父窗体中获取子窗体中的信息，让大家了解和掌握父子窗体的操作方法。希望通过文章的讲解，大家能熟练若依的单体框架中窗体相关操作，掌握这些方法之后再运用到具体的开发工作当中，为研发赋能。
一、打开窗口的方法及参数设置
本节将重点讲解在若依中进行窗体操作的方法，然后讲解其官方封装的窗口操作方法的缺点。针对这个不足来讲解解决方案，通过动态大小的设置来进行窗口大小的灵活控制。以此来实现更加灵活的窗口控制。
1、打开窗口的方法
首先来看一个实例，在若依提供的功能示例里面，提供了用户管理的实例，在用户信息管理过程中，我们会对用户的组织信息进行管理，官方的功能实例中是打开了一个新的窗口，然后在打开的新窗口中展示了一个组织机构树，管理员可以通过这个组织机构树来进行相应的组织设置。功能如下所示：
在这个界面中，点击了目标的部门后，在界面右下角点击"确认"按钮即可实现用户部门信息的绑定。 这就是一个非常常见的例子，它基本涵盖了我们日常基本使用的场景，一个是打开静态窗口，另一个是窗口交互。
2、窗口打开方法
在若依中，对于窗口的打开已经进行了封装。先来看一下官方封装的方法列表，如下所示：
| 方法 | 参数 | 介绍 |
|---|---|---|
| $.modal.icon | type（图标类型） | 显示图标 |
| $.modal.msg | content（内容）, type（图标类型） | 消息提示 |
| $.modal.msgError(); | content（内容） | 错误消息 |
| $.modal.msgSuccess(); | content（内容） | 成功消息 |
| $.modal.msgWarning(); | content（内容） | 警告消息 |
| $.modal.alert | content（内容）, type（图标类型） | 消息提示 |
| $.modal.alertError(); | content（内容） | 错误提示 |
| $.modal.alertSuccess(); | content（内容） | 成功提示 |
| $.modal.alertWarning(); | content（内容） | 警告提示 |
| $.modal.msgReload | msg（消息）, type（图标类型） | 消息提示，重新加载页面 |
| $.modal.msgSuccessReload | msg（消息） | 消息提示成功并刷新父窗体 |
| $.modal.close(); | 无 | 关闭窗体 |
| $.modal.closeAll | 无 | 关闭全部窗体 |
| $.modal.confirm(); | content（内容）, callBack（回调函数） | 确认窗体 |
| $.modal.open(); | title, url, width, height, callBack（回调函数） | 弹出层指定宽度 |
| $.modal.openOptions(); | options（选项参数） | 弹出层指定参数选项 |
| $.modal.openFull(); | title, url, width, height | 弹出层全屏 |
| $.modal.openTab(); | title（标题）, url（地址） | 选卡页方式打开 |
| $.modal.parentTab(); | title（标题）, url（地址） | 选卡页同一页签打开 |
| $.modal.closeTab(); | dataId（地址） | 关闭选项卡 |
| $.modal.disable | 无 | 禁用按钮 |
| $.modal.enable | 无 | 启用按钮 |
| $.modal.loading(); | message（提示消息） | 打开遮罩层 |
| $.modal.closeLoading(); | 无 | 关闭遮罩层 |
$.modal.openOptions(options)就是打开窗体的具体方法，按照配置的参数options来进行窗口的打开。来看一下工程代码中的示例代码：
java
/* 用户管理-新增-选择部门树 */
function selectDeptTree() {
var treeId = $("#treeId").val();
var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
var url = ctx + "system/dept/selectDeptTree/" + deptId;
var options = {
title: '选择部门',
width: "380",
url: url,
callBack: doSubmit
};
$.modal.openOptions(options);
}在这里可以看到在打开窗口的配置参数中，指定了宽度为380。高度采用了系统默认的高度。
3、百分比高宽不生效
在正常的应用开发过程中，设置打开窗体的高度和宽度有两种方法，第一种方法就是直接指定打开的目标窗体的高度和宽度，即上面的代码中的width:"380"这样的配置。熟悉layui的朋友应该知道，除了直接指定高度和宽度的设置外，还可以通过设备百分比的设置来进行控制。比如设置高度为当前窗口的60%，高度为当前窗口高度的70%。这都是可以的，因此我们来看一下是否传入百分比的参数。
javascript
width: "80%",然后重新打开用户的新增界面，再打开部门信息界面，如下图所示：
可以很直观的看到，打开的窗体的宽度，并没有变成80%，貌似依然是保持了原来的宽度。这到底是怎么回事呢？带着问题，我们来看一下源码的实现方式。
在若依中，打开ry-ui.js，在这个源代码中就包含了打开窗口的管理方法。大约在代码中的893行，源代码如下：
可以在源码中看到其对高度和宽度进行处理， 通过debug来看一下设置的高度和宽度的值。在Chrome浏览器中输入浏览器的网站，然后进入到相应的界面，然后source中对前面提到的javascript代码进行debug处理。可以看到参数正确的传入，也成功的接收到。
那为什么没有正确的设置呢，接着看后续的处理代码。
可以清晰的看到，在打开的area设置中，宽度的单位是px即像素，但是值是80%，因此在最终渲染时会出现问题。知道了问题的根源，那么如何来避免这种问题呢？在不修改源代码的前提下，我们来动态控制这个高度和宽度。可以想到这两种方式，第一种是直接指定宽度，比如直接设置宽度是600,这种比较简单。第二种就是为了进行兼容性处理，动态的计算宽度。将当前屏幕的宽度成0.8来进行设置。计算方法如下：
javascript
width: parent.window.innerWidth * 0.8,再来看实际的页面效果如下：
这样才进行了正确的设置，打开的窗体的宽度也是我们预设的百分之八十。
二、父子窗体的交互
窗体程序除了能正确的打开窗体外，同时还要能实现父子窗体，所谓的父窗体即打开窗口的界面，子窗体即被打开的窗体界面。通常我们需要在父窗体中获取子窗体的一些输入元素的信息和值，然后在父窗体中进行集中的提交和保存。为了让大家了解掌握在若依中进行父子窗体的交互，本节对交互的实现方式进行详细叙述。
1、在父窗体获取子窗体元素
这里分享第一种方式，也是在若依的官方示例中展示的方法，即在父窗体中获取子窗体的dom，然后通过dom来获取子窗体的元素。在之前分享过的ry-js中有一段是如何获取子窗体dom的方法，核心代码如下:
javascript
// 获取iframe页的DOM
getChildFrame: function (index) {
if($.common.isEmpty(index)){
var index = parent.layer.getFrameIndex(window.name);
return parent.layer.getChildFrame('body', index);
} else {
return top.layer.getChildFrame('body', index);
}
}在我们之前演示过的用户基本信息管理中，可以看到以下的实例程序：
javascript
function doSubmit(index, layero){
var body = $.modal.getChildFrame(index);
$("#treeId").val(body.find('#treeId').val());
$("#treeName").val(body.find('#treeName').val());
$.modal.close(index);
}通过getChildFrame获取子窗体的dom后，再根据dom来获取相应元素的值，最后赋值于父窗体中的表单元素。这种方式实现比较简单，代码也比较简单，大家可以参考学习。
2、函数调用
前面介绍了基于dom的表单元素调用，还可以基于函数进行参数的获取与配置，实现的思路和原理就是首先在子窗体中创建一个操作函数，作用就是获取当前表单的表单信息（比如实现当前table表格的复选或者单选的行数据），通过函数的方式将值返回到父窗体中。因此通过函数调用的方式来解决需求的办法，需要首先能获取页面的window对象。在若依的实例代码中，在父子窗体的实例中，要求在父窗体中获取子窗体的window对象的方法如下：
javascript
//获取弹出窗口的window对象，需要调用js方法
var doc = parent.window['layui-layer-iframe' + index].window;
//获取数据
var placesData = doc.getSelectedData();然后通过子窗体提供的函数来返回数据，来看在子窗体中的getSelectedData()函数，
javascript
function getSelectedData(){
return $("#bootstrap-table").bootstrapTable('getSelections');
}这里实现的需求是要获取子窗体中的table组件中的选择数据行的具体数据。 获取到了具体的数据就可以按照上面的方法可以自己进行扩展。
javascript
if(placesData.length >=1){
//$.modal.msgError("请选择目标城市");
$("#placesId").val(placesData[0].pkId);
$("#placesInfo").val(placesData[0].nameZh + "/" + placesData[0].nameEn);
}来看下实现的具体效果：
通过以上的实例代码，我们就可以实现在若依中进行窗体的操作、实现动态的窗体高宽的的设置，以及如何在父子窗体中进行数据交互。
三、总结
以上就是本文的主要内容，文章首先讲解如何打开窗体及动态设置窗体的大小，然后讲解如何进行父子窗体的交互，通过来讲解如何在父窗体中获取子窗体中的信息，让大家了解和掌握父子窗体的操作方法。行文仓促，定有许多的不足之处，如有不足，在此恳请各位专家博主在评论区留言批评指正，不胜感激。