party_construct_web/src/components/BottomRightNotification/index.vue

<!--
 * @Description: 自定义右下角弹出的消息
 * @Author: Rockery
 * @Date: 2021-12-14 11:50:13
 * @LastEditors: Rockery
 * @LastEditTime: 2022-01-21 11:47:26
 * @FilePath: \party_construct_web\src\components\BottomRightNotification\index.vue
 * @Copyright: Copyright (c) 2016~2021 Rockery(1113269755@qq.com)
-->

<template>
  <div class="rocbrnotify">
    <slot></slot>
  </div>
</template>

<script>
import { getWaitHandleList } from "@/api/home";

export default {
  name: 'Bottomrightnotification',
  data() {
    return {
      rocBrNotifyObj: null,
      intervalTimer: null
    };
  },
  created() {
    // this.initData();
  },
  mounted() {
    this.intervalTimer = setInterval(() => {
      this.getWaitHandleListData();
    }, 120000);
  },
  destroyed() {
    this.intervalTimer && clearInterval(this.intervalTimer);
  },
  methods: {
    /** 初始化数据 */
    initData() {
      this.getWaitHandleListData();
    },
    getWaitHandleListData() {
      getWaitHandleList().then(
        resp => {
          if (resp.code === 200 && resp.data > 0) {
            this.openMessageTips(
              {
                messageId: `ROCBRNOTIFY-${new Date().getTime()}`,
                content: `您当前有 ${resp.data} 条数据将超出处理时间，请尽快安排处理`
              }
            );
          }
        }
      );
    },
    /**
     * 打开一个新的通知
    */
    openMessageTips(message) {
      let _this = this;
      this.handleCloseBtnClick();

      // 组织通知数据
      let notify = this.$notify({
        position: 'bottom-right',
        showClose: false,
        dangerouslyUseHTMLString: true,
        customClass: 'rocbrnotify-dialog',
        message: this.$createElement(
          'div',
          {
            class: {
              'rocbrnotify-dialog-container': true
            }
          },
          [
            this.$createElement(
              'div',
              {
                class: {
                  'rocbrnotify-dialog-title': true
                }
              },
              '待处理通知'
            ),
            this.$createElement(
              'div',
              {
                class: {
                  'rocbrnotify-dialog-content': true
                }
              },
              [this.$createElement('span', null, message.content)]
            ),
            this.$createElement(
              'div',
              {
                class: {
                  'rocbrnotify-dialog-btngroup': true
                }
              },
              [
                this.$createElement(
                  'el-button',
                  {
                    attrs: {
                      type: 'rocpartyprimarybtn'
                    },
                    on: {
                      click: this.handleViewBtnClick
                    }
                  },
                  "查看"
                ),
                this.$createElement(
                  'el-button',
                  {
                    attrs: {
                      type: 'rocpartyprimaryplainbtn'
                    },
                    on: {
                      click: this.handleCloseBtnClick
                    }
                  },
                  "好的"
                )
              ]
            )
          ]
        ),
        duration: 20000
      });

      this.rocBrNotifyObj = notify;
    },
    /**
     * 右下角弹出的消息的查看事件
    */
    handleViewBtnClick() {
      this.handleCloseBtnClick();
      this.$router.replace({
        path: '/redirect/index'
      });
    },
    /**
     * 右下角弹出的消息的好的事件
    */
    handleCloseBtnClick() {
      this.rocBrNotifyObj && this.rocBrNotifyObj.close();
      this.rocBrNotifyObj = null;
    }
  }
}
</script>

<style lang="scss">
.rocbrnotify-dialog {
  &-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #333333;
  }

  &-content {
    margin-top: 20px;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    opacity: 0.8;
  }

  &-btngroup {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;

    &-viewbtn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 32px;
      background: rgba(255, 17, 17, 1);
      border: none;
      border-radius: 4px;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 22px;
      opacity: 0.9;
      cursor: pointer;

      &:hover {
        background: rgb(253, 96, 96);
      }
    }

    &-closebtn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 15px;
      width: 60px;
      height: 32px;
      background: #ffffff;
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(255, 17, 17, 1);
      border-radius: 4px;
      font-weight: 400;
      font-size: 14px;
      color: #ff1111;
      line-height: 22px;
      opacity: 0.8;
      cursor: pointer;

      &:hover {
        background: #f8f8f8;
      }
    }
  }
}
</style>