使用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视讯号码池管理批量导入》