<template>
|
<el-dialog v-dialogDrag ref="uploadRef" :visible.sync="currentDialogVisible" title="批量导入操作" class="import-dialog-container" width="980px">
|
<el-row>
|
<el-col :span="10">
|
<el-upload :limit="1" :before-upload="beforeUpload" :on-exceed="onExceed" :data="uploadData" :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>
|
<el-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
|
},
|
options: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
},
|
importData: {
|
type: Function,
|
default: () => {
|
return () => {};
|
}
|
}
|
},
|
data() {
|
return {
|
// 上传附加字段信息
|
uploadData: {
|
folder: "import"
|
},
|
// 上传后文件服务器路径
|
fileUrl: null,
|
// 正在导入
|
isImporting: false,
|
// 消息内容
|
msgList: [],
|
// 导入获得消息interval handle
|
intervalHandler: null,
|
// 显示导入模板按钮
|
isShowTemplateButton: true,
|
// 导入key
|
uploadKey: null
|
};
|
},
|
computed: {
|
// 显示窗口
|
currentDialogVisible: {
|
get: function() {
|
return this.visible;
|
},
|
set: function(val) {
|
this.$emit("update:visible", val);
|
}
|
},
|
// api接口地址
|
serverAction() {
|
return this.common.domain + this.options.url;
|
}
|
},
|
watch: {
|
params: {
|
handler: function(val) {},
|
deep: true
|
}
|
},
|
created() {},
|
mounted() {
|
this.uploadKey = this.common.getGUID();
|
},
|
methods: {
|
// 开始导入数据
|
startImport() {
|
this.msgList = [];
|
if (!this.fileUrl) {
|
this.$message.error("文件未上传成功，无法导入数据！");
|
return;
|
}
|
this.isImporting = true;
|
|
var url = "/api/sys/import/startImport";
|
var params = {
|
importInfo_Id: this.options.importInfo_Id,
|
fileUrl: this.fileUrl,
|
fId: this.options.fId, // 外键ID
|
uploadKey: this.uploadKey
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.msgList.push(res.msg);
|
this.common.showMsg(res);
|
this.isImporting = false;
|
if (res.statusCode !== 0 && res.statusCode !== -1) {
|
this.$message.error("当前操作未结束，请稍等！");
|
window.clearInterval(this.intervalHandler);
|
this.intervalHandler = false;
|
return;
|
}
|
this.getMsg();
|
},
|
this.$refs.loading
|
);
|
},
|
// 获得导入消息
|
getMsg() {
|
// 获得同步消息
|
var url = "/api/common/getUploadMsg";
|
const params = {
|
key: this.uploadKey
|
};
|
// const ref = this.dataList;
|
var callBack = res => {
|
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.indexOf("-1") >= 0);
|
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.options.url) {
|
this.$message.error("未设置服务器地址");
|
return false;
|
}
|
if (!this.options.importInfo_Id) {
|
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() {
|
var url = "/api/sys/import/getImportInfo";
|
var params = {
|
importInfo_Id: this.options.importInfo_Id
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
var url = res.data.templatePath;
|
window.open(url);
|
}
|
},
|
this.$refs.loading
|
);
|
}
|
}
|
};
|
</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;
|
}
|
}
|
}
|
</style>
|
