导入导出功能的实现

使用bootstrap模板
1.导入：
html代码：

<!--批量导入文件模态框-->
<div class="modal fade" id="exportfile" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document" style='margin: 138px auto'>
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-2px;">
                    <span style="" aria-hidden="true" class="fa fa-times"></span></button>
                <h4 class="modal-title">批量操作</h4>
            </div>
            <div class="modal-body form-horizontal" style="text-align: center;font-size: 18px;">
                <div class="form-group">
                    <div class="col-sm-3 from-control">模板下载</div>
                    <div class="col-sm-8 " style='text-align: left'>
                        <a href="${ctx}/resources/js/admin/group.xlsx" class='btn btn-info' type="button" v-show="model.limitType==2"
                           target=_blank>
                            导入模板下载
                        </a>
                        <a href="${ctx}/resources/js/admin/agent.xlsx" class='btn btn-info' type="button" v-show="model.limitType==3"
                           target=_blank>
                            导入模板下载
                        </a>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3 from-control"><span style="color: red;position:relative;">*</span>文件导入</div>
                    <div class="col-sm-8 ">
                        <form action="" id="addFile" enctype="multipart/form-data">
                            <input type="file" name="file" id="file" @change="getFileName($event)"
                                   accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
<!--                <button type="button" class="btn btn-default" id="saveBtn" onclick="vm.confirm(model.limitType)">确定</button>-->
                <button type="button" class="btn btn-default" id="saveBtn" @click="confirm(model.limitType)">确定</button>
                <!--data-dismiss="modal"-->
                <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>

js代码：

//获取导入的文件名称
		getFileName: function (e) {
           // console.log(e.currentTarget.files[0].name)
            vm.importResult.fileName = e.currentTarget.files[0].name;
            console.log(vm.importResult.fileName,"vm.importResult.fileName")
        },
 //导入事件
        importfile: function (id) {
            dudu.Prevent('#saveBtn', 'on');
            $('#exportfile').modal('show')
            $("#file").val("");
        },
        //确定导入文件
        confirm: function (limitType) {
            // console.log(limitType,"limitTypelimitType")
            var file = $("#file").val();
            if (!file.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi, "$1")) {
                return Alert("请传入文件");
            }
            dudu.Prevent('#saveBtn', 'off');
            if(limitType==2){
                urls=dudu.ctx + "/admin/hbagent/limit/call/detailDepartmentEdit"
            }else if(limitType==3){
                urls=dudu.ctx + "/admin/hbagent/limit/call/detailAgentEdit"
            }
            $("#addFile").ajaxSubmit({
                url: urls,
                type: 'post',
                data:{entNum:vm.model.entNum,type:limitType},
                success: function (res) {
                    // console.log(res,"resresres")
                    if (res.code === 0) {
                        dudu.Prevent('#saveBtn', 'on');
                        Alert(res.msg);
                        $('#exportfile').modal('hide')
                        vm.reload(limitType);
                    } else {
                        dudu.Prevent('#saveBtn', 'on');
                        $('#exportfile').modal('hide')

                        var str=res.data.errMsg;
                        //字符串截取为数组
                        var strArr=str.split(",");
                        vm.alertMsg=""
                        if(strArr.length<=3){
                            for(var j = 0,len=strArr.length; j < len; j++) {
                                vm.alertMsg=vm.alertMsg+strArr[j]+"<br>";
                            };
                            vm.alertMsg=vm.alertMsg+"是否下载校验结果文件"
                        }else{
                            for(var j = 0,len=3; j < len; j++) {
                                vm.alertMsg=vm.alertMsg+strArr[j]+"<br>";
                            };
                            vm.alertMsg=vm.alertMsg+"..."
                            vm.alertMsg=vm.alertMsg+"是否下载校验结果文件"
                        }
                        vm.$confirm(vm.alertMsg, '校验错误', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            dangerouslyUseHTMLString: true
                        }).then(() => {
                            // $("#importResult").modal("show");
                            vm.importResult.downLoadUrl=res.data.errorFile
                            vm.resultExport()
                        }).catch(() => {
                            vm.$message({
                                type: 'info',
                                message: '取消下载错误文件'
                            });
                        });
                    }
                }
            });
        },
        //校验结果文件导出
        resultExport: function () {
            // $("#importResult").modal('hide');
            var downLoadUrl = vm.importResult.downLoadUrl;
            var url = dudu.ctx + "/admin/hbagent/limit/call/batch/download?url="+downLoadUrl;
            window.open(url)
        },

2.导出

		//序列化
        serialize: function(data) {
            var arr = [];
            for (var key in data) {
                arr.push(key + "=" + data[key]);
            }
            return arr.join("&");
        },
		//导出
        exportFile: function (type) {
            // var fields = $("#showList form").serializeArray();
            var jsonData = {};
            if(type == 1){
                jsonData.entNum=vm.model.entNum
                jsonData.id=vm.model.organCode
                jsonData.name=vm.model.organName
                jsonData.type=type
            }else if(type == 2){
                jsonData.entNum=vm.model.entNum
                jsonData.id=vm.model.agentId
                jsonData.name=vm.model.agentName
                jsonData.type=type
            }
            var url= dudu.ctx + "/admin/hbagent/limit/call/detailExport?" + vm.serialize(jsonData);
            window.open(url)
        },

使用element的模板
导出：

exportDetail() {//导出
        if (this.timeValue != null && this.timeValue.length > 0) {
          this.searchform.startTime = moment(this.timeValue[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.searchform.endTime = moment(this.timeValue[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
      checkSeatExport({...this.searchform}).then(res=>{//导出验证
        console.log(res,"daochuyanzhneg")
        if(res.code == 0){
          fetchSeatExport({ ...this.searchform }).then((res) => {
            console.log(res,"daochudaochu");
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel",
            });
            console.log(res.headers["content-disposition"],"res.headers[")
            let str = res.headers["content-disposition"].split(";")[1];
            
            // console.log(str,"str1111")
            if (str.indexOf("=") != -1) {
              var filename = decodeURI(str.slice(9));
            } else {
              var filename = decodeURI(str);
            }
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = filename; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          });
        }else{
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      })
      
    },

//导出校验接口和导出接口：
export function checkSeatExport(data) { // 坐席通时通次导出校验
  return request({
    url: '/performance/check',
    method: 'get',
    params: data
  })
}
export function fetchSeatExport(data) { // 坐席通时通次导出
  return request({
    url: '/performance/export',
    method: 'post',
    responseType: "blob",
    data
  })
}

导入：

html代码：

<el-dialog title="批量导入" :visible.sync="dialogVisible" width="500px" :show-close="false">
      <el-form ref="form" label-width="120px">
        <el-form-item label="选择文件">
          <div style="display: flex">
            <el-upload
              class="upload-demo"
              ref="uploadBatch"
              action="string"
              accept=".xlsx, .xls"
              :limit="1"
              :http-request="httpRequestExport"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
            <div>
              <el-button style="margin-left: 10px" size="small" type="primary" @click="exportDemo(2)">下载模板</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>

js代码：

//文件上传按钮事件：
	handelExport() {
      if(this.$refs.uploadBatch){
            this.$refs.uploadBatch.clearFiles(); //清空已上传的文件列表
      }
	  this.dialogVisible = true;
	},
	// 批量导入文件
    httpRequestExport(param) {
      console.log(param, "param")
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fetchExport(fd).then(res => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.fetchData()
        } else {
          this.$message({
            type: "error",
            message: res.msg
          });
        }
      });
    },
    //模态框的确定按钮
    submitUpload() {
      this.$refs.uploadBatch.submit();
    }

// 批量导入文件接口：
export function fetchExport(data) {
  return request({
    url: "/videoPool/uploadfile",
    method: "post",
    responseType: "blob",
    data
  })
}

《vpm视讯号码池管理批量导入》