🔄 弹窗跳转

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 参数传递数据,确保数据正确传递
权限控制: 确保选择页面和跳转页面都有相应的权限控制