<template>
|
<el-dialog
|
v-dialogDrag
|
:width="width"
|
:visible.sync="visible"
|
:destroy-on-close="true"
|
:close-on-click-modal="false"
|
append-to-body
|
title="上传文件"
|
class="avue-dialog"
|
>
|
<Divider left="30px" text="导入提示"></Divider>
|
<ul>
|
<li>
|
1.红色字体表示必输项
|
</li>
|
<li>
|
2.每次仅能最多导入10000条数据
|
</li>
|
</ul>
|
<Divider left="30px" text="excel文件，选择文件后会自动上传"></Divider>
|
<el-upload
|
:before-upload="beforeUpload"
|
:headers="uploadHeaders"
|
:on-change="uploadChange"
|
:on-error="onError"
|
:on-success="onSuccess"
|
:show-file-list="false"
|
accept=".xlsx, .xls"
|
action="/api/ubcs-code/codeClassify/importClassify"
|
class="upload-demo">
|
<el-button size="small" style="margin: 15px 35px" type="primary">浏览文件</el-button>
|
</el-upload>
|
<template #footer>
|
<el-button
|
:loading="downloadLoading"
|
size="small"
|
type="primary"
|
@click="downloadTemplateFun"
|
>下载导入模板
|
</el-button
|
>
|
<el-button size="small" @click="visible = false">关闭</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
// import {downloadErrorFile,downloadBatchImportApplyTemplate} from '@/api/template/templateAttr'
|
import {getToken} from "@/util/auth";
|
import func from "@/util/func";
|
import {validatenull} from "@/util/validate";
|
|
export default {
|
name: "upload-file",
|
props: {
|
paramVOS: {
|
type: Object,
|
default: {}
|
},
|
sourceData: {
|
//所属区域的上一区域选中数据
|
type: Object,
|
default: {}
|
},
|
dataStore: {
|
//弹窗时按钮所属区域选中数据
|
type: Array,
|
default: []
|
},
|
},
|
data() {
|
return {
|
flga: true,
|
pageLoading: null,
|
downloadLoading: false,
|
visible:false,
|
}
|
},
|
watch: {
|
visible: {
|
handler(newval, oldval) {
|
// console.log('newval',newval)
|
}
|
}
|
},
|
computed: {
|
uploadHeaders() {
|
return {
|
"Blade-Auth": "bearer " + getToken(),
|
};
|
},
|
width() {
|
if (!validatenull(this.paramVOS.width)) {
|
if (this.paramVOS.width.includes("px") || this.paramVOS.width.includes("%")) {
|
return this.paramVOS.width;
|
} else {
|
return this.paramVOS.width + "px";
|
}
|
} else {
|
return "60%";
|
}
|
},
|
fullscreen(){
|
console.log(this.paramVOS)
|
if(this.paramVOS.width || this.paramVOS.height){
|
return false;
|
}else if(this.paramVOS.form){
|
return false;
|
}
|
return true;
|
}
|
},
|
methods: {
|
//文件上传前
|
async beforeUpload(file) {
|
const fileType = file.name.split(".").pop();
|
if (fileType !== "xlsx" && fileType !== "xls") {
|
// 上传格式不符合要求，提示错误信息并取消上传
|
this.$message.error("只允许上传xlsx、xls格式的文件");
|
return Promise.reject(false);
|
}
|
this.pageLoading = this.$loading({
|
lock: true,
|
text: "文件上传中",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
return true;
|
},
|
// 文件上传成功
|
onSuccess(resbonse) {
|
if (Object.keys(resbonse.data).length === 0) {
|
this.$message.success("上传成功！");
|
this.dialogVisible = false;
|
return;
|
}
|
if (resbonse.data.fileOid) {
|
const fileName = resbonse.data.filePath.split("/").pop();
|
this.$message.error("请下载错误信息文件进行查看！");
|
downloadErrorFile({uuid: resbonse.data.fileOid}).then((res) => {
|
func.downloadFileByBlobHandler(res);
|
});
|
}
|
},
|
//点击下载模板
|
downloadTemplateFun() {
|
this.downloadLoading = true;
|
downloadBatchImportApplyTemplate({codeClassifyOid: this.codeClassifyOid}).then(res => {
|
this.$utilFunc.downloadFileByBlob(res.data, "模板文件.xls");
|
this.downloadLoading = false;
|
}).catch((res) => {
|
this.$message.warning(res)
|
this.downloadLoading = false;
|
})
|
},
|
//文件上传失败
|
onError(res) {
|
this.pageLoading.close();
|
},
|
//文件状态改变
|
uploadChange(file) {
|
if (file.status === "success" || file.status === "error") {
|
this.pageLoading.close();
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
ul {
|
color: rgb(188, 188, 188);
|
margin: 20px 0 20px 0;
|
padding: 0 0 0 30px;
|
list-style: none;
|
|
li {
|
margin-bottom: 5px;
|
font-size: 13px;
|
}
|
}
|
</style>
|
