Laravel中选项卡点击事件的正确处理与按需加载数据

<ul class="nav nav-pills">
    <li class="nav-item" style="width: 10%">
        <a id="tabPurchasesPayments" class="nav-link active" data-toggle="pill" href="#purchases-payments-tab">Purchases/Payments</a>
    </li>
    <li class="nav-item" style="width: 10%">
        <a id="tabLiquidations" class="nav-link" data-toggle="pill" href="#liquidations-tab">Liquidations</a>
    </li>
</ul>

$(document).ready(function(){
    // 从HTML的data属性或其他方式获取动态参数，避免PHP直接输出到JS
    // 示例：可以考虑将这些数据存储在隐藏字段或data属性中
    var vendor_id = "<?= $vendor->id; ?>"; // 示例，实际项目中应优化
    var start_date = "<?= $start_date;?>"; // 示例，实际项目中应优化
    var end_date = "<?= $end_date;?>";     // 示例，实际项目中应优化

    // 绑定“采购/支付”选项卡的点击事件
    $('#tabPurchasesPayments').click(function(e){ 
        e.preventDefault(); // 阻止默认的锚点跳转行为，因为我们将手动处理数据加载
        $('.purchases-payments-details').html(''); // 清空当前内容区域
        getPurchasesPayments(vendor_id, start_date, end_date); // 调用函数加载数据
    });

    // 绑定“清算”选项卡的点击事件
    $('#tabLiquidations').click(function(e){ 
        e.preventDefault(); // 阻止默认行为
        alert('加载清算数据'); // 调试信息
        // 假设有一个函数 getLiquidations 来加载清算数据
        // getLiquidations(vendor_id, start_date, end_date); 
    });
});

// 示例数据加载函数
function getPurchasesPayments(vendor_id, start_date, end_date){
    console.log(`加载采购/支付数据，Vendor ID: ${vendor_id}, Start Date: ${start_date}, End Date: ${end_date}`);
    // 这里放置AJAX请求，例如使用axios或jQuery.ajax
    // $.ajax({
    //     url: '/api/purchases-payments',
    //     method: 'GET',
    //     data: { vendor_id, start_date, end_date },
    //     success: function(response){
    //         $('.purchases-payments-details').html(response.html); // 假设返回HTML
    //     },
    //     error: function(xhr){
    //         console.error('加载采购/支付数据失败', xhr);
    //     }
    // });
}

// 示例清算数据加载函数 (需要根据实际后端API实现)
function getLiquidations(vendor_id, start_date, end_date){
    console.log(`加载清算数据，Vendor ID: ${vendor_id}, Start Date: ${start_date}, End Date: ${end_date}`);
    // 放置清算数据的AJAX请求
    // $.ajax({
    //     url: '/api/liquidations',
    //     method: 'GET',
    //     data: { vendor_id, start_date, end_date },
    //     success: function(response){
    //         // 将数据渲染到清算内容的区域
    //         $('.liquidations-details').html(response.html); 
    //     },
    //     error: function(xhr){
    //         console.error('加载清算数据失败', xhr);
    //     }
    // });
}

$(document).ready(function(){
    var vendor_id = "<?= $vendor->id; ?>";
    var start_date = "<?= $start_date;?>";
    var end_date = "<?= $end_date;?>";

    // 定义一个对象来跟踪哪些选项卡的数据已经加载
    var loadedTabs = {
        'purchases': false,
        'liquidations': false
    };

    // 初始加载：如果“采购/支付”是默认激活的，则加载其数据
    // 注意：Bootstrap的tab切换通常会自动显示第一个tab的内容
    // 如果需要首次加载数据，可以在这里调用
    if ($('#tabPurchasesPayments').hasClass('active') && !loadedTabs.purchases) {
        getPurchasesPayments(vendor_id, start_date, end_date);
        loadedTabs.purchases = true;
    }

    // 绑定“采购/支付”选项卡的点击事件
    $('#tabPurchasesPayments').click(function(e){ 
        // Bootstrap 5 的 tab 切换事件是 `shown.bs.tab`
        // 如果是 Bootstrap 4 或更早版本，`data-toggle="pill"` 会自动处理显示/隐藏
        // 这里的 click 事件主要用于触发数据加载
        if (!loadedTabs.purchases) {
            getPurchasesPayments(vendor_id, start_date, end_date);
            loadedTabs.purchases = true;
        }
    });

    // 绑定“清算”选项卡的点击事件
    $('#tabLiquidations').click(function(e){ 
        if (!loadedTabs.liquidations) {
            getLiquidations(vendor_id, start_date, end_date);
            loadedTabs.liquidations = true;
        }
    });

    // 优化：使用Bootstrap的tab事件监听
    // 对于更现代的Bootstrap版本（如Bootstrap 4/5），推荐监听其提供的事件
    $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
        var targetTabId = $(e.target).attr('id'); // 激活的选项卡ID

        if (targetTabId === 'tabPurchasesPayments' && !loadedTabs.purchases) {
            getPurchasesPayments(vendor_id, start_date, end_date);
            loadedTabs.purchases = true;
        } else if (targetTabId === 'tabLiquidations' && !loadedTabs.liquidations) {
            getLiquidations(vendor_id, start_date, end_date);
            loadedTabs.liquidations = true;
        }
    });
});