fj-dc-ui/.svn/pristine/aa/aae2f5ef7572fe60bc84c1938ef9d82380975953.svn-base

<template>
  <el-container style="height:520px;">
    <div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="dialogClose" :append-to-body="true" width="60%" class="jqmm">
          <el-row  style="text-align:right;">
            <el-button :type="!addPicPanel ? 'primary' : 'danger'"
                       :icon="!addPicPanel ? 'el-icon-circle-plus-outline':'el-icon-circle-close-outline'"
                       @click="addPic"
            >{{!addPicPanel?"添加文件(PDF、ZIP、RAR、照片)":"取消"}}</el-button>
          </el-row>
            <el-row v-if="addPicPanel"  style="text-align:center;">
                <upload ref="uploadFile" :url="`/pdcApi/upload/file/pdforzip?bizId=`" :is-key-wrod="true" @uploadOver="removeNewSupervision"></upload>
            </el-row>

            <el-row v-else>
              <el-scrollbar :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" noresize="false" tag="section" style="height: 520px;">
                <viewer :images="pictureArray" >
                      <div v-for="(item,index) in pictureArray" :key="index" style="overflow:hidden">
                          <div class="img_wrapper">

                              <img style="width: 100%;height:100%;" :src="`${hostUrl}/${item.thumbnailUrl}`" @click="openPdfAndZip(`${item.fileExt}`,`${item.filePath}`,`${item.fileName}`)"/>
                                <div class="image-action">
                                    <i @click="removeFile(item.id)" class="el-icon-delete"></i>
                                </div>

                          </div>
                          <span>描述信息：{{item.keyWord}}</span>
                      </div>
                  <p v-if="pictureArray.length==0" class="noPic">暂无文件</p>
                </viewer>
              </el-scrollbar>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">保 存</el-button>
            </div>
        </el-dialog>
    </div>

  </el-container>
</template>

<script>
  import request from '@util/gw_ajax_request'
  import upload from '@widget/uploadPicWithDesc'
  import { deleteFileById } from "@api/duChaAPI.js";
  import { hostUrl } from "@util/global_variable.js";

    export default {
        name: "theRecentAppearance",
        props: ['jqmmShow','jqmmEngId','dialogTitle','currentObjectName','type'],
        components: {
          upload,
        },
        data (){
          return {
            dialogFormVisible:true,
            addPicPanel:false,
            pictureArray: []
          }

        },
        computed:{
            hostUrl(){
                return hostUrl
            }
        },
        mounted(){
          this.getPicArray();
        },
        methods:{
          openPdfAndZip(fileExt,pdfurl,fileName){
            console.log("获取到的文件的扩展名：" + fileExt);
            if('pdf' == fileExt.toLowerCase()){
              window.open("../../../static/pdf/web/viewer.html?file=" + encodeURIComponent("/pdcApi" + pdfurl));
              return;
            }else if('zip' == fileExt.toLowerCase() || 'rar' == fileExt.toLowerCase()){
              const link = document.createElement('a');
              link.download = fileName;
              link.style.display = 'none';
              link.href = hostUrl + pdfurl;
              document.body.appendChild(link)
              link.click()
              URL.revokeObjectURL(link.href)
              document.body.removeChild(link)
              return;
            }else if('png' == fileExt.toLowerCase() || 'jpg' == fileExt.toLowerCase()){
              return;
            }
            else{
              this.$message.error('该文件不是PDF或ZIP、RAR');
            }
          },
          openPDfWindow(){

          },
          dialogClose(){
            this.$emit('addPdfAndZipDialogClose');
          },
          addPic() {
            this.addPicPanel = !this.addPicPanel;
          },
          getPicArray(){
            let params = {
                bizId: this.jqmmEngId,
                bizType: this.type
            }

            request.post(`/file/findPageInfo`,params).then(res =>{
              if(res.success) {
                this.pictureArray = res.data.list;
              }
            })
          },
          onSubmit(){
            this.submitUpload();

          },
          // 文件上传
          submitUpload() {
            if (this.$refs.uploadFile.submitUpload(this.jqmmEngId,this.type)) {
              this.removeNewSupervision();
            }
          },
          removeNewSupervision(arg){
            if (arg) {
              this.$message.success('上传成功');
              this.getPicArray();
              // this.$emit('jqmmDialogClose');
              // this.pictureArray = [];
              this.$refs.uploadFile.init();
              this.addPicPanel = !this.addPicPanel;
            } else{
              this.$message.error('上传有误');
            }

          },
          // 删除图片文件
          removeFile(id, index) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "返回",
              type: "warning"
            }).then(
              res => {
                if (res === "confirm") {
                  deleteFileById(id, localStorage.getItem("userid")).then(res => {
                    if (res.success) {
                      this.getPicArray();
                    } else {
                      this.$message.error(res.message);
                    }
                  });
                }
              }
            );

          },
        },
    }
</script>

<style lang="scss">
.abow_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
    .img_wrapper{
        width: 120px;
        min-height: 120px;
        max-height: 200px;
        position: relative;
        float: left;
        &:hover{
            .image-action{
                opacity: 1;
            }
        }
        +span{
            margin-left: 20px;
        }
    }
    .image-action{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        opacity: 0;
        font-size: 16px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
        cursor: pointer;
        line-height: 40px;
    }
    .image-action .el-icon-delete {
        font-size: 20px;
        color: #fff;
    }
    .noPic{
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 300px;
        font-size: 17px;
        font-weight: bold;
    }
    .jqmm span.el-dialog__title {
        font-weight: bold;
    }
    .viewer-container{
      z-index: 9999 !important;
    }
</style>