el-upload导入功能

<el-col :span="1.5" style="height: 29px; margin-top: -3px;">

          <el-button

            type="success"

            plain

            icon="el-icon-upload2"

            size="mini"

            @click="handleImport"

          >导入病历</el-button>

          <el-tooltip class="item" style="height: 29px;" effect="dark" content="导入功能" placement="top">

            <el-button type="text" icon="el-icon-question"></el-button>

          </el-tooltip>

        </el-col>

 

<!-- 导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
      :close-on-click-modal="false"
    >
      <!-- :action="upload.url + '?updateSupport=' + upload.updateSupport" -->
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :disabled="upload.isUploading"
        :action="upload.url"
        :data="{'scaleId': scaleId}"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div slot="tip" class="el-upload__tip">
          <!-- <el-checkbox v-model="upload.updateSupport" />  是否更新已经存在的用户数据 -->
          <el-link type="info" style="font-size: 12px" @click="importTemplate">
            下载模板
          </el-link>
        </div>
        <div slot="tip" class="el-upload__tip" style="color: red">
          提示：仅允许导入“xls”或“xlsx”格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

 

export default {

  name: "Crfform",

  data() {

    return {

     

// 导入参数

      upload: {

        // 是否显示弹出层（导入）

        open: false,

        // 弹出层标题（导入）

        title: '',

        // 是否禁用上传

        isUploading: false,

        // // 是否更新已经存在的用户数据

        // updateSupport: 0,

        // 设置上传的请求头部

        headers: { Authorization: 'Bearer ' + getToken() },

        // 上传的地址

        url: process.env.VUE_APP_BASE_API + '/medical/record/importRecord'

      },

    }

}

 // 导入--打开导入弹窗
    handleImport() {
      this.upload.title = '导入病历'
      this.upload.open = true
    },
    // 导入--先下载模板操作
    importTemplate() {
      this.download(
        'system/user/importTemplate',
        {
          ...this.queryParams
        },
        `user_${new Date().getTime()}.xlsx`
      )
    },
    // 导入--文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 导入--文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 导入--提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    }