supply-front/src/layout/components/AppMain.vue

<template>
  <section class="app-main" :style="{ paddingTop: show ? '140px' : '80px' }">
    <div class="app-main-view">
      <transition name="fade-transform" mode="out-in">
        <keep-alive v-if="$route.name">
          <router-view :key="$route.name" />
        </keep-alive>
        <router-view v-else />
      </transition>
      <!-- 通知框 -->
      <notify-box :mes-type="mesType" @reset="handleReset" />
      <zj-watermark color="rgba(200,200,200,.3)" position="absolute" :str="str" z-index="99" />
    </div>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import { setModuleId } from '@/utils/request'
import { getListInvoiceOrder } from '@/api/dashboard'
import NotifyBox from '@/components/NotifyBox'
export default {
  name: 'AppMain',
  components: {
    NotifyBox
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      listTotal: 0,
      invoiceOrderList: [],
      timer: null,
      mesType: null
    }
  },
  computed: {
    ...mapGetters(['show']),
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    },
    str() {
      return this.$store.state?.user?.name
    }
  },
  watch: {
    $route() {
      setModuleId(this.$route.meta.moduleId)
    }
  },
  beforeCreate() {
    setModuleId(this.$route.meta.moduleId)
  },
  mounted() {
    this.handleInterVal()
  },
  methods: {
    handleInterVal() {
      this.handleClearInterVal()
      this.timer = setInterval(() => {
        this.getListInvoiceOrder()
      }, 20000)
    },
    handleClearInterVal() {
      clearInterval(this.timer)
      this.timer = null
    },
    open() {
      const That = this
      this.$notify({
        title: '通知',
        type: 'info',
        duration: 0,
        position: 'bottom-right',
        dangerouslyUseHTMLString: true,
        message: (
          <div>
            通知：您有一条新的物流通知发货单号${this.invoiceOrderList[0].id},
            <el-link type='primary' underline={false} onClick={() => That.handleJump()}>
              点击查看详情
            </el-link>
          </div>
        ),
        onClose() {
          That.handleInterVal()
        }
      })
    },
    // 获取物流列表
    async getListInvoiceOrder() {
      const data = {
        pageSize: this.pageSize,
        pageNum: this.currentPage
      }
      const res = await getListInvoiceOrder(data)
      this.invoiceOrderList = res.data.records
      this.listTotal = res.data.total
      if (res.data.records.length) {
        this.open()
        this.handleClearInterVal()
      } else {
        this.handleInterVal()
      }
    },
    handleJump() {
      this.mesType = 3
      this.$store.commit('user/showMessage', 'yes')
      this.$notify.closeAll()
    },
    handleReset() {
      this.mesType = null
    }
  }
}
</script>

<style scoped>
.app-main {
  /*50 = navbar  */
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.fixed-header + .app-main {
  /* padding-top: 50px; */
  /* padding-top: 80px; */
}
.app-main-view {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>