foton-laws-system-front/src/components/hzwlComponents/UploadFormItem.vue

<template>
  <el-form-item :label="label" :prop="prop" class="add-form-item form-item-disabled">
    <el-input
      disabled
      style="display: none;"
      :value="ids"
      clearable
    ></el-input>
    <div style="display: flex;justify-content: space-between">
      <div style="width: 80%;margin-top: 13px">
        <div v-for="file in FileList"
             :key="file.id"
             @click="onPreview(file)"
             style="color: #409eff;cursor:pointer"
             class="fileClass">
          {{ file.name }}
        </div>
      </div>
      <div style="width: 20%;">
        <el-button :disabled="disabled"
                   type="primary"
                   class="common-button-primary"
                   size="mini"
                   @click="showUpload"
                   style="margin-left: 10px; margin-top: 11px; float: right;">
          <i class="el-icon-upload"></i>
        </el-button>
      </div>
    </div>
    <el-dialog width='400px' :visible.sync="fileMadel" title="上传文件">
      <el-upload
          multiple
          drag
          :file-list="fileList"
          :action="fileUrl"
          ref="importfile"
          name="file"
          :accept="accept"
          :before-upload="beforeUpload"
          :on-success="onSuccess"
          :on-preview="onPreview"
          :on-remove="removeOneFile"
          :show-file-list="true"
      >
        <div style="padding: 20px 0">
          <i class="el-icon-upload" style="color: #3399ff"></i>
          <p>点击或拖拽上传文件</p>
        </div>
      </el-upload>
    </el-dialog>
  </el-form-item>
</template>

<script>
export default {
  name: "UploadFormItem",
  props: {
    ids: {
      required: true,
      type: String,
      default: ''
    },
    names: {
      required: true,
      type: String
    },
    prop: {
      type: String
    },
    label: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false
    },
    fileUrl: {
      type: String,
      default: () => 'api/att/attFile/uploadNew'
    },
    accept: {
      type: String,
      default: '.pdf, .PDF, .ppt, .PPT, .pptx, .PPTX, .doc, .DOC, .docx, .DOCX, .xls, .xlsx'
    },
    size: {
      type: Number,
      default: 200
    }
  },
  created () {
    this.initFileList()
  },
  data () {
    return {
      fileMadel: false,
      fileList: [],// 用于el-upload
      FileList: [],// 用于回显
    }
  },
  methods: {
    showUpload () {
      this.fileMadel = true;
    },
    initFileList () {
      if (this.ids && this.ids !== '' && this.names && this.names !== '') {
        let fileList = []
        const idArr = this.ids.split(',')
        const nameArr = this.names.split(',')
        for (let i = 0 ; i < idArr.length; i++) {
          fileList.push({
            id: idArr[i],
            name: nameArr[i]
          })
        }
        this.fileList = fileList
        this.FileList = fileList
      }
    },
    beforeUpload (file) {
      const fileName = file.name
      const fileSuffix = fileName.slice(fileName.lastIndexOf('.') + 1)
      // 判断上传文件格式
      const acceptArr = this.accept.split(',').map(type => type.slice(type.lastIndexOf('.') + 1))
      if (acceptArr.includes(fileSuffix)) {
        return true
      } else {
        this.$message.error('文件' + file.name + `格式不正确，请上传${acceptArr.join(',')}文件`)
        return false
      }
      // 判断文件上传大小
      if (file.size / 1024 / 1024 <= this.size) {
        return true
      } else {
        this.$message.error('文件' + file.name + `大小不超过${this.size}M`)
        return false
      }
      return true
    },
    // 导入标准数据成功后执行
    onSuccess (response, file,fileList) {
      // 上传成功后判断是否是两条数据是的话替换掉旧数据
      if (response.ok) {
        const fileObj = {
          id: file.response.data.id,
          name: file.response.data.name
        }
        let ids;
        let names;
        if (this.ids && this.ids.length > 0) {
          ids = this.ids + ',' + fileObj.id
          names = this.names + ',' + fileObj.name
        } else {
          ids = fileObj.id
          names = fileObj.name
        }

        this.$set(this.FileList, this.FileList.length, fileObj)
        this.$emit('update:ids', ids)
        this.$emit('update:names', names)

        this.$message({
          message: response.message,
          type: 'success'
        })
      }
    },
    removeOneFile(file, fileList) {
      const ids = fileList.reduce((init, file) => {
        if (init === '') {
          return file.id || file.response.data.id
        } else {
          return init + ',' + (file.id || file.response.data.id)
        }
      }, '')
      const names = fileList.reduce((init, file) => {
        if (init === '') {
          return file.name
        } else {
          return init + ',' + file.name
        }
      }, '')

      this.FileList = fileList.map(file => ({
        id: file.id || file.response.data.id,
        name: file.name
      }))
      this.$emit('update:ids', ids)
      this.$emit('update:names', names)
    },
    // 文件预览及下载
    onPreview(file) {
      let attId = ""
      if(file && file.id){
        attId = file.id
      }else {
        attId = file.response.data.id
      }
      this.$preview(attId)
    },
  }
}
</script>

<style scoped lang="less">
.fileClass{
  line-height: 22px !important;
}
</style>