fj-dc-ui/.svn/pristine/4b/4b100fd3702d9455d42cd7001900e6c94fd47870.svn-base

<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="dialogClose" :append-to-body="true" width="60%" class="jqmm">
      <el-row>
        <el-tabs style="overflow-y: auto;margin:5px;">
          <el-tab-pane :label="picturetabName" style="height: 400px;">
            <el-carousel :interval="4000" height="350px" id="imgView">
              <el-carousel-item v-for="(item,index) in pictureArray" :key="index">
                <img style="height:100%;width: 100%;" :src="`${hostUrl}/${item.filePath}`">
              </el-carousel-item>
              <p v-if="pictureArray.length==0" class="noPic">暂无图片信息</p>
            </el-carousel>
          </el-tab-pane>
          <el-tab-pane :label="videotabName">
            <el-carousel :interval="4000" height="350px">
              <el-carousel-item v-for="(item,index) in videoArray" :key="index">
                <video-player
                    class="vjs-custom-skin"
                    ref="videoPlayer"
                    :options="item"
                    :playsinline="true"
                ></video-player>
              </el-carousel-item>
              <el-carousel-item v-if="videoArray.length==0">
                <p class="noPic">暂无视频信息</p>
              </el-carousel-item>
            </el-carousel>
          </el-tab-pane>
          <el-tab-pane :label="audiotabName">
            <el-table border :data="audioArray" style="width: 100%;margin: 0 auto;" :height="testHeight">
              <el-table-column header-align="center" align="center" label="音频">
                <template slot-scope="scope">
                  <elaudio
                    style="margin-left:15%;width:100px;height:30px;"
                    :theUrl="`${hostUrl}/${scope.row.filePath}`"
                  ></elaudio>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="filetabName">
            <el-table border :data="fileArray" style="width: 100%;margin: 0 auto;" :height="testHeight">
              <el-table-column header-align="center" align="center" label="文档">
                <template slot-scope="scope">
                  <p>
                    <a :href="`${hostUrl}/${scope.row.filePath}`" target="_blank"
                       rel="noopener noreferrer">
                      {{scope.row.fileName}}
                    </a>
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import request from '../../../../utils/gw_ajax_request'
import {hostUrl} from "@util/global_variable.js";
import elaudio from "../../../../widgets/elAudioShort.vue";
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
  name: "pblmMendFile",
  props: ['jqmmShow', 'pblmId', 'dialogTitle', 'currentObjectName','openType','taskInstId','bizType'],
  components: {
    elaudio
  },
  data() {
    return {
      testHeight:350,
      dialogFormVisible: true,
      addPicPanel: false,
      pictureArray: [],
      videoArray: [],
      videoArray: [],
      audioArray: [],
      fileArray:[],
      picturetabName: "",
      videotabName: "",
      audiotabName: "",
      filetabName: "",
      updateObj:{}
    }
  },
  computed: {
    hostUrl() {
      return hostUrl
    }
  },
  mounted() {
    this.getTaskDetail();
  },
  watch: {

  },
  methods: {
    getTaskDetail() {
        this.updateObj = {};
        request.get(`/bis/insp/pblm/plist/v1/workflow/qryTaskDetail/${this.taskInstId}`).then(res => {
            if (res.success) {
                this.updateObj = res.data;
                this.getPicArray();
            }
        }).catch(err => {
            console.log(err)
        })
    },
    dialogClose() {
        // //debugger
      this.$emit('jqmmDialogClose');
    },
    getPicArray() {
        var params = {
            bizId:this.updateObj.formId,
            bizType: this.bizType
        }
        var _this = this;
      request.post(`/file/findAllFile`,params).then(res => {
        if (res.success) {
          this.pictureArray = [];
          this.videoArray = [];
          this.audioArray = [];
          this.fileArray = [];
          res.data.forEach(item => {
            if (
                item.fileExt == "jpg" ||
                item.fileExt == "JPG" ||
                item.fileExt == "png" ||
                item.fileExt == "PNG" ||
                item.fileExt == "JPEG" ||
                item.fileExt == "jpeg"
            ) {
              this.pictureArray.push(item);
            } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
              this.videoArray.push({
                height: "320",
                width: "500",
                id: item.id,
                bizId: item.bizId,
                autoplay: false,
                muted: true,
                language: "en",
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [
                  {
                    type: "video/mp4",
                    src: this.hostUrl + item.filePath
                  }
                ]
              });
            }else if (
                  item.fileExt == "mp3" ||
                  item.fileExt == "MP3" ||
                  item.fileExt == "m4a"
              ) {
                this.audioArray.push(item);
            }else{
                this.fileArray.push(item);
            }
          });
          _this.$nextTick(function(){
              var  ViewerDom = document.getElementById('imgView');
              var  viewer = new Viewer(ViewerDom, {})
          });
          this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
          this.videotabName = "视频资料(" + this.videoArray.length + ")";
          this.audiotabName = "音频资料(" + this.audioArray.length + ")";
          this.filetabName = "其他资料(" + this.fileArray.length + ")";
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .noPic{
    text-align: center;
  }
  .image-preview-action {
    position: absolute;
    top:0;
    width: 100%;
    height: 30px;
    text-align: center;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    cursor: pointer;
    line-height: 30px;
  }

  .image-preview-action .el-icon-delete {
    font-size: 25px;
  }

  .image-preview-action:hover {
    opacity: 1;
  }
.jqmm {
  .image-preview-action {
    position: absolute;
    top:0;
    width: 100%;
    height: 30px;
    text-align: center;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    cursor: pointer;
    line-height: 30px;
  }

  .image-preview-action .el-icon-delete {
    font-size: 25px;
    color:white;
  }

  .image-preview-action:hover {
    opacity: 1;
  }

  .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;
  }

  /*.el-carousel.el-carousel--horizontal {*/
  /*text-align: center;*/
  /*}*/
  .el-dialog__body {
    padding: 0 30px 20px;
  }
}

</style>