170 lines
4.0 KiB
Vue
170 lines
4.0 KiB
Vue
<template>
|
||
<el-dialog
|
||
:title="title"
|
||
:visible.sync="dialogVisible"
|
||
:close-on-click-modal="false"
|
||
width="500px"
|
||
@close="handleClose"
|
||
>
|
||
<el-form ref="uploadForm" :model="form" label-width="80px">
|
||
<el-form-item label="选择文件">
|
||
<el-upload
|
||
ref="upload"
|
||
class="upload-demo"
|
||
action="#"
|
||
drag
|
||
:http-request="customUpload"
|
||
:headers="uploadHeaders"
|
||
:data="uploadData"
|
||
:before-upload="beforeUpload"
|
||
:on-success="handleSuccess"
|
||
:on-error="handleError"
|
||
:on-change="handleChange"
|
||
:auto-upload="false"
|
||
:file-list="fileList"
|
||
accept=".xlsx,.xls"
|
||
>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<div class="el-upload__tip" slot="tip">
|
||
只能上传Excel文件，且不超过10MB
|
||
</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="handleClose">取 消</el-button>
|
||
<el-button type="primary" @click="submitUpload" :loading="uploading">
|
||
{{ uploading ? '上传中...' : '确 定' }}
|
||
</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'DialogImportFile',
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: '导入Excel文件'
|
||
},
|
||
uploadData: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
uploadHeaders: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
source: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
dialogVisible: this.visible,
|
||
fileList: [],
|
||
uploading: false,
|
||
form: {}
|
||
};
|
||
},
|
||
watch: {
|
||
visible(newVal) {
|
||
this.dialogVisible = newVal;
|
||
}
|
||
},
|
||
methods: {
|
||
handleClose() {
|
||
this.$emit('update:visible', false);
|
||
this.$emit('close');
|
||
this.$refs.upload.clearFiles();
|
||
this.fileList = [];
|
||
},
|
||
|
||
handleChange(file, fileList) {
|
||
this.fileList = fileList.slice(-1);
|
||
},
|
||
|
||
beforeUpload(file) {
|
||
const isExcel =
|
||
file.type === 'application/vnd.ms-excel' ||
|
||
file.type ===
|
||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
||
const isLt10M = file.size / 1024 / 1024 < 10;
|
||
|
||
if (!isExcel) {
|
||
this.$message.error('只能上传Excel文件！');
|
||
return false;
|
||
}
|
||
|
||
if (!isLt10M) {
|
||
this.$message.error('上传文件大小不能超过10MB！');
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
|
||
// 自定义上传方法
|
||
async customUpload(options) {
|
||
const { file, onSuccess, onError } = options;
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('file', file);
|
||
this.$api.salesAPI.importAllFile(formData,this.source).then(response => {
|
||
console.log('上传成功', response);
|
||
}).catch(error => {
|
||
console.error('上传失败', error);
|
||
});
|
||
|
||
} catch (error) {
|
||
onError(error);
|
||
}
|
||
},
|
||
|
||
submitUpload() {
|
||
if (this.fileList.length === 0) {
|
||
this.$message.warning('请先选择文件');
|
||
return;
|
||
}
|
||
|
||
this.uploading = true;
|
||
this.$refs.upload.submit();
|
||
},
|
||
|
||
handleSuccess(response, file, fileList) {
|
||
this.uploading = false;
|
||
this.$message.success('文件上传成功');
|
||
const _self = this;
|
||
setTimeout(() => {
|
||
_self.$emit('success', response, file, fileList);
|
||
_self.handleClose();
|
||
}, 1000);
|
||
},
|
||
|
||
handleError(error, file, fileList) {
|
||
this.uploading = false;
|
||
this.$message.error('文件上传失败');
|
||
this.$emit('error', error, file, fileList);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.upload-demo {
|
||
width: 100%;
|
||
}
|
||
.dialog-footer{
|
||
padding-right: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|