🔄 弹窗选取后跳转到新页面

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}

如有更可行的方式，可随时联系 L ，如有不严谨或者不规范的地方欢迎指正。