yiliangyiyun-pc-jj/src/components/WsUpload/index.vue

<template>
  <div class="ws-upload">
    <div v-if="!remarkWord">
      <el-button
        class="upload-btn"
        size="small"
        :disabled="disabled"
        type="default"
        @click="_handleUploadClick"
        >{{ buttonName ? buttonName : $t('upload.uploadButton') }}</el-button
      >
    </div>
    <div class="trigger-group" v-if="editable && remarkWord">
      <el-button
        class="upload-btn"
        size="small"
        :disabled="disabled"
        type="default"
        @click="_handleUploadClick"
        >{{ buttonName ? buttonName : $t('upload.uploadButton') }}</el-button
      >
      <!-- <el-tooltip class="item" effect="dark" :content="$t('upload.uploadText01')+formatTxt+'格式的文件，单个文件大小不能超过10M'" placement="top">
        <i class="el-icon-question"></i>
      </el-tooltip> -->
      
      <div class="tip">
        {{ $t('upload.uploadText01') }}
        {{  formatTxt}}
        格式的文件，单个文件大小不能超过10M
      </div>
    </div>
    <div>
      <el-button
       v-if="batchDown"
        class="batchdown-btn"
        size="small"
        type="default"
        @click="_handleDownClick"
        >批量下载</el-button>
    </div>
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="_handleRequest"
      :file-list="fileList"
      :before-upload="_handleBeforeUpload"
      :accept="accept"
      :multiple="!limit || parseInt(limit) > 1"
      ref="elUpload"
    >
      <template v-slot:trigger>
        <div ref="triggerDiv">-</div>
      </template>
      <template v-slot:file="{ file }">
        <div class="thumbnail-group">
          <el-image  v-if='getFileClass(file)=="ext png"||getFileClass(file)=="ext jpg"||getFileClass(file)=="ext jpeg"||getFileClass(file)=="ext JPG"||getFileClass(file)=="ext PNG"'
          :src='file.url'
  class="el-upload-list__item-thumbnail"
            :class="getFileClass(file)"
          :preview-src-list="file.imgurl">
  </el-image>
          <!-- <img 
         
           
          /> -->
          <div v-else class="el-upload-list__item-thumbnail"
            :class="getFileClass(file)"></div>
        </div>
        <div class="fileName" v-if="showName" :title="file.name">
          {{ file.name }}
        </div>
        <span
          class="el-upload-list__item-actions"
          :class="!(file.status == 'success') ? 'operate-bg' : ''"
          v-if="file.status == 'success' && (editable || download)"
        >
          <span class="el-upload-list__item-delete">
            <i
              class="el-icon-view"
              v-if="
                isOnlineFile(file) &&
                download &&
                !isPictureFile(file) &&
                !onlineEdit
              "
              @click="_handleDownload(file, 'view')"
            ></i>
            <i
              class="el-icon-edit"
              v-if="onlineEdit"
              @click="_handleOnline(file)"
            ></i>
            <i
              class="el-icon-download"
              @click.stop="_handleDownload(file, 'down')"
            ></i>
            <i
              v-if="editable"
              class="el-icon-delete"
              @click.stop="_handleRemove(file)"
            ></i>
          </span>
        </span>
      </template>
    </el-upload>
    <BaseDialog
      v-drag
      :modal="false"
      :visible.sync="dialogVisible"
      @closed="_handlePreviewClosed"
      :title="downloadName"
      append-to-body
    >
      <img v-lazy="dialogImageUrl" width="100%" />
    </BaseDialog>
    <BaseDialog
      width="70%"
      :title="pdfFileName"
      :visible.sync="isShowPdf"
      :appendToBody="true"
    >
      <pdf :loadUrl="pdfUrl" v-if="isShowPdf" />
    </BaseDialog>
  </div>
</template>

<script>
import { getFileList, saveFiles } from '@/model/upload'
import { getOssInterimCredentials } from '@/model/procurement/spare'
import { uuid } from '@/utils/assist'
import downloadNow from '../WsDownload/download'
import { EventBus } from 'base-core-lib'
import pdf from '@/components/pdf/pdf'
import { mapActions } from 'vuex'
import JSZip from 'jszip';
import FileSaver from 'file-saver';
export default {
  name: 'WsUpload',
  components: {
    pdf,
  },
  props: {
    appendixIds: String,
    editable: {
      // 是否为编辑模式
      type: Boolean,
      default: true,
    },
    remarkWord: {
      // 是否有备注要求
      type: Boolean,
      default: true,
    },
    preview: {
      // 是否允许预览
      type: Boolean,
      default: true,
    },
    download: {
      // 是否允许下载
      type: Boolean,
      default: true,
    },
    showName: {
      // 是否显示文件名
      type: Boolean,
      default: true,
    },
    limit: {
      // 文件总数量限制
      type: Number,
      default: 50,
    },
    sizeLimit: {
      // 文件大小限制
      type: Number,
      default: undefined,
    },
    accept: {
      // 限制文件类型
      type: String,
      default:
        '.jpg, .jpeg, .png, .gif, .pdf, .doc, .docx, .xls, .xlsx, .zip, .rar, .eml, .mpeg, .avi, .asf, .wmv, .mpv, .rmvb, .rm, .flv, .mp4, .3pg, .ppt, .pptx, .txt',
    },
    ossKey: {
      type: String,
      required: false,
    },
    compId: {
      // 公司ID
      type: String,
      required: true,
    },
    vesselId: {
      // 船舶ID
      type: String,
      default: '',
      required: false,
    },
    tableName: {
      // 要保存的表的名字
      type: String,
      required: false,
    },
    batchDown: {
      // 要保存的表的名字
      type: String,
      required: false,
    },
    onlineEdit: false,
    disabled: false,
    buttonName: {
      // 要保存的表的名字
      type: String,
    },
  },
  data() {
    return {
      pdfUrl: '',
      pdfFileName: '',
      isShowPdf: false,
      // vesselBankFlag: localStorage.getItem("ws-pf_serviceTypeFlag") == "true" ? "B" : "V",
      vesselBankFlag: 'V',
      curFileNum: 0,
      tempFileList: [],
      initFileList: [],
      loading: false, // 是否正在初始化filelsit
      fileList: [],
      removeList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      downloadName: '',
      loadingView: '', // loading弹出层
      uploadParams: {
        companyId: this.compId,
        basePath: '', //config.getUploadPath(this.ossKey, this.compId)
      },
      clientFag: localStorage.getItem('ws-pf_clientFag'),
    }
  },
  computed: {
    formatTxt() {
      console.log(this.accept)
      return this.accept
        .replace(/\./g, '')
        .replace(/ /g, '')
        .replace(/,/g, '、')
    },
    thisAppendixIds() {
      return this.appendixIds
    },
    _getFileImgs() {
      let arr = []
      for (let i of this.fileList) {
        if (this.isPictureFile(i)) {
          arr.push(i.url)
        }
      }
      return arr
    },
  },
  watch: {
    // 监听props.appendixIds, 变化时向服务器请求
    async thisAppendixIds(newV, oldV) {
      this.getDefaultFiles(newV)
    },
  },
  mounted() {
    this.getDefaultFiles(this.appendixIds)

    const handleChange = this.$refs.elUpload.$refs['upload-inner'].handleChange
    this.$refs.elUpload.$refs['upload-inner'].handleChange = (ev) => {
      this.initFileList = []
      this.curFileNum = ev.target.files.length
      for (let i = 0; i < this.curFileNum; i++) {
        this.initFileList.push(ev.target.files[i])
        this.tempFileList[i] = i
      }
      handleChange(ev)
    }
  },

  methods: {
    ...mapActions('common', ['uploadShipFiles']),
    //pdf预览
    async toOpen(scope) {
      const data = await this.getFileList({
        appendixIds: scope.row.filePathId,
      }).toPromise()
      let path = data[0] ? data[0].appendixPath : ''
      let filePath = this.$store.getters.baseInfo.fileUrl + '/' + path
      this.pdfUrl = filePath
      this.pdfFileName = scope.row.templateName
      this.isShowPdf = true
    },
    // handleChangeImage(file, fileList) {
    //   console.info(file, fileList)
    //   this.initFileList = fileList
    //   this.tempFileList = fileList
    // },
    // 获取图片文件
    _getFileImg(file) {
      if (!file) {
        return ''
      }
      if (this.isPictureFile(file)) {
        if (file.url.indexOf('blob') === 0 || this.vesselBankFlag === 'V') {
          return file.url
        }
        return file.url + '?x-oss-process=image/resize,w_120,h_120'
      }
      return ''
    },

    async getDefaultFiles(appendixIds) {
      this.fileList = []
      if (appendixIds) {
        this.loading = true
        const list = await this._getFileList(appendixIds)
        this.loading = false

        if (list) {
          this.fileList = list.map((item, idx) => {
            return {
              appendixId: item.appendixId,
              name: item.appendixName,
              url: this.getFilePath(item.appendixPath),
              imgurl:[this.getFilePath(item.appendixPath)],
              uid: uuid(),
            }
          })
        }
      }
    },
    _handleDownClick(){
      console.log(this.fileList,111)
      var arr=[]
      for (let i = 0; i < this.fileList.length; i++) {
        arr.push(this.fileList[i].url+'?s=' + Math.random().toString())
      }
      let urls = arr
          let promises = [];
          urls.map((item) => {
            promises.push(this.getBase64Image(item));
          });

          Promise.all(promises)
            .then((result) => {
              let zip = new JSZip();// 创建压缩包
              let img = zip.folder("image"); // 创建文件夹
              let number = 0;
              result.map((p) => {
                let i = number++;
                img.file(`${i}.png`, p, {
                  base64: true,
                });
              });
              zip.generateAsync({ type: "blob" }).then(function (content) {
                // see FileSaver.js
                FileSaver.saveAs(content, "image.zip");
              });
            })
            .catch((err) => {});
    },
    getBase64Image(src) {
      return new Promise(function (resolve, reject) {
        var canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d"),
          img = new Image();
        img.crossOrigin = "Access-Control-Allow-Origin";
        img.onload = function () {
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0);
          var dataURL = canvas.toDataURL("image/png");
          let deleDataHeader = dataURL.split(",")[1];
          resolve(deleDataHeader);
          canvas = null;
        };
        //这个很重要
        img.src =src;
      });
    },
    // 处理上传按钮点击
    _handleUploadClick() {
      this.$refs.triggerDiv.click()
    },
    // 处理预览
    _handlePreview(file) {
      this.dialogImageUrl = file.url
      this.downloadName = file.name
      this.dialogVisible = true
    },
    // 处理预览关闭
    _handlePreviewClosed() {
      this.dialogImageUrl = ''
      this.downloadName = ''
    },

    // 处理删除
    _handleRemove(file) {
      if (file.appendixId) {
        // 这是要删除已经存在的附件
        const index = this.fileList.findIndex(
          (itm) => itm.appendixId === file.appendixId
        )
        this.fileList.splice(index, 1)
        this.removeList.push(file.appendixId)
      } else {
        // 这是删除已上传但还未保存的附件
        const index = this.fileList.findIndex((itm) => itm.uid === file.uid)
        this.fileList.splice(index, 1)
      }
      this.$emit('onChange', this.fileList.length)
    },

    // 自定义上传过程
    _handleRequest(param) {
      if (this.vesselBankFlag === 'V') {
        //船端
        this._uploadFilesShip(param)
      }
    },

    async _uploadFilesShip(param) {
      return new Promise(async (resolve, reject) => {
        this.showLoading()
        const file = param.file
        try {
          const data = await this.uploadShipFiles({
            file: file,
            companyId: this.compId || '',
            modelId: this.isNull(this.tableName)
              ? ''
              : this.tableName.split('_')[0],
            vesselId: this.vesselId || '',
          })
          this.$emit(
            'uploadSuccess',
            data,
            file,
            this.getFilePath(data.appendixPath)
          )
          const item = {
            appendixName: data.appendixName,
            appendixPath: data.appendixPath,
            appendixSize: this.toKB(file.size),
            // appendixType: "V",
            appendixType:
              localStorage.getItem('ws-pf_serviceTypeFlag') == 'true'
                ? 'B'
                : 'V',
            fromTableName: this.tableName,
            vesselId: this.vesselId || '',
            uid: file.uid,
            url: this.getFilePath(data.appendixPath),
            name: file.name,
          }
          let fileIndex = this.getFileIndex(item.uid)
          if (fileIndex >= 0) {
            this.tempFileList.splice(fileIndex, 1, item)
            this._handleSuccessOnce()
          }
          resolve()
        } catch (error) {
          this.handleError()
          reject()
        }
      })
    },

    // 处理单个文件上传成功
    _handleSuccessOnce() {
      this.curFileNum--
      if (this.curFileNum === 0) {
        this.fileList.push.apply(
          this.fileList,
          this.tempFileList.filter((item) => {
            return !this.isNull(item.uid)
          })
        )
        this.tempFileList = []
        this.$emit('onChange', this.fileList.length)
        this.hideLoading()
      }
    },
    // 处理在线编辑
    _handleOnline(file) {
      window.open(
        process.env.VUE_APP_BASE_API +
          '/office/file?fileId=' +
          file.appendixId +
          '&showSaveFlag=1'
      )
    },

    // 处理下载
    _handleDownload(file, type) {
      if (this.isOnlineFile(file) && type === 'view') {
        this.pdfUrl =
          file.url || this.$store.getters.baseInfo.fileUrl + file.appendixPath
        this.pdfFileName = file.appendixName || file.name
        this.isShowPdf = true
        return
      }
      downloadNow(file.url+'?s=' + Math.random().toString(), file.name, this.vesselBankFlag, type)
    },

    _handleBeforeUpload(file) {
      let size = this.sizeLimit ? this.sizeLimit : 50
      if (file.size > size * 1024 * 1024) {
        EventBus.$emit('error', this.$t('showMessage.filesCannot') + size + 'M')
        return false
      }
      if (this.limit) {
        let limitFileNum = parseInt(this.limit)
        let currentFileNum = this.fileList.length + this.curFileNum
        if (limitFileNum > 1 && currentFileNum > limitFileNum) {
          this._handleExceed()
          return false
        }
        if (limitFileNum === 1) {
          this.fileList = []
        }
      }
      return true
    },
    //处理文件上传失败
    _handleError() {
      this.curFileNum--
      this.hideLoading()
    },

    _handleExceed() {
      EventBus.$emit('warning', `最多只能上传${this.limit}个文件`)
    },

    // 传入appendixIds 从服务器获取文件列表信息
    _getFileList(appendixIds) {
      return new Promise(async (next) => {
        try {
          next((await getFileList({ appendixIds }).toPromise()) || [])
        } catch (error) {
          next()
        }
      })
    },

    handleSaveBill() {
      return new Promise((resolve, reject) => {
        if (!this.removeList && this.fileList.length == 0) {
          resolve('')
          return
        }
        const oldAppendixIds = this.removeList.join()
        const newAppendixs = this.fileList
        const params = { newAppendixs, oldAppendixIds }
        // if (newAppendixs)
        saveFiles(params)
          .toPromise()
          .then((res) => {
            resolve(res.join())
          })
          .catch((err) => {
            EventBus.$emit('error', this.$t('showMessage.saveFilesError'))
            reject()
          })
      })
    },

    // 获取文件样式
    getFileClass(file) {
      const ext = this.getExtName(file.name)
      return 'ext ' + ext
    },
    // 是否为图片
    isPictureFile(file) {
      if (file && file.name) {
        const name = this.getExtName(file.name)
        return (
          name === 'jpg' ||
          name === 'png' ||
          name === 'jpeg' ||
          name === 'gif' ||
          name === 'webp' ||
          name === 'bmp' ||
          name === 'JPG' ||
          name === 'PNG' ||
          name === 'JPEG' ||
          name === 'GIF' ||
          name === 'WEBP' ||
          name === 'BMP'
        )
      }
      return false
    },
    // 是否为在线打开文件
    isOnlineFile(file) {
      if (file && file.name) {
        const name = this.getExtName(file.name)
        return name === 'pdf' || name === 'tet'
      }
      return false
    },

    getOssInter() {
      return new Promise(async (next) => {
        try {
          next(await getOssInterimCredentials().toPromise())
        } catch (error) {
          next()
        }
      })
    },

    getFileIndex(uid) {
      for (let i = 0; i < this.initFileList.length; i++) {
        if (this.initFileList[i].uid === uid) {
          return i
        }
      }
      return -1
    },

    // 显示loading
    showLoading() {
      this.loadingView = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
        target: document.querySelector('.div1'),
      })
    },
    // 隐藏loading
    hideLoading() {
      this.loadingView.close()
    },
    // 获取后缀名
    getExtName(url) {
      if (!url) {
        return url
      }
      url = url.substr(url.lastIndexOf('.') + 1)
      if (url.indexOf('?') >= 0) {
        url = url.substr(url.indexOf('?'))
      }
      return url
    },
    checkUrl(path) {
      if (path.indexOf('http://') > -1 || path.indexOf('https://') > -1) {
        let pathSplit = path.split('.com/')
        if (pathSplit) {
          path = pathSplit[1]
        }
      }
      return path
    },
    getFilePath(path) {
      // let sysUrl =  process.env.NODE_ENV === "production"?"http://" + window.location.host+"/":"http://product-dev.winsea.com/";
      // let sysUrl = this.$store.getters.baseInfo.fileUrl
      // path = this.checkUrl(path)
      // if (this.clientFag === "B") {
      //   // sysUrl+="pb/"
      // }
      // return sysUrl + this.slash(path)
      return path
    },
    // 字节转KB
    toKB(bt) {
      return (bt / 1024).toFixed(2) + 'KB'
    },

    clearFiles() {
      this.fileList = []
    },
    // 反斜杠转斜杠
    slash(str) {
      return str.replace(/\\/g, '/')
    },
  },
}
</script>

<style lang="scss" scoped>
$picture-size: 110px;
$ctrl-margin-left: 10px;

.archived-history
  .upButton
  /deep/
  .el-upload-list__item-delete:nth-last-of-type(1) {
  display: inline-block !important;
}
.el-button--default {
  border: 1px solid #5473e8;
  color: #5473e8;
}
.ws-upload {
  /*.upload-noramark-btn{*/
  /*  padding: 0px;*/
  /*  border: none;*/
  /*}*/
  padding-bottom: 10px;
  .trigger-group {
    margin-bottom: 10px;
    margin-top: 10px;
    .upload-btn {
      display: inline-block;
      border-radius: 4px;
    }
    .tip {
      // display: inline-block;
      margin: 0;
      padding: 0;
      font-size: 12px;
      line-height: 17px;
      color: #999;
      margin-bottom: 4px;
      margin-top: 4px;
      vertical-align: middle;
      white-space: initial;
      text-align: left;
      width: calc(100% - 100px);
    }
  }

  /deep/ .thumbnail-group {
    width: $picture-size;
    height: $picture-size;

    .el-upload-list__item-thumbnail {
      display: block;
      border-radius: 6px;
      border: 1px solid #ccd6e3;
      background-color: #fff;
    }
  }
  /deep/.winsea-picture-view ul {
    padding: 0;
  }

  /deep/ .el-upload-list__item-actions {
    height: $picture-size;
    overflow: hidden;
    border-radius: 6px;
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 100;
    height: 30px;
    top: 80px;
  }

  .fileName {
    font-size: 12px;
    color: #666;
    margin: 0;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /deep/
    .el-upload-list--picture-card
    .el-upload-list__item-actions
    span
    + span {
    margin-left: $ctrl-margin-left;
  }

  /deep/ .el-upload.el-upload--picture-card {
    display: none;
  }

  /deep/ .el-upload-list__item {
    width: $picture-size;
    height: auto;
    border: 0;
    background: none;
  }

  .ws-upload-progress {
    width: 84%;
    top: 88px;
  }

  .ext {
    background-size: $picture-size * 0.7;
    background-repeat: no-repeat;
    background-position: center;
  }
  .doc {
    background-image: url('~@/assets/images/common/upload/doc.png');
  }
  .docx {
    background-image: url('~@/assets/images/common/upload/docx.png');
  }
  .eml {
    background-image: url('~@/assets/images/common/upload/eml.png');
  }
  .ppt {
    background-image: url('~@/assets/images/common/upload/PPT.png');
  }
  .pptx {
    background-image: url('~@/assets/images/common/upload/PPT.png');
  }
  .pdf {
    background-image: url('~@/assets/images/common/upload/pdf.png');
  }
  .txt {
    background-image: url('~@/assets/images/common/upload/txt.png');
  }
  .mp4,
  .avi,
  .mov,
  .rmvb,
  .rm,
  .flv {
    background-image: url('~@/assets/images/common/upload/video.jpg');
    background-size: $picture-size;
  }
  .rar {
    background-image: url('~@/assets/images/common/upload/rar.png');
  }
  .xls {
    background-image: url('~@/assets/images/common/upload/xls.png');
  }
  .xlsx {
    background-image: url('~@/assets/images/common/upload/xlsx.png');
  }
  .zip {
    background-image: url('~@/assets/images/common/upload/zip.png');
  }
}

// 取消ele动画
/deep/ .el-list-leave-active {
  transition: all 0s;
}
/deep/ .el-list-enter-active {
  transition: all 0s;
}
/*.el-button--text{*/
/*  color: #666666;*/
/*}*/
/*.el-button--text:hover{*/
/*  color: #4a89f1;*/
/*}*/
/*.el-button--text:focus{*/
/*  color: #ffffff;*/
/*}*/

.operate-bg:hover {
  opacity: 0;
}
.batchdown-btn{
  margin-bottom:10px;
}
</style>