<template>
|
<el-dialog v-dialogDrag ref="uploadRef" :visible.sync="currentDialogVisible" :title="title" class="import-dialog-container" width="980px" @close="dialogClose">
|
<el-row>
|
<el-col :span="10">
|
<el-upload :limit="1" :before-upload="beforeUpload" :on-exceed="onExceed" :data="uploadData" :file-list="fileList" :action="serverAction" :on-success="onSuccess" accept=".xlsx" class="upload-demo" drag>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或
|
<em>点击上传</em>
|
</div>
|
<div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过2Mb</div>
|
</el-upload>
|
</el-col>
|
<el-col :span="14">
|
<el-alert :closable="false" title="可以根据下面红色提示提示，对excel数据做相应调整" type="success" class="alert-msg">
|
</el-alert>
|
<div class="body-content">
|
<slot />
|
</div>
|
<el-scrollbar ref="scrollbar" :noresize="false" :native="false" wrap-class="scrollbar-wrap">
|
<ul class="msg-container">
|
<li v-for="(item, index) in msgList" :key="index" class="msg-item" v-html="item">
|
{{ index + 1 }}、{{ item }}
|
</li>
|
</ul>
|
</el-scrollbar>
|
<div ref="loading"></div>
|
</el-col>
|
</el-row>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="currentDialogVisible = false">取 消</el-button>
|
<el-button v-if="isShowTemplateButton" type="success" icon="el-icon-yrt-saomiaoguanli" @click="downLoadTemplate">下载模板</el-button>
|
<el-button :loading="isImporting" type="primary" icon="el-icon-yrt-import" @click="startImport">开始导入</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
label: {
|
type: String,
|
default: null
|
},
|
importConfig: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
importData: {
|
type: Function,
|
default: () => {
|
return () => {};
|
}
|
},
|
// 导入前事件
|
beforeImportSubmit: {
|
type: Function,
|
default: () => {
|
return () => {};
|
}
|
}
|
},
|
data() {
|
return {
|
// 上传附加字段信息
|
uploadData: {
|
folder: "import"
|
},
|
// 上传后文件服务器路径
|
fileUrl: null,
|
fileList: [],
|
// 正在导入
|
isImporting: false,
|
// 消息内容
|
msgList: [],
|
// 导入获得消息interval handle
|
intervalHandler: null,
|
// 显示导入模板按钮
|
isShowTemplateButton: true,
|
// 导入key
|
uploadKey: null
|
};
|
},
|
computed: {
|
// 标题
|
title: function() {
|
return this.importConfig.title || "批量导入操作";
|
},
|
// 显示窗口
|
currentDialogVisible: {
|
get: function() {
|
return this.visible;
|
},
|
set: function(val) {
|
this.$emit("update:visible", val);
|
}
|
},
|
// 上传接口地址
|
serverAction() {
|
const url = "/api/common/uploadSingleFile";
|
return this.common.domain + url;
|
}
|
},
|
watch: {
|
params: {
|
handler: function(val) {},
|
deep: true
|
}
|
},
|
mounted() {
|
this.uploadKey = this.common.getGUID();
|
},
|
methods: {
|
// 开始导入数据
|
startImport() {
|
this.msgList = [];
|
if (!this.fileUrl) {
|
this.$message.error("文件未上传成功，无法导入数据！");
|
return;
|
}
|
|
// 导入前事件
|
const reVal = this.beforeImportSubmit();
|
if (reVal === false) return;
|
|
var url = this.importConfig.url;
|
if (!url) {
|
this.$message.error("未设置导入url");
|
return;
|
}
|
var params = {
|
fileUrl: this.fileUrl,
|
key: this.uploadKey
|
};
|
// 合并自定义参数传递到后端
|
if (this.importConfig.params) {
|
params = Object.assign(params, this.importConfig.params);
|
}
|
this.isImporting = true;
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.msgList.push(res.msg);
|
this.common.showMsg(res);
|
this.isImporting = false;
|
|
if (!res.result) {
|
window.clearInterval(this.intervalHandler);
|
this.intervalHandler = false;
|
return;
|
}
|
this.getMsg();
|
this.fileList = [];
|
},
|
this.$refs.loading
|
);
|
},
|
// 获得导入消息
|
getMsg() {
|
// 获得同步消息
|
var url = "/api/common/getUploadMsg";
|
const params = {
|
key: this.uploadKey
|
};
|
// const ref = this.dataList;
|
var callBack = res => {
|
// 自动滚动到最后一行
|
window.setTimeout(() => {
|
const div = this.$refs.scrollbar.$refs.wrap;
|
div.scrollTop = div.scrollHeight + 1000;
|
}, 1500);
|
if (!res.result) {
|
window.clearInterval(this.intervalHandler);
|
this.intervalHandler = false;
|
if (Array.isArray(res.data)) {
|
this.msgList = this.msgList.concat(res.data);
|
}
|
return;
|
}
|
if (Array.isArray(res.data)) {
|
this.msgList = this.msgList.concat(res.data.filter(item => item !== "-1"));
|
const isFinished = res.data.some(item => item && item === "-1");
|
if (isFinished) {
|
window.clearTimeout(this.intervalHandler);
|
this.intervalHandler = null;
|
return;
|
}
|
}
|
this.intervalHandler = window.setTimeout(this.getMsg, 1000);
|
};
|
this.common.ajax(url, params, callBack, this.$refs.loading);
|
},
|
|
// 上传前事件
|
beforeUpload(file) {
|
if (!this.importConfig.url) {
|
this.$message.error("未设置服务器地址");
|
return false;
|
}
|
this.msgList = [];
|
this.fileUrl = null;
|
},
|
// 文件选择超上限
|
onExceed(files, fileList) {
|
this.$message.error("只能选择一个文件上传，请先删除已经上传的文件！");
|
},
|
// 文件上传成功
|
onSuccess(res, file, fileList) {
|
this.common.showMsg(res);
|
if (res.result) {
|
this.fileUrl = res.data.url;
|
}
|
},
|
// 下载模板
|
downLoadTemplate() {
|
if (!this.importConfig.templateUrl) {
|
this.$message.error("未设置模板下载地址");
|
return;
|
}
|
const url = `${this.common.domain}/api/common/download?url=${this.importConfig.templateUrl}`;
|
window.open(url);
|
},
|
// 关闭窗口
|
dialogClose() {
|
this.$emit("on-close"); // 关闭事件
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.import-dialog-container {
|
/deep/ .el-upload-list {
|
margin-right: 20px;
|
}
|
/deep/ .scrollbar-wrap {
|
max-height: 400px;
|
overflow-x: hidden;
|
padding: 0px;
|
padding-bottom: 30px !important;
|
padding-top: 0px !important;
|
}
|
.msg-container {
|
margin: 0;
|
padding: 0;
|
.msg-item {
|
margin: 0;
|
padding: 5px 0;
|
word-wrap: break-word;
|
}
|
}
|
.body-content {
|
margin-top: 20px;
|
}
|
}
|
</style>
|
