vue 弹框分左右两部分

<div class="dialog_diy" >
      <el-dialog  :visible.sync="otherShow" :close-on-click-modal='true' width="40%" height="80%">
        <div slot="title" class="header-title">
          <div style="border: 1px solid rgb(15, 15, 15);border-width: 0 0 2px 0;font-size: 24xp;font-weight: bold;color: #f9f9fa;">
            {{zyzzName}}
          </div>
         </div>
         <div class="htmlBody" style="color: #F9F9FA;height:90%;">
            <el-row :gutter="20">
              <el-col :span="11">
                <el-table height="360" :data="otherTableData" highlight-current-row  @row-click="changeImage" >
                  <el-table-column prop="orgId"  type="index" label="序号"/>
                  <el-table-column prop="orgName" width="260px" label="公司名称"/>
                  <el-table-column prop="certifiCount" label="数量"/>
                </el-table>
              </el-col>
              <el-col :span="13">
                  <el-carousel height="360" :interval="4000" type="card" indicator-position="none">
                    <el-carousel-item v-for="(item,index) in pictureOptions" :key="index">
                      <el-image
                      style="width: 100%; height: 100%"
                      :zIndex="9999"
                      :src="item"
                      :preview-src-list="pictureOptions"
                    />
                    </el-carousel-item>
                  </el-carousel>
              </el-col>
            </el-row>
         </div>
      </el-dialog>
    </div>

  点击图片弹框信息

    selectDetail(name){
      const param= new FormData();
      this.pictureOptions=[]
      this.zyzzName=name
      if(name == '专利'){
        if(this.GROUP_PATENT_CODE > 0){
          param.append("certifiType", this.$publicjs.certifi_code.patent);
        }
      }else if(name == '著作权'){
        if(this.GROUP_COPYRIGHT_CODE > 0){
          param.append("certifiType", this.$publicjs.certifi_code.copyright);
        }
      }else if(name == '资质'){
        if(this.GROUP_QUALIFICATIONS_CODE > 0){
          param.append("certifiType", this.$publicjs.certifi_code.qualifications);
        }
      }
      selectDetail(param).then((res) => {
        if (res.code == 200) {
          this.otherTableData = res.data.list
          this.otherTableData.forEach(td=>{
           this.orgOption.forEach( allOrg=>{
              if(td.orgId == allOrg.orgId){
                td.orgName =allOrg.orgName
              }
            })
          }) 
          // 图片处理
           res.data.reportCertificateInfos.forEach(r=>{
            let img = this.$publicjs.qualificationPicture + r.filePath
            this.pictureOptions.push(img);
           })
          this.$nextTick(()=>{
            this.otherShow=true
          })
        }
      });
    },

 

posted @ 2023-06-28 16:34  flyComeOn  阅读(237)  评论(0编辑  收藏  举报