管理系统PC前端
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.
dm-manage-web/src/views/zs/clue/components/UploadDialog.vue

85 lines
2.9 KiB

2 years ago
<template>
<el-dialog :title="title" :close-on-click-modal="false" append-to-body :visible.sync="visible" width="400px" @close="closeDialog">
<el-upload ref="upload" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?ydtData=' + ydtData" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip">
<el-link type="info" style="font-size: 12px" @click="importTemplate">下载模板</el-link>
</div>
<div slot="tip" class="el-upload__tip" style="color: red">提示仅允许导入xlsxlsx格式文件</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm"> </el-button>
<el-button @click="closeDialog"> </el-button>
</div>
</el-dialog>
</template>
<script>
import { importTemplate } from '@/api/zs/clue';
import { importData } from '@/api/tool/common';
import { getToken } from '@/utils/auth'
export default {
name: 'UploadDialog',
data() {
return {
visible: false,
canSubmit: true,
isUploading: true,
ydtData: false,
title: '学员信息导入',
upload: {
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/zs/clue/importData',
},
};
},
methods: {
init(info = false) {
this.visible = true;
this.ydtData = false;
this.$nextTick(() => {
if (info) {
this.ydtData = info;
this.title = "一点通-" + this.title;
}
});
},
/** 下载模板操作 */
importTemplate() {
this.download('zs/clue/importTemplate?ydtData=' + this.ydtData, {}, `clue_template_${new Date().getTime()}.xlsx`);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.visible = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
dangerouslyUseHTMLString: true
});
this.$emit('update:dialog.batchUpdateVisible', false);
this.$emit('refreshDataList');
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
closeDialog() {
this.$emit('update:dialog.batchUpdateVisible', false);
},
}
};
</script>