fj-dc-ui/.svn/pristine/5a/5a0d3771a34419a00e12ea8d1088617cdc1e102b.svn-base

<template>
  <div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="dialogClose" :append-to-body="true" width="60%" 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"
        >{{ !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-button type="primary" @click="onSubmit">保 存</el-button>
      </el-row>
      <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 v-if="item.filePath.indexOf('http')>-1" style="height:100%;" :src="`${item.filePath}`">
                <img v-if="item.filePath.indexOf('http')<0" style="height:100%;width: 100%;" :src="`${hostUrl}/${item.filePath}`">
                <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 class="image-preview-action">
                  <i @click="removeFile(item.id)" class="el-icon-delete"></i>
                </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-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-column header-align="center" align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="removeFile(scope.row.id,scope.$index)"
                    type="danger"
                  >删除
                  </el-button>
                </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-column header-align="center" align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="removeFile(scope.row.id,scope.$index)"
                    type="danger"
                  >删除
                  </el-button>
                </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 upload from '../../../widgets/uploadFilePblmConfirm'
import {deleteFileById} from "../../../api/duChaAPI.js";
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: "theRecentAppearance",
  props: ['jqmmShow', 'pblmId', 'dialogTitle', 'currentObjectName','openType','type','step'],
  components: {
    upload,
    elaudio
  },
  data() {
    return {
      isCounty:this.$route.params.type,
      bizType:"",
      testHeight:350,
      dialogFormVisible: true,
      addPicPanel: false,
      pictureArray: [],
      videoArray: [],
      videoArray: [],
      audioArray: [],
      fileArray:[],
      picturetabName: "",
      videotabName: "",
      audiotabName: "",
      filetabName: "",
    }
  },
  computed: {
    hostUrl() {
      return hostUrl
    }
  },
  mounted() {
    this.getPicArray();
  },
  watch: {
      currentObjectId: function () {
          this.picturetabName = "";
          this.videotabName = "";
          this.audiotabName = "";
          this.filetabName = "";
          this.pictureArray = [];
          this.videoArray = [];
          this.audioArray = [];
          this.fileArray = [];
          this.getPicArray();
      }
  },
  methods: {
    dialogClose() {
      this.$emit('jqmmDialogClose');
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    getPicArray() {
        var params = {
            bizId:this.pblmId
        }
        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 + ")";
        }
      })
    },
    onSubmit() {
      this.submitUpload();

    },
    // 文件上传
    submitUpload() {
      if (this.$refs.uploadFile.submitUpload(this.pblmId)) {
        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">
  .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;
    bottom: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>