foton-laws-system-front/src/pages/knowledgeGraph/components/tableFile.vue

<template>
  <div id="tableFile">
    <el-button size="small" @click="clickButtonToUpload('opinionFileList')" icon="el-icon-upload"
               class="form-upload-btn">
      {{ (value === 'null' || value === '' || value == null) ? '点击上传' : '查看已上传的文件' }}
    </el-button>
    <el-dialog
      width='400px'
      :visible.sync="importModalshowflagtemp"
      title="导入文件"
      :footer-hide="true"
      append-to-body
    >
      <el-upload
        multiple
        drag
        :show-file-list="showUploadlist"
        :on-success="uploadSuccess"
        :before-upload="beforeUpload"
        :on-remove="removeOneFile"
        :action="uploadPath"
        accept=".PDF, .doc, .docx, .ppt, .pptx"
        name="file"
        :file-list="defaultFileList"
        ref="importFileAboutStand">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">点击或拖拽上传文件</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CustomFile',
  data () {
    return {
      showUploadlist: true, // 导入过程中新增数据时，如果数据错误，不出现导入列表
      uploadPath: 'api/att/attFile/uploadNew',
      defaultFileList: [], // 默认显示
      importModalshowflagtemp: false
    }
  },
  props: {
    value: {
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 指定允许上传的类型
    allowType: {
      type: Array
    }
  },
  computed: {},
  methods: {
    beforeUpload (file) {
      var filename = file.name
      var index1 = filename.lastIndexOf('.')
      var index2 = filename.length
      var fileSuffix = filename.substring(index1, index2)
      // 判断上传文件格式
      if (!this.allowType) {
        if (fileSuffix === '.pdf' || fileSuffix === '.PDF' || fileSuffix === '.doc' || fileSuffix === '.docx' || fileSuffix === '.ppt' || fileSuffix === '.pptx') {
          // if (fileSuffix === 'xlsx' || fileSuffix === 'xls') {
          return true
        } else {
          this.$message.error('文件' + file.name + '格式不正确，请上传pdf、PDF、doc、docx、ppt、pptx文件')
          // this.$message.error('文件' + file.name + '格式不正确，请上传xls文件')
          return false
        }
      } else {
        if (!this.allowType.includes(fileSuffix)) {
          this.$message.error(`文件${file.name}格式不正确，请上传${this.allowType.join('、')}文件`)
          return false
        }
      }
      // 判断文件上传大小
      if (file.size <= 1024 * 1024 * 300) {// eslint-disable-line
        return true
      } else {
        this.$message.error('文件' + file.name + '大小不超过300M')
        return false
      }
    },
    handleChange (event) {
      const value = event.target.value
      this.$emit('input', value)
    },
    clickButtonToUpload (current) {
      this.importModalshowflagtemp = true
      this.$refs.importFileAboutStand && this.$refs.importFileAboutStand.clearFiles()
      this.defaultFileList = []
      if (this.value === 'null' || this.value == null) {
        // this.value = ''
        this.$emit('input', '')
      }
      let fileList
      if (this.value != null && this.value !== '') {
        let paramefile = this.value
        if (paramefile.charAt(paramefile.length - 1) === ',') {
          paramefile = paramefile.substring(0, paramefile.length - 1)
        }
        this.$http.get('att/attFile/getMultiFileInfos', {
          fileIds: paramefile
        }, {
          _this: this
        }, res => {
          fileList = res.data
          if (fileList != null && fileList.length > 0) {
            for (let i = 0; i < fileList.length; i++) {
              let obj = {name: '', response: {}}
              obj.name = fileList[i].oldFileName
              obj.response.data = fileList[i]
              this.defaultFileList.push(obj)
            }
          }
        }, e => {
        })
      }
    },
    uploadSuccess (res, file, fileList) {
      if (res.ok) {
        this.$emit('input', this.value + res.data.id + ',')
        this.$message({
          message: '文件上传成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '文件上传失败',
          type: 'error'
        })
      }
    },
    removeOneFile (file, fileList) {
      const value = this.value
      let ids = value.split(',')
      let fileIds = file.response.data.id
      let newIdList = this.removeArray(ids, fileIds)
      let newStr = ''
      if (newIdList != null && newIdList.length > 0) {
        for (let i = 0; i < newIdList.length; i++) {
          if (newIdList[i] !== '') {
            newStr += newIdList[i] + ','
          }
        }
        this.$emit('input', newStr)
      } else {
        this.$emit('input', '')
      }
    },
    handleAddFormatError (file) {
      this.$Message.error('文件' + file.name + '格式不正确，请上传pdf、PDF、doc、docx、ppt、pptx文件')
    },
    // 导入文件大小超出范围
    handleSizeError (file) {
      // this.spinShow = false
      this.$Message.error('文件' + file.name + '大小不超过200M')
    },
    // 删除数组中的某个对象
    removeArray (_arr, _obj) {
      var length = _arr.length
      for (var i = 0; i < length; i++) {
        if (_arr[i] === _obj) {
          if (i === 0) {
            _arr.shift() // 删除并返回数组的第一个元素
            return _arr
          } else if (i === length - 1) {
            _arr.pop() // 删除并返回数组的最后一个元素
            return _arr
          } else {
            _arr.splice(i, 1) // 删除下标为i的元素
            return _arr
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  #tableFile {
    display: flex;
    justify-content: center;
    align-items: center;
    .form-upload-btn {
      position: static !important;
    }
  }
</style>