<template>
|
<el-dialog
|
v-dialogDrag
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
:visible.sync="visible"
|
:width="width"
|
append-to-body
|
class="avue-dialog"
|
title="上传文件"
|
style="margin-top: -20vh !important;"
|
>
|
<Divider left="30px" text="导入提示"></Divider>
|
<ul>
|
<li>
|
请点击浏览文件进行上传
|
</li>
|
</ul>
|
<Divider left="30px" text="选择文件后会自动上传"></Divider>
|
<el-upload
|
:before-upload="beforeUpload"
|
:data="fileData"
|
:headers="uploadHeaders"
|
:on-change="uploadChange"
|
:on-error="onError"
|
:on-success="onSuccess"
|
:show-file-list="false"
|
action="/api/vciFileUploadController/uploadFile"
|
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 {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,
|
}
|
},
|
created() {
|
console.log(this.sourceData);
|
},
|
watch: {
|
visible: {
|
handler(newval, oldval) {
|
// console.log('newval',newval)
|
}
|
}
|
},
|
computed: {
|
uploadHeaders() {
|
return {
|
"Authorizationtoken": getToken(),
|
};
|
},
|
fileData() {
|
return {
|
ownbizOid: this.sourceData.oid,
|
ownBtmName: this.sourceData.btmname,
|
secretGrade: -1,
|
fileDocClassify: '',
|
updateFileFlag: true,
|
}
|
},
|
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 "40%";
|
}
|
},
|
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 fileExtension = file.name.split(".").pop().toLowerCase(); // 转换为小写以避免大小写不匹配的问题
|
const allowedExtensions = this.paramVOS.fileType || ['css', 'csv', 'doc', 'gif', 'html', 'jpe', 'jpg', 'jpeg', 'png', 'js', 'json',
|
'mp3', 'mp4', 'xlsx', 'xml', 'zip', 'xhtml', 'wps', 'ppt', 'xls', 'word', 'pdf', 'txt'];
|
|
// 检查文件扩展名是否在允许的文件扩展名数组中
|
if (!allowedExtensions.includes(fileExtension)) {
|
// 上传格式不符合要求，提示错误信息并取消上传
|
this.$message.error(`只允许上传${allowedExtensions.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) {
|
if (resbonse.code === 200) {
|
this.$message.success("上传成功！");
|
this.dialogVisible = false;
|
}else {
|
this.$message.error(resbonse.msg);
|
}
|
},
|
//文件上传失败
|
onError(res) {
|
this.pageLoading.close();
|
this.$message.error(res);
|
},
|
//文件状态改变
|
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>
|
