Ant Design Upload 组件封装

//点击查看文件页面
<template>
<template v-slot:operate="{ row }">
    <a-button type="primary" style="margin:0px 8px 0px 0px;" @click="handleResults(row)">查看文件</a-button>
</template>
<AssessmentFile ref="assessmentFile"  @ok="modalFormOk" @handleChange="changeName"></AssessmentFile>
</template>
<script>
import AssessmentFile from './AssessmentFile'
import { Modal } from 'ant-design-vue'
export default {
  name: 'AssessmentTaskModalUser',
  components: {
    AssessmentFile
  },
 methods: {
 handleResults(row) {
      this.$refs.assessmentFile.loadData(row,'taskUser')
      this.$refs.assessmentFile.disableCheck = true
      this.$refs.assessmentFile.disableSubmit = true
      this.$refs.assessmentFile.title = '查看文件'
      this.$refs.assessmentFile.editModalHidden = true
    },
}
</script>

<template>
  <j-modal
    width='60%'
    :onclick='clickrow'
    :title='title'
    :maskClosable='false'
    switchFullscreen
    :visible.sync='editModalHidden'
    @cancel='handleCancleDbSync'
  >
    <template>
      <a-upload
        accept='.pdf'
        :multiple='false'
        :action='uploadpdffile'
        :headers='Headertoken'
        :default-file-list='defaultFileList'
        :file-list='fileList'
        @change='handleChange'
      >
        <a-button type='primary' icon='upload'> 上传</a-button>
      </a-upload>
    </template>
    <template slot='footer'>
      <a-button @click='handleCancleDbSync'>
        关闭
      </a-button>
    </template>
  </j-modal>
</template>
<script>

import { ACCESS_TOKEN } from '@/store/mutation-types'
import Vue from 'vue'
import { Modal } from 'ant-design-vue'
import { postAction, getAction, deleteAction } from '@/api/manage'

export default {
  name: 'AssessmentFile',
  components: {},
  data() {
    return {
      editModalHidden: false,
      Headertoken: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
      url: {
        uploadpdffile: 'standlib/file/upload',
        update: '/hr/assessment/taskresult/updateFileIntoResult',
        userFileAdd: '/hr/taskFile/add',
        userTaskFile: '/hr/taskFile/list',
        userTaskFileDelete: '/hr/taskFile/delete',
        leaderFileAdd: '/hr/taskSummaryFile/add',
        leaderFileList: '/hr/taskSummaryFile/list',
        leaderFileDelete: '/hr/taskSummaryFile/delete'
      },
      rowId: '',
      defaultFileList: [],
      loadType: '',
      fileList: []
    }
  },
  methods: {
    uploadpdffile(row) {
      return `${window._CONFIG['domianURL']}/${this.url.uploadpdffile}`
    },
    handleCancleDbSync() {
      this.fileList = []
      this.defaultFileList = []
      this.disableSubmit = false
      this.editModalHidden = false
      this.$emit('handleChange', 'close')
    },
    loadData(instanceCode, type) {
      this.rowId = instanceCode.id
      this.loadType = type
      getAction(this.fileUrl().fileListUrl, { taskId: this.rowId }).then(res => {
        //console.log(res,'res')
        if (res.success) {
          for (var i = 0; i < res.result.length; i++) {
            var resuit = {
              uid: res.result[i].id,
              name: res.result[i].fileName,
              status: 'done',
              response: res.result[i].fileName, // custom error message to show
              url: window._CONFIG['domianURL'] + '/' + res.result[i].fileName
            }
            this.fileList.push(resuit)
            this.defaultFileList.push(resuit)
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    fileUrl() {
      var fileUrl = {
        addFileUrl: '',
        fileListUrl: '',
        deleteFileUrl: ''
      }
      if (this.loadType == 'taskUser') {
        fileUrl.addFileUrl = this.url.userFileAdd
        fileUrl.fileListUrl = this.url.userTaskFile
        fileUrl.deleteFileUrl = this.url.userTaskFileDelete
      }
      if (this.loadType == 'taskLeader') {
        fileUrl.addFileUrl = this.url.leaderFileAdd
        fileUrl.fileListUrl = this.url.leaderFileList
        fileUrl.deleteFileUrl = this.url.leaderFileDelete
      }
      return fileUrl
    },
    handleChange({ file, fileList }) {
      if (file.status === 'uploading') {
        console.log('uploading', file)
      } else if (file.status === 'done') {
        postAction(this.fileUrl().addFileUrl, {
          'id': new Date().valueOf(),
          'fileName': file.response.result.fileUrl,
          //'fileName': info.file.name,
          'taskId': this.rowId
        }).then(res => {
          if (res.success) {
            this.handleCancleDbSync()
            this.$message.success(res.message)
          } else {
            this.$message.success(res.message)
          }
        })
      } else if (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失效')) {
            Modal.error({
              title: '登录已过期',
              content: '很抱歉，登录已过期，请重新登录',
              okText: '重新登录',
              mask: false,
              onOk: () => {
                store.dispatch('Logout').then(() => {
                  Vue.ls.remove(ACCESS_TOKEN)
                  window.location.reload()
                })
              }
            })
          }
        } else {
          this.$message.error(`文件上传失败: ${info.file.msg} `)
        }
      } else if (file.status === 'removed') {
        deleteAction(this.url.userTaskFileDelete, {
          'id': file.uid
        }).then(res => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.success(res.message)
          }
        })
      }
      this.fileList = fileList
      this.defaultFileList = fileList
    }
  }
}
</script>