fj-dc-ui/.svn/pristine/89/89eb4e19a540f63a0553d5ce8be83a28c96368a2.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"
        >{{!addPicPanel?"添加照片":"取消"}}</el-button>
      </el-row>
      <el-row v-if="addPicPanel"  style="text-align:center;">
        <upload ref="uploadFile" :type="type" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload>
      </el-row>
      <el-row>
        <el-carousel  :interval="4000"  height="350px" id="imgView">
          <el-carousel-item v-for="(item,index) in pictureArray" :key="index">
            <a :href="`${hostUrl}/${item.filePath}`" target="_blank">

              <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-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">保 存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import request from '@util/gw_ajax_request'
  import upload from '@widget/uploadFileWithType'
  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'],
        components: {
          upload
        },
        data (){
          return {
            dialogFormVisible:true,
            addPicPanel:false,
            pictureArray: [],
          }
        },
        computed:{
            hostUrl(){
                 return hostUrl
            }
        },
        mounted(){
          this.getPicArray();
        },
        methods:{
          dialogClose(){
            this.$emit('jqmmDialogClose');
          },
          addPic() {
            this.addPicPanel = !this.addPicPanel;
          },
          getPicArray(){
            let params = {
                bizId: this.jqmmEngId,
                bizType: this.type
            }
            var _this = this;
            request.post(`/file/findPageInfo`,params).then(res =>{
              if(res.success) {
                this.pictureArray = res.data.list;
                _this.$nextTick(function(){
                    var  ViewerDom = document.getElementById('imgView');
                    var  viewer = new Viewer(ViewerDom, {})
                });
              }
            })
          },
          onSubmit(){
            this.submitUpload();

          },
          // 文件上传
          submitUpload() {
            if (this.$refs.uploadFile.submitUpload(this.jqmmEngId,this.type)) {
              this.removeNewSupervision();
            }
          },
          removeNewSupervision(arg){
            if (arg) {
              this.$message.success('上传成功');
              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>
  .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;
  }
</style>