Ant Design Upload 组件封装

<template>
  <j-modal
    width="80%"
    :onclick="clickrow"
    :title="title"
    :maskClosable="false"
    switchFullscreen
    :visible.sync="editModalVisible"
    @cancel="handleCancleDbSync"
  >
    <template slot="footer">
      <a-button @click="handleCancleDbSync">
        关闭
      </a-button>
      <a-button type="primary" v-if="!disableSubmit" :loading="syncLoading" @click="handleDbSync">确认</a-button>
    </template>
    <vxe-grid
      ref="xTable"
      border
      resizable
      keep-source
      show-overflow
      height="600px"
      :customRow="rowClick"
      mode="row"
      align="center"
      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'row',activeMethod: activeRowMethod}"
      :columns="tableColumn"
      :data="dataSource"
      @edit-closed="handle"
    >
    
      <template v-slot:operate="{ row }">
        <a-button type="primary" style="margin:0px 8px 0px 0px;" @click="handleResults(row)">查看文件</a-button>
      </template>
    </vxe-grid>
    <AssessmentFile ref="assessmentFile"  @ok="modalFormOk" @handleChange="changeName"></AssessmentFile>
  </j-modal>
</template>
<script>
import {  putAction, getAction, postAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
import AssessmentFile from './AssessmentFile'
import { downFile } from '../../../../api/manage'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import Vue from 'vue'
import { Modal } from 'ant-design-vue'
import eventBus from '@/utils/eventBus'
export default {
  name: 'AssessmentTaskModalUser',
  components: {
    JSelectMultiUser,
    AssessmentFile
  },

  data() {
    let ellipsis = (v,a=20) => (<j-ellipsis value={v} length={a}/>)
    return {
      Headertoken: {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)},
      editModalVisible: false,
      disableSubmit: false,
      title: '考核评分',
      id:'',
      //taskCode:'',
      //ifleaderuser:true,
      syncLoading: false,
      url: {
        completeUserTask: '/hr/assessment/task/completeUserTask',
        completeTask: '/hr/assessment/task/completeTask',
        taskresultquery: '/hr/assessment/taskresult/queryResult',
        uploadpdffile:'standlib/file/upload',
        update: '/hr/assessment/taskresult/updateFileIntoResult',
        list:'/hr/assessment/taskresult/listfile',
        exportXlsUrl: "/hr/maturity/task/exportXls",
        importExcelUrl: '/hr/maturity/task/importExcel',
        getDataSectionByPlanCode: '/hr/assessment/map/getDataSectionByPlanCode'
      },
      tableColumn: [
        { type: 'seq', width: 60 },
        ],
      validRules: {
        enterpriseWeight: [
          { validator: this.enterpriseWeight },
          { min: 0, type: 'number', message: '请填写大于0的数字' }
        ],
      },
      dataSource: [],
      formData: {},
      name:''
    }
  },
  methods: {
    handleResults(row) {
      this.id = row.id
      console.log(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.fileUrl().deleteFileUrl, {
          '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>