vue批量导入组件封装 简单替换数据直接用

一、页面结构 

# 
<template>
  <div>
    <el-button type="primary" size="small" @click="importFn">批量导入</el-button>

    <importTestData :visible.sync="visible" @auto='auto'/>
  </div>
</template>
<script>
import importTestData from '@/views/importTestData.vue'
export default {
  components: { importTestData },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    importFn () {
      this.visible = true
    }
  }
}
</script>
<style scoped lang="scss">

</style>

注意：记的引入的组件换路径，在引入的组件标签上记得挂在一下自己的列表数据的初始化函数，在下方submit函数中我用$emit触发了该方法

<template>
  <div>
    <el-dialog title="批量导入" :visible.sync="visible" width="500px" :append-to-body="true" :close-on-click-modal="false"
               :modal-append-to-body="true" :before-close="close" @open="open" destroy-on-close>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="纳税类别" prop="fileName">
          <div>
            <span style="color: rgba(0, 0, 0, 0.65)" class="fs-14">请先下载模版，编辑完成后再导入</span>
            <el-button type="text" icon="el-icon-download" class="ml-5 fs-14" @click="downloadTemplate">下载模版</el-button>
          </div>
          <el-upload action="" :http-request="(e) =>{uploadFile(e, form.file)}" :show-file-list="false" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                     v-if="!form.fileName">
            <el-button type="primary" plain icon="el-icon-upload2" class="upload-btn">上传文件</el-button>
          </el-upload>
          <div class="fs-14" v-else>
            <a style="text-decoration: underline">{{ form.fileName }}</a>
            <i class="el-icon-circle-close ml-5 cursor" @click="clearFile"></i>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="close">取消</el-button>
        <el-button size="small" type="primary" @click="submit" :loading="loading">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="导入结果" :visible.sync="result" width="500px" :append-to-body="true" :close-on-click-modal="false"
               :modal-append-to-body="true"   destroy-on-close>
      <img v-if="wrongNum===0" width src="@/assets/img/user/success.png" alt="">
      <img v-else  width src="@/assets/img/user/error.png" alt="">
      <div class="text-box">导入文档<el-button size="small" type="text">{{form.fileName}}</el-button>共{{total}}条数据，错误{{wrongNum}}条</div>
      <div class="text-box" v-if="wrongNum"><el-button size="small" type="text" @click="handleExport">导出错误结果文件</el-button>— — — — — 修改完成然后<el-button size="small" type="text" @click="uploadAgain">再次上传</el-button></div>
      <span slot="footer">
        <el-button size="small" @click="closeFn">取消</el-button>
        <el-button size="small" type="primary" @click="closeFn" >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { setFocus } from '@/api'
export default {
  data () {
    return {
      result: false,
      form: {
        fileName: '', // 用来表单验证的文件名称
        file: '' // 员工文件
      },
      wrongUrl: '',
      loading: false,
      rules: {
        fileName: []
      },
      total: 0,
      wrongNum: 0,
      correctList: [],
      wrongList: []
    }
  },
  props: {
    // 控制弹窗显隐
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 再次上传
    uploadAgain () {
      this.closeFn()
      this.$emit('update:visible', true)
    },
    closeFn () {
      this.result = false
      this.reset()
    },
    // 打开弹窗时触发
    open () {
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        this.reset()
      })
    },
    // 上传图片
    uploadFile (e) {
      const fileName = e.file.name
      let fileType
      const i = fileName.lastIndexOf('.')
      if (i > -1) {
        fileType = fileName.slice(i + 1)
      }
      if (!['xls', 'xlsx'].includes(fileType)) {
        this.$message.error('上传文件有误，只支持xls、xlsx文件!')
        return
      }
      this.form.fileName = fileName
      this.form.file = e.file
    },
    // 删除文件
    clearFile () {
      this.form.file = ''
      this.form.fileName = ''
    },
    close () {
      this.$emit('update:visible', false)
      this.reset()
    },
    // 确认
    submit () {
      if (!this.form.fileName || this.form.fileName === '') return this.$message.error('请上传纳税类别文件')
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true
          const { data } = await this.$http.postFormData(setFocus.importTestData, { multipartFile: this.form.file })
          if (data.code === '1') {
            console.log(data)
            this.total = data.data.total
            this.wrongNum = data.data.wrongNum
            this.wrongUrl = data.data.wrongUrl
            this.result = true
            this.$emit('auto')
            console.log(this.wrongNum)
            // this.$parent.getDataList()
          } else if (data.code + '' === '555') {
            this.$message.error(data.msg)
          } else {
            this.$message.error('数据导入失败')
          }
          this.loading = false
          this.$emit('update:visible', false)
        } else {
          return false
        }
      })
    },
    // 重置
    reset () {
      this.form = this.$options.data().form
    },
    // 导出
    handleExport () {
      // this.$http.post(taxSubmit.exportList, this.form, { responseType: 'blob' }).then((res) => {
      //   if (res.data.code + '' === '500') {
      //     this.$message.error(res.data.msg)
      // } else {
      // const blob = new Blob([this.wrongUrl], {
      //   type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      // })
      const fileName = '错误结果文件.xlsx'
      if ('download' in document.createElement('a')) {
        // 支持a标签download的浏览器
        const link = document.createElement('a') // 创建a标签
        link.download = fileName // a标签添加属性
        link.style.display = 'none'
        link.href = this.wrongUrl
        document.body.appendChild(link)
        link.click() // 执行下载
        URL.revokeObjectURL(link.href) // 释放url
        document.body.removeChild(link) // 释放标签
      } else {
        navigator.msSaveBlob(this.wrongUrl, fileName)
      }
      // }
      // })
    },
    // 下载模板
    downloadTemplate () {
      const link = document.createElement('a') // 创建a标签
      link.download = '算税类别模板.xlsx' // 由于下方的下载链接会跨域，所以此处的download属性失效，文件名并不会修改，如有需求，可以使用new XMLHttpRequest()解决
      link.style.display = 'none'
      link.href = 'http://lsqk.oss-cn-beijing.aliyuncs.com/%E7%BA%B3%E7%A8%8E%E7%B1%BB%E5%88%AB%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xlsx'
      document.body.appendChild(link)
      link.click() // 执行下载
      document.body.removeChild(link) // 释放标签
    }
  }
}
</script>

<style scoped lang="scss">
.upload-btn {
  width: 200px;
  height: 40px;
  background: #f9ffff;
  border: 1px dotted #00b5b9;
}

.remark {
  padding: 12px 26px;
  border: 1px dashed #d9d9d9;

  > div {
    .el-icon-warning {
      color: #faad14;
      font-size: 19px;
      margin-right: 6px;
    }

    span {
      font-size: 16px;
      font-weight: bold;
    }
  }

  > ul {
    list-style: none;
    padding-left: 26px;
    margin: 0;
    > li {
      margin-top: 9px;
    }
  }
}

::v-deep .el-checkbox__label,
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: rgba(0, 0, 0, 0.65);
}

::v-deep .el-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #f0eff2;
  }

  .el-dialog__body {
    padding: 40px 50px 0;
    text-align: center;
  }

  .el-dialog__footer {
    padding: 24px;
    text-align: right;
  }
}
.prompt-img{
  margin: 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}
.text-box{
  text-align: center;
}
::v-deep .el-form-item__content{
  margin-left: 0 !important;
}
</style>

注释部分不用打开。。。