element+vue的notify組件,同一個通知在全局多次出現問題

實現全局通知組件,多個標籤頁只出現一個通知組件的思路:1.localstorage中存貯一個變量,每次通知前去拿這個變量,和當前要實例化的通知的數據進行對比,如果id一致說明某一標籤頁中已經存在改通知,則不需要再次實例化通知組件,如果不存在,則實例化通知組件,這樣就保證了多個標籤頁中不存在相同的通知,每個通知都只通知一次。
相關代碼如下:


methods: {
showNotify(message) {
  if (message.duration !== 0 && !message.isSelfSend) {
    // 當前發送消息的用戶正在諮詢中,不再轉診中,則此消息只推送給健康管理師
    const messageSessionInd = _.findIndex(this.hmsAllSession, function(o) { return o.last_ask.family_member === message.mymessage.family_member; });
    if (messageSessionInd !== -1) {
      if ((!this.hmsAllSession[messageSessionInd].last_ask.has_transfer && this.bus_role === 'hm') ||
       (this.hmsAllSession[messageSessionInd].last_ask.has_transfer && this.bus_role === this.hmsAllSession[messageSessionInd].last_ask.transfer_role)) {
        this.$notify.info({
          title: '新消息提示',
          message: message.msgOptions.type === 'text' ? message.msgOptions.text : message.msgTextPrefix,
          duration: message.duration
        });
        this.msgAudio = new Audio();
        this.msgAudio.src = 'https://pic1.baobaohehu.com/static/mp-ask/new-msg.mp3';
        this.msgAudio.play();
        return
      }
    }
  }
  if (message.duration !== 0) {
    return
  }
  // 只有健康管理師角色才更新轉診按鈕的狀態,才拉取當前的currentSession && this.bus_role === 'hm'
  // console.log(this.$route.path)
  const routePath = this.$route.path
  if (routePath.indexOf('diagnose') !== -1) {
    if (this.currentSession && message.message_body.fd_session === this.currentSession.session_id) {
      this.$store.dispatch('chat/getCustomerTree', '', { root: true }) // 刷線當前列表的用戶狀態
    }
  }
  const h = this.$createElement;
  let tip = '您的轉診請求已經被' + message.message_body.user.name + '拒絕,如有必要,請與' + message.message_body.user.name + '溝通後再次發起轉診請求'
  if (message.message_body.event_type === 'transfer_apply') {
    tip = message.message_body.user.name + '發起轉診請求' + '請及時處理,5分鐘內未響應,系統將自動同意'
    const notifyApplyMsgId = window.localStorage.getItem('notifyApplyMsgId')
    if (!notifyApplyMsgId || notifyApplyMsgId !== message.message_body.message_id) {
      window.localStorage.setItem('notifyApplyMsgId', message.message_body.message_id)
      Notification({
        iconClass: 'el-icon-bell my-bell',
        title: '轉診申請',
        dangerouslyUseHTMLString: true,
        duration: 0,
        message: h('div', { class: 'clearfix' }, [
          h('p', {
            class: 'title'
          }, tip),
          h('button', {
            class: 'detail_btn',
            attrs: { fd_ask: message.message_body.fd_ask,
              message_id: message.message_body.message_id,
              fd_session: message.message_body.fd_session,
              family_member: message.message_body.family_member },
            on: {
              click: this.showMsg.bind(this)
            }
          }, '查看詳情')
        ]),
        onClose: function(val) {
          console.log('關閉notify的回調')
          console.log(val)
          console.log(val.id)
        }
      })
    }
  } else if (message.message_body.event_type === 'transfer_accept') {
    tip = '您的轉診請求已經被' + message.message_body.user.name + '同意,請與用戶確認後請單擊【發起轉診】按鈕'
    Notification.success({
      title: '轉診請求被同意',
      dangerouslyUseHTMLString: true,
      duration: 0,
      message: h('div', { class: 'clearfix' }, [
        h('p', {
          class: 'title'
        }, tip),
        h('button', {
          class: 'detail_btn',
          attrs: { fd_ask: message.message_body.fd_ask,
            message_id: message.message_body.message_id,
            fd_session: message.message_body.fd_session,
            family_member: message.message_body.family_member },
          on: {
            click: this.showMsg.bind(this)
          }
        }, '查看詳情')
      ]),
      onClose: function(val) {
        console.log('關閉notify的回調')
        console.log(val)
      }
    })
  } else if (message.message_body.event_type === 'transfer_reject') {
    Notification.error({
      title: '轉診請求被拒絕',
      dangerouslyUseHTMLString: true,
      duration: 0,
      message: h('div', { class: 'clearfix' }, [
        h('p', {
          class: 'title'
        }, tip),
        h('button', {
          class: 'detail_btn',
          attrs: { fd_ask: message.message_body.fd_ask,
            message_id: message.message_body.message_id,
            fd_session: message.message_body.fd_session,
            family_member: message.message_body.family_member },
          on: {
            click: this.showMsg.bind(this)
          }
        }, '查看詳情')
      ]),
      onClose: function(val) {
        console.log('關閉notify的回調')
        console.log(val)
      }
    })
  }
},
showMsg(fdaskid) {
  const routePath = this.$route.path
  if (routePath.indexOf('diagnose') === -1) {
    this.$router.push({
      path: '/medical-service/diagnose'
    })
  }
  const target = fdaskid.target
  const message_id = target.getAttribute('message_id')
  const fd_session = target.getAttribute('fd_session')
  const family_member = target.getAttribute('family_member')
  // 跳轉到當前消息的位置 message_id
  if (this.currentSession && this.currentSession.session_id && this.currentSession.session_id === fd_session && this.activedBaby && family_member === this.activedBaby._id) {
    this.goMessageDetail(message_id)
  } else {
    // 當前對話用戶不是系統通知的用戶-寶寶的對話
    setTimeout(res => {
      let currentSessionObj = ''
      if (fd_session) {
        currentSessionObj = _.find(this.hmsAllSession, function(o) {
          return o.session_id === fd_session
        })
      }
      if (currentSessionObj) {
        this.$store.dispatch('chat/setCurrentSession', currentSessionObj, { root: true })
      }
      // 當前顯示寶寶的規則爲:系統通知對話的寶寶、諮詢中的寶寶、第一個寶寶
      const baby = _.find(this.currentBabyList, function(o) {
        return o._id === family_member
      })
      if (baby) {
        this.$store.dispatch('chat/setActivedBaby', baby, { root: true })
      }
      this.goMessageDetail(message_id)
    }, 300)
  }
},
goMessageDetail(message_id) {
  let existMesssage = {}
  // eslint-disable-next-line no-unused-vars
  const currentMegList = this.getCurrentIMInfoMessages
  if (currentMegList) {
    existMesssage = _.find(currentMegList, function(o) {
      return o._id === message_id
    })
  }
  if (existMesssage) {
    // 定位到當前錨點消息
    this.goAnchor(message_id)
  } else {
    this.$store.dispatch('chat/messageLocation', message_id, { root: true })
    setTimeout(() => {
      this.goAnchor(message_id)
    }, 700)
  }
},
goAnchor(selector) {
  var parentbox = document.getElementById('chatBox')
  var anchor = document.getElementById(selector) // 參數爲要跳轉到的元素id
  if (anchor && anchor.offsetTop) {
    parentbox.scrollTop = anchor.offsetTop - 150 // chrome
  }
}

}`

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章