fj-dc-ui/.svn/pristine/cd/cdf9b92d2f3ea6f8eb39c92cacddb18ad3cd8367.svn-base

<template>
  <div>
      <el-row>
        <el-tabs style="overflow-y: auto;margin:5px;">
          <el-tab-pane :label="picturetabName" style="height: 350px;">
            <el-carousel :interval="4000" height="350px">
              <el-carousel-item v-for="(item,index) in pictureArray" :key="index">
                <a :href="`${item.filePath}`" target="_blank" v-if="item.filePath.indexOf('http')>-1">
                  <img style="height:100%;" :src="`${item.filePath}`">
                </a>
                <a :href="`${hostUrl}/${item.filePath}`" target="_blank" v-if="item.filePath.indexOf('http')<0">
                  <img style="height:100%;width: 100%;" :src="`${hostUrl}/${item.filePath}`">
                </a>
              </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>
                  <!-- <span>{{scope.row.fileTitle}}</span> -->
                </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>
  </div>
</template>

<script>
import request from '../../utils/gw_ajax_request'
import upload from '../../widgets/uploadFilePblmConfirm'
import {deleteFileById} from "../../api/duChaAPI.js";
import {hostUrl} from "@util/global_variable.js";
import elaudio from "../../widgets/elAudioShort.vue";
export default {
  name: "comFileView",
  props: ['bizId','bizType'],
  components: {
    upload,
    elaudio
  },
  data() {
    return {
      testHeight:350,
      dialogFormVisible: true,
      addPicPanel: false,
      pictureArray: [],
      videoArray: [],
      videoArray: [],
      audioArray: [],
      fileArray:[],
      picturetabName: "",
      videotabName: "",
      audiotabName: "",
      filetabName: "",
    }
  },
  computed: {
    hostUrl() {
      return hostUrl
    }
  },
  mounted() {
    this.getPicArray();
  },
  methods: {
    showDetail(id){
       this.bizId = id;
       this.getPicArray();
    },
    dialogClose() {
      this.$emit('jqmmDialogClose');
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    getPicArray() {
        var params = {
            bizId:this.bizId,
            bizType:this.bizType
        }
      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.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;
    left: 0;
    width: 100%;
    height: 35px;
    text-align: center;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
    cursor: pointer;
    line-height: 35px;
  }

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

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

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

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