'lct'

Your Name

2022-04-06 37b718547bc441c7502f0bfcf86209efe253851b

 src/views/contingencyplan/uploadFile.vue

对比新文件
@@ -0,0 +1,130 @@
<template>
  <div style="display: flex">
      <el-input :disabled="true" type="text" size="medium" v-model="viewName" style="width: 60%" ></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: '',
        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,
                  })
              }else {
                  this.$message.error('上传失败，系统未知错误！错误码为【500】');
              }
          })
      },

      handleClear(){
          this.fileName = '';
          this.fileList = [];
          this.viewName=""
          this.$emit('uploadFileSuccess', {
              fileUrl: '',
              fileName: ''
          });
      },

      beforeUpload(file) {
      },
      handleError(err, file, fileList) {
          this.$message.error('上传失败，系统未知错误！错误码为【500】');
      },
      handleSuccess(err, file, fileList) {
      },
  }
}
</script>