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

<template>
  <div class="split-import-upload">
    <!--    <a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title" class="ocr-upload-modal">-->
    <a-upload
      accept='.zip'
      :disabled="disabled"
      class="ant-upload-list "
      name="file"
      :list-type="listType"
      :file-list="myfileList"
      :multiple="false"
      :action='uploadAction'
      :headers="headers"
      :before-upload="beforeUpload"
      :remove='remove'

      @change="handleChange">
      <!--        <p><a-icon style="font-size: 67px;color: #c0c4cc;" type="cloud-upload" /></p>-->
      <a-icon type="export" :rotate="-90"/>
      {{$t('splitFile')}}
    </a-upload>
    <!--    </a-modal>-->
  </div>
</template>

<script>
  import Vue from 'vue'
  import { ACCESS_TOKEN } from '@/store/mutation-types'

  export default {
    name: 'importSplitUpload',
    props: ['disableds', 'disabled', 'thisFileUploadUrl', 'readonly', 'thisFileType', 'accept', 'title', 'listType', 'module'],
    data() {
      return {
        visible: false,
        uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
        downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/static',
        myfileList: [],
        fileList: [],
        fileTypeSatus: false,
        headers: {}
      }
    },
    created() {
      const token = Vue.ls.get(ACCESS_TOKEN)
      this.headers = { 'X-Access-Token': token }
      this.containerId = 'container-ty-' + new Date().getTime()
    },
    mounted() {
      // console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
    },
    methods: {
      beforeUpload(file, fileList) {
        console.log('file', this.accept, file, fileList, this.myfileList)
        this.fileTypeSatus = false
        if (this.myfileList && this.myfileList.length >= 1) {
          // console.log()
          this.$message.warning(this.$t('onlyOnefileUploaded'))
          return false
        } else {
          let suffix = file.name.split('.')
          let acceptSuffix = suffix[suffix.length - 1]
          if (acceptSuffix.toLowerCase() == 'zip') {
            this.fileTypeSatus = true
            this.$message.destroy()
            // 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
            this.errorMessage = file.name + '文件大小超出100MB限制, 请压缩或降低文件质量!'
            // }
          }
        }
      },
      remove() {
        this.fileTypeSatus = true
        // console.log('rrr',this.myfileList)
      },
      handleChange(info) {
        // console.log('info',info)

        let { file, fileList } = info
        const status = info.file.status
        info.fileList.forEach((val, index) => {
          if (val.response && !val.response.result) {
            this.$message.error(val.response.message)
            info.fileList.splice(index, 1)
          }
        })
        // console.log('fileStatue',this.fileTypeSatus)
        if (this.fileTypeSatus) {
          if (file.size > 100000000) {
            this.$message.error(this.errorMessage)
            return
          } else {
            if (status === 'error') {
              this.$emit('uploadSuccess', this.fileList)
              this.$message.destroy()
              this.$message.error(`${info.file.name}` + this.$t('fileUploadFailed'))
            } else if (status === 'removed') {
              this.myfileList = info.fileList
              this.fileList = []
              this.myfileList.forEach((res) => {
                if (res.response) {
                  this.fileList.push(res.response.result)
                } else {
                  this.fileList.push(res)
                }
              })
              // console.log('remove',this.fileList)
              this.$emit('uploadSuccess', this.fileList)
              this.$message.destroy()
              this.$message.success(`${info.file.name}` + this.$t('deletedSuccessfully'))
            } else if (status === 'done') {
              this.fileList = []
              this.myfileList = info.fileList
              // console.log('file3333',info.fileList)
              // if (info.fileList.length > 1) {
              //   info.fileList.splice(1)
              //   // this.myfileList = info.fileList;
              //
              //   this.myfileList.forEach((res) => {
              //     if (res.response) {
              //       this.fileList.push(res.response.result)
              //     } else {
              //       this.fileList.push(res)
              //     }
              //   })
              //   // console.log('file1111',this.fileList)
              //   this.$emit('uploadSuccess', this.fileList)
              //   this.$message.destroy()
              //   this.$message.error('最多只能上传一个文件');
              //   return
              // }
              // console.log('my222',this.myfileList)
              this.myfileList.forEach((res) => {
                if (res.response) {
                  this.fileList.push(res.response.result)
                  // console.log('flist',res.response)
                } else {
                  this.fileList.push(res)
                }
              })
              // let fileList1=[]
              // fileList1[0]=this.fileList[this.fileList.length-1]
              if (this.myfileList.length > 0) {
                this.$emit('uploadSuccess', this.fileList)
                this.$message.destroy()
                this.$message.success(`${info.file.name}` + this.$t('uploadSuccessful'))
                // console.log('fileList111',file,this.fileList,fileList1)
              }
            } else if (status === 'uploading') {
              this.myfileList = info.fileList
              this.$emit('uploadSuccess')
              // this.$message.success(`${info.file.name} 文件上传成功。`);
            }
          }
        } else if (!this.fileTypeSatus && this.myfileList.length < 1) {
          this.$message.warning(this.$t('typeCannotUploaded'))
        }
      }
    }
  }
</script>

<style lang="less" scoped>

</style>


<style lang="less">
  .ocr-upload-modal {
    .ant-modal-wrap {
      z-index: 1002;
    }
  }

  .split-import-upload {
    .ant-upload-list-item-info {
      span {
        display: flex;
        justify-content: start;
        text-align: right;

        .ant-upload-list-item-name {
          margin-right: 20px;
          max-width: 800px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

        }
      }
    }

    @media screen and (min-width: 1600px) and (max-width: 2000px) {
      //.ant-upload-list-text {
      //  position: absolute;
      //  top: 140px;
      //  right: 240px;
      //}
      .ant-upload-list-item {
        position: relative;
        height: 22px;
        margin-top: -22px;
        font-size: 14px;
        margin-right: 80px;
      }
    }
    @media screen and (min-width: 600px) and (max-width: 1600px) {
      .ant-upload-list-item {
        position: relative;
        height: 22px;
        margin-top: -22px;
        font-size: 14px;
        margin-right: 80px;
      }
    }
  }
</style>