/** * YvanUI * * Copyright (c) 2019 www.yvanui.com. All rights reserved. * @author luoyifan@qq.com * @time 2019-03-09 14:44:00 */ (function ($) { var $dg, $footer, $dlg, $fileForm, $retry; var fileIdForm = $.yvan.createId('file'); function excelWindow(opts) { function startImport() { if (!$fileForm.find('input').val()) { //如果文件框中无值,就选文件 $footer.find('span').html('请选择文件'); $fileForm.find('input').trigger('click'); $retry.linkbutton({ text: '选择文件', iconCls: 'fa fa-file-excel-o' }); return; } //选好了文件,就进行上传 $footer.find('span').html("正在导入:" + $fileForm.find('input').val() + ". 请耐心等待..."); $retry.linkbutton({ text: '重试', iconCls: 'fa fa-refresh' }); var formData = new FormData($fileForm[0]); opts.data = $.extend(true, { action: 'startImport' }, opts.data); if (opts.data) { for (var name in opts.data) { if (!opts.data.hasOwnProperty(name)) continue; formData.append(name, opts.data[name]); } } $dg.datagrid('loading'); $.yvan.ajax({ url: opts.url, type: 'post', data: formData, cache: false, processData: false, contentType: false, success: function (root) { $dg.datagrid('loaded'); $dg.datagrid('loadData', root.data || []); $.yvan.msg(root.msg); $dlg.window('close'); if (opts.success) { opts.success(root.data); } }, error: function (root, textStatus, errorThrown) { $dg.datagrid('loaded'); if (textStatus !== 'success') { $footer.find('span').html('网络错误!!'); return; } if ($.type(root.data) === 'array') { $footer.find('span').html(root.msg); $dg.datagrid('loadData', root.data); } else { console.error(root); } } }); } if (!opts.columns) { opts.columns = [[]]; } for (var i = 0; i < opts.columns[0].length; i++) { opts.columns[0][i].styler = (function (c) { return function (value, row) { if ($.type(row['errorCollection']) === 'object' && row['errorCollection'].hasOwnProperty(c)) { return 'background-color:RED;" title="' + row['errorCollection'][c].join('\n') + '" class="easyui-tooltip'; } }; })(opts.columns[0][i].field); } return { xtype: 'dialog', dialogId: $.yvan.createId('dialog'), title: '导入 Excel', width: opts.width || 700, height: opts.height || 500, onOpen: function () { $dlg = $(this); //构建 multipart-form $fileForm = $('
' + '' + '
'); $dlg.append($fileForm.hide()); $fileForm.change(function () { startImport(); }); setTimeout(function () { $footer.find('span').html('请选择文件'); if (opts.autoOpen !== false) { startImport(); } }, 0); }, center: { border: true, items: { xtype: 'datagrid', onRender: function () { $dg = $(this); }, toolbar: [ { text: '选择文件', iconCls: 'fa fa-file-excel-o', onRender: function () { $retry = $(this); }, onClick: function () { startImport(); } }, { text: '下载模版', iconCls: 'fa fa-download', onClick: function () { $.yvan.download({ url: opts.url + '?action=template', fileName: opts.fileName }); } }, { text: '关闭', iconCls: 'fa fa-window-close', onClick: function () { $dlg.window('close'); } } ], pagination: false, remoteSort: false, singleSelect: true, striped: true, rownumbers: true, showHeader: true, emptyMsg: '', columns: opts.columns, onLoadSuccess: function () { $(".easyui-tooltip").tooltip({ onShow: function () { $(this).tooltip('tip').css({ borderColor: 'RED' }); } }); }, /*frozenColumns: [[ { field: 'excelRowNum', title: '行号', width: 35, styler: function (value, row) { if ($.type(row['errorCollection']) === 'object' && row['errorCollection'].hasOwnProperty('row_error')) { return 'background-color:RED;" title="' + row['errorCollection']['row_error'].join('\n ') + '" class="easyui-tooltip'; } } }, ]],*/ data: [] } }, footer: { xtype: 'div', onRender: function () { $footer = $(this); }, items: [ ' ' ] } }; } function excelEasyWindow(opts) { function startImport() { if (!$fileForm.find('input').val()) { //如果文件框中无值,就选文件 $footer.find('span').html('请选择文件'); $fileForm.find('input').trigger('click'); $retry.linkbutton({ text: '选择文件', iconCls: 'fa fa-file-excel-o' }); return; } //选好了文件,就进行上传 $footer.find('span').html("正在导入:" + $fileForm.find('input').val() + ". 请耐心等待..."); $retry.linkbutton({ text: '重试', iconCls: 'fa fa-refresh' }); var formData = new FormData($fileForm[0]); opts.data = $.extend(true, { action: 'startImport' }, opts.data); if (opts.data) { for (var name in opts.data) { if (!opts.data.hasOwnProperty(name)) continue; formData.append(name, opts.data[name]); } } $dg.datagrid('loading'); $.yvan.ajax({ url: opts.url, type: 'post', data: formData, cache: false, processData: false, contentType: false, success: function (root) { $dg.datagrid('loaded'); $dg.datagrid('loadData', root.data || []); $.yvan.msg(root.msg); $dlg.window('close'); if (opts.success) { opts.success(root.data); } }, error: function (root, textStatus, errorThrown) { $dg.datagrid('loaded'); if (textStatus !== 'success') { $footer.find('span').html('网络错误!!'); return; } if ($.type(root.data) === 'array') { $footer.find('span').html(root.msg); $dg.datagrid('loadData', root.data); } else { console.error(root); } } }); } if (!opts.columns) { opts.columns = [[]]; } for (var i = 0; i < opts.columns[0].length; i++) { opts.columns[0][i].styler = (function (c) { return function (value, row) { if ($.type(row['errorCollection']) === 'object' && row['errorCollection'].hasOwnProperty(c)) { return 'background-color:RED;" title="' + row['errorCollection'][c].join('\n') + '" class="easyui-tooltip'; } }; })(opts.columns[0][i].field); } return { xtype: 'dialog', dialogId: $.yvan.createId('dialog'), title: '导入 Excel', width: opts.width || 700, height: opts.height || 500, onOpen: function () { $dlg = $(this); //构建 multipart-form $fileForm = $('
' + '' + '
'); $dlg.append($fileForm.hide()); $fileForm.change(function () { startImport(); }); setTimeout(function () { $footer.find('span').html('请选择文件'); if (opts.autoOpen !== false) { startImport(); } }, 0); }, center: { border: true, items: { xtype: 'datagrid', onRender: function () { $dg = $(this); }, toolbar: [ { text: '选择文件', iconCls: 'fa fa-file-excel-o', onRender: function () { $retry = $(this); }, onClick: function () { startImport(); } }, { text: '关闭', iconCls: 'fa fa-window-close', onClick: function () { $dlg.window('close'); } } ], pagination: false, remoteSort: false, singleSelect: true, striped: true, rownumbers: true, showHeader: true, emptyMsg: '', columns: opts.columns, onLoadSuccess: function () { $(".easyui-tooltip").tooltip({ onShow: function () { $(this).tooltip('tip').css({ borderColor: 'RED' }); } }); }, /*frozenColumns: [[ { field: 'excelRowNum', title: '行号', width: 35, styler: function (value, row) { if ($.type(row['errorCollection']) === 'object' && row['errorCollection'].hasOwnProperty('row_error')) { return 'background-color:RED;" title="' + row['errorCollection']['row_error'].join('\n ') + '" class="easyui-tooltip'; } } }, ]],*/ data: [] } }, footer: { xtype: 'div', onRender: function () { $footer = $(this); }, items: [ ' ' ] } }; } $.extend($.yvan, { importExcel: function ($sender, opts) { opts = excelWindow(opts); return $.yvan.showDialog($sender, opts); } }); $.extend($.yvan, { importEasyExcel: function ($sender, opts) { opts = excelEasyWindow(opts); return $.yvan.showDialog($sender, opts); } }); })(jQuery);