家里的样式

src/views/layout/components/Navbar.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-menu class="navbar" mode="horizontal" style="background: rgb(87,177,253)!important;">
+    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
+    <breadcrumb />
+    <el-dropdown class="avatar-container" trigger="click">
+      <div class="avatar-wrapper">
+        <img :src="require('@/assets/img/user.jpg')" class="user-avatar">
+        <i class="el-icon-caret-bottom"/>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <router-link class="inlineBlock" to="/">
+          <el-dropdown-item>
+            主页
+          </el-dropdown-item>
+        </router-link>
+        <el-dropdown-item divided @click.native="logout">
+          <span style="display:block;">退出</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-menu>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+import { searchTable1 } from '@/api/PurchasingCenter/PurchaseContractApproval'
+import { initApproval, initApprovalOffline } from '@/api/PurchasingCenter/FundApproval'
+import { searchTable1 as searchTableInvoice } from '@/api/PurchasingCenter/InvoiceSettlementApprove'
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  data() {
+    return {
+      timer: '',
+      noticeContract: null,
+      noticeFund: null,
+      noticeInvoice: null
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar',
+      'name',
+      'id',
+      'token'
+    ])
+  },
+  mounted() {
+    if (this.id.toString() === '3') {
+      this.checkApproval()
+      this.timer = setInterval(this.checkApproval, 1000 * 60 * 5)
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+  methods: {
+    checkApproval() {
+      searchTable1(1, 999, 0, null, null, 0, 0, 0, 0, 0, 0).then(res => {
+        if (res.data.total) {
+          this.noticeContract = null
+          this.noticeContract = this.$notify.info({
+            title: '提示',
+            message: '您有采购合同待审批，请及时处理，点击查看',
+            onClick: () => {
+              this.$router.push({ path: '/PurchasingCenter/PurchaseContractApproval' })
+              setTimeout(this.noticeContract.close(), 1000)
+            },
+            duration: 1000 * 60
+          })
+        }
+      })
+      const p1 = new Promise((resolve, reject) => {
+        initApproval(1, 999, 1).then(res => {
+          resolve(res)
+        })
+      })
+      const p2 = new Promise((resolve, reject) => {
+        initApprovalOffline(1, 999, 1).then(res => {
+          resolve(res)
+        })
+      })
+      Promise.race([p1, p2]).then(res => {
+        if (res.data.total) {
+          this.noticeFund = this.$notify.info({
+            title: '提示',
+            message: '您有合同请款申请待审批，请及时处理，点击查看',
+            onClick: () => {
+              this.$router.push({ path: '/PurchasingCenter/FundApproval2' })
+              setTimeout(this.noticeFund.close(), 1000)
+            },
+            duration: 1000 * 60 * 5
+          })
+        }
+      })
+      searchTableInvoice(0, null, null, 1, 999, this.token).then(res => {
+        if (res.data.total) {
+          this.noticeInvoice = null
+          this.noticeInvoice = this.$notify.info({
+            title: '提示',
+            message: '您有发票结算申请待审批，请及时处理，点击查看',
+            onClick: () => {
+              this.$router.push({ path: '/PurchasingCenter/InvoiceSettlementApprove' })
+              setTimeout(this.noticeInvoice.close(), 1000)
+            },
+            duration: 1000 * 60 * 5
+          })
+        }
+      })
+    },
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('FedLogOut').then(() => {
+        location.reload() // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  border-radius: 0px !important;
+  .hamburger-container {
+    line-height: 58px;
+    height: 50px;
+    float: left;
+    padding: 0 10px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 50px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>
+