fj-dc-ui/.svn/pristine/dd/dda3de1d83e24754dba108df22e45c879beeeee4.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-row>
            <el-row v-else>
                <viewer :images="pictureArray">
                    <div v-for="(item,index) in pictureArray" :key="index" style="overflow:hidden">
                        <div class="img_wrapper">
                            <img style="width: 100%;height:100%;" :src="`${hostUrl}/${item.filePath}`">
                            <div class="image-action">
                                <i @click="removeFile(item.id)" class="el-icon-delete"></i>
                            </div>
                        </div>
                        <span>描述信息：{{item.keyWord}}</span>
                    </div>
                </viewer>
                <p v-if="pictureArray.length==0" class="noPic">暂无图片信息</p>
            </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/uploadPicWithDesc'
  import { deleteFileById } from "@api/duChaAPI.js";
  import { hostUrl } from "@util/global_variable.js";
    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
            }
            request.post(`/file/findPageInfo`,params).then(res =>{
              if(res.success) {
                this.pictureArray = res.data.list;
              }
            })
          },
          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();
              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;
    }
</style>