【FastAdmin开发记录】弹窗传递参数

下拉选中参数传入弹窗

背景：在表格列表的toolbar位置加了下拉的搜索条件，需要根据选中的值刷新列表，并且toolbar上的其它操作也要根据选中的值来进行，所以就需要这些按钮操作都能获取到选中的值

方案

定义全局变量，在select的change事件里面，保存最新的选中值，在对应按钮触发时，读取变量给url传参
参考代码

// 切换版本事件
$(document).on("change", "select[name=version]", function(){
    //变更后的回调事件
    version = $(this).val();

    var options = table.bootstrapTable('getOptions');
    var queryParams = options.queryParams;
    options.pageNumber = 1;
    options.queryParams = function (params) {
        //这一行必须要存在,否则在点击下一页时会丢失搜索栏数据
        params = queryParams(params);

        //如果希望追加搜索条件,可使用
        var filter = params.filter ? JSON.parse(params.filter) : {};
        var op = params.op ? JSON.parse(params.op) : {};
        filter.version = version;
        op.version = '=';

        params.filter = JSON.stringify(filter);
        params.op = JSON.stringify(op);

        return params;
    };
    table.bootstrapTable('refresh', {});

});

因为默认的导入已经封装好了代码，不想直接在里面修改，就自定义了导入按钮

// 自定义导入按钮事件
if ($('.btn-import-diy').length > 0) {
    require(['upload'], function (Upload) {
        var options = table.bootstrapTable('getOptions');
        Upload.api.upload('.btn-import-diy', function (data, ret) {
            Fast.api.ajax({
                url: options.extend.import_url + '?cat_name=' + cat_name + '&version=' + version,//这边的version就是上面change事件里面的值
                data: {file: data.url},
            }, function (data, ret) {
                table.trigger("uncheckbox");
                // table.bootstrapTable('refresh');
                // 这边因为导入后，表头有可能会变动，所以需要重新加载整个页面
                location.reload();
            });
        });
    });
}

导出按钮

// 点击导出事件
$(document).on("click", ".btn-export", function () {
    Layer.confirm(
        __('确认导出？'),
        {icon: 3, title: __('Warning'), offset: 0, shadeClose: true, btn: [__('OK'), __('Cancel')]},
        function (index) {
            Fast.api.ajax({
                url: 'data/item/export?cat_name=' + cat_name + '&version=' + version
            }, function (data) {
                // 这边是触发直接下载文件的操作
                var $a = $("<a>");
                $a.attr("href", data.file);
                $a.attr("download", data.filename);
                $("body").append($a);
                $a[0].click();
                $a.remove();
            });
            Layer.close(index);
        }
    );
});

添加按钮用的是框架自带的，会打开一个弹窗，里面需要选择版本，需求是把外面选中的版本在里面自动默认选中
所有通过js的方式，设置了默认值

add: function () {
    Controller.api.bindevent();

    // 设置默认选中，select需要修改data-value的值才能选中
    let version = parent.$(".version").val();
    $(".version").attr('data-value', version);
},