caimei365-manager-ui/src/views/serviceSettlement/components/UploadFile.vue

<template>
  <div>
    <el-upload
      v-if="!isCheck"
      ref="fileUpload"
      :data="data"
      :auto-upload="autoUpload"
      :class="{ 'el-upload-hidden': !chooseState }"
      :action="action"
      :headers="headers"
      :on-success="uploadSuccess"
      :before-upload="beforeUpload"
      :on-error="uploadError"
      :limit="limit"
      :multiple="multiple"
      :accept="accept"
      :file-list="fileList"
    >
      <div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
      <el-button v-if="!isCheck" size="mini" type="primary">选择文件</el-button>
    </el-upload>
    <div v-for="(file, index) in dataList" :key="index" class="file-list">
      <span>{{ file.name }} </span>
      <div>
        <el-button type="text" size="small" @click="handlePreview(file.response)">预览</el-button>
        <el-button type="text" size="small" style="color: red" @click="handleRemove(index)">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'UploadFile',
  props: {
    tip: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    },
    accept: {
      type: String,
      default: '.docx,.pptx,.pdf'
    },
    listType: {
      type: String,
      default: 'picture-card'
    },
    fileList: {
      type: Array,
      default: () => []
    },
    uuid: {
      type: Number,
      default: 0
    },
    beforeUpload: {
      type: Function,
      default: () => true
    },
    autoUpload: {
      type: Boolean,
      default: true
    },
    data: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'brand'
    },
    list: {
      type: Array,
      default: () => []
    },
    isCheck: {
      type: Boolean,
      default: () => true
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      dataList: [],
      iframUrl: ''
    }
  },
  computed: {
    ...mapGetters(['token']),
    chooseState() {
      return this.dataList.length < this.limit
    },
    action() {
      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
    },
    headers() {
      return {
        'X-Token': this.token
      }
    }
  },
  watch: {
    list: {
      handler(val) {
        console.log(val)
        this.dataList = val
      },
      deep: true
    }
  },
  methods: {
    // 上传成功
    uploadSuccess(response, file, fileList) {
      if (file.response.data) {
        this.dataList.push(file)
        console.log(response, file)
        this.$emit('success', { fileList: this.dataList })
      } else {
        this.$message({
          type: 'error',
          message: '上传失败'
        })
      }
    },
    // 删除
    handleRemove(index) {
      this.dataList = this.dataList.filter((_, i) => index !== i)
      this.$emit('remove', { fileList: this.dataList })
    },
    // 变化
    handleChange(file, fileList) {
      this.dataList = fileList
      this.$emit('change', { fileList: this.dataList })
    },
    // 上传失败
    uploadError(err, file, fileList) {
      this.dataList = fileList
      this.$emit('error', { err, file, fileList })
    },
    handlePreview(f) {
      if (f.data.indexOf('.docx') !== -1 || f.data.indexOf('.pptx') !== -1) {
        window.open(`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(f.data)}`)
      } else {
        window.open(f.data)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload-list {
  display: none;
}
::v-deep .el-upload__tip {
  position: static;
}
.file-list {
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
  margin-top: 10px;
}
</style>