<template>
|
<div style="display: flex">
|
<el-input :disabled="inputDisable" type="text" size="medium" v-model="viewName" style="width: 60%" @change="fileNameChange" ></el-input>
|
<el-upload
|
v-if="!disabled"
|
action=""
|
multiple
|
:limit="1"
|
:file-list="fileList"
|
:http-request="uploadSectionFile"
|
:show-file-list="false"
|
:before-upload="beforeUpload"
|
:on-success="handleSuccess"
|
:on-error="handleError"
|
>
|
<div style="">
|
<el-button v-if="!fileName" type="primary" size="small" style="margin-left:25px;;width:65px;height:36px;display: flex;align-items: center;justify-content: center">上传<i class="el-icon-upload el-icon--right"></i></el-button>
|
</div>
|
</el-upload>
|
|
<div style="display: flex">
|
<a v-if="!disabled&&fileName">
|
<el-button @click="downLoadFile(downloadUrl)" slot="tip" type="primary" size="small" style="margin-left:25px;width:65px;height:36px;display: flex;align-items: center;justify-content: center">
|
下载<i class="el-icon-download el-icon--right"></i>
|
</el-button>
|
</a>
|
<el-button v-if="!disabled&&fileName" slot="tip" type="primary" size="small " @click="handleClear" style="margin-left:5px;width:65px;height:36px;display: flex;align-items: center;justify-content: center"
|
>清除<i class="el-icon-delete el-icon--right"></i></el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import {emergencyPlanUpload} from "@/api/emergencyplan.js";
|
|
export default {
|
props: {
|
name: {
|
type: String
|
},
|
url: {
|
type: String
|
},
|
disabled: {
|
type: Boolean
|
}
|
},
|
data() {
|
return {
|
action: '',
|
viewName:'',
|
fileName: '',
|
filePath: '',
|
downloadUrl: '',
|
inputDisable:true,
|
fileList: [],
|
}
|
},
|
mounted() {
|
setTimeout(() => {
|
this.fileName = this.$props.name;
|
this.downloadUrl = this.$props.url;
|
this.viewName=this.$props.name
|
}, 100);
|
},
|
watch: {
|
name() {
|
this.fileName = this.$props.name;
|
this.downloadUrl = this.$props.url;
|
this.viewName=this.$props.name;
|
}
|
},
|
methods: {
|
|
downLoadFile(fileUrl){
|
let a = document.createElement('a')
|
// a.href = this.defaultUrl+`/upload/downloadNew?path=`+encodeURI(fileUrl)
|
a.href = process.env.BASE_API + '/upload/'+fileUrl
|
a.click();
|
},
|
|
downloadFile(){
|
|
},
|
uploadSectionFile(param) {
|
let form = new FormData();
|
form.append('file', param.file);
|
emergencyPlanUpload(form).then(res=>{
|
if (res.data.code==200){
|
this.fileName = res.data.result.fileName;
|
this.viewName=res.data.result.fileName;
|
this.downloadUrl=res.data.result.fileUrl
|
this.$nextTick(() => {
|
this.$emit('uploadFileSuccess', {
|
fileName: this.fileName,
|
fileUrl: this.downloadUrl
|
});
|
});
|
this.$message({
|
type:'success',
|
message:'上传成功',
|
duration:2000,
|
})
|
this.inputDisable = false;
|
}else {
|
this.$message.error('上传失败，系统未知错误！错误码为【500】');
|
}
|
})
|
},
|
|
handleClear(index){
|
this.fileName = '';
|
this.fileList = [];
|
this.viewName=""
|
this.$emit('uploadFileSuccess', {
|
fileUrl: '',
|
fileName: ''
|
});
|
this.inputDisable = true;
|
},
|
|
fileNameChange(event){
|
this.$emit('fileNameChange', event);
|
},
|
|
beforeUpload(file) {
|
},
|
handleError(err, file, fileList) {
|
this.$message.error('上传失败，系统未知错误！错误码为【500】');
|
},
|
handleSuccess(err, file, fileList) {
|
},
|
}
|
}
|
</script>
|
