fj-dc-ui/.svn/pristine/08/08c3b38e2170409d187d14c265acdf7b6e9c0dcd.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" v-if="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 v-else>
                <el-form label-width="80px">
                  <el-form-item label="详细描述">
                    <el-input type="textarea"  v-model="formObj.explain" style="width:80%"></el-input>
                  </el-form-item>
                </el-form>
              <div
                style="width: 100%;float: left;border: 1px solid rgb(213, 213, 255);margin-right: 5px;overflow-y: auto;max-height: 58vh;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
                <el-tabs style="margin:0px 5px">
                  <el-tab-pane :label="picturetabName">
                    <el-row>
                      <div style="overflow-y:auto;overflow-x:hidden;max-height:30vh;padding:10px;">
                        <div class="upload-container"  id="imgView1">
                          <div
                            v-for="(item, index) in pictureArray"
                            :key="index"
                            class="image-preview image-app-preview"
                          >
                            <div class="image-preview-wrapper">
                              <img :src="`${hostUrl}/${item.filePath}`">
                              <div class="image-preview-action">
                                <i @click="removeFile(item.id)" v-if="openType" class="el-icon-delete"></i>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-row>
                  </el-tab-pane>

                  <el-tab-pane :label="audiotabName">
                    <el-table border :data="audioArray" style="width: 100%;margin: 0 auto;">
                      <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-column header-align="center" align="center" label="操作" v-if="openType">
                        <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="videotabName">
                    <el-table border :data="videoArray" style="width: 100%;margin: 0 auto;">
                      <el-table-column header-align="center" align="center" label="视频">
                        <template slot-scope="scope">
                          <video-player
                            class="vjs-custom-skin"
                            ref="videoPlayer"
                            :options="scope.row"
                            :playsinline="true"
                          ></video-player>
                        </template>
                      </el-table-column>
                      <el-table-column header-align="center" align="center" label="操作" v-if="openType">
                        <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;">
                      <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="操作" v-if="openType">
                        <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>
              </div>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit" v-if="openType">保 存</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
  import request from '@util/gw_ajax_request'
  import upload from './uploadPicWithDesc'
  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','type','openType'],
        components: {
          upload
        },
        data (){
          return {
            dialogFormVisible:true,
            addPicPanel:false,
            picturetabName: "",
            audiotabName: "",
            videotabName: "",
            pictureArray: [],
            audioArray: [],
            videoArray: [],
            filetabName: "",
            fileArray: [],
            gwComFileList:[],
            formObj:{
                explain:""
            },
            expertList:[]
          }
        },
        computed:{
            hostUrl(){
                return hostUrl
            }
        },
        mounted(){
            this.getDataInfo();
        },
        methods:{
          getDataInfo(){
            var _self = this;
            request.get(`/bis/insp/wiujs/support/get?caseId=`+this.jqmmEngId+"&name="+this.type).then(res =>{
                if(res.success) {
                    _self.formObj = res.data;
                    if(_self.formObj.id){
                        _self.getPicArray();
                    }
                }
            })
          },
          dialogClose(){
            this.$emit('jqmmDialogClose');
          },
          addPic() {
            this.addPicPanel = !this.addPicPanel;
          },
          getPicArray(){
            var _self = this;
            let params = {
                bizId: this.formObj.id
            }
            this.pictureArray = [];
            this.audioArray = [];
            this.videoArray = [];
            this.fileArray = [];
            this.gwComFileList = [];
            var _this = this;
            request.post(`/file/findPageInfo`,params).then(res =>{
              if(res.success) {
                  _self.gwComFileList = res.data.list==null?[]:res.data.list;
                  res.data.list.forEach(item => {
                      if (
                          item.fileExt == "mp3" ||
                          item.fileExt == "MP3" ||
                          item.fileExt == "m4a"
                      ) {
                          this.audioArray.push(item);
                      } else 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({
                              id: item.id,
                              bizId: item.bizId,
                              width: "130",
                              height: "130",
                              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 {
                          this.fileArray.push(item);
                      }
                  });
                  _this.$nextTick(function(){
                      var  ViewerDom = document.getElementById('imgView1');
                      var  viewer = new Viewer(ViewerDom, {})
                      console.log("img");
                  });
                  this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
                  this.audiotabName = "音频资料(" + this.audioArray.length + ")";
                  this.videotabName = "视频资料(" + this.videoArray.length + ")";
                  this.filetabName = "其它资料(" + this.fileArray.length + ")";
              }
            })
          },
          onSubmit(){
            var _self = this;
            var obj={
                id:_self.formObj.id,
                caseId:this.jqmmEngId,
                explain: this.formObj.explain,
                name:this.type,
                gwComFileList:this.gwComFileList
            }
            request.post(`/bis/insp/wiujs/support`,obj).then(res =>{
                if(res.success) {
                    _self.submitUpload(res.data.id);
                }
            })


          },
          // 文件上传
          submitUpload(id) {
            if(this.$refs.uploadFile==undefined){
                this.$message.success('编辑成功');
                this.getDataInfo();
                this.$emit('jqmmDialogClose');
                this.addPicPanel = false;
            }
            if (this.$refs.uploadFile.submitUpload(id,this.type)) {
              this.removeNewSupervision();
            }
          },
          removeNewSupervision(arg){
            if (arg) {
              this.$message.success('上传成功');
              this.getDataInfo();
              this.$emit('jqmmDialogClose');
              // this.pictureArray = [];
              this.$refs.uploadFile.init();
              this.addPicPanel = !this.addPicPanel;
            } 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">
    .img_wrapper{
        width: 120px;
        min-height: 120px;
        max-height: 200px;
        position: relative;
        float: left;
        &:hover{
            .image-action{
                opacity: 1;
            }
        }
        +span{
            margin-left: 20px;
        }
    }
    .image-action{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        text-align: center;
        opacity: 0;
        font-size: 16px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
        cursor: pointer;
        line-height: 40px;
    }
    .image-action .el-icon-delete {
        font-size: 20px;
        color: #fff;
    }
    .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;
    }
    .viewer-container{
      z-index: 9999 !important;
    }
    .upload-container {
      width: 100%;
      position: relative;

      .image-uploader {
        width: 35%;
        float: left;
      }

      .image-preview {
        width: 200px;
        height: 200px;
        position: relative;
        border: 1px dashed #d9d9d9;
        float: left;
        // margin-left: 50px;
        .image-preview-wrapper {
          position: relative;
          width: 100%;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
          }
        }

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

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

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

      .image-app-preview {
        margin-bottom: 10px;
        width: 33%;
        height: 180px;
        position: relative;
        border: 1px dashed #d9d9d9;
        float: left;
        // margin-left: 50px;
        .app-fake-conver {
          height: 44px;
          position: absolute;
          width: 100%; // background: rgba(0, 0, 0, .1);
          text-align: center;
          line-height: 64px;
          color: #fff;
        }
      }
    }
</style>