6 changed files with 149 additions and 44 deletions
@ -0,0 +1,116 @@ |
|||
<template> |
|||
<el-dialog |
|||
title="导入Excel文件" |
|||
append-to-body |
|||
:visible.sync="dialogVisible" |
|||
destroy-on-close |
|||
width="400px" |
|||
:show-close="true" |
|||
@close="close" |
|||
@open="open" |
|||
> |
|||
<el-upload |
|||
ref="upload" |
|||
class="upload-demo" |
|||
action="" |
|||
drag |
|||
:on-exceed="is_one" |
|||
:limit="1" |
|||
:auto-upload="false" |
|||
:multiple="false" |
|||
:show-file-list="true" |
|||
:on-change="uploadByJsqd" |
|||
:file-list="fileList" |
|||
accept=".xlsx,.xls" |
|||
> |
|||
<i class="el-icon-upload" /> |
|||
<div class="el-upload__text"> |
|||
将文件拖到此处，或 |
|||
<em>点击上传</em> |
|||
</div> |
|||
<div slot="tip" class="el-upload__tip">只能上传Excel文件，且不超过10MB</div> |
|||
</el-upload> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="dialogVisible = false">取 消</el-button> |
|||
<el-button type="primary" @click="submit">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudDevice from '@/api/acs/device/device' |
|||
import CRUD, { crud } from '@crud/crud' |
|||
|
|||
export default { |
|||
name: 'UploadDialog', |
|||
mixins: [crud()], |
|||
components: {}, |
|||
props: { |
|||
dialogShow: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
openParam: { |
|||
type: String |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
fileList: [], |
|||
file1: '' |
|||
} |
|||
}, |
|||
watch: { |
|||
dialogShow: { |
|||
handler(newValue, oldValue) { |
|||
this.dialogVisible = newValue |
|||
} |
|||
}, |
|||
openParam: { |
|||
handler(newValue, oldValue) { |
|||
this.opendtlParam = newValue |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
open() { |
|||
}, |
|||
close() { |
|||
this.$emit('update:dialogShow', false) |
|||
}, |
|||
is_one() { |
|||
this.crud.notify('只能上传一个excel文件！', CRUD.NOTIFICATION_TYPE.WARNING) |
|||
}, |
|||
// 文件校验方法 |
|||
beforeAvatarUpload(file) { |
|||
// 不能导入大小超过2Mb的文件 |
|||
if (file.size > 10 * 1024 * 1024) { |
|||
return false |
|||
} |
|||
return true |
|||
}, |
|||
// 文件发生改变就会触发的事件 |
|||
uploadByJsqd(file) { |
|||
this.file1 = file |
|||
}, |
|||
submit() { |
|||
if (this.beforeAvatarUpload(this.file1)) { |
|||
this.fileList.name = this.file1.name |
|||
this.fileList.url = '' |
|||
var formdata = new FormData() |
|||
formdata.append('file', this.file1.raw) |
|||
// excelImport：请求接口 formdata：传递参数 |
|||
crudDevice.excelImport(formdata).then((res) => { |
|||
this.crud.notify('导入成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
|||
this.$emit('tableChanged3', '') |
|||
this.$emit('update:dialogShow', false) |
|||
}) |
|||
} else { |
|||
this.crud.notify('文件过大，请上传小于10MB的文件〜', CRUD.NOTIFICATION_TYPE.WARNING) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue