122 lines
3.9 KiB
Vue
122 lines
3.9 KiB
Vue
<template>
|
||
<el-dialog :title="upload.title" :visible.sync="dialogVisible" width="400px" append-to-body>
|
||
<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 text-center" slot="tip">
|
||
<div class="el-upload__tip" slot="tip">
|
||
<el-checkbox v-model="upload.updateSupport"/>
|
||
是否更新已经存在的数据
|
||
</div>
|
||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||
<el-link v-if="isDownload" type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
|
||
@click="importTemplate">下载模板
|
||
</el-link>
|
||
</div>
|
||
</el-upload>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitFileForm" :disabled="!isUpload">确 定</el-button>
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import request, {getBaseHeader} from "@/utils/request";
|
||
|
||
export default {
|
||
name: "ImportCommon",
|
||
data() {
|
||
return {
|
||
// 用户导入参数
|
||
upload: {
|
||
// 弹出层标题（用户导入）
|
||
title: "",
|
||
// 设置上传的请求头部
|
||
headers: getBaseHeader(),
|
||
// 是否禁用上传
|
||
isUploading: false,
|
||
// 是否更新已经存在的数据
|
||
updateSupport: 0,
|
||
// 上传的地址
|
||
url: "/import-data",
|
||
// 下载模板地址
|
||
getUrl: "/get-import-template",
|
||
},
|
||
dialogVisible: false,
|
||
baseUrl: process.env.VUE_APP_BASE_API + '/admin-api',
|
||
isUpload: false,
|
||
isDownload: false,
|
||
}
|
||
},
|
||
methods: {
|
||
open(data) {
|
||
if (data.url) {
|
||
this.isUpload = true
|
||
}
|
||
if (data.getUrl) {
|
||
this.isDownload = true
|
||
}
|
||
this.upload = Object.assign(this.upload, data)
|
||
if (this.isUpload) {
|
||
this.upload.url = this.baseUrl + data.url
|
||
}
|
||
if (this.isDownload) {
|
||
this.upload.getUrl = this.baseUrl + data.getUrl
|
||
}
|
||
this.dialogVisible = true
|
||
},
|
||
// 文件上传中处理
|
||
handleFileUploadProgress(event, file, fileList) {
|
||
this.upload.isUploading = true;
|
||
},
|
||
// 文件上传成功处理
|
||
handleFileSuccess(response, file, fileList) {
|
||
this.dialogVisible = false
|
||
if (response.code !== 0) {
|
||
this.$modal.msgError(response.msg)
|
||
return;
|
||
}
|
||
this.upload.isUploading = false;
|
||
this.$refs.upload.clearFiles();
|
||
// 拼接提示语
|
||
let data = response.data;
|
||
let text = '导入成功数量：' + data.createNames.length;
|
||
for (const name of data.createNames) {
|
||
text += '<br /> ' + name;
|
||
}
|
||
text += '<br />更新成功数量：' + data.updateNames.length;
|
||
for (const name of data.updateNames) {
|
||
text += '<br /> ' + name;
|
||
}
|
||
text += '<br />更新失败数量：' + Object.keys(data.failureNames).length;
|
||
for (const name in data.failureNames) {
|
||
text += '<br /> ' + name + '：' + data.failureNames[name];
|
||
}
|
||
this.$alert(text, "导入结果", {dangerouslyUseHTMLString: true});
|
||
this.$emit('success')
|
||
},
|
||
/** 下载模板操作 */
|
||
importTemplate() {
|
||
request({
|
||
url: this.upload.getUrl,
|
||
method: 'get',
|
||
responseType: 'blob'
|
||
}).then(res => {
|
||
this.$download.excel(res, `${this.upload.title}模板.xls`);
|
||
})
|
||
},
|
||
// 提交上传文件
|
||
submitFileForm() {
|
||
this.$refs.upload.submit();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
</style>
|