erp-el-element/Dialog/Exceldown.vue

<template>
  <div class="popup-message warning" :class="type">
    <div class="pop-view">
      <div style="font-size: 20px;display:flex;justify-content:space-between;align-items:center;">
        <div>
          <i class="el-icon-warning-outline" style="color:#f39c12;margin-right:5px"></i>
          <span style="color:#3498db">导出任务创建成功!</span>
        </div>
        <i class="el-icon-close" @click="closeMessage"></i>
      </div>
      <div style="color:#3498db;margin-top:10px">
        <span>任务名称:{{tips}}</span>
        <span style="margin-left: 10px;">任务编号:{{msg}}</span>
      </div>
      <div style=";margin-top:10px">
        是否立即前往下载管理!
      </div>
      <!-- <span class="pop-title">{{ this.tips || ''}}</span>
      <p class="pop-content" v-if="this.msg">{{ this.msg }}</p> -->
      <div class="pop-btn" v-if="button">
        <el-button type="primary" class="save" @click="okMessage">确定</el-button>
      </div>
    </div>
    
  </div>
</template>
 
<script>
 
export default {
  name: 'Exceldown',
  // props: ["timeVisible", "cfgData", "timeTitle"],
  data() {
    return {
      // 
      callback: null,
      tips: '',
      type: '',
      msg: '',
      button: false,
      duration: 0,
    };
  },
  computed: {
    //
  },
  methods: {
    getParams(options) {
      this.callBack = options.callBack;
      this.type = options.type || ''
      this.tips = options.tips || ''
      this.msg = options.msg || ''
      this.button = options.button || false
      this.duration = options.duration || 0
 
      this.changePosition()
      if(this.duration > 0){
        window.setTimeout(() => {
 
          this.$destroy(true)
          if(this.$el.parentNode){ // 当前节点是否已经被手动移除
            this.$el.parentNode.removeChild(this.$el)
          }
 
          this.changePosition()
        }, this.duration)
      }
    },
    changePosition() {
      let doc = document.body.getElementsByClassName('popup-message')
      let sum = 0;
      for(let i=0; i< doc.length; i++){
        this.$nextTick(() => {
          if(i>0){
            sum = sum + document.body.getElementsByClassName('popup-message')[i-1].clientHeight + 5
            document.body.getElementsByClassName('popup-message')[i].style = `top: ${sum}px`
          }else{
            document.body.getElementsByClassName('popup-message')[i].style = `top: 50%`
          }
        })
         
      }
    },
    okMessage(){
      this.$destroy(true)
      this.$el.parentNode.removeChild(this.$el)
      this.changePosition()
      this.callBack()
    },
    closeMessage(){
      this.$destroy(true)
      this.$el.parentNode.removeChild(this.$el)
      this.changePosition()
    }
  },
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
 
.popup-message {
  font-family: "Source Han Sans Regular";
  color: #333333;
  position: fixed;
  top: 50%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: fit-content;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid #C2C2C2;
  z-index: 9999;
  .pop-view{
    position: relative;
    min-height: 120px;
    height: auto;
    padding: 15px;
    padding-bottom: 13px;
    .pop-title{
      display: block;
      font-size: 18px;
      font-weight: 500;
      padding: 13px 52px 9px 52px;
      position: relative;
      &::before{
        position: absolute;
        content: '';
        // background-image: url('~@/assets/popup/warning.png');
        width: 22px;
        height: 22px;
        left: 20px;
      }
    }
    .pop-content{
      font-weight: 400;
      font-size: 14px;
      padding: 0 52px 5px 52px;
    }
    .pop-btn{
      display: flex;
      justify-content: flex-end;
      .save{
        margin-right: 20px;
      }
    }
    .delete{
      position: absolute;
      content: '';
      // background-image: url('~@/assets/popup/delete.png');
      width: 22px;
      height: 22px;
      top: 18px;
      right: 23px;
    }
  }
}
.success{
  background: #F6FFED;
  border: 1px solid #73D13D;
  color: #73D13D;
  .pop-view{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  .pop-view>.pop-title{
    &::before{
      // background-image: url('~@/assets/popup/success.png');
    }
  }
}
.error{
  background: #FFF1F0;
  border: 1px solid #FF7875;
  // color: #FF7875;
  .pop-view>.pop-title{
    &::before{
      // background-image: url('~@/assets/popup/error.png');
    }
  }
}
</style>