fj-dc-ui/.svn/pristine/ed/edb5eaa4da18ad3fee535dafb22b1bbe1dc6b0c7.svn-base

<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="dialogClose" :append-to-body="true"
               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" v-if="openType==undefined || openType"
        >{{ !addPicPanel ? "添加多媒体" : "取消" }}
        </el-button>
      </el-row>
      <el-row v-if="addPicPanel" style="text-align:center;">
        <upload ref="uploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload>
      </el-row>
      <el-row>
        <el-tabs style="overflow-y: auto;margin:5px;" :style="{'max-height':testHeight-40+'px',}">
          <el-tab-pane :label="picturetabName" style="height: 350px;">
            <el-carousel :interval="4000" height="350px" id="imgView">
              <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%;" :src="`${hostUrl}/${item.filePath}`">
                </a>
                <div class="image-preview-action">
                  <i @click="removeFile(item.id)" class="el-icon-delete"></i>
                </div>
              </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>
                <div>
                  <el-button @click="removeFile(item.id)" type="danger" icon="el-icon-delete" circle></el-button>
                </div>
              </el-carousel-item>
              <el-carousel-item v-if="videoArray.length==0">
                <p class="noPic">暂无视频信息</p>
              </el-carousel-item>
            </el-carousel>
          </el-tab-pane>
        </el-tabs>

      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" v-if="openType==true || openType==undefined || openType==null">保 存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import request from '../../utils/gw_ajax_request'
import upload from '../../widgets/uploadFile'
import {deleteFileById} from "../../api/duChaAPI.js";
import {hostUrl} from "@util/global_variable.js";
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
export default {
  name: "theRecentAppearance",
  props: ['jqmmShow', 'jqmmEngId', 'dialogTitle', 'currentObjectName','openType'],
  components: {
    upload
  },
  data() {
    return {
      dialogFormVisible: true,
      addPicPanel: false,
      pictureArray: [],
      videoArray: [],
      picturetabName: [],
      videotabName: []
    }
  },
  computed: {
    hostUrl() {
      return hostUrl
    }
  },
  mounted() {
    this.getPicArray();
  },
  methods: {
    dialogClose() {
      this.$emit('jqmmDialogClose');
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    getPicArray() {
      var _this = this;
      request.post(`/file/findFileByBiz?bizId=${this.jqmmEngId}`).then(res => {
        if (res.success) {
          this.pictureArray = [];
          this.videoArray = [];
          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
                  }
                ]
              });
            }
          });
          _this.$nextTick(function(){
              var  ViewerDom = document.getElementById('imgView');
              var  viewer = new Viewer(ViewerDom, {})
          });
          this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
          this.videotabName = "视频资料(" + this.videoArray.length + ")";
        }
      })
    },
    onSubmit() {
      this.submitUpload();

    },
    // 文件上传
    submitUpload() {
      if (this.$refs.uploadFile.submitUpload(this.jqmmEngId)) {
        this.removeNewSupervision();
      }
    },
    removeNewSupervision(arg) {
      if (arg) {
        this.$message.success('上传成功');
        this.addPicPanel = false;
        this.getPicArray();
        // this.$emit('jqmmDialogClose');
        // this.pictureArray = [];
        this.$refs.uploadFile.init();
      } 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">
.jqmm {
  .image-preview-action {
    position: absolute;
    top: 0;
    left: 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;
  }

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