|
|
|
@@ -1,174 +0,0 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<el-dialog |
|
|
|
:title="importExcelDatas.title" |
|
|
|
:visible.sync="importExcelDatas.visible" |
|
|
|
:before-close="handleClose" |
|
|
|
:width="width || '400px'" |
|
|
|
append-to-body |
|
|
|
> |
|
|
|
<div> |
|
|
|
<!-- :limit="1" --> |
|
|
|
<el-upload |
|
|
|
ref="upload" |
|
|
|
accept=".xlsx, .xls, .csv" |
|
|
|
:headers="headers" |
|
|
|
:file-list="fileList" |
|
|
|
:action="importExcelDatas.url" |
|
|
|
:disabled="isUploading" |
|
|
|
:on-progress="handleFileUploadProgress" |
|
|
|
:on-success="handleFileSuccess" |
|
|
|
:auto-upload="false" |
|
|
|
:on-change="handleChange" |
|
|
|
:data="dataList" |
|
|
|
drag |
|
|
|
> |
|
|
|
<i class="el-icon-upload"></i> |
|
|
|
<div class="el-upload__text"> |
|
|
|
将文件拖到此处，或 |
|
|
|
<em>点击上传</em> |
|
|
|
</div> |
|
|
|
<div class="el-upload__tip" slot="tip"> |
|
|
|
<el-checkbox |
|
|
|
v-model="updateSupport" |
|
|
|
@change="changeSupport" |
|
|
|
v-if="importExcelDatas.updateText != ''" |
|
|
|
> {{ importExcelDatas.updateText }}</el-checkbox |
|
|
|
> |
|
|
|
<el-link |
|
|
|
type="info" |
|
|
|
class="download-href" |
|
|
|
v-if="downloadBtn" |
|
|
|
@click="importTemplate" |
|
|
|
>下载模板</el-link |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="el-upload__tip" |
|
|
|
style="color: red" |
|
|
|
slot="tip" |
|
|
|
v-if="importExcelDatas.promptText != ''" |
|
|
|
> |
|
|
|
<p class="prompt-block">提示：</p> |
|
|
|
<div |
|
|
|
class="prompt-block" |
|
|
|
v-html="importExcelDatas.promptText" |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="submitFileForm">确 定</el-button> |
|
|
|
<el-button @click="cancel">关 闭</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { getToken } from "@/utils/auth"; |
|
|
|
|
|
|
|
import { DownloadTemplate } from "@/api/common/importExcelDatas"; |
|
|
|
export default { |
|
|
|
name: "importExcel", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
//显隐 |
|
|
|
improtVisible: false, |
|
|
|
//是否更新已存在模板 |
|
|
|
updateSupport: this.importExcelDatas ? (this.importExcelDatas.updateValue || false) : false, |
|
|
|
//传参数据 |
|
|
|
dataList: {}, |
|
|
|
//上传中不可选 |
|
|
|
isUploading: false, |
|
|
|
// 设置上传的请求头部 |
|
|
|
headers: { Authorization: "Bearer " + getToken() }, |
|
|
|
//是否显示下载模板按钮 |
|
|
|
downloadBtn: true, |
|
|
|
fileList: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.dataList = Object.assign({}, this.dataList, this.datas); |
|
|
|
this.dataList = Object.assign({}, this.dataList, { |
|
|
|
updateSupport: this.updateSupport, |
|
|
|
}); |
|
|
|
let DownloadTemplateUrl = this.importExcelDatas.DownloadTemplateUrl; |
|
|
|
if (DownloadTemplateUrl == "") { |
|
|
|
this.downloadBtn = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleClose() { |
|
|
|
this.$emit("improtExcelChildFn", false); |
|
|
|
}, |
|
|
|
// 文件上传中处理 |
|
|
|
handleFileUploadProgress(event, file, fileList) { |
|
|
|
this.isUploading = true; |
|
|
|
}, |
|
|
|
// 文件上传成功处理 |
|
|
|
handleFileSuccess(response, file, fileList) { |
|
|
|
this.$emit("improtExcelChildFn", false); //显示隐藏 |
|
|
|
this.isUploading = false; |
|
|
|
this.$refs.upload.clearFiles(); |
|
|
|
this.$alert(typeof(this.message) === 'function' ? this.message(response) : response.msg, "导入结果", { dangerouslyUseHTMLString: true ,customClass:this.customClass || 'message_box_alert' }); |
|
|
|
|
|
|
|
//需要增加刷新页面 |
|
|
|
this.$emit("getList"); |
|
|
|
}, |
|
|
|
//超出上传数量 |
|
|
|
handleChange(file, fileList) { |
|
|
|
this.fileList = fileList.slice(-1); |
|
|
|
}, |
|
|
|
|
|
|
|
//下载模板 |
|
|
|
importTemplate() { |
|
|
|
let DownloadTemplateUrl = this.importExcelDatas.DownloadTemplateUrl; |
|
|
|
this.importExcelDatas.visible = false; // 点击下载侯，关闭弹窗 |
|
|
|
DownloadTemplate(DownloadTemplateUrl).then((response) => { |
|
|
|
this.download(response.msg); |
|
|
|
}); |
|
|
|
}, |
|
|
|
cancel() { |
|
|
|
this.importExcelDatas.visible = false; |
|
|
|
}, |
|
|
|
//提交上传 |
|
|
|
submitFileForm() { |
|
|
|
this.$refs.upload.submit(); |
|
|
|
}, |
|
|
|
changeSupport(value) { |
|
|
|
this.updateSupport = value; |
|
|
|
this.dataList = Object.assign({}, this.dataList, { |
|
|
|
updateSupport: value, |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
datas: { |
|
|
|
handler: function (newVal, oldVal) { |
|
|
|
this.dataList = Object.assign({}, this.dataList, newVal); |
|
|
|
}, |
|
|
|
deep: true, |
|
|
|
}, |
|
|
|
visible: function (newVal, oldVal) { |
|
|
|
this.importExcelDatas.visible = newVal; |
|
|
|
this.$emit("getList"); |
|
|
|
}, |
|
|
|
}, |
|
|
|
props: ["importExcelDatas", "datas", "visible", 'message', 'customClass', 'width', ], |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.download-href { |
|
|
|
float: right; |
|
|
|
} |
|
|
|
.prompt-block { |
|
|
|
margin-bottom: 5px; |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style> |
|
|
|
.message_box_alert .el-message-box__content{ |
|
|
|
height: 300px; |
|
|
|
overflow-y: scroll; |
|
|
|
} |
|
|
|
</style> |
