hust-epi/admin-ui/yvanui/yvanui.excel.js

/**
 * 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 = $('<form id=' + fileIdForm + ' enctype="multipart/form-data">'
          + '<input type="file" name="file" multiple="multiple" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>'
          + '</form>');
        $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: [
          '<span style="color:RED; padding-left: 10px;float: left;">&nbsp;</span>'
        ]
      }
    };
  }

    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 = $('<form id=' + fileIdForm + ' enctype="multipart/form-data">'
                    + '<input type="file" name="file" multiple="multiple" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>'
                    + '</form>');
                $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: [
                    '<span style="color:RED; padding-left: 10px;float: left;">&nbsp;</span>'
                ]
            }
        };
    }

  $.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);