<template>
  <a-modal
    title="導入EXCEL"
    :width="600"
    :visible="visible"
    :confirmLoading="uploading"
    :maskClosable="false"
    @cancel="handleClose"
  >
    <a :href="downloadurl"  style="display:block;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #f1f1f1;"><a-button>下載模版</a-button>
                          </a>
    <a-upload
      name="file"
      :multiple="true"
      accept=".xls,.xlsx"
      :fileList="fileList"
      :remove="handleRemove"
      :beforeUpload="beforeUpload"
    >
      <a-button>
        <a-icon type="upload" /> 選擇導入文件
      </a-button>
      </a-upload>

      <template slot="footer">
        <a-button @click="handleClose">關閉</a-button>
        <a-button
          type="primary"
          @click="handleImport"
          :disabled="fileList.length === 0"
          :loading="uploading"
        >
          {{ uploading ? '上傳中...' : '開始上傳' }}
          </a-button>
      </template>

      </a-modal>
</template>

<script>
// import { postAction } from '@/api/manage'
import {

  g_importXlsform
} from '@/api/index';
export default {
  name: 'JImportModal',
  props: {
    url: {
      type: String,
      default: '',
      required: false
    },
    downloadurl:{
      type: String,
      default: '',
      required: false
    },
    biz: {
      type: String,
      default: '',
      required: false
    }
  },
  data () {
    return {
      visible: false,
      uploading: false,
      fileList: [],
      uploadAction: '',
      foreignKeys: ''
    }
  },
  watch: {
    url (val) {
      if (val) {
        const url = val.split("/");
        this.uploadAction = url[url.length - 1]
      }
    }
    
  },
  created () {
    const url = this.url.split("/");

    this.uploadAction = url[url.length - 1]
  },

  methods: {
    handleClose () {
      this.visible = false
    },
    show (arg) {
      this.fileList = []
      this.uploading = false
      this.visible = true
      this.foreignKeys = arg;
    },
    handleRemove (file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList
    },
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      return false;
    },
    handleImport () {
      const { fileList } = this;
      const formData = new FormData();
      if (this.biz) {
        formData.append('isSingleTableImport', this.biz);
      }
      if (this.foreignKeys && this.foreignKeys.length > 0) {
        formData.append('foreignKeys', this.foreignKeys);
      }
      fileList.forEach((file) => {
        formData.append('files[]', file);
      });
      this.uploading = true
      console.log(this.uploadAction);
      g_importXlsform({ headId: this.uploadAction, data: formData }).then((data) => {
        this.uploading = false
        const res=data.data;
        if (res.success) {
          this.$message.success(res.message)
          this.visible = false
          this.$emit('ok')
        } else {
          this.$message.warning(res.message)
        }
      })
    }

  }
}
</script>

<style scoped>
</style>

使用

  <!-- 導入數據 -->
                  <JImportModal
                    ref="importModal"
                    downloadurl="https://static.98ep.com/Template/cgzt/商品導入模板測試數據.xls"
                    :url="getImportUrl()"
                    @ok="importOk"
                  ></JImportModal>
methods:{
//拿到地址或者token
 getImportUrl () {
      return '/online/cgform/api/importXls/' + '82cde47f4aad4ca2973cb683b6a898c9'
    },
//顯示彈框
    handleImportXls () {
      this.$refs.importModal.show()
    },
//導入成功后重新拿到數據
    importOk () {
      // 獲取table數據
      this.gettabdata(this.pagination.current, this.pagination.pageSize);
    },
}