saber/src/views/tentative/importDialog.vue

<template>
       <el-dialog title="参数导入" 
        :visible.sync="importFormVisible" 
        custom-class="flow-design-dialog" 
        append-to-body
        destroy-on-close>
       <el-form :label-position="left" label-width="80px" :model="formLabelAlign">
          <el-form-item label="模板上传:">
            <!-- <el-input v-model="formLabelAlign.name"></el-input> -->
            <el-upload
              :auto-upload="false"
              ref="file3"
              class="upload-demo"
              action="#"
              accept=".xls,.xlsx"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-change="uploadImportData"
                :on-exceed="handleExceed"
              :limit="1"
             
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传.xls,.xlsx文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="数据覆盖:" label-width="90px"
           :rules="[
            { required: true, message: '请选择数据是否覆盖', trigger: 'blur' },
            ]"
          >
            <el-switch
              v-model="formLabelAlign.isCovered"
              active-text="是"
              active-color="#13ce66"
              inactive-color="#ff4949"
              inactive-text="否"
              active-value="1"
              inactive-value="0"
              >
            </el-switch>
          </el-form-item>
          <el-form-item label="模板下载">
            <!-- <el-input v-model="formLabelAlign.type"></el-input> -->
             <el-button
                  @click="downloadExcel()" 
                  type="primary"
                  size="mini">点击下载
             </el-button>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="importFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="importSubmit ">确 定</el-button>
        </div>
      </el-dialog>
</template>

<script>
import {importParam} from "@/api/tentative/testpram";
import {importTemperaturetParam} from "@/api/tentative/testtempreature";
export default {
  props:{
    importDialogType:Number,
    temonLoad:Function,
    paramLoad:Function
  },
    data(){
        return{
            importFormVisible:false,
            formLabelAlign: {//表格数据
                name: '',
                region: '',
                type: '',
                isCovered:"1",
            },
             //文件上传
         fileList: [],
         formData:{}
       
        }
    },
  
  
    methods:{
        show(){
            this.importFormVisible=true;
            this.fileList=[]
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1个文件，请删除原文件后再选择文件上传`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        uploadImportData(file){
            console.log(this.fileList,'fileList');
            console.log(file,'file');
            let formData = new FormData()
            formData.append('file', file.raw);
            let pictureList =[]
            pictureList.push(file.name)
            this.fileList=pictureList.map(item=>{
                 return {
                    name: item,
                    url: item,
                    raw:file.raw
                }
            }) 
        },
        downloadExcel () {//下载excel表
        console.log('下载');
        const link = document.createElement('a')
        // downExcelFile(this.from.id).then((res)=>{
        //   // 创建Blob对象，设置文件类型
        //   let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
        //   let objectUrl = URL.createObjectURL(blob) // 创建URL
        //   link.href = objectUrl
        //   link.download = this.from.extension // 自定义文件名
        //   link.click() // 下载文件
        //   URL.revokeObjectURL(objectUrl); // 释放内存
        // })
        },
        //确定导入
        importSubmit(){
          if(this.fileList.length>0){
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
             let formData = new FormData()
            formData.append('file', this.fileList[0].raw);
            formData.append('isCovered', this.formLabelAlign.isCovered);
              if(this.importDialogType===1){
                importParam(formData).then(() => {
                  this.$message({
                  message: '上传文件成功',
                  type: 'success'
                  })
                  loading.close();
                   this.importFormVisible=false;
                   this.temonLoad();
              }).catch(() => {
                  loading.close();
              });
            }else{
                 importTemperaturetParam(formData).then(() => {
                    this.$message({
                    message: '上传文件成功',
                    type: 'success'
                    })
                    loading.close();
                    this.importFormVisible=false;
                     this.paramLoad();
                }).catch(() => {
                      loading.close();
                  })
                   
            }
            
          }else{
            // console.log('上次文件');
            this.$message.warning('请上传模板')
          }
             

            this.$refs.file3.clearFiles();
          
        },
    }
}
</script>

<style>

</style>