laws_weilai/jero-web/src/components/ImportFileOnlyList/index.vue

<template>
  <div>
    <a-upload name="file" :showUploadList="false"
              class="upload-text"
              :multiple="false" :headers="tokenHeader"
              :action="importUrl"
              @change="handleImport"
              :accept="accept">
      <a-icon type="import" :rotate="270"/>
      {{$t('import')}}
    </a-upload>
    <div class="loading-box" v-if="spinning">
      <div class="loading-content">
        <a-icon class="loading" type="loading"/>
        <div class="loading-tips">
          {{this.$t('Importing')}}...
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {ACCESS_TOKEN} from '@/store/mutation-types'
import eventBUs from '../../common/event'
import {Modal} from 'ant-design-vue'
import store from '@/store'
export default {
  name: 'index',
  props: {
    url: {
      type: Object,
      default: {}
    },
    //判断当前文档库还是其余的页面
    isTrue: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: ''
    },
    projectId: {
      type: String,
      default: ''
    },
    dummyInventoryBaseId: {
      type: String,
      default: ''
    },
    paramsTemplateId: {
      type: String,
      default: ''
    },
    paramsManifestId: {
      type: String,
      default: ''
    },
    projectLibraryId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tokenHeader: {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)},
      spinning: false,
      cut: ''
    }
  },
  computed: {
    importUrl() {
      if (this.projectId) {
        return window._CONFIG['domianURL'] + '/' + this.url.importZipUrl + '?cut=' + this.cut + '&projectId=' + this.projectId
      } else if (this.dummyInventoryBaseId) {
        return window._CONFIG['domianURL'] + '/' + this.url.importZipUrl + '?cut=' + this.cut + '&dummyInventoryBaseId=' + this.dummyInventoryBaseId
      } else if (this.paramsTemplateId) {
        return window._CONFIG['domianURL'] + '/' + this.url.importZipUrl + '?cut=' + this.cut + '&paramsTemplateId=' + this.paramsTemplateId
      } else if (this.projectLibraryId) {
        return window._CONFIG['domianURL'] + '/' + this.url.importZipUrl + '?cut=' + this.cut + '&projectLibraryId=' + this.projectLibraryId
      } else if (this.paramsManifestId) {
        return window._CONFIG['domianURL'] + '/' + this.url.importZipUrl + '?cut=' + this.cut + '&paramsManifestId=' + this.paramsManifestId
      }
      return window._CONFIG['domianURL'] + '/' + this.url.importZipUrl + '?cut=' + this.cut
    }
  },
  mounted() {
    let long = localStorage.getItem('language')
    this.cut = ''
    if (long && long == 'zh-cn') {
      this.cut = 'cn'
    } else if (long && long == 'en-us') {
      this.cut = 'en'
    }
  },
  methods: {
    handleImport(info) {
      this.spinning = true
      if (info.file.status !== 'uploading') {
        this.$emit('getList')
      }

      if (info.file.status === 'done') {
        if (info.file.response.success) {
          if (info.file.response.code === 201) {
            let {message} = info.file.response
            let {name} = info.file
            let content = []
            if (message) {
              message = message.split('</br>')
              message.forEach(res => {
                if (res) {
                  content.push( < div > {res} < /div>)
                }
              })
            }
            this.$warning({
              title: name,
              content: (
                < div >
                  {content}
                < /div>
              )
            })
          } else {
            if (this.isTrue) {
              this.$emit('getList')
            } else {
              eventBUs.$emit('searchReset')
            }
            this.$message.success(info.file.response.message || `${info.file.name} 文件导入成功`)
          }
          this.spinning = false
        } else {
          let data = info.file.response
          const token = Vue.ls.get(ACCESS_TOKEN)
          if ((token && data.message.includes('Token失效')) || (token && data.message.includes('token')) || (token && data.message.includes('用户不存在'))) {
            this.spinning = false
            Modal.error({
              title: '登录已过期',
              content: '很抱歉，登录已过期，请重新登录',
              okText: '重新登录',
              mask: false,
              onOk: () => {
                store.dispatch('Logout').then(() => {
                  Vue.ls.remove(ACCESS_TOKEN)
                  window.location.reload()
                })
              }
            })
            return
          }
          let {message} = info.file.response
          let {name} = info.file
          let content = []
          if (message) {
            message = message.split('</br>')
            message.forEach(res => {
              if (res) {
                content.push( < div > {res} < /div>)
              }
            })
          }
          this.$warning({
            title: name,
            content: (
              < div >
                {content}
              < /div>
            )
          })
          this.spinning = false
        }
      } else if (info.file.status === 'error') {
        if (info.file.response.status === 500) {
          let data = info.file.response
          const token = Vue.ls.get(ACCESS_TOKEN)
          if ((token && data.message.includes('Token失效')) || (token && data.message.includes('token')) || (token && data.message.includes('用户不存在'))) {
            Modal.error({
              title: '登录已过期',
              content: '很抱歉，登录已过期，请重新登录',
              okText: '重新登录',
              mask: false,
              onOk: () => {
                store.dispatch('Logout').then(() => {
                  Vue.ls.remove(ACCESS_TOKEN)
                  window.location.reload()
                })
              }
            })
          }
          this.spinning = false
        } else {
          this.$message.error(`文件导入失败: ${info.file.msg} `)
          this.spinning = false
        }
      }
    }
  }
}
</script>

<style>
.upload-text .ant-upload {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #040B29 !important;
}
</style>
<style scoped lang="less">
.loading-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999900;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  user-select: none;

  .loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #21c9cc;
    transform: translate(-50%, -50%);
    text-align: center;

    .loading {
      font-size: 28px;
    }

    .spin-loading {
      animation: rotating 2s linear infinite;
    }

    .loading-tips {
      margin-top: 5px;
      font-size: 16px;
      color: #21c9cc;
    }
  }
}
</style>