upload 上传按钮组件 iview

<!--
* @description 导入Excel
* @fileName importExcel.vue
* @author 彭成刚
* @date 2019/02/20 15:49:27
* @version V1.0.0
!-->
<template>
  <div>
    <Modal v-model="imExcelModal"
           @on-cancel="imExcelCancel"
           width="600"
           :mask-closable="false"
           title="导入Excel">
      <div style="height:200px">
        <Upload :action="baseUrl+'api/sys/office/importByExcel'"
                :show-upload-list="false"
                ref='upload'
                name="importFile"
                :on-success="handleSuccess"
                :before-upload="handleUpload"
                :data='upData'>
          <Button icon="ios-cloud-upload-outline">选择 Excel 文件</Button>
        </Upload>
        <div style="margin:10px;">{{this.xlsFile.name}}</div>

      </div>
      <div slot="footer">
        <Button>模板下载</Button>
        <Button @click="imExcelCancel">关闭</Button>
        <Button type="primary"
                @click="imExcelSave">上传</Button>

      </div>

    </Modal>

  </div>
</template>

<script>
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
  data () {
    return {
      xlsFile: {},
      upData: {
        selectPid: 'A01'
      },
      baseUrl,
      imExcelModal: false
    }
  },

  components: {},

  computed: {},

  // mounted() {},

  methods: {
    handleUpload (item) {
      console.info('handleUpload', item)
      this.xlsFile = item
      this.upData.selectPid = this.$parent.treeItem.id
      return false
    },
    handleSuccess (response, file, fileList) {
      console.info('handleSuccess', response, file, fileList)
      if (response.meta.success) {
        // 上传成功
        this.$Message.success('上传成功！')
        this.imExcelModal = false
        this.$parent.reloadPage()
      } else {
        // 上传失败
        this.$Message.warning(response.meta.message)
      }
    },
    // 上传按钮
    imExcelSave () {
      this.$refs.upload.post(this.xlsFile)
    },
    imExcelCancel () {
      this.imExcelModal = false
      console.info('imExcelCancel 关闭')
    }
  }
}

</script>
<style lang='less' scoped>
</style>