<template>
|
<el-dialog
|
v-dialogDrag
|
:close-on-click-modal="false"
|
:title="title"
|
:visible.sync="visible"
|
width="40%"
|
append-to-body
|
class="avue-dialog"
|
style="margin-top: -20vh !important;"
|
>
|
<Divider left="30px" text="导入提示">
|
</Divider>
|
<ul v-if="tipList.length === 0" style="color: #f33939">
|
<li>
|
请点击浏览文件进行上传
|
</li>
|
</ul>
|
|
<ul style="color: #f33939" v-if="tipList.length >=1 ">
|
<li v-for="(item, index) in tipList" :key="index">{{ index + 1 }}: {{ item }} 。</li>
|
</ul>
|
<Divider left="30px" text="选择文件后会自动上传"></Divider>
|
<el-upload
|
:action="fileUrl"
|
:before-upload="beforeUpload"
|
:data="fileData"
|
:headers="uploadHeaders"
|
:on-change="uploadChange"
|
:on-error="onError"
|
:on-success="onSuccess"
|
:show-file-list="false"
|
class="upload-demo">
|
<el-button size="small" style="margin: 15px 35px" type="primary">浏览文件</el-button>
|
</el-upload>
|
<template #footer>
|
<el-button size="small" @click="visible = false">关闭</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {getToken} from "@/util/auth";
|
import func from "@/util/func";
|
import {validatenull} from "@/util/validate";
|
|
export default {
|
name: "upload-file",
|
props: {
|
// 控制上传类型 格式为: ['xls', 'xlsx'],
|
fileType: {
|
type: Array,
|
default: () => []
|
},
|
// 对话框头部名称
|
title: {
|
type: String,
|
default: '上传文件'
|
},
|
// 必传 上传的地址
|
fileUrl: {
|
type: String,
|
default: ''
|
},
|
// 请求地址 携带参数
|
fileData: {
|
type: Array,
|
default: () => []
|
},
|
// 导入提示文字 tipList:["导入模板中标明红色字体的为必输项","部门列上下级关系必须按照反斜杠隔开(/)"]
|
tipList:{
|
type:Array,
|
default:() => []
|
}
|
},
|
data() {
|
return {
|
flga: true,
|
pageLoading: null,
|
downloadLoading: false,
|
visible: false,
|
}
|
},
|
created() {
|
},
|
watch: {
|
visible: {
|
handler(newval, oldval) {
|
// console.log('newval',newval)
|
}
|
}
|
},
|
computed: {
|
uploadHeaders() {
|
return {
|
"Authorizationtoken": getToken(),
|
};
|
},
|
},
|
methods: {
|
//文件上传前
|
async beforeUpload(file) {
|
// 获取文件扩展名
|
const fileExtension = file.name.split(".").pop().toLowerCase(); // 转换为小写以避免大小写不匹配的问题
|
if (this.fileType) {
|
if (!this.fileType.includes(fileExtension)) {
|
// 上传格式不符合要求，提示错误信息并取消上传
|
this.$message.error(`只允许上传${this.fileType.toString()}格式的文件`);
|
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) {
|
console.log(resbonse);
|
if (resbonse.code === 200) {
|
this.$message.success("导入成功！");
|
this.visible = false;
|
this.$emit('updata');
|
} else {
|
this.$message.error(resbonse.msg);
|
}
|
},
|
//文件上传失败
|
onError(res) {
|
this.pageLoading.close();
|
this.$message.error(res);
|
},
|
//文件状态改变
|
uploadChange(file) {
|
console.log( this.pageLoading);
|
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>
|
