gengby
3 weeks ago
7 changed files with 328 additions and 45 deletions
@ -0,0 +1,148 @@ |
|||
<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 crudStock, { excelUpdateImport } from './stock' |
|||
import CRUD, { crud } from '@crud/crud' |
|||
import { MessageBox } from 'element-ui' |
|||
|
|||
export default { |
|||
name: 'UpdateUploadDialog', |
|||
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)) { |
|||
// 显示确认弹窗 |
|||
MessageBox.confirm( |
|||
'您确定要上传该文件吗？', |
|||
'提示', |
|||
{ |
|||
confirmButtonText: '确定', |
|||
cancelButtonText: '取消', |
|||
type: 'warning' |
|||
} |
|||
) |
|||
.then(() => { |
|||
// 用户确认后执行上传逻辑 |
|||
this.fileList.name = this.file1.name |
|||
this.fileList.url = '' |
|||
var formdata = new FormData() |
|||
formdata.append('file', this.file1.raw) |
|||
// excelImport：请求接口 formdata：传递参数 |
|||
crudStock.excelUpdateImport(formdata).then((res) => { |
|||
this.crud.notify('导入成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
|||
this.$emit('tableChanged4', '') |
|||
this.$emit('update:dialogShow', false) |
|||
}) |
|||
}) |
|||
.catch(() => { |
|||
// 用户取消上传 |
|||
this.crud.notify('已取消上传', CRUD.NOTIFICATION_TYPE.INFO) |
|||
}) |
|||
} else { |
|||
this.crud.notify('文件过大，请上传小于10MB的文件〜', CRUD.NOTIFICATION_TYPE.WARNING) |
|||
} |
|||
// 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：传递参数 |
|||
// crudStock.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