wt_project_web_bak/src/components/upload-file/index.vue

<template>
  <div>
    <div>
      <el-upload
        :action="action"
        v-model:file-list="fileList"
        :headers="headers"
        :data="data"
        :limit="max"
        :accept="accept"
        :multiple="max > 1"
        :on-success="success"
        :on-progress="progress"
        :show-file-list="false"
      >
        <el-button type="primary" icon="Plus">{{ btnText }}</el-button>
      </el-upload>
    </div>
    <div class="upload" v-if="drawer">
      <div>
        <div class="full-width flex flex-justify-end">
          <el-icon @click="drawer = false">
            <CircleClose />
          </el-icon>
        </div>
        <div class="mt-20 file-content">
          <div v-for="file in fileList" :key="file.name" class="mb-20">
            <div class="flex flex-align-center">
              <div>{{ file.name }} ， ({{ bytesToSize(file.size) }})</div>
              <div></div>
            </div>
            <el-progress :percentage="file.percentage" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { bytesToSize } from '@/utils/tools.js'
import api from '@/api/index.js'
import { getToken } from '@/utils/auth.js'
import website from '@/config/website.js'
import { Base64 } from 'js-base64'

export default {
  props: {
    btnText: {
      type: String,
      default: '文件上传'
    },
    accept: {
      type: String,
      default: ''
    },
    max: {
      type: Number,
      default: 9
    },
    data: Object,
    action: {
      type: String,
      default: api.uploadPath
    },
    projectId: {
      type: String,
      required: true,
      default: ''
    },
    stageId: {
      type: String,
      required: true,
      default: ''
    },
    parentId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      headers: {
        Authorization: `Basic ${Base64.encode(
          `${website.clientId}:${website.clientSecret}`
        )}`,
        'Blade-Auth': 'bearer ' + getToken()
      },
      drawer: false,
      fileList: [],
      resultList: []
    }
  },
  methods: {
    bytesToSize,
    progress(res) {
      console.log(res)
      this.drawer = true
    },
    success(res) {
      if (res.code === 200) {
        this.resultList.push(res.data)
      }
      if (this.resultList.length === this.fileList.length) {
        this.saveFile()
        this.saveLibrary()
      }
    },
    /**
     * 保存到library
     */
    async saveLibrary() {
      this.resultList
        .filter(ele => api.offices.includes(ele.suffix))
        .forEach(ele => {
          const item = {
            category: 4,
            fileId: ele.id,
            parentId: this.parentId,
            projectId: this.projectId,
            stageId: this.stageId,
            type: 1,
            title: ele.originalFileName,
            content: ''
          }
          this.$api.common.submit(item).then(res => {
            if (res.code === 200) {
              console.log(res)
            }
          })
        })
    },
    /**
     * 保存文件
     */
    saveFile() {
      const data = this.resultList.map(e => {
        return {
          fileId: e.id,
          parentId: this.parentId,
          projectId: this.projectId,
          stageId: this.stageId
        }
      })
      // fixme 重复文件未处理
      this.$api.resource.fileSave(data).then(res => {
        if (res.code === 200) {
          this.$message.success('文件上传完成')
          this.$emit('on-success', this.resultList)
          setTimeout(() => {
            this.drawer = false
          }, 3000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.upload {
  position: fixed;
  z-index: 99;
  bottom: 0;
  right: 0;
  background-color: white;
  height: 300px;
  width: 480px;
  border-top-left-radius: 10px;
  border: #eeeeee solid 1px;
  box-shadow: -2px 2px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.file-content {
  height: 280px;
  overflow-y: scroll;
}
</style>