首先是後臺的介面，查詢未處理的訊息數量

因為是七張訊息表，資料我需要合在一起返回給前臺：

這裡使用UNION連線各個表

SELECT COUNT(*) AS `UNREAD_MSG`, 'CLEAN_MSG' AS `MSG_TYPE` FROM aisw_e_service_clean_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'DELIVERY_MSG' FROM aisw_e_service_delivery_msg WHERE
 
 MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'FAULT_MSG' FROM aisw_e_service_fault_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'INVOICE_MSG' FROM aisw_e_service_invoice_msg WHERE MERCHANT_ID =
 
 #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'ONE_CHECKOUT_MSG' FROM aisw_e_service_one_checkout_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'RENEWAL_MSG' FROM aisw_e_service_renewal_msg WHERE MERCHANT_ID =
 
 #{merchantId} AND `ACCEPT_STATUS` = 0
UNION ALL
SELECT COUNT(*) AS `UNREAD_MSG`, 'WAKE_MSG' FROM aisw_e_service_wake_msg WHERE MERCHANT_ID = #{merchantId} AND `ACCEPT_STATUS` = 0

結果集的樣子：

+------------+------------------+
| UNREAD_MSG | MSG_TYPE         |
+------------+------------------+
|          9 | CLEAN_MSG        |
|          4 | DELIVERY_MSG     |
|          2 | FAULT_MSG        |
|          7 | INVOICE_MSG      |
|          8 | ONE_CHECKOUT_MSG |
|          6 | RENEWAL_MSG      |
|          2 | WAKE_MSG         |
+------------+------------------+
7 rows in set (0.03 sec)

丟給前臺的JSON：

{
    "code": 200,
    "data": [
        {
            "UNREAD_MSG": 8,
            "MSG_TYPE": "CLEAN_MSG"
        },
        {
            "UNREAD_MSG": 5,
            "MSG_TYPE": "DELIVERY_MSG"
        },
        {
            "UNREAD_MSG": 1,
            "MSG_TYPE": "FAULT_MSG"
        },
        {
            "UNREAD_MSG": 1,
            "MSG_TYPE": "INVOICE_MSG"
        },
        {
            "UNREAD_MSG": 8,
            "MSG_TYPE": "ONE_CHECKOUT_MSG"
        },
        {
            "UNREAD_MSG": 11,
            "MSG_TYPE": "RENEWAL_MSG"
        },
        {
            "UNREAD_MSG": 2,
            "MSG_TYPE": "WAKE_MSG"
        }
    ],
    "message": "操作成功！",
    "status": "success"
}

前臺封裝的API介面：

/**
 * 獲取未受理的訊息數量
 */
export function getTagUnreads() {
  return requestDefault({
    url: '/sys/room/message/unreads',
    method: 'get',
  })
}

檔案位置：

E:\nsp.asw\code\ehotel-web\src\api\roomService\serviceMessage.js

元件引入介面物件：

import { getTagUnreads } from '../../api/roomService/serviceMessage.js'

封裝一個定時函式：

  methods: {
    freshData() {
      return setInterval(() => {
        getTagUnreads()
        .then(res => {
          if (res.code === 200 && res.status === 'success') {
            this.tags = res.data
          }
        })
      }, 1000 * 5)
    },
  }

data屬性儲存一個timer引用：

  data() {
    return {
      activeName: 'extension',
      tags: [],
      timer: null,
    }
  },

然後可以在Vue幾個生命週期函式中呼叫

- Beforecreate() 例項建立之前

- Created() 例項建立後

- Mounted() 資料掛載後

在例項被銷燬的時候，順帶把定時任務也釋放

執行的時候我發現頁面很慢加載出來，原因是因為定時設定了5秒後執行

我用了v-if動態渲染，如果初始資料沒有就不載入了。。。（這個原因找了半天）

所以在執行之前初始化的時候就呼叫一次介面拿資料過來

之後在設定延遲獲取

  created() {
    getTagUnreads()
    .then(res => {
      if (res.code === 200 && res.status === 'success') {
        this.tags = res.data
      }
    })

    if (this.timer) clearInterval(this.timer)
    else setTimeout(() => {this.timer = this.freshData()}, 3000)

  },
  destroyed() {
    clearInterval(this.timer)
  }

然後各個標籤獲取需要翻譯：

這裡封裝一個取資料的方法

    getCount(key) {
      return this.tags.find(x => x.MSG_TYPE === key)['UNREAD_MSG']
    }

渲染的時候判斷訊息數量是否大於0，等於0的情況就不要渲染訊息標記出來

      <el-tab-pane label="故障報修申請" name="fault">
        <span class="badge-container" slot="label">
          故障報修申請
          <span  v-if="getCount('FAULT_MSG') > 0" class="tag">
            {{getCount('FAULT_MSG')}}
          </span>
        </span>
        <fault-list ref="fault" />
      </el-tab-pane>