You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
2.7 KiB
117 lines
2.7 KiB
7 months ago
|
<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>
|
||
|
|
|