js文件上传 、导入报表excel

这里导入分两种 ：
1.导入excel数据到后台：批量导入
2.导入excel数据到网页：单条导入

导入的excel模板如下：

报表模板

• HTML

<span  onclick="doBatchImport()">批量导入</span>
<span onclick="doInputImport()">单条导入</span>

• JS
  要引入dataTableExcel.js，js见文章dataTableExcel

require([ 'jquery', 'knockout' ,'dataTableExcel',
          '/df/pe/commonModal/js/excel.js',
          'uui','tree','grid','ip','dateZH','select2', 'jszip', 'bolb', 'xlsx', 'fileSaver'
          ], 
      function($,ko,dtExcel,Exp) {
           $(function() {
                ko.cleanNode($("body"));
                app = u.createApp({
                    el : '.wrapper',
                    model : viewModel
                });
            });
        }
);

1. 批量导入后台

var ip = {};
doBatchImport = function(){
       ip.uploadFile(getFilecallback_excel); //getFilecallback_excel回调函数
 }
/**
 * 文件上传
 */
ip.uploadFile = function(callback) {
    // var input = '<input type="file" id="_select-file" hidden>'
    var input = document.createElement('input')
    input.type = 'file'
    input.id = '_select-file'
    input.style.display = 'none'
    input.multiple = 'true'
    // input.accept =
    input.onchange = function(e) {
        $('#_select-file').remove()
        //拿到选择的excel文件
        var files = [].slice.call(e.target.files, 0)
        if(typeof callback === 'function') {
            callback(files, e)//通过回调行数取出files
        }
    }
    document.body.appendChild(input)
    input.click()
}

//回调函数
getFilecallback_excel = function(files){//取得files
    //组织数据传到后台
    var data = new FormData();//重要！要定义FormData存放导入的数据
    files.forEach(function(file) {//通过append存放每一条要导入的excel
        data.append('files', file);
    });
    //传给后台  
    ajaxObj.import(data)
 };

//交互
ajaxObj.import = function(data){
    $.ajax({
         async : true,
         type : 'POST',
    url: baseUrl+"import.do",
    data : data,
    beforeSend : function() {//设置等待图标
        ip.loading(true);
    },
    complete : function() {//完成上传后，等待图标消失
        ip.loading(false);                          
    },
     // 告诉jQuery不要去处理发送的数据!
     processData : false,
     // 告诉jQuery不要去设置Content-Type请求头!
 contentType : false,
    success: function(data) {
        if (!data.flag) {
            ip.warnJumpMsg(data.result, 0, 0, true);
                return
        } 
        ip.ipInfoJump(data.msg, "success"); 
        }
    });
}

//等待上传动态图表
ip.loading = function(flag) {
        var configModal = $("#info-loading")[0];
        if (!configModal) {
            var innerHTML = '<div id="info-loading" class="info-loading"><img src="/df/trd/ip/image/loading.gif"></div>';
            $("body").append(innerHTML);
        }
        if (flag) {
            $("#info-loading").css("display", "block");
            $("#info-loading").css("z-index", "5555"); //解决有弹窗后被遮挡问题
        } else {
            $("#info-loading").css("display", "none");
        }
    }

2. 单条导入

        /**
         * 单条导入
         */
        doInputImport = function(){
            if(operate == 'detail'){
                ip.ipInfoJump("详情页面不能操作！", "info");
                return
            }
            var opt = {
                    "isAppend" : false,
                    "callback" : function(result) {//回调行数，返回处理好的excel数据
                        $("#import-file").val($("#dataTableExcelFileInput__").val());
                        exlFun.setImpProInfo(result);//填报项目信息赋值
                        exlFun.setImpIndexsInfo(result);//填报指标信息赋值
                    }   
            };
                        //获取excel导入的excel数据，以数组的形式返回数据 dtExcel所有方法见dataTableExcel.js
            dtExcel.importRawFromExcel(opt);
            $('#importTemplateModal').modal('hide');
        };


//填充导入的excel项目信息
        exlFun.setImpProInfo = function(proInfo){
            console.log('导入的表格信息：');
            console.log(proInfo);
            var proInfoObj = {};
            proInfoObj.PRJ_NAME = proInfo[4][3]?proInfo[4][3]:'';//项目名称 PRJ_NAME
            
            var mgr_dept = proInfo[5][3]?proInfo[5][3]:'';//主管部门
            var mgr_dept_name = proInfo[5][7]?proInfo[5][7]:'';
            if(mgr_dept && mgr_dept_name){
                var index =  mgr_dept.indexOf(mgr_dept_name);
                var mgr_dept_code = mgr_dept.substring(0,index);
            }
            proInfoObj.MGR_DEPT_CODE = mgr_dept_code?mgr_dept_code:'';//主管部门代码 MGR_DEPT_CODE
            proInfoObj.MGR_DEPT_NAME = mgr_dept_name?mgr_dept_name:'';//主管部门名称  MGR_DEPT_NAME
            
            proInfoObj.EXEC_DEPT_NAME = proInfo[5][7];//实施单位 EXEC_DEPT_NAME
            proInfoObj.PRJ_KIND = proInfo[6][3];//项目属性 PRJ_KIND
            
            proInfoObj.MTT_AMOUNT = proInfo[7][4]+'';//中期资金总额 MTT_AMOUNT 
            proInfoObj.MTF_AMOUNT = proInfo[8][4]+'';//其中：财政拨款  MTF_AMOUNT
            proInfoObj.YF_AMOUNT = proInfo[9][4]+'';//其他资金 YF_AMOUNT
            //
            proInfoObj.YT_AMOUNT = proInfo[7][7]+'';//年度资金总额 YT_AMOUNT
            proInfoObj.MTO_AMOUNT = proInfo[8][7]+'';//其中：财政拨款 MTO_AMOUNT
            proInfoObj.YO_AMOUNT = proInfo[9][7]+'';//其他资金 YO_AMOUNT
            //
            proInfoObj.MT_GOAL = proInfo[11][1];//中期目标 MT_GOAL
            proInfoObj.Y_GOAL = proInfo[11][5];//年度目标 Y_GOAL
            
            proInfoObj.EN_CODE = '';//单位编号 EN_CODE
            proInfoObj.EN_NAME = '';//单位名称 EN_NAME
            proInfoObj.PRJ_CODE = '';//项目编号 PRJ_CODE 
            proInfoObj.PRJ_ORG_CODE = '';//处室编码 PRJ_ORG_CODE
            proInfoObj.PRJ_ORG_NAME = '';//处室名称 PRJ_ORG_NAME
            proInfoObj.REPLY_BUDGET_CURRENT = '';//当前预算 REPLY_BUDGET_CURRENT
            proInfoObj.CS_NAME = '';//业务类别 CS_NAME
            
            console.log(proInfoObj);
            operateData.initEditData("inputProInfo",proInfoObj);
            
            /*proInfoObj.CS_NAME = proInfo[6][7];//项目期
            proInfoObj.PRJ_BEGIN_DATE = proInfo[1][0];//项目开始日期 PRJ_BEGIN_DATE
            proInfoObj.PRJ_END_DATE = proInfo[1][0];//项目结束日期 PRJ_END_DATE*/ 
        }
 //填充导入 excel指标列表信息
        exlFun.setImpIndexsInfo = function(proInfo){
            var indexsArrayData = [];
            for(var i = 13; i < proInfo.length; i++){
                var rowData = {};
                for(var j = 1; j< 9; j++){
                    rowData.LEVEL1_INDEX = proInfo[i][1];
                    rowData.LEVEL2_INDEX = proInfo[i][2];
                    rowData.LEVEL3_INDEX = proInfo[i][3];
                    rowData.INDEX_VAL = proInfo[i][4];
                    rowData.LEVEL2_INDEX_YEAR = proInfo[i][5];
                    rowData.LEVEL3_INDEX_YEAR = proInfo[i][6];
                    rowData.INDEX_VAL_YEAR = proInfo[i][8];
                }
                indexsArrayData.push(rowData);
            }
            console.log(indexsArrayData);
            viewModel.indexsGridDataTable.setSimpleData(indexsArrayData);
        }