layui 表格操作匯入檔案

茶茶茶葉飄香發表於2020-12-25

html:

<div id="testInfoLayTable">
  <table id="test-Table" lay-filter="test-Table" class="layui-table"></table>
</div>

js:

var tableId = 'test-Table';
table.render({
            id: tableId,
            elem: '#test-Table',
            url: _config.base_server + '/data/test/test',
            where: whereParam,
            method: 'GET',
            page: true,
            skin: "nob",
            cols: [[
                {type: 'numbers', width: '5%'},
                {
                    field: 'fileName', title: '檔名稱'
                    , minWidth: 340
                },
                {
                    field: 'createDate', title: '建立時間'
                    , minWidth: 140
                },
                {
                    align: 'right', title: i18nSys['sys.table.title.operation'], minWidth: 180
                    , templet: function (d) {
                        var downloadBtn = '';
                        var importBtn = '';
                        var sendBtn = '';
                        if (admin.haveAuth('data:test:download')) {
                            downloadBtn =
                                '<a class="row-edit tb-action-line hint--left" lay-event="download" aria-label="下載">' +
                                '<i class="tb-action-line-icon iconfont iconicon-xiazai"/>' +
                                '</a>';
                        }
                        if (admin.haveAuth('data:test:import')) {
                            importBtn =
                                '<a class="row-edit tb-action-line hint--left uploadTableInfo" lay-event="import" aria-label="匯入" value="' + d.id + ',' + d.fileName + '">' +
                                '<i class="tb-action-line-icon iconfont iconshangzhangxiadiejiantou"/>' +
                                '</a>';
                        }
                        if (admin.haveAuth('data:test:sendEmail')) {
                            sendBtn =
                                '<a class="row-edit tb-action-line hint--left" lay-event="send" aria-label="傳送郵件">' +
                                '<i class="tb-action-line-icon iconfont iconfabuzhongxin1"/>' +
                                '</a>';
                        }


                        if ((downloadBtn + importBtn + sendBtn) === '') {
                            return _i18n.getGlobalVal('layui.operation.tips.noPermission');
                        } else {
                            return downloadBtn + importBtn + sendBtn;
                        }
                    }
                }
            ]], done: function (res, curr, count) {
                admin.checkResponseData(res);
                //分頁條國際化
                _i18n.initPageBar();
                admin.bindTipsToTable(); // 給表格單元格繫結滑鼠hover 時tips
                admin.fixEmptyTable('#' + tableId);
                // 工具條點選事件
                table.on('tool(test-Table)', function (obj) {
                    var data = obj.data; //獲得當前行資料
                    // var layEvent = obj.event; //獲得 lay-event 對應的值(也可以是表頭的 event 引數對應的值)
                    // var tr = obj.tr; //獲得當前行 tr 的 DOM 物件(如果有的話)
                    if (obj.event === 'download') {
                        download(data);
                    } else if (obj.event === 'import') {
                        // doImport(data);
                    } else if (obj.event === 'send') {
                        doSend(obj);
                    }
                });
                var uploadParam = {}
                var fileName = '';
                upload.render({
                    elem: '.uploadTableInfo'
                    , url: _config.base_server + '/data/test/updateFile' //上傳介面
                    , accept: 'file'
                    , exts: 'xlsx'
                    , multiple: false
                    , before: function (obj) {
                        var fileName = "";
                        var files = this.files = obj.pushFile();
                        for(var key in files){
                            fileName = files[key].name;
                        }
                        var tableElem = this.item;
                        uploadParam.id = tableElem.attr('value').split(',')[0];
                        uploadParam.fileName = tableElem.attr('value').split(',')[1];
                        uploadParam.nowName = fileName;
                        layer.load();
                    }
                    , data: {
                        id: function () {
                            return uploadParam.id;
                        },
                        fileName: function () {
                            return uploadParam.fileName;
                        },
                        nowName: function () {
                            return uploadParam.nowName;
                        },
                    }
                    , done: function (data) {
                        layer.close('loading');
                        // var data = res.data;
                        if (data.code === '0') {
                            admin.toast({txt: data.msg, type: 'success'});
                            table.reload('test-Table');
                        }else{
                            admin.toast({txt: data.msg, type: 'error'});
                        }
                    }, error: function () {
                        layer.closeAll(); //關閉loading
                        layer.open({
                            title: '資訊',
                            content: '檔案上傳失敗,請重試'
                        });
                    }
                })
            }
        });

相關文章