管理系统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/sign/components/UploadDialog.vue

95 lines
3.1 KiB

<template>
<!-- 用户导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body :close-on-click-modal="false">
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
<!-- <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的学员数据 -->
<el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
</div>
<div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“xls”或“xlsx”格式文件!</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
</template>
<script>
import { importTemplate, } from '@/api/zs/clue';
import { importData } from '@/api/tool/common';
export default {
name: 'UploadDialog',
props: {
userOptions: {
type: Array,
default: []
}
},
data() {
return {
visible: false,
canSubmit: true,
isUploading: true,
ydtData: undefined,
// 用户导入参数
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: '',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/system/sign/importData',
},
};
},
methods: {
init(info = undefined) {
this.visible = true;
this.ydtData = undefined;
this.$nextTick(() => {
if (info) {
this.ydtData = this.deepClone(info);
}
});
},
/** 下载模板操作 */
importTemplate() {
importTemplate({ ydtData: this.ydtData }).then((response) => {
this.download(response.msg);
});
},
async handleUpload(data) {
const formData = new FormData();
formData.append('file', data.file);
this.isUploading = true;
importData(this.ydtData, formData).then((resp) => {
this.isUploading = false;
if (resp.code === 200) {
this.$alert(resp.msg, '导入结果', {
dangerouslyUseHTMLString: true
});
this.$emit('update:dialog.batchUpdateVisible', false);
this.$emit('refreshDataList');
}
});
},
closeDialog() {
this.$emit('update:dialog.batchUpdateVisible', false);
},
}
};
</script>