rfid-fastadmin/public/assets/js/backend/records.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'records/index' + location.search,
                    add_url: 'records/add',
                    edit_url: 'records/edit',
                    del_url: 'records/del',
                    multi_url: 'records/multi',
                    import_url: 'records/import',
                    table: 'records',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                fixedColumns: true,
                fixedRightNumber: 1,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'rfid', title: '电子耳标号', operate: 'LIKE'},
                        {field: 'number', title:'国标号', operate: 'LIKE'},
                        {field: 'birthDate', title:"出生日期", operate: 'LIKE'},
                        {field: 'category', title: "品类", operate: 'LIKE'},
                        {field: 'gender', title:"性别", operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content},
                        {field: 'dayage', title: "日龄", operate: 'LIKE'},
                        // {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });


            // 使用全局事件委托，确保即使DOM动态变化也能触发
            $(document).ready(function() {
                console.log('绑定事件');
                // 直接绑定到body的点击事件，用于测试按钮点击是否有反应
                $(document).on('click', '.btn-file', function() {
                    console.log('按钮被点击了');
                    // 手动触发文件输入框
                    var fileInput = $('#xlsxFile');
                    if(fileInput.length) {
                        console.log('文件输入框存在，触发点击');
                        fileInput.click();
                    } else {
                        console.error('文件输入框不存在！');
                    }
                });

                // 绑定文件选择事件
                $(document).on('change', '#xlsxFile', function() {
                    console.log('文件选择事件触发！');

                    var file = this.files[0];
                    if (!file) {
                        console.log('未选择文件');
                        return;
                    }

                    console.log('已选择文件:', file.name, '大小:', file.size, '类型:', file.type);

                    // 检查文件类型
                    var ext = file.name.split('.').pop().toLowerCase();
                    console.log('文件扩展名:', ext);

                    if (ext !== 'xlsx' && ext !== 'xls') {
                        layer.msg('请选择Excel文件(.xlsx或.xls)', {icon: 2});
                        return;
                    }

                    var formData = new FormData();
                    formData.append('file', file);

                    // 检查formData内容
                    for (var pair of formData.entries()) {
                        console.log('FormData键值对:', pair[0], pair[1]);
                    }

                    console.log('准备发送AJAX请求');

                    // 创建进度条弹窗
                    var progressBar = layer.open({
                        type: 1,
                        title: '导入进度',
                        area: ['400px', '200px'],
                        content: '<div style="padding: 20px;"><div class="progress" style="margin-bottom: 10px;"><div id="importProgressBar" class="progress-bar progress-bar-success" role="progressbar" style="width: 0%;">0%</div></div><p id="importProgressText">准备导入...</p><p id="importProgressDetail"></p></div>',
                        cancel: function() {
                            // 阻止用户手动关闭弹窗，必须等待导入完成
                            return false;
                        }
                    });

                    $.ajax({
                        url: 'records/getxlsxdata',
                        type: 'post',
                        data: formData,
                        contentType: false,
                        processData: false,
                        // 添加超时设置
                        timeout: 30000,
                        // 添加全局错误处理
                        xhr: function() {
                            var xhr = new XMLHttpRequest();
                            // 上传进度事件
                            xhr.upload.addEventListener('progress', function(e) {
                                if (e.lengthComputable) {
                                    var percentComplete = (e.loaded / e.total) * 100;
                                    console.log('文件上传进度: ' + percentComplete.toFixed(2) + '%');
                                }
                            }, false);
                            return xhr;
                        },
                        success: function(res) {
                            console.log('AJAX请求成功，返回数据:', res);

                            // 更新进度条为100%
                            $('#importProgressBar').css('width', '100%').text('100%');

                            if (res.code === 1) {
                                // 更新进度文本
                                $('#importProgressText').text('导入完成');
                                $('#importProgressDetail').text('总共' + res.data.total_rows + '条数据，成功导入' + res.data.inserted_count + '条');

                                // 2秒后关闭进度条弹窗并显示成功消息
                                setTimeout(function() {
                                    layer.close(progressBar);
                                    layer.msg(res.msg || '导入成功', {icon: 1});
                                    // 刷新表格数据
                                    $('.btn-refresh').trigger('click');
                                }, 2000);
                            } else {
                                // 更新进度文本为失败信息
                                $('#importProgressText').text('导入失败');
                                $('#importProgressDetail').text(res.msg || '未知错误');

                                // 2秒后关闭进度条弹窗并显示失败消息
                                setTimeout(function() {
                                    layer.close(progressBar);
                                    layer.msg(res.msg || '导入失败', {icon: 2});
                                }, 2000);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('AJAX请求失败:', error, '状态:', status);
                            console.error('XHR详情:', xhr);

                            // 更新进度文本为错误信息
                            $('#importProgressText').text('导入失败');
                            $('#importProgressDetail').text('请求失败，请重试');

                            // 2秒后关闭进度条弹窗并显示错误消息
                            setTimeout(function() {
                                layer.close(progressBar);
                                layer.msg('请求失败，请重试', {icon: 2});
                            }, 2000);
                        },
                        complete: function(xhr, status) {
                            console.log('AJAX请求完成，状态:', status);
                        }
                    });
                });
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});