美文网首页
Ant Design Upload 组件封装

Ant Design Upload 组件封装

作者: 吕保鑫 | 来源:发表于2022-07-27 18:13 被阅读0次
    file.png
    //点击查看文件页面
    <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>
    

    相关文章

      网友评论

          本文标题:Ant Design Upload 组件封装

          本文链接:https://www.haomeiwen.com/subject/wbbzirtx.html