index.vue 2.38 KB
Newer Older
wangdanlei's avatar
wangdanlei committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
<template>
  <div class="importTemp-com">
    <el-upload
      ref="upload"
      :action="action"
      :headers="headers"
      :multiple="false"
      :on-change="onFileChange"
      :accept="accept"
      :http-request="submitUploadFile"
    >
      <el-button class="border-none">选择文件:
        <img src="/icons/settledlcons/upLoad.png">
      </el-button>
    </el-upload>
    <div class="info">
      <p style="color:rgb(153 152 152);">说明:导入格式要求 {{ fileAccept }}</p>
    </div>
    <div class="flex-c">
      <el-button type="primary" class="searchBtn" @click="submitUpload">确定</el-button>
      <el-button class="searchBtn" @click="onClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import { post } from '@/utils/http'
export default {
  nmae: 'ImportOrgTempDialog',
  props: {
    title: {
      type: String,
      default: '导入组织'
    },
    action: {
      type: String,
      default: '/DxOrganization/import/organization?generateOperator=EXCELTOVO'
    },
    accept: {
      type: String,
      default: '.xlsx'
    },
    headers: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      uploadInput: ''
    }
  },
  computed: {
    fileAccept() {
      return this.accept.split(',').join(' ')
    }
  },
  methods: {
    onFileChange(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
      this.uploadInput = file.name
    },
    submitUploadFile(file) {
      this.ePartFile = file
    },
    submitUpload(file) {
      const formData = new FormData()
      if (!this.ePartFile || !this.ePartFile.file) return this.$utils.showMessageWarning('请选择文件')
      if (this.ePartFile !== '') {
        formData.append('file', this.ePartFile.file)
        post(this.action, formData).then(res => {
          this.$utils.showMessageSuccess('导入成功')
          this.onClose()
          this.$emit('completeEven')
          // submitEvent
        })
      }
    },
    onClose() {
      this.ePartFile = ''
      this.$emit('cancel')
    }
  }
}

</script>
<style lang='scss'>
.importTemp-com{
  .border-none{
    border: none;
    color: #2678cb;
    img{
      padding-left: 15px;
      width: 18px;
      height: 16px;
    }
  }
  .info{
    background: #eee;
    padding: 10px 15px;
    margin-bottom: 20px;
  }
  .flex-c{
    display:flex;
    justify-content: center;
  }
}
</style>