gengby
2 years ago
13 changed files with 320 additions and 17 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 crudDict from '@/api/system/dict' |
||||
|
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：传递参数 |
||||
|
crudDict.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