FE-V2-PC/src/components/lookDocumentDialog/lookDocumentListDialog.vue

<!--
    查看多个文档

    import lookDocumentListDialog from '@/components/lookDocumentDialog/lookDocumentListDialog.vue'

    components: {
      lookDocumentListDialog
    },

    <lookDocumentListDialog v-if="lookDocumentListType" :propsLookDocumentListData="propsLookDocumentListData"></lookDocumentListDialog>

      //查看多个文档
      lookDocumentListButton(type){
        if(type==1){
          this.$set(this,'propsLookDocumentListData',{
            title:"查看附件",
            list:this.addForm.data7
          });
          this.$set(this,'lookDocumentListType',true);
        }else{
          this.$set(this,'lookDocumentListType',false);
        }
      },
-->
<template>
  <el-dialog class="lookDocumentListDialog" :title="lookDocumentListTitle"
             :visible.sync="lookDocumentListType" v-if="lookDocumentListType"
             @close="outLook"
             width="1300px" height="700" append-to-body>
    <div class="lookDocumentListDialog-page">
      <div class="left-box">
        <div class="left-title-box">
          <img src="@/assets/ZDimages/safetyCheck/icon_dr_wj.png">
          <p>材料附件</p>
          <p class="button-p" @click="allDownloadButton">全部下载</p>
        </div>
        <div class="left-for-box scrollbar-box">
          <p class="left-for-p" v-for="(iframeItem,iframeIndex) in lookDocumentList" :key="iframeIndex"
             @click="lookDocumentListCheck(iframeIndex)"
             :class="lookDocumentListIndex == iframeIndex?'check-p':''">{{iframeItem.name}}</p>
        </div>
      </div>
      <div class="center-border"></div>
      <div class="right-box">
        <iframe
          v-if="lookDocumentSrc"
          class="iframe"
          :src="lookDocumentSrc" scrolling="auto" frameborder="0">
        </iframe>
        <p class="positionButton" @click="goPage">全屏</p>
      </div>
    </div>
    <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
      <p class="dialog-footer-button-null"></p>
      <p class="dialog-footer-button-info" @click="outLook">取消</p>
      <p class="dialog-footer-button-primary" @click="downloadButton">下载</p>
      <p class="dialog-footer-button-null"></p>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'lookDocumentListDialog',
    props:{
      propsLookDocumentListData:{},
    },
    data(){
      return{
        lookDocumentListType:true,
        lookDocumentListTitle:"",
        lookDocumentList:[],
        lookDocumentSrc:"",
        lookDocumentListIndex:0,
      }
    },
    created(){
      this.$set(this,'lookDocumentListTitle',this.propsLookDocumentListData.title);
      this.$set(this,'lookDocumentList',this.propsLookDocumentListData.list);
      this.$set(this,'lookDocumentSrc',this.urlJudge(this.propsLookDocumentListData.list[0].url));
    },
    mounted(){

    },
    methods:{
      //全部下载
      allDownloadButton(){
        let self = this;
        for(let i=0;i<self.lookDocumentList.length;i++){
          this.downloadUrl(this.lookDocumentList[i].url,this.lookDocumentList[i].name)
        }
      },
      // 切换按钮
      lookDocumentListCheck(val){
        console.log(val)
        this.$set(this,'lookDocumentListIndex',val);
        this.$set(this,'lookDocumentSrc',this.urlJudge(this.lookDocumentList[val].url));
      },
      // 返回按钮
      outLook(){
        this.$parent.lookDocumentListButton(2)
      },
      // 下载按钮
      downloadButton(){
        this.downloadUrl(this.lookDocumentList[this.lookDocumentListIndex].url,this.lookDocumentList[this.lookDocumentListIndex].name)
      },
      //打开新窗口
      goPage(){
        window.open(this.lookDocumentSrc)
      },
    }
  }
</script>

<style scoped lang="scss">
  .lookDocumentListDialog{
    .lookDocumentListDialog-page{
      display: flex;
      flex:1;
      height:645px;
      overflow: hidden;
      padding:0 50px;
      .left-box{
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width:265px;
        .left-title-box{
          padding-bottom:20px;
          display: flex;
          width:230px;
          border-bottom:1px dashed #D8D8D8;
          img{
            width:16px;
            height:13px;
            margin:13px 15px 13px 0;
          }
          p:nth-child(2){
            flex:1;
            line-height:40px;
            font-size:16px;
            color:#0183FA;
          }
          .button-p{
            padding:0 10px;
            margin-top:5px;
            height:30px;
            line-height:30px;
            font-size:14px;
            color:#0183FA;
            border:1px solid #0183FA;
            border-radius:4px;
            cursor: pointer;
          }
          .button-p:hover{
            color:#fff;
            border:1px solid #0183FA;
            background-color: #0183FA;
          }
        }
        .left-for-box{
          flex:1;
          .left-for-p{
            padding:0 10px;
            width:230px;
            line-height:40px;
            margin-top:10px;
            font-size:16px;
            color:#333;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            cursor: pointer;
          }
          .check-p{
            background-color:rgba(1,131,250,0.2);
            color:#0183FA;
          }
        }
      }
      .center-border{
        border-right:1px dashed #D8D8D8;
      }
      .right-box{
        flex:1;
        display: flex;
        margin-left:57px;
        position: relative;
        .positionButton{
          position: absolute;
          top:15px;
          right: 35px;
          border:1px solid #0183fa;
          border-radius:4px;
          line-height:30px;
          width:60px;
          text-align: center;
          cursor: pointer;
          color:#0183fa;
          background-color: #fff;
        }
        .iframe{
          flex:1;
        }
      }
      .out-button{
        width:60px;
        line-height:30px;
        color:#999;
        background-color: #dedede;
        border-radius:4px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top:17px;
        right:17px;
        z-index:99999;
      }
    }
  }
</style>