feat: 全局物流弹框

src/components/NotifyBox/index.vue

@@ -289,6 +289,7 @@ import { getArrivalNotice } from '@/api/stock'
 import { getListOrderTrack } from '@/api/supply/pickup'
 import { getFileUrl } from '@/api/common'
 export default {
+  props: ['mesType'],
   data() {
     return {
       imageURL: this.$imageUrl,
@@ -314,6 +315,15 @@ export default {
   computed: {
     ...mapGetters(['showMessages', 'isCustomer'])
   },
+  watch: {
+    mesType(newValue, oldValue) {
+      if (!oldValue) {
+        this.type = newValue
+        this[this.fnArr[newValue]]()
+      }
+      this.$emit('reset')
+    }
+  },
   created() {
     this[this.fnArr[this.type]]()
   },
@@ -406,6 +416,7 @@ export default {
         }
       })
       this.type = 0
+      this.$emit('reset')
       this.$store.commit('user/showMessage', 'no')
     },
     // 确认查收
@@ -451,6 +462,7 @@ export default {
     // 关闭
     closeFn() {
       this.type = 0
+      this.$emit('reset')
       this.$store.commit('user/showMessage', 'no')
     },
     handLogistics(row) {
@@ -468,6 +480,7 @@ export default {
     handleJump(id) {
       this.$router.push({ path: `/supply/pickup/sum_list?id=${id}` })
       this.type = 0
+      this.$emit('reset')
       this.$store.commit('user/showMessage', 'no')
     }
   }

src/layout/components/AppMain.vue

@@ -8,7 +8,7 @@
         <router-view v-else />
       </transition>
       <!-- 通知框 -->
-      <notify-box />
+      <notify-box :mes-type="mesType" @reset="handleReset" />
       <zj-watermark color="rgba(200,200,200,.3)" position="absolute" :str="str" z-index="99" />
     </div>
   </section>
@@ -17,12 +17,23 @@
 <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() {
@@ -42,6 +53,66 @@ export default {
   },
   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>