vue自定义导入弹框

<template>
  <el-dialog
    :title="title"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="visible"
    lock-scroll
    width="555px"
  >
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="数据来源:">
        <el-select v-model="form.dataSource" placeholder="请选择" size="small">
          <el-option
            v-for="item in sourceList"
            :key="item.dictKey"
            :label="item.dictValue"
            :value="item.dictKey"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板上传:">
        <el-upload
          :action="importUrl"
          drag
          :headers="{ 'Blade-Auth': 'bearer ' + $store.getters.token }"
          :on-success="handleSuccess"
          :show-file-list="false"
          accept=".xls,.xlsx"
          :limit="1"
          ref="upload"
          :before-upload="beforeUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text" :loading="btnLoading">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            请上传.xls .xlsx 标准格式文件
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="模板下载:">
        <el-button type="primary" @click="downLoad" size="mini">
          点击下载<i class="el-icon-download el-icon--right"></i>
        </el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      width="30%"
      title="提示"
      :visible.sync="tipVisible"
      append-to-body
      @close="onClose"
    >
      <div class="tipDialog">
        <li v-for="(item, index) in this.tipContent" :key="index">
          {{ index + 1 + '、' + item }}
        </li>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getDataSource } from '@/api/console/water-user-file.js'
export default {
  props: {
    title: {
      type: String,
      default: '数据导入',
    },
  },
  data() {
    return {
      form: {
        dataSource: '',
      },
      sourceList: [], // 数据来源
      visible: false,
      btnLoading: false,
      tipVisible: false, // 提示弹框
      tipContent: '', // 弹框提示内容
    }
  },

  computed: {
    importUrl() {
      return `/api/swp-base-manager/manage-user-water/excelImport?sourceType=${this.form.dataSource}`
    },
  },

  mounted() {
    this.getSourceList()
  },

  methods: {
    init() {
      this.visible = true
    },

    getSourceList() {
      getDataSource().then((res) => {
        if (res.data.code == 200) {
          this.sourceList = res.data.data
          this.form.dataSource = this.sourceList[0].dictKey
        }
      })
    },

    // 下载模板
    downLoad() {
      window.open(
        'https://117.172.159.251:9093/swp/nanjiang/用水户档案导入模版.xlsx'
      )
    },
    beforeUpload() {
      this.btnLoading = true
    },

    handleSuccess(res) {
      this.btnLoading = false
      if (res.code == 200) {
        this.tipContent = res.data
        this.tipVisible = true
      } else {
        this.$message({ message: '导入失败', type: 'error', duration: 1000 })
      }
      this.$refs.upload.clearFiles()
    },

    // 上传失败
    handleError() {
      this.$message({ message: '导入失败', type: 'error', duration: 1000 })
      this.$refs.upload.clearFiles()
    },

    // 关闭提示弹框
    onClose() {
      this.visible = false
      this.$emit('refreshDataList')
    },
  },
}
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding: 40px 30px !important;
}

.grid-content {
  &:first-child {
    border-right: 1px solid #dcdfe6;
  }

  text-align: center;

  p {
    text-align: center;
  }

  img {
    width: 128px;
    margin: 10px 0;
  }
}
</style>