🔄 弹窗跳转

ThinkAdmin 提供弹窗选取后跳转到新页面的功能，主要用于需要获取相关数据并进行后续操作的场景。

🚀 主要功能

弹窗选取: 通过弹窗选取相关数据
分页支持: 支持弹窗内容的分页显示
数据传递: 支持选取数据的传递和跳转
逻辑处理: 支持复杂的业务逻辑处理
用户体验: 提供流畅的用户操作体验
灵活配置: 支持多种配置和自定义

📋 使用场景

数据选取

课程选择: 选择需要考核的课程
用户选择: 选择相关用户信息
内容选择: 选择需要处理的内容
配置选择: 选择系统配置项

业务逻辑

先选后操作: 先选取数据，再进行后续操作
数据验证: 对选取的数据进行验证
流程控制: 控制业务流程的执行
状态管理: 管理操作状态和结果

⚙️ 实现方式

1. 弹窗选取数据

使用方式: 使用 data-iframe 属性
分页支持: 支持弹窗内容的分页显示
数据展示: 在弹窗中展示可选数据
交互操作: 支持用户的选择操作
权限控制: 支持基于权限的显示控制

2. 数据传递跳转

弹窗关闭: 选取数据后关闭当前弹窗
页面跳转: 跳转到新的操作页面
数据传递: 将选取的数据传递给新页面
逻辑处理: 在新页面中处理业务逻辑
状态管理: 管理操作状态和结果

3. 前端交互处理

事件绑定: 绑定点击事件处理选择操作
弹窗管理: 使用 top.layer.closeAll() 关闭所有弹窗
页面跳转: 使用 top.$.form.href() 进行页面跳转
数据传递: 通过 URL 参数传递选取的数据

1 打开弹窗选取数据，可分页需使用 data-iframe

{block name="button"}
<!--{if auth("select")}-->
<button class='layui-btn layui-btn-sm layui-btn-primary' data-iframe='{:url("select")}' data-title="请选择需考核的课程">开始考核</button>
<!--{/if}-->
{/block}

2 弹窗选取内容后，因为逻辑需要先关闭当前弹窗，然后打开新页面

{extend name="../../admin/view/full"}

{block name='content'}
<div class="iframe-pagination">
    <table class="layui-table margin-top-10" lay-skin="line">
        {notempty name='list'}
        <thead>
        <tr>
            <th class="text-left nowrap">信息</th>
            <th></th>
        </tr>
        </thead>
        {/notempty}
        <tbody>
        {foreach $list as $key => $vo}
        <tr>
            <td class="nowrap">{$vo.name|default='--'}</td>
            <td class='text-right'><a class="layui-btn layui-btn-xs layui-btn-normal" data-item="{:url('add')}?course_id={$vo.id}">选择</a></td>
        </tr>
        {/foreach}
        </tbody>
    </table>
    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
</div>
{/block}

{block name='script'}
<script>
    $(function () {
        layui.form.render();
        $('[data-item]').on('click', function () {
            top.layer.closeAll();
            top.$.form.href(this.getAttribute('data-item'), this);
        });
    });
</script>
{/block}

🔧 完整实现示例

前端选择页面（select.html）

{extend name="../../admin/view/full"}

{block name='content'}
<div class="iframe-pagination">
    <table class="layui-table margin-top-10" lay-skin="line">
        {notempty name='list'}
        <thead>
        <tr>
            <th class="text-left nowrap">课程名称</th>
            <th class="text-left nowrap">课程类型</th>
            <th class="text-left nowrap">创建时间</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        {/notempty}
        <tbody>
        {foreach $list as $key => $vo}
        <tr>
            <td class="nowrap">{$vo.name|default='--'}</td>
            <td class="nowrap">{$vo.type|default='--'}</td>
            <td class="nowrap">{$vo.create_at|default='--'}</td>
            <td class='text-center'>
                <a class="layui-btn layui-btn-xs layui-btn-normal" 
                   data-item="{:url('add')}?course_id={$vo.id}">
                    选择
                </a>
            </td>
        </tr>
        {/foreach}
        </tbody>
    </table>
    {empty name='list'}
        <span class="notdata">没有记录哦</span>
    {else}
        {$pagehtml|raw|default=''}
    {/empty}
</div>
{/block}

{block name='script'}
<script>
    $(function () {
        layui.form.render();
        
        // 点击选择按钮后，关闭弹窗并跳转到新页面
        $('[data-item]').on('click', function () {
            // 关闭所有弹窗
            top.layer.closeAll();
            
            // 跳转到新页面（传递 course_id 参数）
            top.$.form.href(this.getAttribute('data-item'), this);
        });
    });
</script>
{/block}

后端控制器（select 方法）

<?php
declare(strict_types=1);

namespace app\admin\controller;

use think\admin\Controller;
use think\admin\helper\QueryHelper;
use think\admin\model\Course;

/**
 * 课程管理
 * @class Course
 * @package app\admin\controller
 */
class Course extends Controller
{
    /**
     * 选择课程（弹窗页面）
     * @auth true
     */
    public function select()
    {
        // 使用 QueryHelper 进行数据查询
        Course::mQuery()->layTable(function () {
            $this->title = '请选择需考核的课程';
        }, function (QueryHelper $query) {
            $query->where(['status' => 1, 'is_deleted' => 0])
                  ->like('name')
                  ->order('id desc')
                  ->page();
        });
    }
    
    /**
     * 添加考核（跳转后的页面）
     * @auth true
     */
    public function add()
    {
        $courseId = input('course_id');
        if (empty($courseId)) {
            $this->error('请先选择课程');
        }
        
        // 获取课程信息
        $course = Course::mk()->where('id', $courseId)->find();
        if (empty($course)) {
            $this->error('课程不存在');
        }
        
        // 传递给模板
        $this->assign('course', $course);
        
        // 显示添加考核表单
        Course::mForm('form');
    }
}

触发按钮（index.html）

{block name="button"}
<!-- 打开弹窗选择课程 -->
<button class='layui-btn layui-btn-sm layui-btn-primary' 
        data-iframe='{:url("select")}' 
        data-title="请选择需考核的课程">
    <i class="layui-icon layui-icon-add-1"></i> 开始考核
</button>
{/block}

⚠️ 注意事项

弹窗关闭: 使用 top.layer.closeAll() 确保关闭所有弹窗
页面跳转: 使用 top.$.form.href() 进行页面跳转，保持在同一窗口
数据传递: 通过 URL 参数传递数据，确保数据正确传递
权限控制: 确保选择页面和跳转页面都有相应的权限控制