<template>
|
<el-dialog
|
v-if="dialogShow"
|
width="40%"
|
:center="true"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
:title="dialogTitle"
|
:before-close="beforeClose"
|
:visible="dialogShow"
|
>
|
<el-row v-loading="loading" element-loading-text="数据导入中">
|
<el-col :span="24">
|
<el-form>
|
<el-form-item v-if="templateSettings.templateUrl != null" label="下载模板：" prop="lon">
|
<a class="blue-txt" style="color:#409EFF" :href="templateSettings.templateUrl" target="_blank">{{ templateSettings.templateName }}</a>
|
</el-form-item>
|
<el-form-item label="选取文件：" prop="lon">
|
<el-upload
|
:ref="fileSettings.ref"
|
class="upload-demo"
|
name="file"
|
:action="fileSettings.uploadUrl"
|
:before-upload="beforeAvatarUpload"
|
:on-success="handleUploadSuccess"
|
:on-change="file"
|
:multiple="fileSettings.multiple"
|
:limit="fileSettings.num"
|
:accept="fileSettings.accept"
|
:auto-upload="fileSettings.autoUpload"
|
>
|
<el-button size="small" type="primary">{{ fileSettings.title }}</el-button>
|
<div slot="tip" class="el-upload__tip">只能上传{{ fileSettings.num }}个格式为{{ fileSettings.accept }}的文件，且不超过{{ fileSettings.max }}kb</div>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="导入数据：" prop="lon">
|
<el-button style="margin-left: 10px;" size="small" type="success" @click="handleSubmit">开始导入</el-button>
|
</el-form-item>
|
</el-form>
|
</el-col>
|
</el-row>
|
</el-dialog>
|
</template>
|
<script>
|
export default {
|
props: {
|
importSetting: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
dialogShow: {
|
type: Boolean,
|
default: false
|
},
|
dialogTitle: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
|
loading: false,
|
/* 文件上传 */
|
fileSettings: {
|
ref: 'myFile',
|
title: '点击上传',
|
max: 1024, // 最大大小，单位kb
|
num: 1, // 支持上传文件个数
|
accept: '.csv', // 限制格式
|
uploadUrl: '', // 上传路径
|
type: 'text', // text/picture
|
multiple: false, // 是否支持批量上传
|
disabled: false, // 是否禁用
|
autoUpload: false, // 是否在选取文件后立即进行上传
|
onSuccess: null // 上传成功回调
|
},
|
isUpload:false,
|
/* 模板下载*/
|
templateSettings: {
|
templateName: '模板下载', // 名称
|
templateUrl: null // 下载地址
|
}
|
}
|
},
|
watch: {
|
dialogShow(val) {
|
console.log('dialogShow')
|
if (val) {
|
this.fileSettings = Object.assign(this.fileSettings, this.importSetting.fileSettings)
|
this.templateSettings = Object.assign(this.templateSettings, this.importSetting.templateSettings)
|
console.log(this.templateSettings)
|
this.fileSettings.onSuccess = this.importSetting.onSuccess
|
}
|
}
|
},
|
methods: {
|
/* 关闭窗口 */
|
beforeClose() {
|
if (this.loading) {
|
this.$confirm('正在执行导入,确认关闭？').then(() => {
|
this.importSetting.dialogShow = false
|
this.loading=false
|
}).catch()
|
} else {
|
this.importSetting.dialogShow = false
|
}
|
},
|
/* 校验文件 */
|
beforeAvatarUpload(file) {
|
const isFormat = this.fileSettings.accept.split(',').indexOf(file.name.substr(file.name.lastIndexOf('.'), file.name.length).toLocaleString()) > -1
|
if (!isFormat) {
|
this.$message.error(`上传文件只能是 ${this.fileSettings.accept} 格式!`)
|
}
|
const isLtMaxKB = file.size / 1024 < this.fileSettings.max
|
|
if (!isLtMaxKB) {
|
this.$message.error('上传文件大小不能超过 ' + this.fileSettings.max + 'kb!')
|
}
|
return isFormat && isLtMaxKB
|
},
|
/* 开始导入 */
|
handleSubmit() {
|
if(!this.isUpload){
|
this.$message.error(`请上传文件`)
|
}else {
|
this.$refs[this.fileSettings.ref].submit()
|
}
|
},
|
file(file,list){
|
if(file){
|
this.isUpload=true
|
}
|
|
},
|
/* 上传成功执行导入 */
|
handleUploadSuccess(response, file, fileList) {
|
if (this.fileSettings.onSuccess) {
|
this.loading = true
|
this.fileSettings.onSuccess(response, () => { this.loading = false; this.importSetting.dialogShow = false })
|
}
|
}
|
}
|
}
|
</script>
|
